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

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import {
+  TeaserCardGrid,
+  CarouselCards,
+  FluidGrid,
+  CardGrid,
+  Default,
+} from './Card.stories';
+
+describe('TeaserCardGrid component', () => {
+  it('renders the teaser card grid with correct number of cards', () => {
+    const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
+    const teaserCards = container.querySelectorAll('.column.grid-block-teaser');
+    expect(teaserCards.length).toBe(3);
+  });
+
+  it('displays the correct title on each card', () => {
+    const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
+    const cardTitles = container.querySelectorAll('.content .header a');
+    const expectedTitles = ['Economy and resources', 'Health', 'Nature'];
+    cardTitles.forEach((titleElement, index) => {
+      expect(titleElement.textContent).toBe(expectedTitles[index]);
+    });
+  });
+});
+
+describe('CarouselCards component', () => {
+  it('renders the carousel with correct number of cards', () => {
+    const { container } = render(<CarouselCards {...CarouselCards.args} />);
+    const carouselCards = container.querySelectorAll(
+      '.cards-carousel .slick-slide:not(.slick-cloned) .content .header',
+    );
+    expect(carouselCards.length).toBe(5);
+  });
+
+  it('calls the slickPrev function when the previous arrow is clicked', () => {
+    const { getByLabelText } = render(
+      <CarouselCards {...CarouselCards.args} />,
+    );
+    const prevArrowButton = getByLabelText('Previous slide');
+    fireEvent.click(prevArrowButton);
+
+    const nextArrowButton = getByLabelText('Next slide');
+    fireEvent.click(nextArrowButton);
+  });
+});
+
+describe('FluidGrid component', () => {
+  it('renders fluid grid with correct number of cards', () => {
+    const { container } = render(<FluidGrid {...FluidGrid.args} />);
+    const fluidGridCards = container.querySelectorAll(
+      '.fluid-card-row .fluid.card .header',
+    );
+
+    expect(fluidGridCards.length).toBe(3);
+  });
+});
+
+describe('CardGrid component', () => {
+  it('renders the card grid with correct number of cards', () => {
+    const { container } = render(<CardGrid {...CardGrid.args} />);
+    const cardGridCards = container.querySelectorAll(
+      '.ui.fluid.card .content .header',
+    );
+    expect(cardGridCards.length).toBe(5);
+  });
+});
+
+describe('Default component', () => {
+  it('renders the default with correct number of cards', () => {
+    const { container } = render(<Default {...Default.args} />);
+    const defaultCards = container.querySelectorAll(
+      '.ui.card.default .content .header',
+    );
+    expect(defaultCards.length).toBe(1);
+  });
+});

package/src/ui/Card/IconCard/IconCard.stories.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { GridIconCard, Default } from './IconCard.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('GridIconCard component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <GridIconCard {...GridIconCard.args} />,
+    );
+
+    GridIconCard.args.cards.forEach((card) => {
+      expect(getByText(card.title)).toBeInTheDocument();
+      expect(
+        container.querySelector(`.${card.size}.${card.icon}`),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <GridIconCard
+        {...GridIconCard.args}
+        variant={'primary'}
+        inverted={true}
+        hasLink={false}
+      />,
+    );
+
+    GridIconCard.args.cards.forEach((card) => {
+      expect(getByText(card.title)).toBeInTheDocument();
+      expect(
+        container.querySelector(`.${card.size}.${card.icon}`),
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.title)).toBeInTheDocument();
+    expect(
+      container.querySelector(`.${Default.args.size}.${Default.args.icon}`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Default
+        {...Default.args}
+        variant={'primary'}
+        inverted={true}
+        hasLink={false}
+      />,
+    );
+
+    expect(getByText(Default.args.title)).toBeInTheDocument();
+    expect(
+      container.querySelector(`.${Default.args.size}.${Default.args.icon}`),
+    ).toBeInTheDocument();
+  });
+});

package/src/ui/Card/RelatedContent/RelatedContent.jsx

