@ilo-org/react 0.13.0 → 0.14.0

package/src/__tests__/Accordion.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { composeStories } from "@storybook/react";
+import * as stories from "../stories/Accordion/Accordion.stories";
+
+const { Default: AccordionLarge } = composeStories(stories);
+
+describe("<Accordion>", () => {
+  it("Expect button to exist and aria expanded value to change on accordion button click.", () => {
+    render(<AccordionLarge />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("aria-expanded")).toBe("true");
+    fireEvent.click(buttonElement[0]);
+    expect(buttonElement[0].getAttribute("aria-expanded")).toBe("false");
+  });
+});

package/src/__tests__/Button.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Button } from "../components/Button";
+import buttonArgs from "../components/Button/Button.args";
+
+describe("<Button>", () => {
+  it("Should render `button` with correct class name from type prop", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("class")).toEqual(
+      expect.stringContaining(buttonArgs.primary.type as string)
+    );
+  });
+
+  it("Should render `button` with correct size class name from prop size", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("class")).toContain(
+      buttonArgs.primary.size
+    );
+  });
+
+  it("Should render `button` with correct label from prop label", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(buttonArgs.primary.label);
+  });
+
+  it("Should render `button` as anchor, with the correct url", () => {
+    render(<Button {...buttonArgs.link} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("href", buttonArgs.link.url);
+  });
+
+  it("Should render `button` with disabled attribute", () => {
+    render(<Button {...buttonArgs.disabled} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("disabled", "");
+  });
+
+  it("Should render `button` as anchor with target attribute and rel attribute", () => {
+    render(<Button {...buttonArgs.link} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("target", buttonArgs.link.target);
+    expect(buttonElement[0]).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it('calls "callback" prop on button click', () => {
+    const onClick = jest.fn();
+    render(<Button {...buttonArgs.primary} callback={onClick} />);
+    const buttonElement = screen.getAllByRole("button");
+    fireEvent.click(buttonElement[0]);
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Callout.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Callout } from "../components/Callout";
+import calloutArgs from "../components/Callout/Callout.args";
+
+// const { InfoCallout, ErrorCallout, SuccessCallout, WarningCallout } =
+//   composeStories(stories);
+
+describe("<Callout>", () => {
+  it("Should render Callout headline with content.", () => {
+    const { container } = render(<Callout {...calloutArgs.baseArgs} />);
+    expect(container.children[0]).not.toBeNull();
+    const headlineElement = document.querySelector('[class*="--headline"]');
+    console.log(headlineElement);
+    expect(headlineElement?.textContent).toEqual(
+      calloutArgs.baseArgs.headline as string
+    );
+  });
+
+  it("Should render Callout copy with content.", () => {
+    const { container } = render(<Callout {...calloutArgs.baseArgs} />);
+    expect(container.children[0]).not.toBeNull();
+    const copyElement = document.querySelector('[class*="--copy"]');
+    expect(copyElement?.textContent).toEqual(calloutArgs.baseArgs.copy);
+  });
+
+  it("Should render `button` with correct label from prop toggleClosedLabel", () => {
+    render(<Callout {...calloutArgs.error} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      calloutArgs.error.toggleClosedLabel
+    );
+  });
+
+  it("Should open the callout on button click", () => {
+    const { container } = render(<Callout {...calloutArgs.error} />);
+    expect(container.children[0]).not.toBeNull();
+    userEvent.click(screen.getByRole("button"));
+    const calloutOpenElement = document.querySelector('[class*="--open"]');
+    expect(calloutOpenElement).not.toBeNull();
+  });
+});

package/src/__tests__/ContextMenu.test.tsx

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import { ContextMenu } from "../components/ContextMenu";
+import contextMenuArgs from "../components/ContextMenu/ContextMenu.args";
+
+describe("<ContextMenu>", () => {
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<ContextMenu {...contextMenuArgs.basic} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` with `li`s with the `endsection` prop containing the class `endsection`", () => {
+    const { container } = render(
+      <ContextMenu {...contextMenuArgs.withsection} />
+    );
+    expect(container).not.toBeNull();
+    const endsectionElement = document.querySelector(".endsection");
+    expect(endsectionElement).not.toBeNull();
+  });
+});

package/src/__tests__/Dropdown.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Dropdown } from "../components/Dropdown";
+import dropdownArgs from "../components/Dropdown/Dropdown.args";
+
+describe("<Dropdown>", () => {
+  it("Should render `Dropdown` with correct label from prop label", () => {
+    const { container } = render(<Dropdown {...dropdownArgs.basic} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.querySelector("label")?.textContent).toEqual(
+      dropdownArgs.basic.label
+    );
+  });
+
+  it("should display the correct number of options", () => {
+    render(<Dropdown {...dropdownArgs.basic} />);
+    expect(screen.getAllByRole("option").length).toBe(
+      dropdownArgs?.basic?.options?.length
+    );
+  });
+
+  it("selects the correct option", () => {
+    render(<Dropdown {...dropdownArgs.basic} />);
+    fireEvent.change(screen.getByLabelText("Select a country" as string), {
+      target: { value: "CH" },
+    });
+    const chosenoption = document.querySelector('option[value="CH"]');
+    expect((chosenoption as HTMLOptionElement).selected).toBeTruthy();
+  });
+
+  it('calls "onChange" prop on button click', () => {
+    const handleChange = jest.fn();
+    render(<Dropdown {...dropdownArgs.basic} onChange={handleChange} />);
+    fireEvent.change(screen.getByLabelText("Select a country" as string), {
+      target: { value: "CH" },
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Heading.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { composeStories } from "@storybook/react";
+import headingArgs from "../components/Heading/Heading.args";
+import * as stories from "../stories/Heading/Heading.stories";
+
+const { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 } =
+  composeStories(stories);
+
+describe("<Heading>", () => {
+  it("Should render `h1` with story text.", () => {
+    render(<Heading1 />);
+    const headingElement = screen.getByRole("heading", { level: 1 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading1.children);
+  });
+
+  it("Should render `h2` with story text.", () => {
+    render(<Heading2 />);
+    const headingElement = screen.getByRole("heading", { level: 2 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading2.children);
+  });
+
+  it("Should render `h3` with story text.", () => {
+    render(<Heading3 />);
+    const headingElement = screen.getByRole("heading", { level: 3 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading3.children);
+  });
+
+  it("Should render `h4` with story text.", () => {
+    render(<Heading4 />);
+    const headingElement = screen.getByRole("heading", { level: 4 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading4.children);
+  });
+
+  it("Should render `h5` with story text.", () => {
+    render(<Heading5 />);
+    const headingElement = screen.getByRole("heading", { level: 5 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading5.children);
+  });
+
+  it("Should render `h6` with story text.", () => {
+    render(<Heading6 />);
+    const headingElement = screen.getByRole("heading", { level: 6 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading6.children);
+  });
+});

package/src/__tests__/Image.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { Image } from "../components/Image";
+import imageArgs from "../components/Image/Image.args";
+
+describe("<Image>", () => {
+  it("Should render `img` with correct image src", () => {
+    const { container } = render(<Image {...imageArgs} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("src")).toEqual(
+      imageArgs.url?.[0].src
+    );
+  });
+
+  it("Should render `img` with correct image alt", () => {
+    const { container } = render(<Image {...imageArgs} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("alt")).toEqual(
+      imageArgs.alt
+    );
+  });
+});

package/src/__tests__/LinkList.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import { LinkList } from "../components/LinkList";
+import linkListArgs from "../components/LinkList/LinkList.args";
+
+describe("<LinkList>", () => {
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<LinkList {...linkListArgs.basic} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` with `li`s with the `indented` prop containing the class `indented`", () => {
+    const { container } = render(<LinkList {...linkListArgs.withindented} />);
+    expect(container).not.toBeNull();
+    const indentedElement = document.querySelectorAll(".indented");
+    expect(indentedElement).not.toEqual([]);
+  });
+});

package/src/__tests__/List.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { List } from "../components/List";
+import listArgs from "../components/List/List.args";
+
+describe("<List>", () => {
+  it("Should render `ol` with some items.", () => {
+    const { container } = render(<List {...listArgs.ordered} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<List {...listArgs.unordered} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` horizontally with some items.", () => {
+    const { container } = render(<List {...listArgs.horizontal} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` unstyled with some items.", () => {
+    const { container } = render(<List {...listArgs.unstyled} />);
+    expect(container).not.toBeNull();
+  });
+});

package/src/__tests__/Loading.test.tsx

@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { Loading } from "../components/Loading";
+import loadingArgs from "../components/Loading/Loading.args";
+
+describe("<Loading>", () => {
+  it("Should render `Loading` with correct label from prop label", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    const paragraphElement = document.querySelector(
+      'p[class*="--copy"]'
+    ) as Element;
+    expect(paragraphElement).not.toBeNull();
+    expect(paragraphElement.textContent).toEqual(
+      loadingArgs.loadinglarge.message
+    );
+  });
+
+  it("Should render `Loading` with correct class derived from prop status", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toContain(
+      loadingArgs.loadinglarge.status
+    );
+  });
+
+  it("Should render `Loading` with correct class derived from prop size", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toContain(
+      loadingArgs.loadinglarge.size
+    );
+  });
+});

package/src/__tests__/Notification.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Notification } from "../components/Notification";
+import notificationArgs from "../components/Notification/Notification.args";
+
+describe("<Notification>", () => {
+  it("Should render Notification headline with content.", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const headlineElement = document.querySelector('[class*="--headline"]');
+    console.log(headlineElement);
+    expect(headlineElement?.textContent).toEqual(
+      notificationArgs?.hascta?.headline
+    );
+  });
+
+  it("Should render Notification copy with content.", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const copyElement = document.querySelector('[class*="--copy"]');
+    expect(copyElement?.textContent).toEqual(notificationArgs?.hascta?.copy);
+  });
+
+  it("Should render `button` with correct label from prop closelabel", () => {
+    render(<Notification {...notificationArgs.hascta} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      notificationArgs?.hascta?.closelabel
+    );
+  });
+
+  it("Should delete the component on click of the button", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    userEvent.click(screen.getByRole("button"));
+    expect(container.children[0]).toBeUndefined();
+  });
+});

