diff --git a/packages/dnb-eufemia/src/components/input/__tests__/InputPassword.test.tsx b/packages/dnb-eufemia/src/components/input/__tests__/InputPassword.test.tsx
index f2ecc33b652..5a447c918f9 100644
--- a/packages/dnb-eufemia/src/components/input/__tests__/InputPassword.test.tsx
+++ b/packages/dnb-eufemia/src/components/input/__tests__/InputPassword.test.tsx
@@ -10,7 +10,7 @@ import {
toJson,
axeComponent,
} from '../../../core/jest/jestSetup'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
import Component from '../InputPassword'
import FormRow from '../../form-row/FormRow'
@@ -38,106 +38,128 @@ describe('InputPassword component', () => {
expect(toJson(Comp)).toMatchSnapshot()
})
- // then test the state management
- const Comp = mount()
-
it('has correct type by default', () => {
- expect(Comp.find('.dnb-input__input').prop('type')).toBe('password')
+ render()
+
+ expect(
+ document.querySelector('.dnb-input__input').getAttribute('type')
+ ).toBe('password')
})
it('has correct state after "focus" trigger', () => {
- Comp.find('input').simulate('focus')
- expect(Comp.find('.dnb-input').prop('data-input-state')).toBe('focus')
+ render()
+
+ fireEvent.focus(document.querySelector('input'))
+
+ expect(
+ document.querySelector('.dnb-input').getAttribute('data-input-state')
+ ).toBe('focus')
})
it('has correct aria-label', () => {
- const Comp = mount()
+ const { rerender } = render()
- expect(Comp.find('button').prop('aria-label')).toBe(nb.show_password)
+ expect(
+ document.querySelector('button').getAttribute('aria-label')
+ ).toBe(nb.show_password)
- Comp.setProps({
- lang: 'en-GB',
- })
+ rerender()
- expect(Comp.find('button').instance().getAttribute('aria-label')).toBe(
- en.show_password
- )
+ expect(
+ document.querySelector('button').getAttribute('aria-label')
+ ).toBe(en.show_password)
- expect(Comp.find('button').instance().getAttribute('aria-label')).toBe(
- en.show_password
- )
+ expect(
+ document.querySelector('button').getAttribute('aria-label')
+ ).toBe(en.show_password)
})
it('has aria-describedby and aria-controls', () => {
- Comp.find('input').simulate('focus')
- expect(Comp.find('.dnb-input__input').prop('aria-describedby')).toBe(
- 'input-submit-button'
- )
+ render()
+
+ fireEvent.focus(document.querySelector('input'))
+ expect(
+ document
+ .querySelector('.dnb-input__input')
+ .getAttribute('aria-describedby')
+ ).toBe('input-submit-button')
expect(
- Comp.find('button#input-submit-button').prop('aria-controls')
+ document
+ .querySelector('button#input-submit-button')
+ .getAttribute('aria-controls')
).toBe('input')
})
it('has correct aria-controls id', () => {
- expect(Comp.find('.dnb-input__input').prop('id')).toBe(
- Comp.find('button.dnb-button--input-button').prop('aria-controls')
+ render()
+
+ expect(
+ document.querySelector('.dnb-input__input').getAttribute('id')
+ ).toBe(
+ document
+ .querySelector('button.dnb-button--input-button')
+ .getAttribute('aria-controls')
)
})
it('has a submit button which gets focus', () => {
- const Comp = mount()
+ render()
- const Button = Comp.find('InputSubmitButton').find('button')
- expect(Button.exists()).toBe(true)
+ const Button = document.querySelector('button')
+ expect(Button).toBeTruthy()
- Button.simulate('focus')
+ fireEvent.focus(Button)
expect(
- Comp.find('InputSubmitButton')
- .find('.dnb-input__submit-button')
- .prop('data-input-state')
+ document
+ .querySelector('.dnb-input__submit-button')
+ .getAttribute('data-input-state')
).toBe('focus')
})
it('can change the visibility of the password', () => {
- const Comp = mount()
+ render()
- const Button = Comp.find('InputSubmitButton').find('button')
- expect(Button.exists()).toBe(true)
+ const Button = document.querySelector('button')
+ expect(Button).toBeTruthy()
- Button.simulate('click')
- expect(Comp.find('.dnb-input__input').prop('type')).toBe('text')
+ fireEvent.click(Button)
+ expect(
+ document.querySelector('.dnb-input__input').getAttribute('type')
+ ).toBe('text')
- Button.simulate('click')
- expect(Comp.find('.dnb-input__input').prop('type')).toBe('password')
+ fireEvent.click(Button)
+ expect(
+ document.querySelector('.dnb-input__input').getAttribute('type')
+ ).toBe('password')
expect(
- Comp.find('InputSubmitButton')
- .find('.dnb-input__submit-button')
- .prop('data-input-state')
+ document
+ .querySelector('.dnb-input__submit-button')
+ .getAttribute('data-input-state')
).not.toBe('focus')
})
it('events gets triggered on interaction', () => {
const on_show_password = jest.fn()
const on_hide_password = jest.fn()
- const Comp = mount(
+ render(
)
- const Button = Comp.find('InputSubmitButton').find('button')
+ const Button = document.querySelector('button')
- Button.simulate('click')
+ fireEvent.click(Button)
expect(on_show_password).toBeCalledTimes(1)
expect(on_hide_password).not.toBeCalled()
- Button.simulate('click')
+ fireEvent.click(Button)
expect(on_show_password).toBeCalledTimes(1)
expect(on_hide_password).toBeCalledTimes(1)
- Button.simulate('click')
+ fireEvent.click(Button)
expect(on_show_password).toBeCalledTimes(2)
expect(on_hide_password).toBeCalledTimes(1)
})