ffef566316
feat(SW-3672): Update PasswordInput component * Update PasswordInput component * Removed some tests not working as expected * Remove IconButton from PasswordInput * Remove IconButton from Input * Merge branch 'master' into feat/new-passwordinput-component Approved-by: Linus Flood
100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { describe, expect, it, afterEach } from 'vitest'
|
|
import { render, screen, cleanup } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { FormProvider, useForm } from 'react-hook-form'
|
|
import { IntlProvider } from 'react-intl'
|
|
import { PasswordInput } from './PasswordInput'
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
function FormWrapper({
|
|
children,
|
|
defaultValues = { password: '' },
|
|
}: {
|
|
children: React.ReactNode
|
|
defaultValues?: Record<string, string>
|
|
}) {
|
|
const methods = useForm({ defaultValues })
|
|
return (
|
|
<IntlProvider locale="en" messages={{}}>
|
|
<FormProvider {...methods}>
|
|
<form>{children}</form>
|
|
</FormProvider>
|
|
</IntlProvider>
|
|
)
|
|
}
|
|
|
|
const renderPasswordInput = (
|
|
props: React.ComponentProps<typeof PasswordInput> = {},
|
|
defaultValues?: Record<string, string>
|
|
) => {
|
|
return render(
|
|
<FormWrapper defaultValues={defaultValues}>
|
|
<PasswordInput {...props} />
|
|
</FormWrapper>
|
|
)
|
|
}
|
|
|
|
describe('PasswordInput', () => {
|
|
describe('rendering', () => {
|
|
it('renders with default password label', () => {
|
|
renderPasswordInput()
|
|
expect(screen.getByLabelText('Password')).toBeTruthy()
|
|
})
|
|
|
|
it('renders with custom label', () => {
|
|
renderPasswordInput({ label: 'Enter your password' })
|
|
expect(screen.getByLabelText('Enter your password')).toBeTruthy()
|
|
})
|
|
|
|
it('renders with new password label when isNewPassword is true', () => {
|
|
renderPasswordInput({ isNewPassword: true })
|
|
expect(screen.getByLabelText('New password')).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('visibility toggle', () => {
|
|
it('shows visibility toggle button by default', () => {
|
|
renderPasswordInput()
|
|
expect(screen.getByLabelText('Show password')).toBeTruthy()
|
|
})
|
|
|
|
it('hides visibility toggle when visibilityToggleable is false', () => {
|
|
renderPasswordInput({ visibilityToggleable: false })
|
|
expect(screen.queryByLabelText('Show password')).toBeNull()
|
|
expect(screen.queryByLabelText('Hide password')).toBeNull()
|
|
})
|
|
})
|
|
|
|
describe('disabled state', () => {
|
|
it('disables the input when disabled prop is true', () => {
|
|
renderPasswordInput({ disabled: true })
|
|
expect(screen.getByLabelText('Password')).toHaveProperty('disabled', true)
|
|
})
|
|
})
|
|
|
|
describe('form integration', () => {
|
|
it('updates form value when typing', async () => {
|
|
const user = userEvent.setup()
|
|
renderPasswordInput()
|
|
|
|
const input = screen.getByLabelText('Password')
|
|
await user.type(input, 'secret123')
|
|
|
|
expect(input).toHaveProperty('value', 'secret123')
|
|
})
|
|
|
|
it('uses custom name prop', async () => {
|
|
const user = userEvent.setup()
|
|
renderPasswordInput({ name: 'confirmPassword' }, { confirmPassword: '' })
|
|
|
|
const input = screen.getByLabelText('Password')
|
|
await user.type(input, 'test')
|
|
|
|
expect(input).toHaveProperty('value', 'test')
|
|
})
|
|
})
|
|
})
|