package/src/__tests__/Pagination.test.tsx

@@ -0,0 +1,58 @@
+import { render } from "@testing-library/react";
+import { Pagination } from "../components/Pagination";
+import paginationArgs from "../components/Pagination/Pagination.args";
+
+describe("<Pagination>", () => {
+  it("Pagination link should render with a disable class", () => {
+    const { container } = render(
+      <Pagination {...paginationArgs.firstDisabled} />
+    );
+    expect(container.children[0]).not.toBeNull();
+    const previousPagination = document.querySelector('a[class*="--disable"]');
+    expect(previousPagination).not.toBeNull();
+  });
+
+  it("First link should match the args", () => {
+    render(<Pagination {...paginationArgs.firstDisabled} />);
+    const pagination = document.querySelector('a[class*="--first-page"]');
+    expect(pagination).not.toBeNull();
+    expect(pagination?.getAttribute("href")).toEqual(
+      expect.stringContaining(
+        paginationArgs.firstDisabled.firstPageUrl as string
+      )
+    );
+  });
+
+  it("Previous link should match the args", () => {
+    render(<Pagination {...paginationArgs.firstDisabled} />);
+    const pagination = document.querySelector('a[class*="--prev-page"]');
+    expect(pagination).not.toBeNull();
+    expect(pagination?.getAttribute("href")).toEqual(
+      expect.stringContaining(
+        paginationArgs.firstDisabled.prevPageUrl as string
+      )
+    );
+  });
+
+  it("Next link should match the args", () => {
+    render(<Pagination {...paginationArgs.firstDisabled} />);
+    const pagination = document.querySelector('a[class*="--next-page"]');
+    expect(pagination).not.toBeNull();
+    expect(pagination?.getAttribute("href")).toEqual(
+      expect.stringContaining(
+        paginationArgs.firstDisabled.nextPageUrl as string
+      )
+    );
+  });
+
+  it("Last link should match the args", () => {
+    render(<Pagination {...paginationArgs.firstDisabled} />);
+    const pagination = document.querySelector('a[class*="--last-page"]');
+    expect(pagination).not.toBeNull();
+    expect(pagination?.getAttribute("href")).toEqual(
+      expect.stringContaining(
+        paginationArgs.firstDisabled.lastPageUrl as string
+      )
+    );
+  });
+});

