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

package/src/ui/Header/Header.test.jsx

@@ -0,0 +1,293 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import Header from './Header';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Header component', () => {
+  let history;
+
+  beforeEach(() => {
+    history = createMemoryHistory();
+  });
+
+  it('renders without crashing', () => {
+    render(<Header />);
+  });
+
+  it('renders children correctly', () => {
+    render(<Header>Test Children</Header>);
+    expect(screen.getByText('Test Children')).toBeInTheDocument();
+  });
+
+  it('renders without crashing', () => {
+    render(
+      <Header>
+        <Header.TopHeader>
+          <Header.TopItem>
+            <p>Test</p>
+          </Header.TopItem>
+          <Header.TopItem>
+            <Header.TopDropdownMenu
+              hasLanguageDropdown={true}
+              viewportWidth={1000}
+            >
+              <div aria-label="language switcher">Language Switcher</div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        </Header.TopHeader>
+        <Header.Main
+          menuItems={[{ '@id': '/home', title: 'Home', items: [] }]}
+          pathname={'/home'}
+          renderGlobalMenuItem={(item, { onClick }) =>
+            item.title !== 'Home' && (
+              <a
+                href={item.url}
+                title={item.title}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onClick(e, item);
+                }}
+              >
+                {item.title}
+              </a>
+            )
+          }
+          renderMenuItem={(item, options, props) => {
+            return (
+              <a
+                href={item.url || '/'}
+                title={item.nav_title || item.title}
+                {...(options || {})}
+              >
+                {props?.iconPosition !== 'right' && props?.children}
+                <span>{item.nav_title || item.title}</span>
+                {props?.iconPosition === 'right' && props?.children}
+              </a>
+            );
+          }}
+        />
+      </Header>,
+    );
+  });
+
+  it('renders without crashing', () => {
+    render(
+      <Header>
+        <Header.TopHeader>
+          <Header.TopItem>
+            <Header.TopDropdownMenu viewportWidth={900}>
+              <div aria-label="test">No Language Switcher</div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        </Header.TopHeader>
+        <Header.Main
+          menuItems={[{ '@id': '/home', title: 'Home', items: [] }]}
+          pathname={'/home'}
+          isMultilingual={true}
+          renderGlobalMenuItem={(item, { onClick }) =>
+            item.title !== 'Home' && (
+              <a
+                href={item.url}
+                title={item.title}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onClick(e, item);
+                }}
+              >
+                {item.title}
+              </a>
+            )
+          }
+          renderMenuItem={(item, options, props) => {
+            return (
+              <a
+                href={item.url || '/'}
+                title={item.nav_title || item.title}
+                {...(options || {})}
+              >
+                {props?.iconPosition !== 'right' && props?.children}
+                <span>{item.nav_title || item.title}</span>
+                {props?.iconPosition === 'right' && props?.children}
+              </a>
+            );
+          }}
+        />
+      </Header>,
+    );
+  });
+
+  it('renders without crashing', () => {
+    const { getByText, getAllByText, container } = render(
+      <Router history={history}>
+        <Header>
+          <Header.TopHeader>
+            <Header.TopItem>
+              <Header.TopDropdownMenu viewportWidth={760}>
+                <div aria-label="test">No Language Switcher</div>
+              </Header.TopDropdownMenu>
+            </Header.TopItem>
+          </Header.TopHeader>
+          <Header.Main
+            transparency={true}
+            inverted={true}
+            menuItems={[
+              {
+                '@id': '/countries',
+                url: '/countries',
+                title: 'Countries',
+                items: [
+                  {
+                    title: 'At a glance',
+                    url: '/countries/at-a-glance/in-depth',
+                    items: [
+                      {
+                        title: 'test',
+                        url: '/countries/at-a-glance/test',
+                        items: [
+                          {
+                            title: 'test',
+                            url: '/countries/at-a-glance/test',
+                            items: [],
+                          },
+                          {
+                            title: 'test',
+                            url: '/countries/at-a-glance/test',
+                            items: [],
+                          },
+                        ],
+                      },
+                      {
+                        title: 'test2',
+                        url: '/countries/at-a-glance/test2',
+                        items: [
+                          {
+                            title: 'test',
+                            url: '/countries/at-a-glance/test',
+                            items: [],
+                          },
+                          {
+                            title: 'test',
+                            url: '/countries/at-a-glance/test',
+                            items: [],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    title: 'anything else',
+                    url: '/countries/anything-else/in-depth',
+                    items: [],
+                  },
+                ],
+              },
+              {
+                '@id': '/topics',
+                url: '/topics',
+                title: 'Topics',
+                items: [
+                  {
+                    title: 'At a glance',
+                    url: '/topics/at-a-glance/in-depth',
+                    items: [
+                      {
+                        title: 'test',
+                        url: '/topics/at-a-glance/test',
+                        items: [],
+                      },
+                    ],
+                  },
+                  {
+                    title: 'Anything else',
+                    url: '/topics/anything-else/in-depth',
+                    items: [
+                      {
+                        title: 'test',
+                        url: '/topics/anything-else/test',
+                        items: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                '@id': '/test',
+                url: '/test',
+                title: 'Test Click',
+                items: [
+                  {
+                    title: 'test',
+                    items: [
+                      {
+                        title: 'test',
+                        url: '/test/at-a-glance/test',
+                        items: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                '@id': undefined,
+                url: '/test2',
+                title: 'Test Click 2',
+                items: [],
+              },
+              {
+                '@id': undefined,
+                url: 'http://test.com',
+                title: 'Test Click 3',
+                items: [],
+              },
+            ]}
+            pathname={'/test'}
+            renderGlobalMenuItem={(item, { onClick }) =>
+              item.title !== 'Home' && (
+                <a
+                  href={item.url}
+                  title={item.title}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onClick(e, item);
+                  }}
+                >
+                  {item.title}
+                </a>
+              )
+            }
+            renderMenuItem={(item, options, props) => {
+              return (
+                <a
+                  href={item.url || '/'}
+                  title={item.nav_title || item.title}
+                  {...(options || {})}
+                >
+                  {props?.iconPosition !== 'right' && props?.children}
+                  <span>{item.nav_title || item.title}</span>
+                  {props?.iconPosition === 'right' && props?.children}
+                </a>
+              );
+            }}
+          />
+        </Header>
+      </Router>,
+    );
+    const menuItemsWithInternalUrl = getAllByText('Test Click 2');
+    const menuItemsWithExternalUrl = getAllByText('Test Click 3');
+    const menuItemsWithCountries = getAllByText('Countries');
+    const menuItemsWithTopics = getAllByText('Topics');
+
+    fireEvent.click(getByText('Test Click'));
+    fireEvent.click(menuItemsWithInternalUrl[0]);
+    fireEvent.click(container.querySelector('.search-action'));
+    fireEvent.click(menuItemsWithExternalUrl[0]);
+    fireEvent.click(menuItemsWithCountries[0]);
+    fireEvent.click(menuItemsWithTopics[0]);
+    fireEvent.keyDown(getByText('No Language Switcher'), {
+      key: 'Enter',
+      code: 'Enter',
+    });
+  });
+});

package/src/ui/Header/HeaderMenuPopUp.js

@@ -168,7 +168,17 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
               defaultIndex = index;
             }
             x.title = (
-              <Accordion.Title key={`title=${index}`} as="button">
+              <Accordion.Title
+                key={`title=${index}`}
+                as="button"
+                aria-expanded={false}
+                onClick={(e) => {
+                  e.currentTarget.setAttribute(
+                    'aria-expanded',
+                    e.currentTarget.className.indexOf('active') === -1,
+                  );
+                }}
+              >
                 {item.title}
                 <Icon className="ri-arrow-down-s-line" size="small" />
               </Accordion.Title>
@@ -223,7 +233,6 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
             <React.Fragment key={index}>
               {renderMenuItem(item, {
                 key: index,
-                role: 'listitem',
                 className: 'item',
               })}
             </React.Fragment>
@@ -232,7 +241,6 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
           <React.Fragment key={inDepth.url}>
             {renderMenuItem(inDepth, {
               key: inDepth.url,
-              role: 'listitem',
               className: 'item',
             })}
           </React.Fragment>
@@ -246,7 +254,6 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
           <React.Fragment key={index}>
             {renderMenuItem(item, {
               key: index,
-              role: 'listitem',
               className: 'item',
             })}
           </React.Fragment>
@@ -277,6 +284,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
       <Accordion.Title
         key={`title-${index}`}
         index={index}
+        aria-expanded={activeIndex === index}
         as="button"
         onClick={() => {
           if (activeIndex === index) {

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import HeaderSearchPopUp from './HeaderSearchPopUp';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('HeaderSearchPopUp', () => {
+  let history;
+  const mockOnClose = jest.fn();
+  const sampleHeaderSearchBox = [
+    {
+      path: '/search',
+      buttonTitle: 'Advanced Search',
+      buttonUrl: '/advanced-search',
+      description: 'Sample description',
+      placeholder: 'Search',
+      searchSuggestions: {
+        suggestionsTitle: 'Suggestions Title',
+        suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
+        maxToShow: 3,
+      },
+      isDefault: true,
+    },
+  ];
+
+  const sampleHeaderSearchBoxWithMatchpath = [
+    {
+      matchpath: '/search',
+      buttonTitle: 'Advanced Search',
+      buttonUrl: undefined,
+      description: 'Sample description',
+      placeholder: 'Search',
+      searchSuggestions: {
+        suggestionsTitle: 'Suggestions Title',
+        suggestions: ['suggestion 1', 'suggestion 2', 'suggestion 3'],
+        maxToShow: 3,
+      },
+      isDefault: true,
+    },
+  ];
+
+  beforeEach(() => {
+    history = createMemoryHistory();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render HeaderSearchPopUp', () => {
+    render(
+      <Router history={history}>
+        <HeaderSearchPopUp
+          headerSearchBox={sampleHeaderSearchBox}
+          onClose={mockOnClose}
+          triggerRefs={[]}
+        />
+      </Router>,
+    );
+    expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+  });
+
+  it('should update search text on change', () => {
+    render(
+      <Router history={history}>
+        <HeaderSearchPopUp
+          headerSearchBox={sampleHeaderSearchBox}
+          onClose={mockOnClose}
+          triggerRefs={[]}
+        />
+      </Router>,
+    );
+    const input = screen.getByPlaceholderText('Search');
+    fireEvent.change(input, { target: { value: 'New text' } });
+    expect(input.value).toBe('New text');
+  });
+
+  it('should submit the form with search text', () => {
+    window.searchContext = { resetSearch: jest.fn() };
+
+    const { container } = render(
+      <Router history={history}>
+        <HeaderSearchPopUp
+          headerSearchBox={sampleHeaderSearchBox}
+          onClose={mockOnClose}
+          triggerRefs={[]}
+        />
+      </Router>,
+    );
+    const input = screen.getByPlaceholderText('Search');
+    fireEvent.change(input, { target: { value: 'Search text' } });
+    fireEvent.submit(container.querySelector('form'));
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    expect(history.location.pathname).toBe('/search');
+    // expect(history.location.search).toBe('?q=Search text');
+  });
+
+  it('should navigate to the suggestion when a suggestion is clicked', () => {
+    window.searchContext = { resetSearch: jest.fn() };
+
+    render(
+      <Router history={history}>
+        <HeaderSearchPopUp
+          headerSearchBox={sampleHeaderSearchBoxWithMatchpath}
+          onClose={mockOnClose}
+        />
+      </Router>,
+    );
+    fireEvent.click(screen.getByText('suggestion 1'));
+    expect(history.location.pathname).toBe('/');
+    expect(history.location.search).toBe('?q=suggestion 1');
+  });
+});

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Playground, Default } from './Hero.st';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Playground component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Playground {...Playground.args} />,
+    );
+
+    expect(getByText(Playground.args.text)).toBeInTheDocument();
+    expect(getByText(Playground.args.buttonLabel)).toBeInTheDocument();
+    expect(getByText(Playground.args.buttonLabel)).toHaveClass(
+      'ui inverted button primary',
+    );
+    expect(container.querySelector('.eea.copyright')).toBeInTheDocument();
+    expect(getByText(Playground.args.copyrightPrefix)).toHaveClass(
+      'icon-prefix',
+    );
+    expect(
+      container.querySelector(`.icon.${Playground.args.copyrightIcon}`),
+    ).toBeInTheDocument();
+    expect(getByText(Playground.args.copyright)).toHaveClass('icon-content');
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container, getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.text)).toBeInTheDocument();
+    expect(getByText(Default.args.buttonLabel)).toBeInTheDocument();
+    expect(getByText(Default.args.buttonLabel)).toHaveClass(
+      'ui inverted button primary',
+    );
+    expect(container.querySelector('.eea.copyright')).toBeInTheDocument();
+    expect(getByText(Default.args.copyrightPrefix)).toHaveClass('icon-prefix');
+    expect(
+      container.querySelector(`.icon.${Default.args.copyrightIcon}`),
+    ).toBeInTheDocument();
+    expect(getByText(Default.args.copyright)).toHaveClass('icon-content');
+  });
+
+  it('renders correctly', () => {
+    const { container, getByText } = render(
+      <Default
+        {...Default.args}
+        image={false}
+        fullWidth={false}
+        fullHeight={false}
+      />,
+    );
+
+    expect(getByText(Default.args.text)).toBeInTheDocument();
+    expect(getByText(Default.args.buttonLabel)).toBeInTheDocument();
+    expect(getByText(Default.args.buttonLabel)).toHaveClass(
+      'ui inverted button primary',
+    );
+    expect(container.querySelector('.eea.copyright')).toBeInTheDocument();
+    expect(getByText(Default.args.copyrightPrefix)).toHaveClass('icon-prefix');
+    expect(
+      container.querySelector(`.icon.${Default.args.copyrightIcon}`),
+    ).toBeInTheDocument();
+    expect(getByText(Default.args.copyright)).toHaveClass('icon-content');
+  });
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default } from './InpageNavigation.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    render(<Default {...Default.args} />);
+  });
+});

