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

package/src/ui/Banner/Banner.test.jsx

@@ -0,0 +1,292 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Banner from './Banner';
+import { sharePage } from './Banner';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Banner', () => {
+  it('renders without errors', () => {
+    const { container } = render(<Banner />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders the children when image prop is not provided', () => {
+    const image = 'image-url';
+    const properties = {};
+    const { getByText } = render(
+      <Banner image={image} properties={properties}>
+        <div>Content</div>
+      </Banner>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('renders the image and children when image prop is provided', () => {
+    const image = 'image-url';
+    const metadata = {
+      image: {
+        scales: {
+          huge: {
+            download: 'image-url',
+          },
+        },
+      },
+    };
+    const { container, getByText } = render(
+      <Banner image={image} metadata={metadata}>
+        <div>Content</div>
+      </Banner>,
+    );
+    const imageElement = container.querySelector('.eea.banner .image');
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement.style.backgroundImage).toBe(`url(${image})`);
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('calls the onClick function when an action button is clicked', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Banner.Action title="Action" icon="icon-name" onClick={onClick} />,
+    );
+    const actionButton = getByText('Action');
+    fireEvent.click(actionButton);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('renders only the gradient and children when image prop is not provided', () => {
+    const { container, getByText } = render(
+      <Banner>
+        <div>Content</div>
+      </Banner>,
+    );
+    const imageElement = container.querySelector('.eea.banner .image');
+    expect(imageElement).not.toBeInTheDocument();
+    const gradientElement = container.querySelector('.eea.banner .gradient');
+    expect(gradientElement).toBeInTheDocument();
+    expect(getByText('Content')).toBeInTheDocument();
+  });
+
+  it('calls the onClick handler when the action button is clicked', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Banner.Action title="Action" icon="icon-name" onClick={onClick} />,
+    );
+    const actionButton = getByText('Action');
+    fireEvent.click(actionButton);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={false}
+          label={'Test label'}
+          value={'02.03.2023'}
+          type={'date'}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={false}
+          label={'Test label'}
+          value={'test'}
+          type={'text'}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+
+  it('renders the content and actions correctly', () => {
+    const { getByText } = render(
+      <>
+        <Banner.Title>Test Banner Title</Banner.Title>
+        <Banner.Subtitle>Test Banner Subtitle</Banner.Subtitle>
+        <Banner.Metadata>Test Banner Metadata</Banner.Metadata>
+        <Banner.MetadataField
+          hidden={true}
+          label={'Test label'}
+          value={undefined}
+          type={undefined}
+        >
+          Test Banner MetadataField
+        </Banner.MetadataField>
+        <Banner.Content actions={<div>Actions</div>}>
+          <div>Content</div>
+        </Banner.Content>
+      </>,
+    );
+    expect(getByText('Content')).toBeInTheDocument();
+    expect(getByText('Actions')).toBeInTheDocument();
+    expect(getByText('Test Banner Title')).toBeInTheDocument();
+    expect(getByText('Test Banner Subtitle')).toBeInTheDocument();
+    expect(getByText('Test Banner Metadata')).toBeInTheDocument();
+  });
+});
+
+describe('sharePage', () => {
+  it('should not do anything if an invalid platform is provided', () => {
+    document.createElement = jest.fn();
+    sharePage('https://example.com', 'invalidPlatform');
+    expect(document.createElement).not.toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'facebook';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://facebook.com/sharer.php?u=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'twitter';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://www.twitter.com/share?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'linkedin';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+
+  it('should create an anchor element and click it for a valid platform', () => {
+    const url = 'https://example.com';
+    const platform = 'reddit';
+
+    const mockLink = {
+      setAttribute: jest.fn(),
+      click: jest.fn(),
+    };
+
+    document.createElement = jest.fn(() => mockLink);
+
+    sharePage(url, platform);
+
+    expect(document.createElement).toHaveBeenCalledWith('a');
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      1,
+      'href',
+      `https://reddit.com/submit?url=${url}`,
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      2,
+      'target',
+      '_blank',
+    );
+    expect(mockLink.setAttribute).toHaveBeenNthCalledWith(
+      3,
+      'rel',
+      'noreferrer',
+    );
+    expect(mockLink.click).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default, Inverted, Link, Labeled } from './CallToAction.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Link', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Link {...Link.args} />);
+    expect(
+      container.querySelector(`a[href="${Link.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Labeled', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Labeled {...Labeled.args} />);
+    expect(
+      container.querySelector(`a[href="${Labeled.args.href}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Labeled.args.label)).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Labeled {...Labeled.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Labeled.args.href}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Labeled.args.label)).toBeInTheDocument();
+  });
+});
+
+describe('Inverted', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Inverted {...Inverted.args} />);
+    expect(
+      container.querySelector(`a[href="${Inverted.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <Inverted {...Inverted.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Inverted.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Default', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+    expect(
+      container.querySelector(`a[href="${Default.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <Default {...Default.args} variant={'default'} />,
+    );
+    expect(
+      container.querySelector(`a[href="${Default.args.href}"]`),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -446,7 +446,10 @@ function CarouselCardsContent(args) {
         dots
           .querySelectorAll('.slider-dots-button')
           .forEach(function (el, idx) {
-            el.setAttribute('aria-current', idx === currentSlide);
+            el.setAttribute(
+              'aria-current',
+              el.parentElement.className === 'slick-active',
+            );
           });
       }
     },

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

@@ -0,0 +1,82 @@
+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 = [
+      "State of Europe's environment",
+      'Climate',
+      'Economy and resources',
+    ];
+    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(3);
+  });
+});
+
+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();
+  });
+});