package/src/__tests__/Profile.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import { Profile } from "../components/Profile";
+import profileArgs from "../components/Profile/Profile.args";
+
+describe("<Profile>", () => {
+  it("Should render Profile with content from name prop.", () => {
+    const { container } = render(<Profile {...profileArgs.basic} />);
+    expect(container.children[0]).not.toBeNull();
+    const nameElement = document.querySelector('[class*="--name"]');
+    expect(nameElement?.textContent).toEqual(profileArgs?.basic?.name);
+  });
+
+  it("Should render Profile with content from avatar prop.", () => {
+    const { container } = render(<Profile {...profileArgs.basic} />);
+    expect(container.children[0]).not.toBeNull();
+    const imgElement = document.querySelector('[class*="--avatar"]');
+    expect(imgElement).toHaveAttribute("src", profileArgs?.basic?.avatar);
+  });
+
+  it("Should render Profile with content from role prop.", () => {
+    const { container } = render(<Profile {...profileArgs.hasrole} />);
+    expect(container.children[0]).not.toBeNull();
+    const roleElement = document.querySelector('[class*="--role"]');
+    expect(roleElement?.textContent).toEqual(profileArgs?.hasrole?.role);
+  });
+
+  it("Should render Profile with content from description prop.", () => {
+    const { container } = render(<Profile {...profileArgs.hasdescription} />);
+    expect(container.children[0]).not.toBeNull();
+    const descriptionElement = document.querySelector(
+      '[class*="--description"]'
+    );
+    expect(descriptionElement?.textContent).toEqual(
+      profileArgs?.hasdescription?.description
+    );
+  });
+
+  it("Should render Profile with content from link prop.", () => {
+    const { container } = render(<Profile {...profileArgs.haslink} />);
+    expect(container.children[0]).not.toBeNull();
+    const linkElement = document.querySelector('[class*="--link"] a');
+    expect(linkElement?.textContent).toEqual(profileArgs?.haslink?.link?.label);
+    expect(linkElement).toHaveAttribute(
+      "href",
+      profileArgs?.haslink?.link?.url
+    );
+  });
+});

