@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/src/components/Slider/Slider.test.tsx

@@ -1,736 +0,0 @@
-import * as React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import renderer from "react-test-renderer";
-
-import Slider from "./Slider";
-
-describe("Slider Accessibility", () => {
-  describe("Single Slider", () => {
-    it("passes axe accessibility test", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    it("passes axe accessibility test without a label", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showLabel={false}
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    it("passes axe accessibility test without visible values", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showValues={false}
-          showBoxes={false}
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-  });
-
-  describe("Range Slider", () => {
-    it("passes axe accessibility test", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRangeSlider
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    it("passes axe accessibility test without a label", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showLabel={false}
-          isRangeSlider
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    it("passes axe accessibility test without visible values", async () => {
-      const { container } = render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showValues={false}
-          showBoxes={false}
-          isRangeSlider
-        />
-      );
-      expect(await axe(container)).toHaveNoViolations();
-    });
-  });
-});
-
-describe("Slider", () => {
-  describe("Single Slider", () => {
-    it("renders a label, two static values, text input, and helper text", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      expect(screen.getByText(/Label/i)).toBeInTheDocument();
-      expect(screen.getByRole("slider")).toBeInTheDocument();
-      // default min and max values
-      expect(screen.getByText("0")).toBeInTheDocument();
-      expect(screen.getByText("100")).toBeInTheDocument();
-      // Default value; this is the role in the slider context.
-      expect(screen.getByRole("spinbutton")).toHaveValue(50);
-      expect(screen.getByText("Component helper text.")).toBeInTheDocument();
-    });
-
-    it("adds the appropriate aria-* attributes to the slider element", () => {
-      render(
-        <Slider
-          id="sliderId"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      const slider = screen.getByRole("slider");
-
-      expect(slider).toHaveAttribute("aria-valuemin", "0");
-      expect(slider).toHaveAttribute("aria-valuemax", "100");
-      expect(slider).toHaveAttribute("aria-valuenow", "50");
-      expect(slider).toHaveAttribute("aria-labelledBy", "sliderId-label");
-    });
-
-    it("renders the '(Required)' text in the label or hides it", () => {
-      const { rerender } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRequired
-        />
-      );
-      expect(screen.getByText(/Required/i)).toBeInTheDocument();
-
-      rerender(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRequired
-          showRequiredLabel={false}
-        />
-      );
-      expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
-    });
-
-    it("hides the label but adds it as an aria-label attribute", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showLabel={false}
-        />
-      );
-
-      expect(screen.queryByText(/Label/i)).not.toBeInTheDocument();
-      expect(screen.getByRole("slider")).toHaveAttribute("aria-label", "Label");
-    });
-
-    it("hides the min/max static values", () => {
-      const { rerender } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          min={25}
-          max={75}
-        />
-      );
-      expect(screen.getByText("25")).toBeInTheDocument();
-      expect(screen.getByText("75")).toBeInTheDocument();
-
-      rerender(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          min={25}
-          max={75}
-          showValues={false}
-        />
-      );
-      expect(screen.queryByText("25")).not.toBeInTheDocument();
-      expect(screen.queryByText("75")).not.toBeInTheDocument();
-    });
-
-    it("hides the current value input box", () => {
-      const { rerender } = render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      expect(screen.getByRole("spinbutton")).toBeInTheDocument();
-      expect(screen.getByRole("spinbutton")).toHaveValue(50);
-
-      rerender(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          showBoxes={false}
-        />
-      );
-      expect(screen.queryByRole("spinbutton")).not.toBeInTheDocument();
-    });
-
-    it("renders the invalid state", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isInvalid
-        />
-      );
-
-      expect(
-        screen.queryByText("Component helper text")
-      ).not.toBeInTheDocument();
-      expect(screen.getByText("Component error text :(")).toBeInTheDocument();
-      expect(screen.getByRole("spinbutton")).toHaveAttribute(
-        "aria-invalid",
-        "true"
-      );
-    });
-
-    it("renders the disabled state", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isDisabled
-        />
-      );
-      expect(screen.getByRole("slider")).toHaveAttribute(
-        "aria-disabled",
-        "true"
-      );
-    });
-
-    it("updates the value through the text input", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, {
-        target: { value: "42" },
-      });
-      expect(input).toHaveValue(42);
-
-      // The max value is 100, so an entered value higher than 100 will
-      // be set to 100.
-      fireEvent.change(input, {
-        target: { value: "12345" },
-      });
-      expect(input).toHaveValue(100);
-    });
-
-    it("doesn't crash if no onChange callback function is passed", () => {
-      let currentValue = 0;
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-        />
-      );
-
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, {
-        target: { value: "42" },
-      });
-      // While we change the slider input value, since there is no onChange
-      // function, there is no way to update this local `currentValue` variable.
-      expect(currentValue).toEqual(0);
-    });
-
-    it("gets the current value through the onChange callback function", () => {
-      let currentValue = 0;
-      function onChange(value: number | number[]) {
-        currentValue = value as number;
-      }
-
-      render(
-        <Slider
-          id="slider"
-          defaultValue={50}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          onChange={onChange}
-        />
-      );
-
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, {
-        target: { value: "42" },
-      });
-      expect(currentValue).toEqual(42);
-
-      fireEvent.change(input, {
-        target: { value: "84" },
-      });
-      expect(currentValue).toEqual(84);
-    });
-
-    it("renders the UI snapshot correctly", () => {
-      const defaultSlider = renderer
-        .create(
-          <Slider
-            id="defaultSlider"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-          />
-        )
-        .toJSON();
-      const errored = renderer
-        .create(
-          <Slider
-            id="errored"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isInvalid
-          />
-        )
-        .toJSON();
-      const required = renderer
-        .create(
-          <Slider
-            id="required"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRequired
-          />
-        )
-        .toJSON();
-      const disabled = renderer
-        .create(
-          <Slider
-            id="disabled"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isDisabled
-          />
-        )
-        .toJSON();
-      const noLabels = renderer
-        .create(
-          <Slider
-            id="noLabels"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            showLabel={false}
-            showHelperInvalidText={false}
-          />
-        )
-        .toJSON();
-      const noVisibleValues = renderer
-        .create(
-          <Slider
-            id="noVisibleValues"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            showValues={false}
-            showBoxes={false}
-          />
-        )
-        .toJSON();
-      const onlySlider = renderer
-        .create(
-          <Slider
-            id="onlySlider"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            showLabel={false}
-            showHelperInvalidText={false}
-            showValues={false}
-            showBoxes={false}
-          />
-        )
-        .toJSON();
-      const withChakraProps = renderer
-        .create(
-          <Slider
-            id="chakra"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            p="20px"
-            color="ui.error.primary"
-          />
-        )
-        .toJSON();
-      const withOtherProps = renderer
-        .create(
-          <Slider
-            id="props"
-            defaultValue={50}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            data-testid="props"
-          />
-        )
-        .toJSON();
-
-      expect(defaultSlider).toMatchSnapshot();
-      expect(errored).toMatchSnapshot();
-      expect(required).toMatchSnapshot();
-      expect(disabled).toMatchSnapshot();
-      expect(noLabels).toMatchSnapshot();
-      expect(noVisibleValues).toMatchSnapshot();
-      expect(onlySlider).toMatchSnapshot();
-      expect(withChakraProps).toMatchSnapshot();
-      expect(withOtherProps).toMatchSnapshot();
-    });
-  });
-
-  describe("Range Slider", () => {
-    it("renders everything from the single but also two text input fields", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRangeSlider
-        />
-      );
-      expect(screen.getByText(/Label/i)).toBeInTheDocument();
-      // The range slider has two sliders!
-      expect(screen.getAllByRole("slider")).toHaveLength(2);
-      // default min and max values
-      expect(screen.getByText("0")).toBeInTheDocument();
-      expect(screen.getByText("100")).toBeInTheDocument();
-      // The range slider has two text inputs.
-      expect(screen.getAllByRole("spinbutton")).toHaveLength(2);
-      expect(screen.getAllByRole("spinbutton")[0]).toHaveValue(25);
-      expect(screen.getAllByRole("spinbutton")[1]).toHaveValue(75);
-      expect(screen.getByText("Component helper text.")).toBeInTheDocument();
-    });
-
-    it("adds the appropriate aria-* attributes to the slider element", () => {
-      render(
-        <Slider
-          id="sliderId"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRangeSlider
-        />
-      );
-      const slider = screen.getAllByRole("slider");
-
-      expect(slider[0]).toHaveAttribute("aria-valuemin", "0");
-      // This is set so the starting thumb can't go past the current end value.
-      expect(slider[0]).toHaveAttribute("aria-valuemax", "75");
-      expect(slider[0]).toHaveAttribute("aria-valuenow", "25");
-      expect(slider[0]).toHaveAttribute("aria-labelledBy", "sliderId-label");
-      // This is set so the ending thumb can't go below the current start value.
-      expect(slider[1]).toHaveAttribute("aria-valuemin", "25");
-      expect(slider[1]).toHaveAttribute("aria-valuemax", "100");
-      expect(slider[1]).toHaveAttribute("aria-valuenow", "75");
-      expect(slider[1]).toHaveAttribute("aria-labelledBy", "sliderId-label");
-    });
-
-    it("hides the label but adds it as an aria-label attribute", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Custom Label"
-          isRangeSlider
-          showLabel={false}
-        />
-      );
-
-      expect(screen.queryByText(/Label/i)).not.toBeInTheDocument();
-      expect(screen.getAllByRole("slider")[0]).toHaveAttribute(
-        "aria-label",
-        "Custom Label - start value"
-      );
-      expect(screen.getAllByRole("slider")[1]).toHaveAttribute(
-        "aria-label",
-        "Custom Label - end value"
-      );
-    });
-
-    it("renders with min and max values as the default values if no `defaultValue` array is passed", () => {
-      render(
-        <Slider
-          id="slider"
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          isRangeSlider
-          labelText="Label"
-          max={80}
-          min={30}
-        />
-      );
-      expect(screen.getByText("30")).toBeInTheDocument();
-      expect(screen.getByText("80")).toBeInTheDocument();
-    });
-
-    it("renders the invalid state if the start and end values are wrong", () => {
-      // The start value is bigger than the end value.
-      render(
-        <Slider
-          id="slider"
-          defaultValue={[75, 25]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRangeSlider
-        />
-      );
-
-      expect(
-        screen.queryByText("Component helper text")
-      ).not.toBeInTheDocument();
-      expect(screen.getByText("Component error text :(")).toBeInTheDocument();
-      expect(screen.getAllByRole("spinbutton")[0]).toHaveAttribute(
-        "aria-invalid",
-        "true"
-      );
-      expect(screen.getAllByRole("spinbutton")[1]).toHaveAttribute(
-        "aria-invalid",
-        "true"
-      );
-    });
-
-    it("updates the value through the text input", () => {
-      render(
-        <Slider
-          id="slider"
-          defaultValue={[25, 75]}
-          helperText="Component helper text."
-          invalidText="Component error text :("
-          labelText="Label"
-          isRangeSlider
-        />
-      );
-      const startingInput = screen.getAllByRole("spinbutton")[0];
-      const endingInput = screen.getAllByRole("spinbutton")[1];
-      fireEvent.change(startingInput, {
-        target: { value: "42" },
-      });
-      fireEvent.change(endingInput, {
-        target: { value: "79" },
-      });
-
-      expect(startingInput).toHaveValue(42);
-      expect(endingInput).toHaveValue(79);
-    });
-
-    it("logs a warning when there is no `id` passed", () => {
-      const warn = jest.spyOn(console, "warn");
-      render(
-        // @ts-ignore: Typescript complains when a required prop is not passed, but
-        // here we don't want to pass the required prop to make sure the warning appears.
-        <Slider labelText="Label" />
-      );
-      expect(warn).toHaveBeenCalledWith(
-        "NYPL Reservoir Slider: This component's required `id` prop was not passed."
-      );
-    });
-
-    it("renders the UI snapshot correctly", () => {
-      const defaultRangeSlider = renderer
-        .create(
-          <Slider
-            id="defaultRangeSlider"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-          />
-        )
-        .toJSON();
-      const errored = renderer
-        .create(
-          <Slider
-            id="errored"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            isInvalid
-          />
-        )
-        .toJSON();
-      const required = renderer
-        .create(
-          <Slider
-            id="required"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            isRequired
-          />
-        )
-        .toJSON();
-      const disabled = renderer
-        .create(
-          <Slider
-            id="disabled"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            isDisabled
-          />
-        )
-        .toJSON();
-      const noLabels = renderer
-        .create(
-          <Slider
-            id="noLabels"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            showLabel={false}
-            showHelperInvalidText={false}
-          />
-        )
-        .toJSON();
-      const noVisibleValues = renderer
-        .create(
-          <Slider
-            id="noVisibleValues"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            showValues={false}
-            showBoxes={false}
-          />
-        )
-        .toJSON();
-      const onlySlider = renderer
-        .create(
-          <Slider
-            id="onlySlider"
-            defaultValue={[25, 75]}
-            helperText="Component helper text."
-            invalidText="Component error text :("
-            labelText="Label"
-            isRangeSlider
-            showLabel={false}
-            showHelperInvalidText={false}
-            showValues={false}
-            showBoxes={false}
-          />
-        )
-        .toJSON();
-
-      expect(defaultRangeSlider).toMatchSnapshot();
-      expect(errored).toMatchSnapshot();
-      expect(required).toMatchSnapshot();
-      expect(disabled).toMatchSnapshot();
-      expect(noLabels).toMatchSnapshot();
-      expect(noVisibleValues).toMatchSnapshot();
-      expect(onlySlider).toMatchSnapshot();
-    });
-  });
-});