Merge pull request #17 from nhanluongoe/test/setup-test

Test/setup test

package.json

@@ -81,8 +81,10 @@
     "@storybook/react": "7.6.6",
     "@storybook/react-webpack5": "7.6.6",
     "@storybook/testing-library": "0.2.2",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "20.10.5",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.18",

src/core/use-toast.ts

@@ -81,6 +81,12 @@ toast.promise = <T>(
   return promise;
 };
 
+toast.remove = () => {
+  dispatch({
+    type: 'REMOVE_TOAST',
+  });
+};
+
 toast.dismiss = (toastId?: string) => {
   dispatch({
     type: 'DISMISS_TOAST',

tests/Toast.test.tsx

@@ -0,0 +1,119 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import toast, { Toaster } from '../src';
+
+beforeEach(() => {
+  toast.remove();
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  act(() => {
+    vi.runAllTimers();
+    vi.useRealTimers();
+  });
+});
+
+it('renders success toast correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.success({ title: 'Success!' });
+  });
+
+  expect(screen.getByText(/success/i)).toBeInTheDocument();
+});
+
+it('renders error toast correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.error({ title: 'Error!' });
+  });
+
+  expect(screen.getByText(/error/i)).toBeInTheDocument();
+});
+
+it('renders warning toast correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.warning({ title: 'Warning!' });
+  });
+
+  expect(screen.getByText(/warning/i)).toBeInTheDocument();
+});
+
+it('renders loading toast correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.loading({ title: 'Loading' });
+  });
+
+  expect(screen.getByText(/loading/i)).toBeInTheDocument();
+});
+
+it('renders stacked toasts correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.success({ title: 'Success!' });
+    toast.error({ title: 'Error!' });
+    toast.warning({ title: 'Warning!' });
+  });
+
+  expect(screen.getByText(/success/i)).toBeInTheDocument();
+  expect(screen.getByText(/error/i)).toBeInTheDocument();
+  expect(screen.getByText(/warning/i)).toBeInTheDocument();
+});
+
+it('renders only 3 toasts stacking correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast.success({ title: 'Success!' });
+    toast.error({ title: 'Error!' });
+    toast.warning({ title: 'Warning!' });
+    toast.loading({ title: 'Loading' });
+  });
+
+  expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  expect(screen.getByText(/error/i)).toBeInTheDocument();
+  expect(screen.getByText(/warning/i)).toBeInTheDocument();
+  expect(screen.queryByText(/success/i)).not.toBeInTheDocument();
+});
+
+it('renders toasts with custom icon correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast({ title: 'Success!', icon: <div>👍</div> });
+  });
+
+  expect(screen.getByText(/👍/i)).toBeInTheDocument();
+});
+
+it('pause toasts correctly', () => {
+  render(<Toaster />);
+
+  act(() => {
+    toast({ title: 'hover' });
+  });
+
+  const toastElement = screen.getByText(/hover/i);
+  expect(toastElement).toBeInTheDocument();
+
+  fireEvent.mouseEnter(toastElement);
+  act(() => {
+    vi.advanceTimersByTime(60 * 1000);
+  });
+  expect(toastElement).toBeInTheDocument();
+
+  fireEvent.mouseLeave(toastElement);
+  act(() => {
+    vi.advanceTimersByTime(5 * 1000);
+  });
+  expect(toastElement).not.toBeInTheDocument();
+});

tests/setup.js → tests/setup.ts

@@ -1,6 +1,10 @@
-import { expect, afterEach } from 'vitest';
-import { cleanup } from '@testing-library/react';
+/// <reference types="vitest" />
+
+import '@testing-library/jest-dom';
 import * as matchers from '@testing-library/jest-dom/matchers';
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
 
 expect.extend(matchers);
 

tsconfig.json

@@ -1,15 +1,18 @@
 {
   "compilerOptions": {
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["dom", "esnext"],
     "declaration": true,
     "sourceMap": true,
     "module": "ESNext",
     "moduleResolution": "node",
     "skipLibCheck": true,
     "strict": true,
-    "noEmit": true
+    "noEmit": true,
+    "types": ["@testing-library/jest-dom"],
+    "rootDir": "./src"
   },
-  "exclude": ["./site"]
+  "include": ["src", "types", "test"],
+  "exclude": ["./site", "**/*.stories.tsx"]
 }

vitest.config.js

@@ -5,8 +5,9 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react()],
   test: {
+    globals: true,
     environment: 'jsdom',
-    setupFiles: './tests/setup.js',
+    setupFiles: './tests/setup.ts',
     passWithNoTests: true,
   },
 });

yarn.lock

@@ -4116,6 +4116,20 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@testing-library/dom@^9.3.4":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
+  integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.1.3"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    pretty-format "^27.0.2"
+
 "@testing-library/jest-dom@^6.0.0":
   version "6.1.6"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.6.tgz#d9a3ce61cd74ea792622d3da78a830f6786e8d93"
@@ -4144,6 +4158,11 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
   integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
 
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
 "@tootallnate/quickjs-emscripten@^0.23.0":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz#db4ecfd499a9765ab24002c3b696d02e6d32a12c"