package/src/ui/InpageNavigation/InpageNavigation.test.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import InpageNavigation from './InpageNavigation';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('InpageNavigation', () => {
+  let scrollToMock;
+
+  beforeEach(() => {
+    scrollToMock = jest.fn();
+    global.window.scrollTo = scrollToMock;
+  });
+
+  afterEach(() => {
+    scrollToMock.mockClear();
+    delete global.window.scrollTo;
+  });
+
+  it('should scroll to top on button click', () => {
+    const { getByTitle } = render(<InpageNavigation />);
+    const button = getByTitle('Go to top');
+
+    fireEvent.click(button);
+
+    expect(scrollToMock).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth',
+    });
+  });
+
+  it('should hide the button when scroll position is less than or equal to 50', () => {
+    Object.defineProperty(window, 'scrollY', { value: 30 });
+
+    const { getByTitle } = render(<InpageNavigation />);
+    const button = getByTitle('Go to top');
+
+    expect(button).toHaveClass('hidden');
+  });
+
+  it('should render the correct button content for different screen sizes', () => {
+    const { container } = render(<InpageNavigation />);
+    const mobileTabletOnlyContent = container.querySelector(
+      '.mobile.tablet.only',
+    );
+    const tabletOrLowerHiddenContent = container.querySelector(
+      '.tablet.or.lower.hidden',
+    );
+
+    expect(mobileTabletOnlyContent).toBeInTheDocument();
+    expect(tabletOrLowerHiddenContent).toBeInTheDocument();
+    expect(container.querySelector('.text')).toBeInTheDocument();
+  });
+
+  it('should scroll to top on button click', () => {
+    const { getByTitle } = render(<InpageNavigation />);
+    const button = getByTitle('Go to top');
+
+    fireEvent.click(button);
+
+    expect(scrollToMock).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth',
+    });
+  });
+
+  it('should show the button when scroll position is greater than 50', () => {
+    Object.defineProperty(window, 'scrollY', { value: 100 });
+
+    const { getByTitle } = render(<InpageNavigation />);
+    const button = getByTitle('Go to top');
+
+    expect(button).toHaveStyle('display: inline-block;');
+  });
+
+  it('should update button visibility based on scroll position', () => {
+    const { getByTitle } = render(<InpageNavigation />);
+    const button = getByTitle('Go to top');
+
+    Object.defineProperty(window, 'scrollY', { value: 100 });
+    fireEvent.scroll(window);
+
+    expect(button).toHaveStyle('display: inline-block;');
+
+    Object.defineProperty(window, 'scrollY', { value: 30 });
+    fireEvent.scroll(window);
+  });
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DefaultGroup, DefaultItem, Default } from './Item.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DefaultGroup Component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<DefaultGroup {...DefaultGroup.args} />);
+    DefaultGroup.args.items.forEach((element) => {
+      expect(
+        container.querySelector(`img[src="${element.image}"]`),
+      ).toBeInTheDocument();
+    });
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+    expect(container.querySelector('.extra')).toBeInTheDocument();
+  });
+});
+
+describe('DefaultItem Component', () => {
+  it('renders correclty', () => {
+    const { container } = render(<DefaultItem {...DefaultItem.args} />);
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+    expect(container.querySelector('.extra')).toBeInTheDocument();
+  });
+});
+
+describe('Default Component', () => {
+  it('renders correclty', () => {
+    const { container } = render(<Default {...Default.args} />);
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+    expect(container.querySelector('.extra')).toBeInTheDocument();
+  });
+});