From 2e6fc86d12c1edd8846dc34a7984033188563cf2 Mon Sep 17 00:00:00 2001
From: Anurag Hazra <hazru.anurag@gmail.com>
Date: Tue, 15 Sep 2020 12:46:53 +0530
Subject: [PATCH] test: improved toast tests (#41)

* test: jest testing setup

* test: fixed jest typescript definitions

* fix: test script

* chore(deps): move deps to dev

* test: added tests for accordion

* test: added husky precommit test

* test: axe container test

* chore(infra): added github action test

* test: added tests for number input

* fix: a11y aria-valuetext issue with NumberInput

* test: added tests for Slider

* test: added tests for progress

* test: added tests for link

* test: added tests for breadcrumb

* test: added tests for pagination

* test: added tests for toast

* chore(deps): remove unused raf

* test: improved & fixed toast tests

* test: fixed warning on toast tests
---
 src/toast/__tests__/Toast.test.tsx | 62 ++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/toast/__tests__/Toast.test.tsx b/src/toast/__tests__/Toast.test.tsx
index ba9910f1e..54e448445 100644
--- a/src/toast/__tests__/Toast.test.tsx
+++ b/src/toast/__tests__/Toast.test.tsx
@@ -1,9 +1,22 @@
 import * as React from "react";
 import { axe } from "jest-axe";
-import { render } from "reakit-test-utils";
+import { render, act, click } 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();
 
@@ -57,8 +70,15 @@ const ToastComp: React.FC = () => {
       toastTypes={{
         error: ({ remove, content, id }) => {
           return (
-            <div className="toast" style={{ backgroundColor: "#f02c2d" }}>
-              {content} <button onClick={() => remove(id)}>x</button>
+            <div
+              data-testid="error"
+              className="toast"
+              style={{ backgroundColor: "#f02c2d" }}
+            >
+              {content}{" "}
+              <button data-testid="error-close" onClick={() => remove(id)}>
+                x
+              </button>
             </div>
           );
         },
@@ -109,6 +129,42 @@ describe("Toast", () => {
     `);
   });
 
+  it("toast should popup to the screen after click", () => {
+    const { getByText: text, getByTestId: id } = render(<ToastComp />);
+
+    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,
+      getByTestId: getId,
+      queryByTestId: queryId,
+    } = render(<ToastComp />);
+
+    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);