adaptui · anuraghazra · Sep 15, 2020 · Sep 7, 2020 · Sep 7, 2020 · Sep 8, 2020
diff --git a/src/toast/ToastProvider.tsx b/src/toast/ToastProvider.tsx
@@ -5,7 +5,7 @@ import { createContext } from "@chakra-ui/utils";
 
 import { ToastStateReturn } from "./ToastState";
 import { ToastController } from "./ToastController";
-import useToastState, { IToast } from "./ToastState";
+import { useToastState, IToast } from "./ToastState";
 
 const DEFAULT_TIMEOUT = 5000;
 const PLACEMENTS = {

diff --git a/src/toast/ToastState.ts b/src/toast/ToastState.ts
@@ -27,7 +27,7 @@ interface ToastStateProps {
   animationTimeout?: number;
 }
 
-const useToastState = ({ animationTimeout = 0 }: ToastStateProps) => {
+export const useToastState = ({ animationTimeout = 0 }: ToastStateProps) => {
   const [toasts, setToasts] = React.useState<ToastList>({});
 
   // toggle can be used to just hide/show the toast instead of removing it.
@@ -140,5 +140,3 @@ const useToastState = ({ animationTimeout = 0 }: ToastStateProps) => {
 };
 
 export type ToastStateReturn = ReturnType<typeof useToastState>;
-
-export default useToastState;
diff --git a/src/toast/__tests__/Toast.test.tsx b/src/toast/__tests__/Toast.test.tsx
@@ -0,0 +1,178 @@
+import * as React from "react";
+import { axe } from "jest-axe";
+import { render, click, act } from "reakit-test-utils";
+
+import { useToast, ToastProvider } from "..";
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest
+    .spyOn(window, "requestAnimationFrame")
+    .mockImplementation((cb: any) => cb());
+  jest.spyOn(window, "setTimeout").mockImplementation((cb: any) => cb());
+});
+
+afterEach(() => {
+  (window.requestAnimationFrame as any).mockRestore();
+  (window.setTimeout as any).mockRestore();
+});
+
+const Demo = () => {
+  const { show } = useToast();
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          show({
+            type: "error",
+            content: "This is error",
+          });
+        }}
+      >
+        Error
+      </button>
+      <button
+        onClick={() => {
+          show({ type: "success", content: "This is success" });
+        }}
+      >
+        Success
+      </button>
+      <button
+        onClick={() => {
+          show({ type: "warning", content: "This is warning" });
+        }}
+      >
+        Warning
+      </button>
+      <button
+        onClick={() => {
+          show({
+            content: () => (
+              <p style={{ fontFamily: "Impact", color: "black" }}>
+                This is Custom
+              </p>
+            ),
+          });
+        }}
+      >
+        Custom
+      </button>
+    </div>
+  );
+};
+
+const ToastComp: React.FC = () => {
+  return (
+    <ToastProvider
+      placement="bottom-center"
+      toastTypes={{
+        error: ({ remove, content, id }) => {
+          return (
+            <div
+              data-testid="error"
+              className="toast"
+              style={{ backgroundColor: "#f02c2d" }}
+            >
+              {content}{" "}
+              <button data-testid="error-close" onClick={() => remove(id)}>
+                x
+              </button>
+            </div>
+          );
+        },
+        success: ({ remove, content, id }) => {
+          return (
+            <div className="toast" style={{ backgroundColor: "#01c24e" }}>
+              {content} <button onClick={() => remove(id)}>x</button>
+            </div>
+          );
+        },
+        warning: ({ remove, content, id }) => {
+          return (
+            <div className="toast" style={{ backgroundColor: "#ef5013" }}>
+              {content} <button onClick={() => remove(id)}>x</button>
+            </div>
+          );
+        },
+      }}
+    >
+      <Demo />
+    </ToastProvider>
+  );
+};
+
+describe("Toast", () => {
+  it("should render correctly", () => {
+    const { baseElement } = render(<ToastComp />, {
+      container: document.body,
+    });
+
+    expect(baseElement).toMatchInlineSnapshot(`
+      <body>
+        <div>
+          <button>
+            Error
+          </button>
+          <button>
+            Success
+          </button>
+          <button>
+            Warning
+          </button>
+          <button>
+            Custom
+          </button>
+        </div>
+      </body>
+    `);
+  });
+
+  it("toast should popup to the screen after click", () => {
+    const { getByText: text, getByTestId: id } = render(<ToastComp />, {
+      container: document.body,
+    });
+
+    expect(text("Error")).toBeInTheDocument();
+
+    act(() => {
+      click(text("Error"));
+    });
+
+    expect(id("error")).toHaveTextContent("This is error");
+  });
+
+  it("should be removed after clicking close button", () => {
+    const {
+      getByText: text,
+      queryByTestId: queryId,
+      getByTestId: getId,
+    } = render(<ToastComp />, {
+      container: document.body,
+    });
+
+    expect(text("Error")).toBeInTheDocument();
+
+    // add first
+    act(() => {
+      click(text("Error"));
+    });
+
+    expect(getId("error")).toHaveTextContent("This is error");
+
+    // let remove now
+    act(() => {
+      click(getId("error-close"));
+    });
+
+    expect(queryId("error")).not.toBeInTheDocument();
+  });
+
+  test("Toast renders with no a11y violations", async () => {
+    const { container } = render(<ToastComp />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});
diff --git a/src/toast/__tests__/ToastState.test.ts b/src/toast/__tests__/ToastState.test.ts
@@ -0,0 +1,174 @@
+import { wait } from "reakit-test-utils";
+import { renderHook, act } from "@testing-library/react-hooks";
+
+import { useToastState } from "..";
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest
+    .spyOn(window, "requestAnimationFrame")
+    .mockImplementation((cb: any) => cb());
+});
+
+afterEach(() => {
+  (window.requestAnimationFrame as any).mockRestore();
+});
+
+describe("ToastState", () => {
+  it("should render correctly", () => {
+    const state = renderHook(() => useToastState({})).result;
+
+    expect(state.current).toMatchInlineSnapshot(`
+      Object {
+        "getToastToRender": [Function],
+        "hide": [Function],
+        "remove": [Function],
+        "setToasts": [Function],
+        "show": [Function],
+        "toasts": Object {},
+        "toggle": [Function],
+      }
+    `);
+  });
+
+  it("should add a new toast", () => {
+    const { result } = renderHook(() => useToastState({}));
+
+    expect(result.current.toasts).toStrictEqual({});
+
+    act(() => {
+      result.current.show({ type: "primary", content: "Hello world" });
+    });
+    expect(Object.values(result.current.toasts)).toMatchObject([
+      {
+        autoDismiss: undefined,
+        content: "Hello world",
+        isVisible: true,
+        placement: undefined,
+        timeout: undefined,
+        type: "primary",
+      },
+    ]);
+  });
+
+  it("should toggle toast", () => {
+    const { result } = renderHook(() => useToastState({}));
+
+    expect(result.current.toasts).toStrictEqual({});
+
+    act(() => {
+      result.current.show({ type: "primary", content: "Hello world" });
+    });
+
+    const id = Object.values(result.current.toasts)[0].id;
+
+    act(() => {
+      result.current.toggle({ id, isVisible: false });
+    });
+    expect(result.current.toasts[id]).toMatchObject({ isVisible: false });
+  });
+
+  it("should remove toast", () => {
+    const { result } = renderHook(() => useToastState({}));
+
+    expect(result.current.toasts).toStrictEqual({});
+
+    act(() => {
+      result.current.show({ type: "primary", content: "Hello world" });
+    });
+    expect(Object.values(result.current.toasts)).toHaveLength(1);
+    const id = Object.values(result.current.toasts)[0].id;
+
+    act(() => {
+      result.current.remove(id);
+    });
+    expect(result.current.toasts).toStrictEqual({});
+  });
+
+  it("should hide toast", () => {
+    const { result } = renderHook(() => useToastState({ animationTimeout: 5 }));
+    let id = "";
+
+    expect(result.current.toasts).toStrictEqual({});
+
+    act(() => {
+      result.current.show({ type: "primary", content: "Hello world" });
+    });
+    expect(Object.values(result.current.toasts)).toHaveLength(1);
+    id = Object.values(result.current.toasts)[0].id;
+
+    act(() => {
+      result.current.hide(id);
+    });
+    expect(Object.values(result.current.toasts)).toMatchObject([
+      {
+        autoDismiss: undefined,
+        content: "Hello world",
+        isVisible: false,
+        placement: undefined,
+        timeout: undefined,
+        type: "primary",
+      },
+    ]);
+
+    // Wait for animation timeout and after that toast should be removed
+    wait(
+      () => {
+        expect(result.current.toasts).toStrictEqual({});
+      },
+      { timeout: 5 },
+    );
+  });
+
+  it("should test getToastToRender", () => {
+    const { result } = renderHook(() => useToastState({}));
+
+    expect(result.current.toasts).toStrictEqual({});
+
+    act(() => {
+      result.current.show({
+        type: "primary",
+        placement: "top-center",
+        content: "Hello world 1",
+      });
+      result.current.show({
+        type: "primary",
+        placement: "bottom-center",
+        content: "Hello world 2",
+      });
+      result.current.show({
+        type: "primary",
+        placement: "bottom-left",
+        content: "Hello world 3",
+      });
+      result.current.show({
+        type: "primary",
+        placement: "bottom-left",
+        content: "Hello world 4",
+      });
+      result.current.show({
+        type: "primary",
+        placement: "top-right",
+        content: "Hello world 5",
+      });
+    });
+
+    const allPositions: any[] = [];
+    result.current.getToastToRender("bottom-center", (pos, toastList) => {
+      allPositions.push(toastList);
+    });
+    expect(allPositions[0]).toHaveLength(1);
+    expect(allPositions[1]).toHaveLength(1);
+    expect(allPositions[2]).toHaveLength(2);
+    expect(allPositions[3]).toHaveLength(1);
+
+    expect(allPositions[2][0]).toMatchObject({
+      content: "Hello world 3",
+      placement: "bottom-left",
+    });
+    expect(allPositions[2][1]).toMatchObject({
+      content: "Hello world 4",
+      placement: "bottom-left",
+    });
+  });
+});