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

package/src/ui/Form/Button/Button.stories.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Text,
+  Labeled,
+  Inverted,
+  Secondary,
+  Primary,
+  Default,
+} from './Button.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Text component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Text {...Text.args} />);
+    expect(getByText(Text.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Labeled component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Labeled {...Labeled.args} />);
+    expect(getByText(Labeled.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Inverted component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Inverted {...Inverted.args} />);
+    expect(getByText(Inverted.args.button1)).toBeInTheDocument();
+    expect(getByText(Inverted.args.button2)).toBeInTheDocument();
+    expect(getByText(Inverted.args.button3)).toBeInTheDocument();
+  });
+});
+
+describe('Secondary component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Secondary {...Secondary.args} />);
+    expect(getByText(Secondary.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Primary component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Primary {...Primary.args} />);
+    expect(getByText(Primary.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText(Default.args.label)).toBeInTheDocument();
+  });
+});

package/src/ui/Form/Checkbox.stories.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import {
+  single as Single,
+  optional as Optional,
+  invalid as Invalid,
+} from './Checkbox.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Single', () => {
+  it('renders correctly', () => {
+    const { container, getByText, queryByText } = render(
+      <Single {...Single.args} />,
+    );
+    expect(getByText(Single.args.label)).toBeInTheDocument();
+    expect(queryByText(Single.args.requiredText)).toEqual(null);
+
+    fireEvent.click(container.querySelector('#field4'));
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Single {...Single.args} required={true} invalid={true} />,
+    );
+    expect(getByText(Single.args.label)).toBeInTheDocument();
+    expect(getByText(Single.args.requiredText)).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('#field4'));
+  });
+});
+
+describe('Optional', () => {
+  it('renders correctly', () => {
+    const { container, getByText, queryByText } = render(
+      <Optional {...Optional.args} />,
+    );
+    expect(getByText(Optional.args.label)).toBeInTheDocument();
+    expect(queryByText(Optional.args.requiredText)).toEqual(null);
+
+    fireEvent.click(container.querySelector('#field1'));
+    fireEvent.click(container.querySelector('#field2'));
+    fireEvent.click(container.querySelector('#field3'));
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Optional {...Optional.args} required={true} />,
+    );
+    expect(getByText(Optional.args.label)).toBeInTheDocument();
+    expect(getByText(Optional.args.requiredText)).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('#field1'));
+    fireEvent.click(container.querySelector('#field2'));
+    fireEvent.click(container.querySelector('#field3'));
+  });
+});
+
+describe('Invalid', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Invalid {...Invalid.args} />);
+    expect(getByText(Invalid.args.label)).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('#field1'));
+    fireEvent.click(container.querySelector('#field2'));
+    fireEvent.click(container.querySelector('#field3'));
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Invalid {...Invalid.args} required={true} />,
+    );
+    expect(getByText(Invalid.args.label)).toBeInTheDocument();
+    expect(getByText(Invalid.args.requiredText)).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('#field1'));
+    fireEvent.click(container.querySelector('#field2'));
+    fireEvent.click(container.querySelector('#field3'));
+  });
+});

package/src/ui/Form/Dropdown.stories.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ErrorDropdown, Default } from './Dropdown.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('ErrorDropdown component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<ErrorDropdown {...ErrorDropdown.args} />);
+    ErrorDropdown.args.options.forEach((item) => {
+      expect(getByText(item.value)).toBeInTheDocument();
+    });
+    expect(getByText(ErrorDropdown.args.placeholder)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    Default.args.options.forEach((item) => {
+      expect(getByText(item.value)).toBeInTheDocument();
+    });
+    expect(getByText(Default.args.placeholder)).toBeInTheDocument();
+  });
+});

package/src/ui/Form/Radio.stories.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default, invalid as Invalid, BinaryRadio } from './Radio.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('BinaryRadio component', () => {
+  it('renders corectly', () => {
+    const { container, getByText, queryByText } = render(
+      <BinaryRadio {...BinaryRadio.args} />,
+    );
+
+    expect(getByText(BinaryRadio.args.label)).toBeInTheDocument();
+    expect(queryByText(BinaryRadio.args.requiredText)).toEqual(null);
+
+    fireEvent.click(container.querySelector('#radio-yes'));
+  });
+
+  it('renders corectly', () => {
+    const { getByText } = render(
+      <BinaryRadio {...BinaryRadio.args} required={true} invalid={true} />,
+    );
+
+    expect(getByText(BinaryRadio.args.label)).toBeInTheDocument();
+    expect(getByText(BinaryRadio.args.requiredText)).toBeInTheDocument();
+  });
+});
+
+describe('Invalid component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Invalid {...Invalid.args} />);
+
+    expect(getByText(Invalid.args.label)).toBeInTheDocument();
+    expect(getByText(Invalid.args.requiredText)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.label)).toBeInTheDocument();
+    expect(getByText(Default.args.requiredText)).toBeInTheDocument();
+  });
+
+  it('renders corectly', () => {
+    const { container, getByText, queryByText } = render(
+      <Default {...Default.args} required={false} />,
+    );
+
+    expect(getByText(Default.args.label)).toBeInTheDocument();
+    expect(queryByText(Default.args.requiredText)).toEqual(null);
+
+    fireEvent.click(container.querySelector('#field1'));
+  });
+});