@@ -83,7 +83,7 @@ RelatedContent.Grid = ({ children, ...rest }) => {
           ))}
 
       {rest.showButton && rest.publicationCards.length > 4 && (
-        <Grid.Row className={!rest.showButton ? 'hidden' : null}>
+        <Grid.Row>
           <Grid.Column>
             <div className="button-wrapper">
               <Button secondary>{rest.buttonText}</Button>

package/src/ui/Card/RelatedContent/RelatedContent.stories.jsx

@@ -42,14 +42,14 @@ DefaultEven.args = {
     {
       tag: '#Publication',
       description:
-        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
       href: '/#',
     },
     {
       tag: '#Publication',
       description:
-        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
       href: '/#',
     },

package/src/ui/Card/RelatedContent/RelatedContent.stories.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  RelatedContentInTab,
+  DefaultOdd,
+  DefaultEven,
+} from './RelatedContent.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('RelatedContentInTab component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(
+      <RelatedContentInTab {...RelatedContentInTab.args} />,
+    );
+
+    RelatedContentInTab.args.panes.forEach((element) =>
+      expect(getByText(element.menuItem)).toBeInTheDocument(),
+    );
+  });
+
+  it('renders corectly', () => {
+    render(
+      <RelatedContentInTab {...RelatedContentInTab.args} panes={undefined} />,
+    );
+  });
+});
+
+describe('DefaultOdd component', () => {
+  it('renders corectly', () => {
+    const { getByText, getAllByText } = render(
+      <DefaultOdd {...DefaultOdd.args} />,
+    );
+
+    expect(getAllByText(DefaultOdd.args.publicationCards[0].tag)).toHaveLength(
+      3,
+    );
+    expect(
+      getByText(DefaultOdd.args.publicationCards[0].description),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('DefaultEven component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<DefaultEven {...DefaultEven.args} />);
+
+    DefaultEven.args.publicationCards.forEach((element) => {
+      expect(getByText(element.description)).toBeInTheDocument();
+    });
+
+    expect(getByText(DefaultEven.args.buttonText)).toBeInTheDocument();
+  });
+
+  it('renders corectly without the button', () => {
+    const { getByText, queryByText } = render(
+      <DefaultEven {...DefaultEven.args} showButton={false} />,
+    );
+
+    DefaultEven.args.publicationCards.forEach((element) => {
+      expect(getByText(element.description)).toBeInTheDocument();
+    });
+
+    expect(queryByText(DefaultEven.args.buttonText)).toBeNull();
+  });
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default } from './Confirm.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container, getByText, queryByText } = render(
+      <Default {...Default.args} />,
+    );
+
+    expect(getByText('Show Confirmation')).toBeInTheDocument();
+    expect(container.querySelector('.ui.primary.button')).toBeInTheDocument();
+
+    fireEvent.click(container.querySelector('.ui.primary.button'));
+    expect(getByText(Default.args.confirmHeader)).toBeInTheDocument();
+    expect(getByText(Default.args.content)).toBeInTheDocument();
+    expect(getByText(Default.args.cancelButton)).toBeInTheDocument();
+    expect(getByText(Default.args.confirmButton)).toBeInTheDocument();
+
+    fireEvent.click(getByText(Default.args.cancelButton));
+    expect(queryByText(Default.args.confirmHeader)).toBeNull();
+    expect(queryByText(Default.args.content)).toBeNull();
+    expect(queryByText(Default.args.cancelButton)).toBeNull();
+    expect(queryByText(Default.args.confirmButton)).toBeNull();
+  });
+});

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default } from './ContextNavigation.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+const sidenavItems = [
+  {
+    '@id': 'Gravida',
+    items: [
+      {
+        '@id': 'Lorem-ipsum-0',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 1',
+        url: '/#',
+        is_current: true,
+      },
+      {
+        '@id': 'item-2',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 2',
+        url: '/#',
+      },
+      {
+        '@id': 'item-3',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Item 3',
+        url: '/#',
+      },
+    ],
+    review_state: null,
+    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    url: '/#',
+  },
+  {
+    '@id': 'Signals-2021',
+    description: '',
+    items: [],
+    review_state: null,
+    title: 'Signals 2021',
+    url: '/#',
+  },
+  {
+    '@id': 'Articles',
+    description: '',
+    items: [],
+    review_state: null,
+    title: 'Articles',
+    url: '/#',
+  },
+  {
+    '@id': 'Infographics',
+    items: [
+      {
+        '@id': 'Lorem-ipsum-1',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        url: '/#',
+      },
+      {
+        '@id': 'Signals-2021-infographics',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Signals 2021',
+        url: '/#',
+      },
+      {
+        '@id': 'Articles',
+        description: '',
+        items: [
+          {
+            '@id': 'article-1',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Summer 2022: Living in a state of multiple crises',
+            url: '/#',
+            is_current: true,
+          },
+          {
+            '@id': 'article-2',
+            description: '',
+            items: [],
+            review_state: null,
+            title:
+              'Interview — Prosumers and the energy crisis: citizens contributing to Europe’s energy transition',
+            url: '/#',
+          },
+        ],
+        review_state: null,
+        title: 'Articles',
+        url: '/#',
+        is_in_path: true,
+      },
+      {
+        '@id': 'Infographics-overview',
+        description: '',
+        items: [],
+        review_state: null,
+        title: 'Infographics',
+        url: '/#',
+      },
+    ],
+    review_state: null,
+    title: 'Infographics',
+    url: '/#',
+    is_in_path: true,
+  },
+  {
+    '@id': 'About',
+    review_state: null,
+    title: 'About',
+    items: [],
+    url: '/#',
+    is_in_path: true,
+    is_current: true,
+  },
+];
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { container, getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText('Navigation')).toBeInTheDocument();
+    expect(getByText('Navigation')).toHaveClass('context-navigation-header');
+
+    Default.args.sidenavItems.forEach((item) => {
+      expect(container.querySelector(`#${item['@id']}`).textContent).toMatch(
+        item.title,
+      );
+      item.items.forEach((subitem) => {
+        expect(
+          container.querySelector(`#${subitem['@id']}`).textContent,
+        ).toMatch(subitem.title);
+      });
+    });
+  });
+
+  it('renders corectly', () => {
+    const { container, getByText, queryByText } = render(
+      <Default
+        {...Default.args}
+        sidenavItems={sidenavItems}
+        header={'Test Header'}
+      />,
+    );
+
+    expect(queryByText('Navigation')).toBeNull();
+    expect(getByText('Test Header')).toBeInTheDocument();
+
+    Default.args.sidenavItems.forEach((item) => {
+      expect(container.querySelector(`#${item['@id']}`).textContent).toMatch(
+        item.title,
+      );
+      item.items.forEach((subitem) => {
+        expect(
+          container.querySelector(`#${subitem['@id']}`).textContent,
+        ).toMatch(subitem.title);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DividerWithContent, Default } from './Divider.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DividerWithContent component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <DividerWithContent {...DividerWithContent.args} />,
+    );
+
+    expect(getByText('Divider Content')).toBeInTheDocument();
+    expect(container.querySelector('.ui.container p')).toBeInTheDocument();
+    expect(container.querySelector('.ui.divider')).toBeInTheDocument();
+  });
+
+  it('renders correctly with className', () => {
+    const { container, getByText } = render(
+      <DividerWithContent {...DividerWithContent.args} theme={'primary'} />,
+    );
+
+    expect(getByText('Divider Content')).toBeInTheDocument();
+    expect(container.querySelector('.ui.container p')).toBeInTheDocument();
+    expect(container.querySelector('.ui.divider.primary')).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(container.querySelector('.ui.container p')).toBeInTheDocument();
+    expect(container.querySelector('.ui.divider')).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <Default {...Default.args} theme={'primary'} short={true} />,
+    );
+
+    expect(container.querySelector('.ui.container p')).toBeInTheDocument();
+    expect(container.querySelector('.ui.divider')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default } from './DownloadLabeledIcon.stories';
+import DownloadLabeledIcon from './DownloadLabeledIcon';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText('Download')).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <DownloadLabeledIcon.Dropdown {...Default.args} />,
+    );
+    Default.args.links.forEach((item) => {
+      expect(getByText(item.linkName)).toBeInTheDocument();
+    });
+    expect(
+      container.querySelectorAll(`.${Default.args.downloadIcon}`),
+    ).toHaveLength(3);
+  });
+});

