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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default, ProgressWithValue, CustomColor } from './Progress.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('CustomColor component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<CustomColor {...CustomColor.args} />);
+    expect(getByText(`${CustomColor.args.value}%`)).toBeInTheDocument();
+    expect(getByText(`${CustomColor.args.children}`)).toBeInTheDocument();
+  });
+});
+
+describe('ProgressWithValue component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <ProgressWithValue {...ProgressWithValue.args} />,
+    );
+    expect(getByText(`${ProgressWithValue.args.value}%`)).toBeInTheDocument();
+    expect(getByText(`${ProgressWithValue.args.children}`)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText(`${Default.args.percent}%`)).toBeInTheDocument();
+    expect(getByText(`${Default.args.children}`)).toBeInTheDocument();
+  });
+});

package/src/ui/Quote/Testimonial/Testimonial.stories.test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Inline } from './Testimonial.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Inline component', () => {
+  it('renders corectly', () => {
+    const { container, getByText } = render(<Inline {...Inline.args} />);
+
+    expect(
+      container.querySelector(`div[quote="${Inline.args.quote}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Inline.args.avatartitle)).toBeInTheDocument();
+    expect(getByText(Inline.args.avatarinfo)).toBeInTheDocument();
+    expect(getByText(Inline.args.title)).toBeInTheDocument();
+    expect(getByText(Inline.args.quote)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Default,
+  Group,
+  Custom,
+  Animation,
+  AnimationGroup,
+} from './Statistic.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('AnimationGroup component', () => {
+  let observe;
+  let unobserve;
+  let disconnect;
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+
+  window.IntersectionObserver = jest.fn(function () {
+    this.observe = observe;
+    this.unobserve = unobserve;
+    this.disconnect = disconnect;
+  });
+  it('renders a button with label', () => {
+    const { getByText } = render(<AnimationGroup {...AnimationGroup.args} />);
+
+    expect(
+      getByText(AnimationGroup.args.elements[0].label),
+    ).toBeInTheDocument();
+    expect(
+      getByText(AnimationGroup.args.elements[1].label),
+    ).toBeInTheDocument();
+    expect(
+      getByText(AnimationGroup.args.elements[2].label),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Animation component', () => {
+  let observe;
+  let unobserve;
+  let disconnect;
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+
+  window.IntersectionObserver = jest.fn(function () {
+    this.observe = observe;
+    this.unobserve = unobserve;
+    this.disconnect = disconnect;
+  });
+  it('renders a button with label', () => {
+    const { getByText } = render(<Animation {...Animation.args} />);
+
+    expect(getByText('Count up label')).toBeInTheDocument();
+    expect(getByText('Start')).toBeInTheDocument();
+    expect(getByText('Reset')).toBeInTheDocument();
+    expect(getByText('Pause/Resume')).toBeInTheDocument();
+  });
+});
+
+describe('Custom component', () => {
+  it('renders a button with label', () => {
+    const { getByText, getAllByText } = render(<Custom {...Custom.args} />);
+
+    Custom.args.elements.forEach((element) => {
+      expect(getByText(element.value)).toBeInTheDocument();
+      expect(getByText(element.label)).toBeInTheDocument();
+    });
+    expect(getAllByText('Text from slate')).toHaveLength(3);
+  });
+});
+
+describe('Group component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Group {...Group.args} />);
+
+    Group.args.elements.forEach((element) => {
+      expect(getByText(element.value)).toBeInTheDocument();
+      expect(getByText(element.label)).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Default component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.label)).toBeInTheDocument();
+    expect(getByText(Default.args.value)).toBeInTheDocument();
+  });
+});

package/src/ui/Table/Table.stories.js

@@ -270,9 +270,17 @@ function SortableTableContent({
               key={item.key}
               textAlign="center"
               sorted={column === item.key ? direction : null}
+              tabIndex={0}
               onClick={() =>
                 dispatch({ type: 'CHANGE_SORT', column: item.key })
               }
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.target.click();
+                }
+              }}
+              aria-label={direction ? direction + ` sorted ` : ''}
             >
               {item.name}
             </Table.HeaderCell>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default, Sortable, Responsive } from './Table.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Responsive component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Responsive {...Responsive.args} />);
+
+    Responsive.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Responsive.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Sortable component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Sortable {...Sortable.args} />);
+
+    Sortable.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Sortable.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText(Sortable.args.headers[0].name));
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    Default.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Default.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Default,
+  DefaultReversed,
+  Multiple,
+  MultipleReversed,
+} from './Timeline.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('MultipleReversed component', () => {
+  it('renders corectly', () => {
+    const { getAllByText } = render(
+      <MultipleReversed {...MultipleReversed.args} />,
+    );
+
+    expect(getAllByText(MultipleReversed.args.items[0].time)).toHaveLength(3);
+  });
+});
+
+describe('Multiple component', () => {
+  it('renders corectly', () => {
+    const { getAllByText } = render(<Multiple {...Multiple.args} />);
+
+    expect(getAllByText(Multiple.args.items[0].time)).toHaveLength(3);
+  });
+});
+
+describe('DefaultReversed component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<DefaultReversed {...DefaultReversed.args} />);
+
+    expect(getByText(DefaultReversed.args.time)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.time)).toBeInTheDocument();
+  });
+});

package/src/ui/index.js

@@ -1,41 +1,21 @@
-export Banner from './Banner/Banner';
-
-export Callout from './Callout/Callout';
-
-export Breadcrumbs from './Breadcrumbs/Breadcrumbs';
-
-export Tag from './Tag/Tag';
-
-export TagList from './TagList/TagList';
-
-export Footer from './Footer/Footer';
-
-export Header from './Header/Header';
-
-export InpageNavigation from './InpageNavigation/InpageNavigation';
-
-export Logo from './Logo/Logo';
-
-export Quote from './Quote/Quote';
-
-export Timeline from './Timeline/Timeline';
-
-export Testimonial from './Quote/Testimonial/Testimonial';
-
-export KeyContent from './KeyContent/KeyContent';
-
-export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
-
-export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon';
-
-export LabeledIconGroup from './LabeledIconGroup/LabeledIconGroup';
-
-export LanguageLabeledIcon from './LanguageLabeledIcon/LanguageLabeledIcon';
-
-export RelatedContent from './Card/RelatedContent/RelatedContent';
-
-export Hero from './Hero/Hero';
-
-export Copyright from './Copyright/Copyright';
-
-export Video from './Video/Video';
+export { default as Banner } from './Banner/Banner';
+export { default as Callout } from './Callout/Callout';
+export { default as Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+export { default as Tag } from './Tag/Tag';
+export { default as TagList } from './TagList/TagList';
+export { default as Footer } from './Footer/Footer';
+export { default as Header } from './Header/Header';
+export { default as InpageNavigation } from './InpageNavigation/InpageNavigation';
+export { default as Logo } from './Logo/Logo';
+export { default as Quote } from './Quote/Quote';
+export { default as Timeline } from './Timeline/Timeline';
+export { default as Testimonial } from './Quote/Testimonial/Testimonial';
+export { default as KeyContent } from './KeyContent/KeyContent';
+export { default as DownloadLabeledIcon } from './DownloadLabeledIcon/DownloadLabeledIcon';
+export { default as NewTabLabeledIcon } from './NewTabLabeledIcon/NewTabLabeledIcon';
+export { default as LabeledIconGroup } from './LabeledIconGroup/LabeledIconGroup';
+export { default as LanguageLabeledIcon } from './LanguageLabeledIcon/LanguageLabeledIcon';
+export { default as RelatedContent } from './Card/RelatedContent/RelatedContent';
+export { default as Hero } from './Hero/Hero';
+export { default as Copyright } from './Copyright/Copyright';
+export { default as Video } from './Video/Video';