package/src/ui/Form/Textarea.stories.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ErrorTextArea, LabeledTextArea, Default } from './Textarea.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('ErrorTextArea component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <ErrorTextArea {...ErrorTextArea.args} />,
+    );
+
+    expect(getByText(ErrorTextArea.args.label)).toBeInTheDocument();
+    expect(getByText('This is a mandatory field')).toBeInTheDocument();
+    expect(
+      container.querySelector('textarea[placeholder="Type here..."]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('LabeledTextArea component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <LabeledTextArea {...LabeledTextArea.args} />,
+    );
+
+    expect(getByText(LabeledTextArea.args.label)).toBeInTheDocument();
+    expect(
+      container.querySelector('textarea[placeholder="Type here..."]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} fluid={true} />);
+
+    expect(
+      container.querySelector('textarea[placeholder="Type here..."]'),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Form/input.stories.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Default,
+  StandardInput,
+  DisabledInput,
+  LoadingInput,
+  ErrorInput,
+} from './Input.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('ErrorInput component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<ErrorInput {...ErrorInput.args} />);
+
+    expect(getByText(ErrorInput.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('LoadingInput component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<LoadingInput {...LoadingInput.args} />);
+
+    expect(getByText(LoadingInput.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('DisabledInput component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<DisabledInput {...DisabledInput.args} />);
+
+    expect(getByText(DisabledInput.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('StandardInput component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<StandardInput {...StandardInput.args} />);
+
+    expect(getByText(StandardInput.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(
+      container.querySelector('input#temp-id[placeholder="Placeholder"]'),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Grid/ComponentGrid.stories.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { GridExamples, Basic12 } from './ComponentGrid.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('GridExamples component', () => {
+  it('renders corectly', () => {
+    const { getAllByText } = render(<GridExamples />);
+
+    expect(getAllByText('12/2')).toHaveLength(3);
+    expect(getAllByText('12/3')).toHaveLength(3);
+    expect(getAllByText('12/4')).toHaveLength(6);
+    expect(getAllByText('12/5')).toHaveLength(5);
+  });
+});
+
+describe('Basic12 component', () => {
+  it('renders corectly', () => {
+    render(<Basic12 />);
+  });
+});

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { render, fireEvent, act } from '@testing-library/react';
+import { Default } from './Header.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+global.ResizeObserver = require('resize-observer-polyfill');
+
+const history = createMemoryHistory();
+
+const links = [
+  { title: 'EEA Main Portal', href: '/#portal' },
+  { title: 'Biodiversity Information System for Europe', href: '/#bise' },
+  { title: 'Forest Information System for Europe', href: '/#Fise' },
+  { title: 'Marine Water Information System for Europe', href: '/#marine' },
+  { title: 'Fresh Water Information System for Europe', href: '/#freshwater' },
+];
+
+const languages = [
+  { name: 'Български', code: 'bg' },
+  { name: 'čeština', code: 'cs' },
+  { name: 'Hrvatski', code: 'hr' },
+  { name: 'dansk', code: 'da' },
+  { name: 'Nederlands', code: 'nl' },
+  { name: 'ελληνικά', code: 'el' },
+  { name: 'English', code: 'en' },
+  { name: 'eesti', code: 'et' },
+  { name: 'Suomi', code: 'fi' },
+  { name: 'Français', code: 'fr' },
+  { name: 'Deutsch', code: 'de' },
+  { name: 'magyar', code: 'hu' },
+  { name: 'Íslenska', code: 'is' },
+  { name: 'italiano', code: 'it' },
+  { name: 'Latviešu', code: 'lv' },
+  { name: 'lietuvių', code: 'lt' },
+  { name: 'Malti', code: 'mt' },
+  { name: 'Norsk', code: 'no' },
+  { name: 'polski', code: 'pl' },
+  { name: 'Português', code: 'pt' },
+  { name: 'Română', code: 'ro' },
+  { name: 'slovenčina', code: 'sk' },
+  { name: 'Slovenščina', code: 'sl' },
+  { name: 'Español', code: 'es' },
+  { name: 'Svenska', code: 'sv' },
+  { name: 'Türkçe', code: 'tr' },
+];
+
+const menuItems = [
+  {
+    '@id': 'Topics',
+    items: [
+      {
+        '@id': 'At-a-glance',
+        description: '',
+        items: [
+          {
+            '@id': 'State-of-Europe’s-environment',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'State of Europe’s environment',
+            url: '/#',
+          },
+          {
+            '@id': 'Climate',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Climate',
+            url: '/#',
+          },
+          {
+            '@id': 'Economy-and-resources',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Economy and resources',
+            url: '/#',
+          },
+          {
+            '@id': 'Health',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Health',
+            url: '/#',
+          },
+          {
+            '@id': 'Nature',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Nature',
+            url: '/#',
+          },
+          {
+            '@id': 'Sustainability',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Sustainability',
+            url: '/#',
+          },
+        ],
+        review_state: null,
+        title: 'At a glance',
+        url: '/#',
+      },
+    ],
+    review_state: null,
+    title: 'Topics',
+    url: '/#',
+  },
+];
+
+describe('Default component', () => {
+  const args = {
+    linksMenuTitle: 'Environmental information systems',
+    tabletLinksMenuTitle: 'EEA information systems',
+    mobileLinksMenuTitle: 'EEA information systems',
+    hasLanguageDropdown: true,
+    links,
+    languages,
+    menuItems,
+    transparency: false,
+    inverted: false,
+  };
+
+  it('renders the default with correct number of cards', () => {
+    const { container, getByText } = render(
+      <Router history={history}>
+        <Default {...args} />
+      </Router>,
+    );
+    const dropdown = container.querySelector('.official-union .content');
+    fireEvent.click(dropdown);
+    act(() => {
+      fireEvent(window, new Event('resize'));
+    });
+    expect(getByText('EEA Main Portal')).toBeInTheDocument();
+    expect(
+      getByText('Biodiversity Information System for Europe'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('Forest Information System for Europe'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('Marine Water Information System for Europe'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('Fresh Water Information System for Europe'),
+    ).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('a[href="/#bise"]'));
+    fireEvent.click(container.querySelector('.language-link'));
+  });
+});