/** * FormWrapper Component Tests * * 測試目標: * 1. 元件能正確渲染 * 2. 元件能正確呼叫廠商 form.js 函式 * 3. 測試驗證成功和失敗的情況 */ import React from 'react'; import { render, cleanup as rtlCleanup, waitFor } from '@testing-library/react'; import FormWrapper from '@/components/aia/form-wrapper'; import * as vendorForm from '@vendor-web/js/patterns/form.js'; // Mock 廠商 form.js jest.mock('@vendor-web/js/patterns/form.js', () => ({ checkboxButtonDisableToggle: jest.fn(), formErrorMessage: jest.fn(), formReset: jest.fn(), formValidation: jest.fn(), })); describe('FormWrapper Component', () => { beforeEach(() => { jest.clearAllMocks(); }); afterEach(() => { rtlCleanup(); }); it('應該渲染 form 和 children', () => { const { getByText } = render( ); expect(getByText('Submit')).toBeInTheDocument(); }); it('應該呼叫 checkboxButtonDisableToggle 當提供 checkboxSelector', async () => { render( ); await waitFor(() => { expect(vendorForm.checkboxButtonDisableToggle).toHaveBeenCalledWith({ buttonSelector: '[type="submit"], [type="button"]', checkboxSelector: '.test-checkbox', }); }); }); it('應該使用自訂 submitButtonSelector', async () => { render( ); await waitFor(() => { expect(vendorForm.checkboxButtonDisableToggle).toHaveBeenCalledWith({ buttonSelector: '.custom-button', checkboxSelector: '.test-checkbox', }); }); }); it('應該在驗證成功時呼叫 onSuccess', async () => { const mockData = { name: 'Test User', email: 'test@example.com' }; (vendorForm.formValidation as jest.Mock).mockResolvedValue(mockData); const onSuccessMock = jest.fn(); render( ); await waitFor(() => { expect(onSuccessMock).toHaveBeenCalledWith(mockData); }); }); it('應該在驗證失敗時呼叫 onError', async () => { const mockError = { name: 'Name is required' }; (vendorForm.formValidation as jest.Mock).mockRejectedValue(mockError); const onErrorMock = jest.fn(); render( ); await waitFor(() => { expect(onErrorMock).toHaveBeenCalledWith(mockError); expect(vendorForm.formErrorMessage).toHaveBeenCalledWith({ formSelector: '.test-form', errorData: mockError, }); }); }); it('應該在成功後重置表單(預設行為)', async () => { const mockData = { name: 'Test User' }; (vendorForm.formValidation as jest.Mock).mockResolvedValue(mockData); render( ); await waitFor(() => { expect(vendorForm.formReset).toHaveBeenCalledWith({ formSelector: '.test-form', checkboxButtonDisableToggle: false, }); }); }); it('應該在 resetOnSuccess=false 時不重置表單', async () => { const mockData = { name: 'Test User' }; (vendorForm.formValidation as jest.Mock).mockResolvedValue(mockData); render( ); await waitFor(() => { expect(vendorForm.formValidation).toHaveBeenCalled(); }); // formReset should not be called expect(vendorForm.formReset).not.toHaveBeenCalled(); }); });