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