package/src/__tests__/ReadMore.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ReadMore } from "../components/ReadMore";
+import readMoreArgs from "../components/ReadMore/ReadMore.args";
+
+describe("<ReadMore>", () => {
+  it("Should render RichText `div` with content.", () => {
+    const { container } = render(<ReadMore {...readMoreArgs.base} />);
+    expect(container.children[0]).not.toBeNull();
+    const richTextElement = document.querySelector('div[class*="--richtext"]');
+    const excerpt = new DOMParser().parseFromString(
+      readMoreArgs.base.excerpt,
+      "text/html"
+    ).documentElement.textContent;
+    expect(richTextElement?.textContent).toEqual(excerpt);
+  });
+
+  it("Should render `button` with correct label from prop buttonlabel", () => {
+    render(<ReadMore {...readMoreArgs.base} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      readMoreArgs?.base?.buttonlabel?.closed
+    );
+  });
+
+  it("Should change contents of RichText `div` with new content.", () => {
+    render(<ReadMore {...readMoreArgs.base} />);
+    const richTextElement = document.querySelector(
+      'div[class*="--richtext"]'
+    ) as Element;
+    const fulltext = new DOMParser().parseFromString(
+      readMoreArgs.open.fulltext,
+      "text/html"
+    ).documentElement.textContent;
+    userEvent.click(
+      screen.getByText(readMoreArgs?.base?.buttonlabel?.closed as string, {
+        selector: "button",
+      })
+    );
+    expect(richTextElement.textContent).toEqual(fulltext);
+  });
+});

package/src/__tests__/RichText.test.tsx

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { RichText } from "../components/RichText";
+import richTextArgs from "../components/RichText/richText.args";
+
+describe("<RichText>", () => {
+  it("Should render `div` with content.", () => {
+    const { container } = render(<RichText {...richTextArgs.richtext} />);
+    // Parse the content as a domstring and get the text content
+    const textContent = new DOMParser().parseFromString(
+      richTextArgs.richtext.content,
+      "text/html"
+    ).documentElement.textContent;
+    expect(container.children[0]).not.toBeNull();
+    expect(container.children[0].textContent).toEqual(textContent);
+  });
+});

package/src/__tests__/SearchField.test.tsx

@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { SearchField } from "../components/SearchField";
+import searchFieldArgs from "../components/SearchField/SearchField.args";
+
+describe("<SearchField>", () => {
+  it("Should render `search field` with correct label from prop input.placeholder", () => {
+    const { container } = render(
+      <SearchField {...searchFieldArgs.searchfield} />
+    );
+    expect(container.children[0]).not.toBeNull();
+    const inputElement = screen.getByPlaceholderText(
+      searchFieldArgs.searchfield.input?.placeholder as string
+    );
+    expect(inputElement).not.toBeNull();
+  });
+
+  it("Should render `search field input` with disabled attribute", () => {
+    const { container } = render(
+      <SearchField {...searchFieldArgs.searchfielddisabled} />
+    );
+    expect(container.children[0]).not.toBeNull();
+    const inputElement = screen.getByPlaceholderText(
+      searchFieldArgs.searchfielddisabled.input?.placeholder as string
+    );
+    expect(inputElement).toHaveAttribute("disabled", "");
+  });
+
+  it('calls "callback" prop on button click', () => {
+    const onClick = jest.fn();
+    render(<SearchField {...searchFieldArgs.searchfield} callback={onClick} />);
+    const buttonElement = screen.getAllByRole("button");
+    fireEvent.click(buttonElement[0]);
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/__tests__/TableOfContents.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import { TableOfContents } from "../components/TableOfContents";
+import tableOfContentsArgs from "../components/TableOfContents/TableOfContents.args";
+
+describe("<TableOfContents>", () => {
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(
+      <TableOfContents {...tableOfContentsArgs.toc} />
+    );
+    expect(container).not.toBeNull();
+  });
+});

package/src/__tests__/Tag.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { TagSet } from "../components/Tag";
+import tagSetArgs from "../components/Tag/TagSet.args";
+
+describe("<TagSet>", () => {
+  it("Should render `button` with correct class name from type prop", () => {
+    const { container } = render(<TagSet {...tagSetArgs.tag} />);
+    expect(container).not.toBeNull();
+  });
+});