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

package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap

@@ -5,17 +5,13 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
   className=" css-0"
   id="radio-group-column"
 >
-  <legend
-    className=""
-  >
-    <span>
-      column
-    </span>
-    <span
+  <legend>
+    column
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -125,17 +121,13 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
   className=" css-0"
   id="radio-group-row"
 >
-  <legend
-    className=""
-  >
-    <span>
-      row
-    </span>
-    <span
+  <legend>
+    row
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -245,17 +237,13 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
   className=" css-0"
   id="radio-group-noLabel"
 >
-  <legend
-    className="sr-only"
-  >
-    <span>
-      no label
-    </span>
-    <span
+  <legend>
+    no label
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label="no label"
@@ -365,17 +353,13 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
   className=" css-0"
   id="radio-group-helperText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      helperText
-    </span>
-    <span
+  <legend>
+    helperText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -483,7 +467,9 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
     <div
       aria-atomic={true}
       aria-live="off"
-      className="helper-text"
+      className=" css-0"
+      data-isinvalid={false}
+      id="helperText-helperErrorText"
     >
       helper text
     </div>
@@ -496,17 +482,13 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   className=" css-0"
   id="radio-group-invalidText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalidText
-    </span>
-    <span
+  <legend>
+    invalidText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -616,12 +598,8 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
   className=" css-0"
   id="radio-group-optReq"
 >
-  <legend
-    className=""
-  >
-    <span>
-      no optional or required label
-    </span>
+  <legend>
+    no optional or required label
   </legend>
   <div
     aria-label={null}
@@ -731,17 +709,13 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
   className=" css-0"
   id="radio-group-required"
 >
-  <legend
-    className=""
-  >
-    <span>
-      required
-    </span>
-    <span
+  <legend>
+    required
+    <div
       className="css-0"
     >
-      Required
-    </span>
+      Optional
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -853,17 +827,13 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   className=" css-0"
   id="radio-group-invalid"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalid
-    </span>
-    <span
+  <legend>
+    invalid
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -872,6 +842,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -922,6 +893,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -979,17 +951,13 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   className=" css-0"
   id="radio-group-disabled"
 >
-  <legend
-    className=""
-  >
-    <span>
-      disabled
-    </span>
-    <span
+  <legend>
+    disabled
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -998,6 +966,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}
@@ -1048,6 +1017,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}

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

@@ -2,15 +2,47 @@ 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: "selectName",
+  labelText: "Select a category",
+  optionsData: optionsGroup,
+};
+const textInputProps = {
+  labelText: "Item Search",
+  name: "textInputName",
+  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 +52,154 @@ 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("does not render the default invalid text from the Select or TextInput components", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+        isInvalid
+      />
+    );
+    expect(
+      screen.queryByText("There is an error related to this field.")
+    ).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();
   });
 });