add test case

Author: imagine10255

.github/workflows/deploy.yml

@@ -1,27 +1,62 @@
 name: Test on Release
 
 on:
-  release:
-    types: [published]
   push:
+    branches:
+      - '**'
     tags:
-      - 'v*'
+      - 'v[0-9]+.[0-9]+.[0-9]+'
 
 jobs:
   test:
+    if: github.ref_type == 'branch'
     runs-on: ubuntu-latest
-    
+
     steps:
       - uses: actions/checkout@v3
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'yarn'
-          
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile
-        
+
       - name: Run tests
-        run: yarn test 
+        run: yarn test
+
+  deploy:
+      if: startsWith(github.ref, 'refs/tags/v')
+      runs-on: ubuntu-latest
+
+      defaults:
+          run:
+              working-directory: ./example
+
+      steps:
+          - name: Checkout repository
+            uses: actions/checkout@v3
+
+          - name: Wait for npm publish
+            run: sleep 30  # 延遲30秒，可根據實際情況調整
+
+          - name: Set up Node.js
+            uses: actions/setup-node@v3
+            with:
+                node-version: '20'
+
+          - name: Replace local links with actual versions
+            run: |
+                sed -i 's#"@acrool/react-toaster": "link:.."#"@acrool/react-toaster": "latest"#' package.json
+                sed -i 's#"react": "link:../node_modules/react"#"react": "^19.1.0"#' package.json
+                sed -i 's#"react-dom": "link:../node_modules/react-dom"#"react-dom": "^19.1.0"#' package.json
+
+          - name: Install dependencies
+            run: yarn install
+
+          - name: Build Storybook & Deploy to Cloudflare Pages
+            run: yarn pages:deploy
+            env:
+                CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/test-on-release.yml

@@ -2,7 +2,7 @@ export default {
     coverageDirectory: 'coverage',
     preset: 'ts-jest',
     testEnvironment: 'jsdom',
-    testMatch: ['<rootDir>/**/*.spec.ts?(x)'],
+    testMatch: ['<rootDir>/**/*.test.ts?(x)'],
     transform: {
         '^.+\\.(t|j)sx?$': [
             '@swc/jest',
@@ -20,7 +20,12 @@ export default {
     moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/src/$1',
         '\\.(css|scss)$': 'identity-obj-proxy',
+        "\\.svg\\?(react|url)$": "<rootDir>/src/__mocks__/svgMock.tsx"
+
     },
+    transformIgnorePatterns: [
+        '/node_modules/(?!@acrool/react-portal)'
+    ],
     setupFilesAfterEnv: ['@testing-library/jest-dom'],
 };
 

jest.config.mjs

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+
+import {act,render, screen, waitFor} from '@testing-library/react';
+import React from 'react';
+
+import Toaster, {toast} from './Toaster';
+
+jest.useFakeTimers();
+
+describe('Toaster', () => {
+    beforeEach(() => {
+        // 渲染 Toaster 元件到 document.body
+        render(<Toaster />);
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+    });
+
+    it('應該能顯示訊息', () => {
+        act(() => {
+            toast.success('成功訊息');
+        });
+        expect(screen.getByText('成功訊息')).toBeInTheDocument();
+    });
+
+    it('應該能根據狀態顯示多種訊息', () => {
+        act(() => {
+            toast.success('成功訊息');
+            toast.error('錯誤訊息');
+            toast.info('資訊訊息');
+            toast.warning('警告訊息');
+        });
+        expect(screen.getByText('成功訊息')).toBeInTheDocument();
+        expect(screen.getByText('錯誤訊息')).toBeInTheDocument();
+        expect(screen.getByText('資訊訊息')).toBeInTheDocument();
+        expect(screen.getByText('警告訊息')).toBeInTheDocument();
+    });
+
+    it('應該能自動隱藏訊息', async () => {
+        act(() => {
+            toast.success('自動消失訊息', {timeout: 1000});
+        });
+        expect(screen.getByText('自動消失訊息')).toBeInTheDocument();
+        act(() => {
+            jest.advanceTimersByTime(1000);
+        });
+        await waitFor(() => {
+            expect(screen.queryByText('自動消失訊息')).not.toBeInTheDocument();
+        });
+    });
+
+    it('超過限制時，最舊的訊息會被移除', () => {
+        act(() => {
+            for(let i=1; i<=6; i++){
+                toast.success(`訊息${i}`);
+            }
+        });
+        // 預設 limit=5，訊息1 應該被移除
+        expect(screen.queryByText('訊息1')).not.toBeInTheDocument();
+        for(let i=2; i<=6; i++){
+            expect(screen.getByText(`訊息${i}`)).toBeInTheDocument();
+        }
+    });
+
+    it('點擊訊息可手動關閉', async () => {
+        act(() => {
+            toast.success('可點擊關閉訊息');
+        });
+        const msg = screen.getByText('可點擊關閉訊息');
+        act(() => {
+            msg.click();
+        });
+        await waitFor(() => {
+            expect(screen.queryByText('可點擊關閉訊息')).not.toBeInTheDocument();
+        });
+    });
+});

src/Toaster.test.tsx

@@ -0,0 +1,9 @@
+const SvgMock = (props: any) => {
+    return (
+        <svg {...props}>
+            <title>Mock SVG</title>
+        </svg>
+    );
+};
+
+export default SvgMock;

src/__mocks__/svgMock.tsx

@@ -0,0 +1,25 @@
+import {removeByIndex} from './utils';
+
+describe('removeByIndex', () => {
+    it('應正確移除指定索引的元素', () => {
+        expect(removeByIndex([1, 2, 3], 1)).toEqual([1, 3]);
+        expect(removeByIndex(['a', 'b', 'c'], 0)).toEqual(['b', 'c']);
+        expect(removeByIndex([true, false], 1)).toEqual([true]);
+    });
+
+    it('索引為 -1 時應回傳原陣列', () => {
+        const arr = [1, 2, 3];
+        expect(removeByIndex(arr, -1)).toBe(arr);
+    });
+
+    it('索引超出範圍時應回傳原陣列', () => {
+        const arr = [1, 2, 3];
+        expect(removeByIndex(arr, 3)).toBe(arr);
+        expect(removeByIndex(arr, 100)).toBe(arr);
+    });
+
+    it('空陣列時應回傳空陣列', () => {
+        expect(removeByIndex([], 0)).toEqual([]);
+        expect(removeByIndex([], 1)).toEqual([]);
+    });
+});

src/utils.test.ts

@@ -1,3 +1,26 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
+/**
+ * Default CSS definition for typescript,
+ * will be overridden with file-specific definitions by rollup
+ */
+declare module '*.css' {
+    const content: { [className: string]: string };
+    export default content;
+}
+
+interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+
+declare module '*.svg' {
+    const svgUrl: string;
+    const svgComponent: SvgrComponent;
+    export default svgUrl;
+    export {svgComponent as ReactComponent};
+}
+
+
+declare module '*.png';
+
+export {};