package/src/ui/Footer/Description.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Description from './Description';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Description component', () => {
+  it('renders corectly with children', () => {
+    const { getByText } = render(<Description>Description Test</Description>);
+    expect(getByText('Description Test')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { Default } from './Footer.stories';
+import Footer from './Footer';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('react-lazy-load-image-component', () => {
+  return {
+    LazyLoadComponent: ({ children }) => <>{children}</>,
+  };
+});
+
+describe('Default', () => {
+  let history;
+  let observe;
+  let unobserve;
+
+  beforeEach(() => {
+    history = createMemoryHistory();
+    observe = jest.fn();
+    unobserve = jest.fn();
+
+    window.IntersectionObserver = jest.fn(function () {
+      this.observe = observe;
+      this.unobserve = unobserve;
+    });
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Router history={history}>
+        <Default {...Default.args} />
+      </Router>,
+    );
+
+    expect(container.querySelector('#footer')).toBeInTheDocument();
+    expect(container.querySelector('.footer-wrapper-nobg')).toBeInTheDocument();
+
+    expect(container.querySelector('.subfooter')).toBeInTheDocument();
+    expect(container.querySelector('.site.logo')).toBeInTheDocument();
+    expect(container.querySelector('.contact')).toBeInTheDocument();
+    expect(container.querySelector('.social')).toBeInTheDocument();
+
+    expect(container.querySelector('.actions')).toBeInTheDocument();
+    expect(container.querySelector('a[href="/privacy"]')).toBeInTheDocument();
+    expect(container.querySelector('a[href="/sitemap"]')).toBeInTheDocument();
+    expect(
+      container.querySelector('a[href="https://www.eea.europa.eu/en/login"]'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.actions')).toBeInTheDocument();
+
+    expect(container.querySelector('.footer-header')).toBeInTheDocument();
+    expect(getByText('Environmental information systems')).toBeInTheDocument();
+
+    expect(container.querySelector('.theme-sites')).toBeInTheDocument();
+    Default.args.sites.map((site) =>
+      expect(
+        container.querySelector(`a[href="${site.url}"] img[src="${site.src}"]`),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Router history={history}>
+        <Footer>
+          <Footer.SubFooter {...Default.args}>
+            <div>SubFooter test</div>
+          </Footer.SubFooter>
+          <Footer.Header>{Default.args.header}</Footer.Header>
+          <Footer.Sites sites={Default.args.sites}>
+            <div>Sites test</div>
+          </Footer.Sites>
+          <Footer.Actions
+            actions={Default.args.actions}
+            copyright={Default.args.copyright}
+          />
+        </Footer>
+      </Router>,
+    );
+
+    expect(container.querySelector('#footer')).toBeInTheDocument();
+    expect(container.querySelector('.footer-wrapper-nobg')).toBeInTheDocument();
+
+    expect(container.querySelector('.actions')).toBeInTheDocument();
+    expect(container.querySelector('a[href="/privacy"]')).toBeInTheDocument();
+    expect(container.querySelector('a[href="/sitemap"]')).toBeInTheDocument();
+    expect(
+      container.querySelector('a[href="https://www.eea.europa.eu/en/login"]'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.actions')).toBeInTheDocument();
+
+    expect(container.querySelector('.footer-header')).toBeInTheDocument();
+    expect(getByText('Environmental information systems')).toBeInTheDocument();
+
+    expect(getByText('Sites test')).toBeInTheDocument();
+    expect(getByText('SubFooter test')).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Router history={history}>
+        <Footer>
+          <Footer.SubFooter
+            {...Default.args}
+            description={'test description'}
+            social={undefined}
+          />
+          <Footer.Header>{Default.args.header}</Footer.Header>
+          <Footer.Sites sites={Default.args.sites} />
+          <Footer.Actions
+            actions={Default.args.actions}
+            copyright={Default.args.copyright}
+          >
+            <div>Actions test</div>
+          </Footer.Actions>
+        </Footer>
+      </Router>,
+    );
+
+    expect(container.querySelector('#footer')).toBeInTheDocument();
+    expect(container.querySelector('.footer-wrapper-nobg')).toBeInTheDocument();
+
+    expect(container.querySelector('.footer-header')).toBeInTheDocument();
+    expect(getByText('Environmental information systems')).toBeInTheDocument();
+
+    expect(getByText('Actions test')).toBeInTheDocument();
+  });
+});

package/src/ui/Footer/Social.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Social from './Social';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Social component', () => {
+  it('renders corectly with children', () => {
+    const { getByText } = render(<Social>Social Test</Social>);
+    expect(getByText('Social Test')).toBeInTheDocument();
+  });
+});