@nypl/design-system-react-components 0.25.0 → 0.25.1

package/src/components/Pagination/Pagination.test.tsx

@@ -19,12 +19,12 @@ describe("Pagination with getPageHref", () => {
   const getPageHref = (page: number) => `page=${page}`;
 
   it("Renders a nav element with items and links", () => {
-    render(
+    const { container } = render(
       <Pagination pageCount={20} currentPage={6} getPageHref={getPageHref} />
     );
 
     expect(screen.getByRole("navigation")).toBeInTheDocument();
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(container.querySelector(".pagination__list")).toBeInTheDocument();
     // Previous/Next buttons + truncated item list = 11 total items
     expect(screen.getAllByRole("listitem")).toHaveLength(11);
     // Each element links to anotherpage.
@@ -53,7 +53,8 @@ describe("Pagination with getPageHref", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[0]).toHaveAttribute("aria-disabled");
-    expect(links[0]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[0].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Next link is disabled when on the last page item", () => {
@@ -62,7 +63,8 @@ describe("Pagination with getPageHref", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[9]).toHaveAttribute("aria-disabled");
-    expect(links[9]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[9].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Current page item has active class", () => {
@@ -70,7 +72,8 @@ describe("Pagination with getPageHref", () => {
       <Pagination pageCount={11} currentPage={5} getPageHref={getPageHref} />
     );
     const links = screen.getAllByRole("button");
-    expect(links[5]).toHaveAttribute("class", "link pagination__link selected");
+    const linkClass = links[5].getAttribute("class");
+    expect(linkClass).toContain("pagination__link selected");
   });
 
   it("When pagination has 1 element, pagination is not shown", () => {
@@ -92,7 +95,7 @@ describe("Pagination with changeCallback", () => {
   const changeCallback = jest.fn();
 
   it("Renders a nav element with an unordered list of items", () => {
-    render(
+    const { container } = render(
       <Pagination
         pageCount={11}
         currentPage={6}
@@ -100,7 +103,7 @@ describe("Pagination with changeCallback", () => {
       />
     );
     expect(screen.getByRole("navigation")).toBeInTheDocument();
-    expect(screen.getByRole("list")).toBeInTheDocument();
+    expect(container.querySelector(".pagination__list")).toBeInTheDocument();
     expect(screen.getAllByRole("listitem")).toHaveLength(11);
   });
 
@@ -114,7 +117,8 @@ describe("Pagination with changeCallback", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[0]).toHaveAttribute("aria-disabled");
-    expect(links[0]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[0].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Next link is disabled when on the last page item", () => {
@@ -127,7 +131,8 @@ describe("Pagination with changeCallback", () => {
     );
     const links = screen.getAllByRole("button");
     expect(links[9]).toHaveAttribute("aria-disabled");
-    expect(links[9]).toHaveAttribute("class", "link pagination__link disabled");
+    const linkClass = links[9].getAttribute("class");
+    expect(linkClass).toContain("pagination__link disabled");
   });
 
   it("Current page item has active class", () => {
@@ -139,7 +144,8 @@ describe("Pagination with changeCallback", () => {
       />
     );
     const links = screen.getAllByRole("button");
-    expect(links[5]).toHaveAttribute("class", "link pagination__link selected");
+    const linkClass = links[5].getAttribute("class");
+    expect(linkClass).toContain("pagination__link selected");
   });
 
   it("When page item is selected, runs the onPageChange callback", () => {

package/src/components/RadioGroup/RadioGroup.stories.mdx

@@ -53,7 +53,7 @@ import Radio from "../Radio/Radio";
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
-      labelText: "Standar Radio Group",
+      labelText: "Standard Radio Group",
       layout: RadioGroupLayoutTypes.Column,
       name: "radio-story",
       optReqFlag: true,

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,7 @@ import generateUUID from "../../helpers/generateUUID";
 import { spacing } from "../../theme/foundations/spacing";
 import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
 import Radio from "../Radio/Radio";
+
 export interface RadioGroupProps {
   /** Any child node passed to the component. */
   children: React.ReactNode;
@@ -101,18 +102,9 @@ const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
       const chakraRadioProps = getRadioProps({
         value: child.props.value,
       } as any);
-      const newProps = { key: i };
 
       if (child !== undefined && child !== null) {
-        if (isDisabled) {
-          newProps["isDisabled"] = true;
-        }
-        if (isInvalid) {
-          newProps["isInvalid"] = true;
-        }
-        if (isRequired) {
-          newProps["isRequired"] = true;
-        }
+        const newProps = { key: i, isDisabled, isInvalid, isRequired };
         if (child.props.value === defaultValue) {
           newProps["checked"] = true;
         }

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -2,15 +2,46 @@ import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
+import renderer from "react-test-renderer";
 
-import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import SearchBar from "./SearchBar";
 
+const optionsGroup = [
+  "Art",
+  "Bushes",
+  "Clothing",
+  "Flowers",
+  "Fossils",
+  "Fruits",
+  "Furniture",
+  "Songs",
+  "Tools",
+  "Villagers",
+];
+const selectProps = {
+  name: "nhItemSearch",
+  labelText: "Select a category",
+  optionsData: optionsGroup,
+};
+const textInputProps = {
+  labelText: "Item Search",
+  placeholder: "Item Search",
+};
+const helperErrorText = "Search for items in Animal Crossing New Horizons";
+const invalidText = "Could not find the item :(";
+
 describe("SearchBar Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <SearchBar id="id" ariaLabel="searchbar" onSubmit={jest.fn()} />
+      <SearchBar
+        id="id"
+        labelText="Searchbar"
+        onSubmit={jest.fn()}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+      />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -20,32 +51,136 @@ describe("SearchBar", () => {
   const searchBarSubmit = jest.fn();
   const buttonCallback = jest.fn();
 
-  it("Renders SearchBar", () => {
+  it("renders the basic form", () => {
     render(
-      <SearchBar id="id" ariaLabel="searchbar" onSubmit={searchBarSubmit} />
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
     );
     expect(screen.getByRole("search")).toBeInTheDocument();
     expect(screen.getByRole("search")).toHaveAttribute(
       "aria-label",
       "searchbar"
     );
+    expect(screen.getByPlaceholderText("Item Search")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders an optional Select component", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
+    );
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getByLabelText("Select a category")).toBeInTheDocument();
+  });
+
+  it("renders the invalid text in the invalid state", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+        isInvalid
+      />
+    );
+    expect(screen.getByText(invalidText)).toBeInTheDocument();
+    expect(screen.queryByText(helperErrorText)).not.toBeInTheDocument();
   });
 
-  it("Search Bar calls call back on Submit ", () => {
+  it("calls the callback function on submit ", () => {
     render(
-      <SearchBar ariaLabel="searchBar" id="id" onSubmit={searchBarSubmit}>
-        <Button
-          buttonType={ButtonTypes.Primary}
-          id="button"
-          onClick={buttonCallback}
-          type="submit"
-        >
-          Search
-        </Button>
-      </SearchBar>
+      <SearchBar
+        labelText="searchBar"
+        id="id"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
+    expect(buttonCallback).toHaveBeenCalledTimes(0);
     userEvent.click(screen.getByRole("button"));
     expect(searchBarSubmit).toHaveBeenCalledTimes(1);
+    expect(buttonCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          helperErrorText={helperErrorText}
+        />
+      )
+      .toJSON();
+    const withSelect = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          selectProps={selectProps}
+          textInputProps={textInputProps}
+          helperErrorText={helperErrorText}
+        />
+      )
+      .toJSON();
+    const withoutHelperText = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const invalidState = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          isInvalid
+        />
+      )
+      .toJSON();
+    const disabledState = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          isDisabled
+        />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(withSelect).toMatchSnapshot();
+    expect(withoutHelperText).toMatchSnapshot();
+    expect(invalidState).toMatchSnapshot();
+    expect(disabledState).toMatchSnapshot();
   });
 });