-
+
{children}
- {getModal(classes, open, handleClose, uri)}
+ {renderModal(classes, open, handleClose, uri)}
);
}
diff --git a/projects/mercury/src/metadata/common/LinkedDataLink.styles.js b/projects/mercury/src/metadata/common/LinkedDataLink.styles.js
index 9dcdafdc2f..e044c26eeb 100644
--- a/projects/mercury/src/metadata/common/LinkedDataLink.styles.js
+++ b/projects/mercury/src/metadata/common/LinkedDataLink.styles.js
@@ -1,5 +1,5 @@
const styles = (theme) => ({
- styleModalDialog: {
+ modalDialog: {
background: theme.palette.grey['200'],
position: 'absolute',
top: '50%',
@@ -9,13 +9,20 @@ const styles = (theme) => ({
bgcolor: 'background.paper',
border: '0px solid #000',
boxShadow: 0,
+ outline: "none",
p: 4,
},
- styleCloseButton: {
+ closeButton: {
float: 'right',
marginTop: 8,
marginRight: 8
+ },
+ clickableDiv: {
+ 'cursor': 'pointer',
+ '&:hover': {
+ textDecoration: 'underline'
+ }
}
});
diff --git a/projects/mercury/src/metadata/common/__tests__/LinkedDataLink.js b/projects/mercury/src/metadata/common/__tests__/LinkedDataLink.js
index 758cd7a740..e0675a18d6 100644
--- a/projects/mercury/src/metadata/common/__tests__/LinkedDataLink.js
+++ b/projects/mercury/src/metadata/common/__tests__/LinkedDataLink.js
@@ -1,88 +1,59 @@
/* eslint-disable jsx-a11y/anchor-has-content */
import React from 'react';
-import {configure, mount} from "enzyme";
+import {configure} from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-
-import {Router} from 'react-router-dom';
// eslint-disable-next-line import/no-extraneous-dependencies
-import {createMemoryHistory} from 'history';
import LinkedDataLink from "../LinkedDataLink";
-import {METADATA_PATH} from "../../../constants";
+import {fireEvent, render} from "@testing-library/react";
+import theme from "../../../App.theme";
+import {ThemeProvider} from "@mui/material/styles";
import UserContext from '../../../users/UserContext';
// Enzyme is obsolete, the Adapter allows running our old tests.
// For new tests use React Testing Library. Consider migrating enzyme tests when refactoring.
configure({adapter: new Adapter()});
+jest.mock('../LinkedDataEntityPage', () => () =>
Mocked Metadata Page
);
describe('LinkedDataLink', () => {
- it('should render internal link for any uri', () => {
- const history: History = createMemoryHistory();
- history.push = jest.fn();
-
- const wrapper = mount(
+ it('renders LinkedDataLink without crashing', () => {
+ const { getByText } = render(
-
- Go
-
+
+ Test Content
+
);
-
- expect(wrapper.find('a').isEmpty()).toBeFalsy();
- const anchor = wrapper.find('a').first();
- const expectedLocation = `${METADATA_PATH}?iri=${encodeURIComponent("http://google.nl/some-path?search#hash")}`;
- expect(anchor.prop('href')).toEqual(expectedLocation);
- expect(anchor.text()).toEqual('Go');
- expect(anchor.prop('onClick')).toBeTruthy();
-
- anchor.prop('onClick')(new MouseEvent('click'));
- expect(history.push).toBeCalledTimes(1);
- expect(history.push).toBeCalledWith({
- pathname: METADATA_PATH,
- search: `?iri=${encodeURIComponent("http://google.nl/some-path?search#hash")}`
- });
+ expect(getByText('Test Content')).toBeInTheDocument();
});
- it('should display child elements for users without access to public metadata', () => {
- const history: History = createMemoryHistory();
- history.push = jest.fn();
-
- const wrapper = mount(
-
-
- Go
-
+ it('shows the modal when clicked', () => {
+ const { getByText, queryByText } = render(
+
+
+ Test Content
+
);
+ expect(queryByText('Mocked Metadata Page')).not.toBeInTheDocument();
- expect(wrapper.find('a').isEmpty()).toBeTruthy();
- expect(wrapper.text()).toEqual('Go');
+ fireEvent.click(getByText('Test Content'));
+ expect(getByText('Mocked Metadata Page')).toBeInTheDocument();
});
- it('should not break on an invalid url (return children only)', () => {
- const uri = `some-invalid-url`;
- const history: History = createMemoryHistory();
- history.push = jest.fn();
-
- const wrapper = mount(
+ it('closes the modal when close icon is clicked', () => {
+ const { getByText, getByTestId, queryByText } = render(
-
- something
-
+
+ Test Content
+
);
- expect(wrapper.find('a').isEmpty()).toBeFalsy();
- const anchor = wrapper.find('a').first();
- const expectedLocation = `${METADATA_PATH}?iri=${encodeURIComponent(uri)}`;
- expect(anchor.prop('href')).toEqual(expectedLocation);
- expect(anchor.text()).toEqual('something');
- expect(anchor.prop('onClick')).toBeTruthy();
+ fireEvent.click(getByText('Test Content'));
+ expect(getByText('Mocked Metadata Page')).toBeInTheDocument();
- anchor.prop('onClick')(new MouseEvent('click'));
- expect(history.push).toBeCalledTimes(1);
- expect(history.push).toBeCalledWith({
- pathname: METADATA_PATH,
- search: `?iri=${encodeURIComponent(uri)}`
- });
+ const close = getByTestId('CloseIcon');
+ fireEvent.click(close);
+ expect(queryByText('Mocked Metadata Page')).not.toBeInTheDocument();
});
});