diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx new file mode 100644 index 0000000000..f5e3e26299 --- /dev/null +++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.spec.tsx @@ -0,0 +1,96 @@ +import { fireEvent, waitFor } from '@testing-library/react' +import { t } from 'decentraland-dapps/dist/modules/translation/utils' +import { renderWithProviders } from '../../../utils/test' +import ClaimNameFatFingerModal from './ClaimNameFatFingerModal' + +describe('ClaimNameFatFingerModal', () => { + const name = 'aNAME' + const onCloseMock = jest.fn() + const onClaimMock = jest.fn() + const onClaimNameClearMock = jest.fn() + const onAuthorizedActionMock = jest.fn() + const baseProps = { + metadata: { name }, + isLoading: false, + name: 'Modal', + onClose: onCloseMock, + getContract: jest.fn(), + onClaim: onClaimMock, + onClaimNameClear: onClaimNameClearMock, + onAuthorizedAction: onAuthorizedActionMock, + onCloseAuthorization: jest.fn(), + isLoadingAuthorization: false + } + + afterEach(() => { + jest.clearAllMocks() + }) + + describe('before typing the correct name', () => { + it('should have the confirm button disabled', () => { + const { getByText } = renderWithProviders( + + ) + + const claimButton = getByText(t('global.confirm')) + expect(claimButton).toBeDisabled() + }) + }) + + describe('after typing the wrong name', () => { + it('should have the confirm button disabled and show error message', () => { + const { getByRole, getByText } = renderWithProviders( + + ) + + const inputField = getByRole('textbox') + fireEvent.change(inputField, { target: { value: 'wrongName' } }) + + const claimButton = getByText(t('global.confirm')) + expect(claimButton).toBeDisabled() + + const errorMessage = getByText( + t('names_page.claim_name_fat_finger_modal.names_different') + ) + expect(errorMessage).toBeInTheDocument() + }) + }) + + describe('after typing the correct name', () => { + it('should call onClaim when claim button is clicked', async () => { + const { getByRole, getByText } = renderWithProviders( + { + onAuthorized() + })} + /> + ) + + const inputField = getByRole('textbox') + await fireEvent.change(inputField, { target: { value: name } }) + const claimButton = getByText(t('global.confirm')) + await waitFor(() => { + expect(claimButton).not.toBeDisabled() + }) + fireEvent.click(claimButton) + expect(onClaimMock).toHaveBeenCalledWith(name) + }) + }) + + it('should call onClose when modal is closed', () => { + const { getByText } = renderWithProviders( + + ) + + const closeButton = getByText(t('global.cancel')) + fireEvent.click(closeButton) + + expect(onCloseMock).toHaveBeenCalled() + }) +}) diff --git a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts index e0a0df8e85..1ed6be62f2 100644 --- a/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts +++ b/webapp/src/components/Modals/ClaimNameFatFingerModal/ClaimNameFatFingerModal.types.ts @@ -9,7 +9,7 @@ export type Props = ModalProps & { isLoading: boolean address?: string metadata: { - originalName: string + name: string } onClaim: typeof claimNameRequest onClaimNameClear: typeof claimNameClear