@eeacms/volto-eea-design-system 1.16.0 → 1.17.0

package/src/ui/Item/ItemGroupWithIcons.stories.test.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  FlexGroup,
+  DefaultGroup,
+  DefaultItem,
+} from './ItemGroupWithIcons.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('FlexGroup component', () => {
+  it('renders correctly', () => {
+    const { container, queryAllByText } = render(
+      <FlexGroup {...FlexGroup.args} />,
+    );
+
+    expect(
+      container.querySelector('.ui.unstackable.items.row.flex-items-wrapper'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="globe-eco.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="sustainable.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="data-analytics.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="network.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="globe-eco.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="knowledge.svg"]'),
+    ).toBeInTheDocument();
+
+    FlexGroup.args.Items.forEach((item) => {
+      expect(queryAllByText(item.description)).not.toBeNull();
+    });
+  });
+});
+
+describe('DefaultGroup component', () => {
+  it('renders correctly', () => {
+    const { container, queryAllByText } = render(
+      <DefaultGroup {...DefaultGroup.args} stackable={true} />,
+    );
+
+    expect(
+      container.querySelector('.ui.unstackable.items.row'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="globe-eco.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="sustainable.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="data-analytics.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="network.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="globe-eco.svg"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[src="knowledge.svg"]'),
+    ).toBeInTheDocument();
+
+    DefaultGroup.args.ColumnLeft.forEach((item) => {
+      expect(queryAllByText(item.description)).not.toBeNull();
+    });
+    DefaultGroup.args.ColumnRight.forEach((item) => {
+      expect(queryAllByText(item.description)).not.toBeNull();
+    });
+  });
+});
+
+describe('DefaultGroup component', () => {
+  it('renders correctly', () => {
+    const { container, queryAllByText } = render(
+      <DefaultGroup {...DefaultGroup.args} mediaType={'icon'} />,
+    );
+
+    expect(
+      container.querySelector('.icon.medium.ri-earth-line.secondary'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.icon.medium.ri-leaf-line.secondary'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.icon.medium.ri-pie-chart-line.secondary'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.icon.medium.ri-pin-distance-line.secondary'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.icon.medium.ri-line-chart-line.secondary'),
+    ).toBeInTheDocument();
+
+    DefaultGroup.args.ColumnLeft.forEach((item) => {
+      expect(queryAllByText(item.description)).not.toBeNull();
+    });
+    DefaultGroup.args.ColumnRight.forEach((item) => {
+      expect(queryAllByText(item.description)).not.toBeNull();
+    });
+  });
+});
+
+describe('DefaultItem component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<DefaultItem {...DefaultItem.args} />);
+    expect(
+      container.querySelector('.ui.unstackable.items.row'),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Label/Label.stories.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default, Basic, Corner, Ribbon } from './Label.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Basic component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Basic {...Basic.args} />);
+    expect(getByText(Basic.args.content)).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { getByText } = render(<Basic {...Basic.args} importance={true} />);
+    expect(getByText(Basic.args.content)).toBeInTheDocument();
+  });
+});
+
+describe('Corner component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Corner {...Corner.args} />);
+    expect(
+      container.querySelector(
+        'img[src="https://react.semantic-ui.com/images/wireframe/image.png"]',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(<Corner importance={true} />);
+    expect(
+      container.querySelector(
+        'img[src="https://react.semantic-ui.com/images/wireframe/image.png"]',
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Ribbon component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Ribbon {...Ribbon.args} />);
+    expect(getByText('Ribbon Label')).toBeInTheDocument();
+    expect(container.querySelector('.ribbon.label')).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        'img[src="https://react.semantic-ui.com/images/wireframe/paragraph.png"]',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Ribbon {...Ribbon.args} importance={true} />,
+    );
+    expect(getByText('Ribbon Label')).toBeInTheDocument();
+    expect(container.querySelector('.ribbon.label')).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        'img[src="https://react.semantic-ui.com/images/wireframe/paragraph.png"]',
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText(Default.args.content)).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <Default {...Default.args} importance={true} />,
+    );
+    expect(getByText(Default.args.content)).toBeInTheDocument();
+  });
+});

