/**
* 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();
});
});