/** * AIForAll Component Tests * * 測試目標: * 1. 元件能正確渲染 * 2. 元件能正確呼叫廠商 aiForAll.js * 3. 元件卸載時能正確 cleanup */ import React from 'react'; import { render, waitFor, cleanup as rtlCleanup } from '@testing-library/react'; import AIAForAll from '@/components/aia/aia-for-all'; import * as vendorAIForAll from '@vendor-web/js/components/aiForAll.js'; // Mock 廠商 aiForAll.js jest.mock('@vendor-web/js/components/aiForAll.js', () => ({ aiForAll: jest.fn(), })); describe('AIForAll Component', () => { let mockCleanup: jest.Mock; beforeEach(() => { mockCleanup = jest.fn(); (vendorAIForAll.aiForAll as jest.Mock).mockReturnValue(mockCleanup); }); afterEach(() => { rtlCleanup(); jest.clearAllMocks(); }); it('應該渲染 aiForAll 結構', () => { const { container, getByText } = render(); expect(container.querySelector('.aiForAll')).toBeInTheDocument(); expect(getByText('AI For All')).toBeInTheDocument(); expect(container.querySelector('.aiForAll-container')).toBeInTheDocument(); }); it('應該呼叫廠商 aiForAll 初始化函式', async () => { render(); await waitFor(() => { expect(vendorAIForAll.aiForAll).toHaveBeenCalledTimes(1); expect(vendorAIForAll.aiForAll).toHaveBeenCalledWith( expect.any(HTMLElement) ); }); }); it('應該在元件卸載時呼叫 cleanup 函式', async () => { const { unmount } = render(); await waitFor(() => { expect(vendorAIForAll.aiForAll).toHaveBeenCalled(); }); unmount(); expect(mockCleanup).toHaveBeenCalledTimes(1); }); it('應該能處理廠商 JS 未返回 cleanup 的情況', async () => { (vendorAIForAll.aiForAll as jest.Mock).mockReturnValue(undefined); const { unmount } = render(); // 不應該拋出錯誤 expect(() => unmount()).not.toThrow(); }); it('應該渲染所有行業清單項目', () => { const { getAllByText, getByText } = render(); // 測試幾個關鍵行業項目(使用 getAllByText 因為有多個匹配) expect(getAllByText(/utomobile/).length).toBeGreaterThan(0); expect(getAllByText(/iotechnology/).length).toBeGreaterThan(0); expect(getAllByText(/inance/).length).toBeGreaterThan(0); expect(getAllByText(/ealthcare/).length).toBeGreaterThan(0); // 確認標題存在 expect(getByText('AI For All')).toBeInTheDocument(); }); });