package/src/ui/LabeledIconGroup/LabeledIconGroup.stories.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default } from './LabeledIconGroup.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { container, getByText } = render(<Default {...Default.args} />);
+
+    expect(container.querySelector('.ri-share-box-fill')).toBeInTheDocument();
+    expect(getByText('Open in new Tab')).toBeInTheDocument();
+
+    expect(container.querySelector('.ri-download-2-fill')).toBeInTheDocument();
+    expect(getByText('Download')).toBeInTheDocument();
+
+    expect(container.querySelector('.ri-global-line')).toBeInTheDocument();
+    expect(getByText('Language')).toBeInTheDocument();
+  });
+});

package/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext, createContext } from 'react';
 import { Popup } from 'semantic-ui-react';
+import noop from 'lodash/noop';
 
 const LanguageContext = createContext();
 
@@ -59,7 +60,7 @@ const Dropdown = ({ children, ...rest }) => {
             <li key={index}>
               <div
                 onClick={() => context.setLanguage(item.code.toUpperCase())}
-                onKeyDown={() => context.setHidden(!context.hidden)}
+                onKeyDown={noop}
                 role="button"
                 tabIndex={0}
               >
@@ -73,7 +74,7 @@ const Dropdown = ({ children, ...rest }) => {
             <li key={index}>
               <div
                 onClick={() => context.setLanguage(item.code.toUpperCase())}
-                onKeyDown={() => context.setHidden(!context.hidden)}
+                onKeyDown={noop}
                 role="button"
                 tabIndex={0}
               >

package/src/ui/LanguageLabeledIcon/LanguangeLabeledIcon.test.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import LanguageLabeledIcon from './LanguageLabeledIcon';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('semantic-ui-react', () => {
+  return {
+    Popup: ({ trigger, content }) => <div>{content}</div>,
+  };
+});
+
+const items = [
+  {
+    code: 'en',
+    name: 'English',
+  },
+  {
+    code: 'ro',
+    name: 'Romania',
+  },
+];
+
+describe('LanguageLabeledIcon component', () => {
+  it('renders corectly', () => {
+    render(<LanguageLabeledIcon />);
+  });
+
+  it('renders languages dropdown', () => {
+    const { getByText } = render(
+      <>
+        <LanguageLabeledIcon>
+          <LanguageLabeledIcon.Dropdown items={items} />
+          <LanguageLabeledIcon.Label>
+            <p>Test</p>
+          </LanguageLabeledIcon.Label>
+        </LanguageLabeledIcon>
+      </>,
+    );
+
+    expect(getByText('English')).toBeInTheDocument();
+    expect(getByText('Romania')).toBeInTheDocument();
+    expect(getByText('Test')).toBeInTheDocument();
+
+    fireEvent.click(getByText('EN'));
+    fireEvent.click(getByText('RO'));
+  });
+
+  it('renders languages dropdown', () => {
+    const { getByText } = render(
+      <>
+        <LanguageLabeledIcon>
+          <LanguageLabeledIcon.Icon icon={'testIcon'} />
+        </LanguageLabeledIcon>
+      </>,
+    );
+
+    expect(getByText('EN')).toBeInTheDocument();
+    expect(getByText('testIcon')).toBeInTheDocument();
+  });
+});

package/src/ui/Loader/Loader.stories.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FullPageLoader, Default } from './Loader.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('FullPageLoader component', () => {
+  it('renders corectly', () => {
+    const { container, getByText } = render(
+      <FullPageLoader {...FullPageLoader.args} />,
+    );
+
+    expect(container.querySelector('.dimmer .loader')).toBeInTheDocument();
+    expect(getByText(FullPageLoader.args.content)).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        'img[src="https://react.semantic-ui.com/images/wireframe/short-paragraph.png"]',
+      ),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(
+      container.querySelector(`.${Default.args.size}.active`),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Logo/Logo.stories.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Logo } from './Logo.stories';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('FluidGrid component', () => {
+  let history;
+  beforeEach(() => {
+    history = createMemoryHistory();
+  });
+  it('renders the correct logo', () => {
+    const { container } = render(
+      <Router history={history}>
+        <Logo {...Logo.args} />
+      </Router>,
+    );
+
+    expect(
+      container.querySelector(`a[href="/${Logo.args.url}"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct logo', () => {
+    const { container } = render(
+      <Router history={history}>
+        <Logo
+          {...Logo.args}
+          site={'Biodiversity Information System for Europe'}
+        />
+      </Router>,
+    );
+
+    expect(
+      container.querySelector(`a[href="/https://biodiversity.europa.eu/"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct logo', () => {
+    const { container } = render(
+      <Router history={history}>
+        <Logo
+          {...Logo.args}
+          site={'Marine Water Information System for Europe'}
+        />
+      </Router>,
+    );
+
+    expect(
+      container.querySelector(`a[href="/https://water.europa.eu/marine"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct logo', () => {
+    const { container } = render(
+      <Router history={history}>
+        <Logo {...Logo.args} site={'Forest Information System for Europe'} />
+      </Router>,
+    );
+
+    expect(
+      container.querySelector(`a[href="/https://forest.eea.europa.eu/"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the correct logo', () => {
+    const { container } = render(
+      <Router history={history}>
+        <Logo
+          {...Logo.args}
+          site={'Fresh Water Information System for Europe'}
+        />
+      </Router>,
+    );
+
+    expect(
+      container.querySelector(`a[href="/https://water.europa.eu/freshwater"]`),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Media/Image.stories.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Playground, Link, Default } from './Image.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Playground component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Playground {...Playground.args} />);
+
+    expect(
+      container.querySelector('img[alt="playground image"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Link component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Link {...Link.args} />);
+
+    expect(
+      container.querySelector(`a[href="${Link.args.href}"]`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('img[alt="link image"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(container.querySelector('img[alt="image"]')).toBeInTheDocument();
+  });
+});

package/src/ui/Message/Message.stories.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Info, Error, Warning, Success, Default } from './Message.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Info component', () => {
+  it('renders a Message component', () => {
+    const { getByText } = render(<Info {...Info.args} />);
+    expect(getByText(Info.args.header)).toBeInTheDocument();
+    expect(getByText(Info.args.content)).toBeInTheDocument();
+  });
+});
+
+describe('Error component', () => {
+  it('renders a Message component', () => {
+    const { getByText } = render(<Error {...Error.args} />);
+    expect(getByText(Error.args.header)).toBeInTheDocument();
+    expect(getByText(Error.args.content)).toBeInTheDocument();
+  });
+});
+
+describe('Warning component', () => {
+  it('renders a Message component', () => {
+    const { getByText } = render(<Warning {...Warning.args} />);
+    expect(getByText(Warning.args.header)).toBeInTheDocument();
+    expect(getByText(Warning.args.content)).toBeInTheDocument();
+  });
+});
+
+describe('Success component', () => {
+  it('renders a Message component', () => {
+    const { getByText } = render(<Success {...Success.args} />);
+    expect(getByText(Success.args.header)).toBeInTheDocument();
+    expect(getByText(Success.args.content)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders a Message component', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText(Default.args.header)).toBeInTheDocument();
+    expect(getByText(Default.args.content)).toBeInTheDocument();
+  });
+});

package/src/ui/Modal/Modal.stories.test.js

@@ -0,0 +1,45 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Default } from './Modal.stories';
+import { Button } from 'semantic-ui-react';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText('Show Modal')).toBeInTheDocument();
+    fireEvent.click(getByText('Show Modal'));
+    expect(getByText('Modal Content')).toBeInTheDocument();
+    expect(getByText('No')).toBeInTheDocument();
+    expect(getByText('Yes')).toBeInTheDocument();
+
+    fireEvent.click(getByText('No'));
+    fireEvent.click(getByText('Show Modal'));
+    // fireEvent.click(
+    //   container.querySelector('button[title="Close modal dialog"]'),
+    // );
+  });
+
+  it('renders corectly', () => {
+    const { getByText } = render(
+      <Default
+        header={'Modal Header'}
+        content={'Modal Content'}
+        size={'mini'}
+        trigger={<Button primary>Show Modal</Button>}
+      />,
+    );
+
+    expect(getByText('Show Modal')).toBeInTheDocument();
+    fireEvent.click(getByText('Show Modal'));
+    expect(getByText('Modal Content')).toBeInTheDocument();
+    expect(getByText('No')).toBeInTheDocument();
+    expect(getByText('Yes')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Yes'));
+    fireEvent.click(getByText('Show Modal'));
+    // fireEvent.click(
+    //   container.querySelector('button[title="Close modal dialog"]'),
+    // );
+  });
+});

package/src/ui/Popup/Popup.jsx

@@ -18,7 +18,6 @@ function Popup(props) {
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-
   const options = {
     placement: positionsMapping[props.position] || 'bottom-end',
     strategy: props.positionFixed || 'absolute',
@@ -33,12 +32,19 @@ function Popup(props) {
     ],
   };
 
-  const { styles, attributes } = usePopper(
+  const { styles, attributes, update } = usePopper(
     triggerRef.current,
     popupRef.current,
     options,
   );
 
+  useEffect(() => {
+    const updatePlacement = async () => {
+      if (typeof update === 'function') await update();
+    };
+    updatePlacement();
+  }, [isOpen, update]);
+
   const handleClickOutside = (event) => {
     if (
       popupRef.current &&
@@ -72,7 +78,6 @@ function Popup(props) {
   const { trigger, className, size, position, basic, content, on } = props;
 
   const onEvent = 'on' + on.charAt(0).toUpperCase() + on.slice(1);
-
   return (
     <React.Fragment>
       {trigger && (
@@ -90,20 +95,22 @@ function Popup(props) {
         {...attributes.popper}
       >
         {isOpen && <EventStack name="keydown" on={closeOnEscape} />}
-        <React.Fragment>
-          <div
-            className={cx(
-              'ui popup transition',
-              className,
-              size,
-              position,
-              basic ? 'basic' : '',
-              isOpen ? 'visible' : '',
-            )}
-          >
-            {content}
-          </div>
-        </React.Fragment>
+        {isOpen && (
+          <React.Fragment>
+            <div
+              className={cx(
+                'ui popup transition',
+                className,
+                size,
+                position,
+                basic ? 'basic' : '',
+                'visible',
+              )}
+            >
+              {content}
+            </div>
+          </React.Fragment>
+        )}
       </div>
     </React.Fragment>
   );

package/src/ui/Popup/Popup.test.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Popup from './Popup';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('@popperjs/core', () => {
+  const originalModule = jest.requireActual('@popperjs/core');
+
+  return {
+    ...originalModule,
+    createPopper: jest.fn(() => ({
+      forceUpdate: jest.fn(),
+      destroy: jest.fn(),
+    })),
+  };
+});
+
+describe('Popup', () => {
+  const MockTrigger = ({ onClick }) => (
+    <button onClick={onClick}>Trigger</button>
+  );
+
+  it('should render the popup trigger', () => {
+    const { getByText } = render(
+      <Popup trigger={<MockTrigger />} content="Popup content" />,
+    );
+    expect(getByText('Trigger')).toBeInTheDocument();
+  });
+
+  it('should render the popup trigger', () => {
+    const { getByText } = render(
+      <Popup
+        position={'other'}
+        basic={true}
+        trigger={<MockTrigger />}
+        content="Popup content"
+      />,
+    );
+    expect(getByText('Trigger')).toBeInTheDocument();
+  });
+
+  it('should open and close the popup when the trigger is clicked', () => {
+    const { getByText } = render(
+      <Popup trigger={<MockTrigger />} content="Popup content" />,
+    );
+    fireEvent.click(getByText('Trigger'));
+    expect(getByText('Popup content')).toBeVisible();
+  });
+
+  it('should close the popup when the Escape key is pressed', () => {
+    const { getByText } = render(
+      <Popup trigger={<MockTrigger />} content="Popup content" />,
+    );
+    fireEvent.click(getByText('Trigger'));
+    expect(getByText('Popup content')).toBeVisible();
+
+    fireEvent.keyDown(document.body, { key: 'Enter' });
+    fireEvent.keyDown(document.body, { key: 'Escape' });
+  });
+});