@sproutsocial/seeds-react-token-input 1.0.0

package/src/TokenScreenReaderStatus.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useEffect, useRef, useState } from "react";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import type { TypeTokenInputProps } from "./";
+
+function usePrevious(value: TypeTokenInputProps["tokens"]) {
+  const ref = useRef<TypeTokenInputProps["tokens"]>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}
+
+export const TokenScreenReaderStatus = ({
+  tokens,
+}: {
+  tokens: TypeTokenInputProps["tokens"];
+}) => {
+  const prevTokens = usePrevious(tokens);
+  const [tokenStatus, setTokenStatus] = useState("");
+
+  // TODO: Use callbacks so consumers can pass localized messaging to the screen reader
+  useEffect(() => {
+    if (prevTokens && tokens) {
+      if (prevTokens.length > tokens.length) {
+        setTokenStatus(
+          `${
+            prevTokens.filter((item) => tokens.indexOf(item) === -1)[0]?.value
+          } has been removed`
+        );
+      }
+
+      if (prevTokens.length < tokens.length) {
+        setTokenStatus(`${tokens[tokens.length - 1]?.value} has been added.`);
+      }
+    }
+  }, [prevTokens, tokens, tokenStatus]);
+
+  return (
+    <VisuallyHidden as="div" role="status">
+      {tokenStatus}
+    </VisuallyHidden>
+  );
+};

package/src/__tests__/TokenInput.test.tsx

@@ -0,0 +1,672 @@
+/* eslint-disable testing-library/no-render-in-setup */
+import React from "react";
+import {
+  render,
+  screen,
+  type UserEvent,
+} from "@sproutsocial/seeds-react-testing-library";
+import TokenInput from "../TokenInput";
+
+describe("When clicking on...", () => {
+  describe("...a token", () => {
+    test("the token should be removed", async () => {
+      const mockOnAdd = jest.fn();
+      const mockOnRemove = jest.fn();
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          tokens={[
+            {
+              id: "0",
+              value: "you",
+            },
+            {
+              id: "1",
+              value: "are",
+            },
+            {
+              id: "2",
+              value: "beautiful",
+            },
+          ]}
+          onAddToken={mockOnAdd}
+          onRemoveToken={mockOnRemove}
+        />
+      );
+      const token = screen.getByText("are");
+      await user.click(token);
+      const firstArgs = mockOnRemove.mock.calls[0];
+      expect(mockOnRemove).toBeCalledTimes(1);
+      expect(firstArgs).toEqual(["1"]);
+    });
+  });
+});
+
+describe("When deleting...", () => {
+  describe("...in an empty input", () => {
+    it("should do nothing", async () => {
+      const mockCallback = jest.fn();
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          placeholder="Enter text"
+          onRemoveToken={mockCallback}
+        />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, "{backspace}");
+      expect(mockCallback).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe("...in an input with text", () => {
+    it("should delete the last character of text", async () => {
+      const { user } = render(
+        <TokenInput id="0" name="token-input" placeholder="Enter text" />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, "Hello World");
+      await user.type(input, "{backspace}");
+      expect(input).toHaveValue("Hello Worl");
+    });
+  });
+
+  describe("...in an input with at least one token and no text", () => {
+    it("should delete the last token", async () => {
+      const mockCallback = jest.fn();
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          tokens={[
+            {
+              id: "0",
+              value: "you",
+            },
+            {
+              id: "1",
+              value: "are",
+            },
+            {
+              id: "2",
+              value: "beautiful",
+            },
+          ]}
+          placeholder="Enter text"
+          onRemoveToken={mockCallback}
+        />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, "{backspace}");
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+      const result = mockCallback.mock.calls;
+      expect(result[0][0]).toBe("2");
+    });
+  });
+
+  describe("...in an input with at least one token and text", () => {
+    it("should delete all the text and then the token", async () => {
+      const mockCallback = jest.fn();
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          tokens={[
+            {
+              id: "0",
+              value: "you",
+            },
+            {
+              id: "1",
+              value: "are",
+            },
+            {
+              id: "2",
+              value: "beautiful",
+            },
+          ]}
+          placeholder="Enter text"
+          onRemoveToken={mockCallback}
+        />
+      );
+      const input = screen.getByPlaceholderText(
+        "Enter text"
+      ) as HTMLInputElement;
+      await user.type(input, "william");
+      input.setSelectionRange(0, input.value.length);
+      await user.keyboard("{backspace}");
+      expect(input).toHaveValue("");
+      expect(mockCallback).toHaveBeenCalledTimes(0);
+      const result = mockCallback.mock.calls;
+      await user.keyboard("{backspace}");
+      expect(result[0][0]).toBe("2");
+    });
+  });
+});
+
+describe("When tabbing...", () => {
+  describe("...the tokens", () => {
+    it("should be focused", async () => {
+      const { user } = render(
+        <TokenInput
+          id="0"
+          placeholder="Please enter a value..."
+          name="token-input"
+          tokens={[
+            {
+              id: "0",
+              value: "you",
+            },
+            {
+              id: "1",
+              value: "are",
+            },
+            {
+              id: "2",
+              value: "beautiful",
+            },
+          ]}
+        />
+      );
+      const input = screen.getByPlaceholderText("Please enter a value...");
+      await user.click(input);
+      await user.tab({
+        shift: true,
+      });
+      expect(screen.getByText("beautiful").closest("button")).toHaveFocus();
+      await user.tab({
+        shift: true,
+      });
+      expect(screen.getByText("are").closest("button")).toHaveFocus();
+      await user.tab();
+      expect(screen.getByText("beautiful").closest("button")).toHaveFocus();
+    });
+  });
+});
+
+describe("When inputting...", () => {
+  describe("...simple text into an empty input", () => {
+    it("should add characters to the input", async () => {
+      const { user } = render(
+        <TokenInput id="0" name="token-input" placeholder="Enter text" />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, "Hello world!");
+      expect(input).toHaveValue("Hello world!");
+    });
+  });
+
+  describe("...a delimiter into an empty input", () => {
+    it("should add a value, if it's printable", async () => {
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          delimiters={[".", "Enter"]}
+          placeholder="Enter text"
+        />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, ".");
+      expect(input).toHaveValue(".");
+    });
+  });
+
+  describe("...a delimiter into an input with a value", () => {
+    it("should add a token rather than a value", async () => {
+      const mockCallback = jest.fn();
+      const { user } = render(
+        <TokenInput
+          id="0"
+          name="token-input"
+          value=","
+          placeholder="Enter text"
+          onAddToken={mockCallback}
+        />
+      );
+      const input = screen.getByPlaceholderText("Enter text");
+      await user.type(input, ",");
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe("When pasting...", () => {
+  let mockHandleAdd: jest.Mock<any, any, any>;
+  let mockHandleRemove:
+    | jest.Mock<any, any, any>
+    | ((tokenId: string) => void)
+    | undefined;
+  let mockHandleChange:
+    | jest.Mock<any, any, any>
+    | ((e: React.SyntheticEvent<HTMLInputElement>, value: string) => void)
+    | undefined;
+  let mockHandlePaste:
+    | jest.Mock<any, any, any>
+    | ((e: React.ClipboardEvent<HTMLInputElement>, value: string) => void)
+    | undefined;
+  let tokenInput;
+  let input: HTMLElement;
+  let user: UserEvent;
+
+  describe("...with no tokens...", () => {
+    beforeEach(() => {
+      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
+      mockHandleAdd = jest.fn();
+      mockHandleRemove = jest.fn();
+      mockHandleChange = jest.fn();
+      mockHandlePaste = jest.fn();
+      tokenInput = (
+        <TokenInput
+          id="0"
+          name="token-input"
+          placeholder="Enter text"
+          onAddToken={mockHandleAdd}
+          onRemoveToken={mockHandleRemove}
+          onChange={mockHandleChange}
+          onPaste={mockHandlePaste}
+        />
+      );
+      const { user: userEvents } = render(tokenInput);
+      user = userEvents;
+      input = screen.getByPlaceholderText("Enter text") as HTMLInputElement;
+    });
+
+    describe("...simple text into an empty input", () => {
+      it("should insert the simple text", async () => {
+        expect(input).toHaveValue("");
+        await user.click(input);
+        await user.paste("Hello world");
+        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleChange).toHaveBeenCalledTimes(1);
+        if (jest.isMockFunction(mockHandleChange)) {
+          expect(mockHandleChange.mock.calls[0][1]).toBe("Hello world");
+        }
+      });
+    });
+
+    describe("...a delimiter into an empty input", () => {
+      it("shouldn't add anything... with a ','", async () => {
+        await user.click(input);
+        await user.paste(",");
+        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+      });
+      it("shouldn't add anything... with an 'new-line'", async () => {
+        await user.click(input);
+        await user.paste("\n");
+        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe("...delimited text into an empty input", () => {
+      it("should add tokens", async () => {
+        expect(input).toHaveValue("");
+        await user.click(input);
+        await user.paste("one, two, three");
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleAdd).toHaveBeenCalledTimes(3);
+        expect(mockHandlePaste).toHaveBeenCalledTimes(1);
+        if (jest.isMockFunction(mockHandlePaste)) {
+          expect(mockHandlePaste.mock.calls[0][1]).toBe("one, two, three");
+        }
+        // onChange seems to not be called with delimited text value, possibly because of the preventDefault used
+        // expect(mockHandleChange).toHaveBeenCalledTimes(1);
+        // expect(mockHandleChange.mock.calls[0][1]).toBe("one, two, three");
+        if (jest.isMockFunction(mockHandleAdd)) {
+          const tokenSpec1 = (mockHandleAdd as jest.Mock).mock.calls[0][0];
+          const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
+          const tokenSpec3 = mockHandleAdd.mock.calls[2][0];
+          expect(tokenSpec1).toEqual(
+            expect.objectContaining({
+              id: expect.any(String),
+              value: "one",
+            })
+          );
+          expect(tokenSpec2).toEqual(
+            expect.objectContaining({
+              id: expect.any(String),
+              value: "two",
+            })
+          );
+          expect(tokenSpec3).toEqual(
+            expect.objectContaining({
+              id: expect.any(String),
+              value: "three",
+            })
+          );
+        }
+      });
+    });
+
+    describe("...simple text into an input with text", () => {
+      it("should simply paste the text", async () => {
+        const preText = "4321!";
+        const pasteText = "hello world";
+        await user.type(input, preText);
+        await user.click(input);
+        await user.paste(pasteText);
+        expect(mockHandleAdd).toHaveBeenCalledTimes(0);
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleChange).toHaveBeenCalledTimes(6);
+      });
+    });
+  });
+
+  describe("...with text...", () => {
+    beforeEach(() => {
+      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
+      mockHandleAdd = jest.fn();
+      mockHandleRemove = jest.fn();
+      tokenInput = (
+        <TokenInput
+          id="0"
+          name="token-input"
+          placeholder="Enter text"
+          value="Pre Text!"
+          onAddToken={mockHandleAdd}
+          onRemoveToken={mockHandleRemove}
+        />
+      );
+      const { user: userEvents } = render(tokenInput);
+      user = userEvents;
+      input = screen.getByPlaceholderText("Enter text");
+    });
+
+    describe("...delimited text into an input with text", () => {
+      it("should make new tokens from the pasted text", async () => {
+        await user.click(input);
+        await user.paste("this, that");
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleAdd).toHaveBeenCalledTimes(2);
+        const tokenSpec1 = mockHandleAdd.mock.calls[0][0];
+        const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
+        expect(tokenSpec1).toEqual(
+          expect.objectContaining({
+            id: expect.any(String),
+            value: "this",
+          })
+        );
+        expect(tokenSpec2).toEqual(
+          expect.objectContaining({
+            id: expect.any(String),
+            value: "that",
+          })
+        );
+      });
+    });
+  });
+
+  describe("...with tokens...", () => {
+    beforeEach(() => {
+      // TokenInput is a stateless component, so the value managed in state is cleared in the wrapper.
+      mockHandleAdd = jest.fn();
+      mockHandleRemove = jest.fn();
+      tokenInput = (
+        <TokenInput
+          id="0"
+          name="token-input"
+          placeholder="Enter text"
+          tokens={[
+            {
+              id: "1",
+              value: "one",
+            },
+            {
+              id: "2",
+              value: "two",
+            },
+            {
+              id: "3",
+              value: "three",
+            },
+          ]}
+          onAddToken={mockHandleAdd}
+          onRemoveToken={mockHandleRemove}
+        />
+      );
+      const { user: userEvents } = render(tokenInput);
+      user = userEvents;
+      input = screen.getByPlaceholderText("Enter text");
+    });
+
+    describe("...simple text after one or more tokens", () => {
+      it("simply paste the text", async () => {
+        await user.click(input);
+        await user.paste("Hello world");
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleAdd).toHaveBeenCalledTimes(0); // expect(mockHandleChange.mock.calls[0][1]).toBe("Hello world");
+      });
+    });
+
+    describe("...delimited text after one or more tokens", () => {
+      it("should add multiple new tokens", async () => {
+        await user.click(input);
+        await user.paste("this, that");
+        expect(mockHandleRemove).toHaveBeenCalledTimes(0);
+        expect(mockHandleAdd).toHaveBeenCalledTimes(2);
+        // expect(mockHandleChange.mock.calls[0][1]).toBe("this, that");
+        const tokenSpec1 = mockHandleAdd.mock.calls[0][0];
+        const tokenSpec2 = mockHandleAdd.mock.calls[1][0];
+        expect(tokenSpec1).toEqual(
+          expect.objectContaining({
+            id: expect.any(String),
+            value: "this",
+          })
+        );
+        expect(tokenSpec2).toEqual(
+          expect.objectContaining({
+            id: expect.any(String),
+            value: "that",
+          })
+        );
+      });
+    });
+  });
+});
+
+describe("When rendering...", () => {
+  it("should render disabled status correctly", () => {
+    render(
+      <TokenInput
+        id="0"
+        placeholder="Please enter a value..."
+        name="token-input"
+        tokens={[
+          {
+            id: "0",
+            value: "you",
+          },
+          {
+            id: "1",
+            value: "are",
+          },
+          {
+            id: "2",
+            value: "beautiful",
+          },
+        ]}
+        disabled
+      />
+    );
+    expect(
+      screen.getByDataQaLabel({
+        "input-isdisabled": true,
+      })
+    ).toBeTruthy();
+  });
+
+  it("should render before and after elements", () => {
+    render(
+      <TokenInput
+        elemAfter={<p>After</p>}
+        elemBefore={<p>Before</p>}
+        id="name"
+        name="name"
+        value="User"
+      />
+    );
+    expect(screen.getByText("Before")).toBeInTheDocument();
+    expect(screen.getByText("After")).toBeInTheDocument();
+  });
+
+  describe("...the isInvalid prop", () => {
+    it.each([true, "foobar", 1])(
+      "should correctly set aria-invalid to true for truthy values: %p",
+      (truthyValue) => {
+        render(
+          <TokenInput id="name" name="name" isInvalid={Boolean(truthyValue)} />
+        );
+        expect(
+          screen.getByDataQaLabel({
+            input: "name",
+          })
+        ).toHaveAttribute("aria-invalid", "true");
+      }
+    );
+
+    it.each([false, null, undefined, 0])(
+      "should correctly set aria-invalid to false for falsy values: %p",
+      (truthyValue) => {
+        render(
+          <TokenInput id="name" name="name" isInvalid={Boolean(truthyValue)} />
+        );
+        expect(
+          screen.getByDataQaLabel({
+            input: "name",
+          })
+        ).toHaveAttribute("aria-invalid", "false");
+      }
+    );
+  });
+
+  describe("...tokens", () => {
+    it("should render tokens in container", () => {
+      render(
+        <TokenInput
+          id="name"
+          name="name"
+          value="User"
+          tokens={[
+            {
+              id: "0",
+              value: "han",
+            },
+            {
+              id: "1",
+              value: "solo",
+            },
+          ]}
+        />
+      );
+      expect(screen.getByText("han")).toBeInTheDocument();
+      expect(screen.getByText("solo")).toBeInTheDocument();
+    });
+
+    it("should render tokens with icons", () => {
+      render(
+        <TokenInput
+          id="name"
+          iconName="lock-outline"
+          name="name"
+          value="User"
+          tokens={[
+            {
+              id: "0",
+              value: "han",
+            },
+            {
+              id: "1",
+              value: "solo",
+            },
+          ]}
+        />
+      );
+      expect(
+        screen.getAllByDataQaLabel({
+          icon: "lock-outline",
+        }).length
+      ).toBe(2);
+    });
+
+    it("should render tokens with individual icons", () => {
+      render(
+        <TokenInput
+          id="name"
+          name="name"
+          value="User"
+          tokens={[
+            {
+              id: "0",
+              value: "han",
+            },
+            {
+              id: "1",
+              iconName: "sun-outline",
+              value: "solo",
+            },
+            {
+              id: "2",
+              iconName: "sun-outline",
+              value: "darth",
+            },
+            {
+              id: "3",
+              value: "vader",
+            },
+          ]}
+        />
+      );
+      expect(
+        screen.getAllByDataQaLabel({
+          icon: "sun-outline",
+        }).length
+      ).toBe(2);
+    });
+
+    it("should render tokens with individual icons and fallback icon", () => {
+      render(
+        <TokenInput
+          id="name"
+          iconName="lock-outline"
+          name="name"
+          value="User"
+          tokens={[
+            {
+              id: "0",
+              value: "han",
+            },
+            {
+              id: "1",
+              iconName: "sun-outline",
+              value: "solo",
+            },
+            {
+              id: "2",
+              iconName: "sun-outline",
+              value: "darth",
+            },
+            {
+              id: "3",
+              value: "vader",
+            },
+          ]}
+        />
+      );
+      expect(
+        screen.getAllByDataQaLabel({
+          icon: "lock-outline",
+        }).length
+      ).toBe(2);
+      expect(
+        screen.getAllByDataQaLabel({
+          icon: "sun-outline",
+        }).length
+      ).toBe(2);
+    });
+  });
+});