Merged in feat/new-passwordinput-component (pull request #3376)

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

packages/design-system/lib/components/PasswordInput/PasswordInput.test.tsx

@@ -0,0 +1,99 @@
+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')
+    })
+  })
+})