Last active
August 13, 2025 13:47
-
-
Save abdmmar/1936d6ff82396cbc87b505b83608bc64 to your computer and use it in GitHub Desktop.
The integration test covers forms that utilize `react-hook-form`, `react-query`, `radix-ui` select, `react-select`, an input file component, and a custom hook. During the test, we mock the `useQuery` hook and the custom hook to ensure seamless and comprehensive testing of the form's functionality. Tested using Jest and React Testing Library
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* eslint-disable jest/prefer-spy-on */ | |
| import { cleanup, fireEvent, render, screen } from '@testing-library/react' | |
| import userEvent from '@testing-library/user-event' | |
| import { noop } from 'kyrim-ui' | |
| import { wrapper } from '@/utils/test-utils' | |
| import { companyInfo } from '../../utils/test' | |
| import { CompanyInformationForm } from '../CompanyOnboardingForm/CompanyInformationForm' | |
| /* MOCK QUERY */ | |
| jest.mock('../../view-models', () => ({ | |
| useGetCompanyIndustriesViewModel: jest.fn().mockImplementation(() => ({ | |
| isSuccess: true, | |
| data: [ | |
| { | |
| label: 'Education', | |
| options: [ | |
| { | |
| id: 'dc149c7a-3d82-495d-8005-54cf4bfb4cde', | |
| label: 'Education Management', | |
| value: 'dc149c7a-3d82-495d-8005-54cf4bfb4cde', | |
| }, | |
| ], | |
| }, | |
| ], | |
| })), | |
| })) | |
| const mockUseMultiForm = jest.fn(() => ({ | |
| dispatch: noop, | |
| stepper: { setStep: noop }, | |
| })) | |
| jest.mock('../CompanyOnboardingForm/MultiForm', () => ({ | |
| useMultiForm: () => mockUseMultiForm(), | |
| })) | |
| describe('CompanyInformationForm', () => { | |
| beforeAll(() => { | |
| window.HTMLElement.prototype.scrollIntoView = jest.fn() | |
| window.HTMLElement.prototype.releasePointerCapture = jest.fn() | |
| window.HTMLElement.prototype.hasPointerCapture = jest.fn() | |
| }) | |
| beforeEach(() => { | |
| jest.clearAllMocks() | |
| }) | |
| test('submits the form with correct data', async () => { | |
| render(<CompanyInformationForm />, { wrapper }) | |
| const input = { | |
| businessName: screen.getByLabelText(/business name/i), | |
| industry: screen.getByLabelText(/industry/i), | |
| picName: screen.getByLabelText(/pic name/i), | |
| picPhoneNumber: screen.getByLabelText(/pic phone number/i), | |
| picCompanyEmail: screen.getByLabelText(/pic company email/i), | |
| accountCreationPurpose: screen.getByRole('combobox', { | |
| name: /account creation purpose/i, | |
| }), | |
| attachPKS: screen.getByLabelText(/attach pks/i) as HTMLInputElement, | |
| } | |
| await userEvent.type(input.businessName, companyInfo.businessName) | |
| // Input Select Industry | |
| await userEvent.type(input.industry, '[ArrowDown]') | |
| await userEvent.click(screen.getByText(companyInfo.industry)) | |
| await userEvent.type(input.picName, companyInfo.picName) | |
| await userEvent.type(input.picPhoneNumber, companyInfo.picPhoneNumber) | |
| await userEvent.type(input.picCompanyEmail, companyInfo.picCompanyEmail) | |
| // Input Select Account creation purpose | |
| await userEvent.click(input.accountCreationPurpose) | |
| await userEvent.click(screen.getByRole('option', { name: /investasi/i })) | |
| // Input Attach PKS file | |
| fireEvent.change(input.attachPKS, { | |
| target: { files: { item: () => companyInfo.attachPKS, length: 1, 0: companyInfo.attachPKS } }, | |
| }) | |
| await userEvent.click(screen.getByTestId('submit-company-info-form')) | |
| expect(input.businessName).toHaveValue(companyInfo.businessName) | |
| expect(screen.getByText(companyInfo.industry)).toBeInTheDocument() | |
| expect(input.picName).toHaveValue(companyInfo.picName) | |
| expect(input.picPhoneNumber).toHaveValue(companyInfo.picPhoneNumber) | |
| expect(input.picCompanyEmail).toHaveValue(companyInfo.picCompanyEmail) | |
| expect(input.accountCreationPurpose).toHaveValue(companyInfo.accountCreationPurpose) | |
| expect(input.attachPKS.files?.[0]).toStrictEqual(companyInfo.attachPKS) | |
| expect(screen.getByText(/test.pdf/i)).toBeInTheDocument() | |
| expect(screen.queryAllByRole('alert')).toHaveLength(0) | |
| cleanup() | |
| }) | |
| test('should show error when submit with empty value', async () => { | |
| render(<CompanyInformationForm />) | |
| await userEvent.click(screen.getByTestId('submit-company-info-form')) | |
| expect(screen.queryAllByRole('alert')).toHaveLength(7) | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment