@oslokommune/punkt-elements 13.5.2 → 13.5.4

package/src/components/checkbox/checkbox.test.ts

@@ -1,40 +1,55 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './checkbox'
 
 expect.extend(toHaveNoViolations)
 
-import './checkbox'
-import { PktCheckbox } from './checkbox'
-
-const waitForCustomElements = async () => {
-  await customElements.whenDefined('pkt-checkbox')
+export interface CheckboxTestConfig extends BaseTestConfig {
+  id?: string
+  name?: string
+  label?: string
+  checked?: boolean
+  disabled?: boolean
+  required?: boolean
+  value?: string
+  checkHelptext?: string
+  hasTile?: boolean
+  hasError?: boolean
+  errorMessage?: string
+  optionalTag?: boolean
+  requiredTag?: boolean
+  tagText?: string
+  labelPosition?: string
+  hideLabel?: boolean
+  isSwitch?: boolean
 }
 
-// Helper function to create checkbox markup
-const createCheckbox = async (checkboxProps = '') => {
-  const container = document.createElement('div')
-  container.innerHTML = `
-    <pkt-checkbox ${checkboxProps}></pkt-checkbox>
-  `
-  document.body.appendChild(container)
-  await waitForCustomElements()
-  return container
+// Use shared framework
+export const createCheckboxTest = async (config: CheckboxTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-checkbox'>,
+    CheckboxTestConfig
+  >('pkt-checkbox', config)
+
+  return {
+    container,
+    checkbox: element,
+  }
 }
 
-// Cleanup after each test
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
 describe('PktCheckbox', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
-      const container = await createCheckbox('id="test-checkbox" name="test" label="Test Checkbox"')
+      const { checkbox } = await createCheckboxTest({
+        id: 'test-checkbox',
+        name: 'test',
+        label: 'Test Checkbox',
+      })
 
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
       expect(checkbox).toBeInTheDocument()
-
       await checkbox.updateComplete
       expect(checkbox).toBeTruthy()
 
@@ -42,28 +57,44 @@ describe('PktCheckbox', () => {
       expect(inputElement).toBeInTheDocument()
     })
 
-    test('renders with correct structure', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test Label"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+    test('renders proper structure', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test Label',
+      })
       await checkbox.updateComplete
 
-      const wrapper = checkbox.querySelector('.pkt-input-check')
-      const inputDiv = wrapper?.querySelector('.pkt-input-check__input')
-      const input = inputDiv?.querySelector('.pkt-input-check__input-checkbox')
-      const label = inputDiv?.querySelector('.pkt-input-check__input-label')
+      expect(checkbox).toBeInTheDocument()
+
+      // Check basic structure exists
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      const label = checkbox.querySelector('label')
 
-      expect(wrapper).toBeInTheDocument()
-      expect(inputDiv).toBeInTheDocument()
       expect(input).toBeInTheDocument()
       expect(label).toBeInTheDocument()
-      expect(label?.textContent?.trim()).toBe('Test Label')
+      expect(label).toHaveTextContent('Test Label')
     })
 
-    test('renders input with correct attributes', async () => {
-      const container = await createCheckbox('id="test-id" name="test-name" value="test-value"')
+    test('applies ids and names correctly', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test-id',
+        name: 'test-name',
+        value: 'test-value',
+      })
+      await checkbox.updateComplete
+
+      expect(checkbox.id).toBe('test-id')
+      expect(checkbox.name).toBe('test-name')
+      expect(checkbox.value).toBe('test-value')
+    })
 
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+    test('renders input with correct attributes', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test-id',
+        name: 'test-name',
+        value: 'test-value',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]')
@@ -75,9 +106,10 @@ describe('PktCheckbox', () => {
 
   describe('Properties and attributes', () => {
     test('applies default properties correctly', async () => {
-      const container = await createCheckbox('id="test" name="test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+      })
       await checkbox.updateComplete
 
       expect(checkbox.value).toBe('')
@@ -96,10 +128,11 @@ describe('PktCheckbox', () => {
     })
 
     test('handles value property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test" value="test-value"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
-      await checkbox.updateComplete
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        value: 'test-value',
+      })
 
       expect(checkbox.value).toBe('test-value')
       expect(checkbox.getAttribute('value')).toBe('test-value')
@@ -111,60 +144,58 @@ describe('PktCheckbox', () => {
       expect(checkbox.value).toBe('updated-value')
     })
 
-    test('handles checked property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test" checked')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+    test('handles checked state correctly', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        checked: true,
+      })
       await checkbox.updateComplete
 
       expect(checkbox.checked).toBe(true)
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
       expect(input?.checked).toBe(true)
-
-      // Test unchecked
-      checkbox.checked = false
-      await checkbox.updateComplete
-
-      expect(input?.checked).toBe(false)
     })
 
-    test('handles defaultChecked property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test"')
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
-
-      // Set defaultChecked before checked is set
-      checkbox.defaultChecked = true
+    test('handles checked property changes', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+      })
       await checkbox.updateComplete
 
-      expect(checkbox.defaultChecked).toBe(true)
-      expect(checkbox.checked).toBe(true)
+      expect(checkbox.checked).toBe(false)
 
-      // Wait for another update cycle to ensure DOM is updated
+      checkbox.checked = true
       await checkbox.updateComplete
 
+      expect(checkbox.checked).toBe(true)
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
       expect(input?.checked).toBe(true)
     })
 
-    test('handles disabled property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test" disabled')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+    test('handles disabled state correctly', async () => {
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        disabled: true,
+      })
       await checkbox.updateComplete
 
       expect(checkbox.disabled).toBe(true)
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
-      const label = checkbox.querySelector('.pkt-input-check__input-label')
-      expect(input?.disabled).toBe(true)
-      expect(label).toHaveClass('pkt-input-check__input-label--disabled')
+      expect(input.disabled).toBe(true)
     })
 
     test('handles labelPosition property correctly', async () => {
       // Test left position
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       checkbox.labelPosition = 'left'
       await checkbox.updateComplete
 
@@ -184,22 +215,25 @@ describe('PktCheckbox', () => {
     })
 
     test('handles hideLabel property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Hidden Label"')
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Hidden Label',
+      })
       checkbox.hideLabel = true
       await checkbox.updateComplete
 
       expect(checkbox.hideLabel).toBe(true)
-
       const label = checkbox.querySelector('.pkt-input-check__input-label')
       expect(label).toHaveClass('pkt-sr-only')
     })
 
     test('handles isSwitch property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test"')
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
-      checkbox.isSwitch = true
-      await checkbox.updateComplete
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        isSwitch: true,
+      })
 
       expect(checkbox.isSwitch).toBe(true)
 
@@ -208,10 +242,11 @@ describe('PktCheckbox', () => {
     })
 
     test('handles hasTile property correctly', async () => {
-      const container = await createCheckbox('id="test" name="test"')
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
-      checkbox.hasTile = true
-      await checkbox.updateComplete
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        hasTile: true,
+      })
 
       expect(checkbox.hasTile).toBe(true)
 
@@ -228,9 +263,11 @@ describe('PktCheckbox', () => {
 
   describe('Label and helptext functionality', () => {
     test('renders label correctly', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Checkbox Label"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Checkbox Label',
+      })
       await checkbox.updateComplete
 
       expect(checkbox.label).toBe('Checkbox Label')
@@ -241,11 +278,12 @@ describe('PktCheckbox', () => {
     })
 
     test('renders checkHelptext when provided', async () => {
-      const container = await createCheckbox(
-        'id="test" name="test" label="Test" checkHelptext="This is help text"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+        checkHelptext: 'This is help text',
+      })
       await checkbox.updateComplete
 
       expect(checkbox.checkHelptext).toBe('This is help text')
@@ -256,9 +294,11 @@ describe('PktCheckbox', () => {
     })
 
     test('does not render helptext when not provided', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       await checkbox.updateComplete
 
       const helptext = checkbox.querySelector('.pkt-input-check__input-helptext')
@@ -268,11 +308,12 @@ describe('PktCheckbox', () => {
 
   describe('Tag functionality', () => {
     test('renders custom tagText when provided', async () => {
-      const container = await createCheckbox(
-        'id="test" name="test" label="Test" tagText="Custom Tag"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+        tagText: 'Custom Tag',
+      })
       await checkbox.updateComplete
 
       expect(checkbox.tagText).toBe('Custom Tag')
@@ -283,9 +324,12 @@ describe('PktCheckbox', () => {
     })
 
     test('renders optional tag when optionalTag is true', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test" optionalTag')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+        optionalTag: true,
+      })
       await checkbox.updateComplete
 
       expect(checkbox.optionalTag).toBe(true)
@@ -297,9 +341,12 @@ describe('PktCheckbox', () => {
     })
 
     test('renders required tag when requiredTag is true', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test" requiredTag')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+        requiredTag: true,
+      })
       await checkbox.updateComplete
 
       expect(checkbox.requiredTag).toBe(true)
@@ -311,11 +358,15 @@ describe('PktCheckbox', () => {
     })
 
     test('renders custom optional and required text', async () => {
-      const container = await createCheckbox(
-        'id="test" name="test" label="Test" optionalTag optionalText="Custom Optional" requiredTag requiredText="Custom Required"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
+      checkbox.optionalTag = true
+      checkbox.optionalText = 'Custom Optional'
+      checkbox.requiredTag = true
+      checkbox.requiredText = 'Custom Required'
       await checkbox.updateComplete
 
       expect(checkbox.optionalText).toBe('Custom Optional')
@@ -328,11 +379,14 @@ describe('PktCheckbox', () => {
     })
 
     test('renders multiple tags when multiple are enabled', async () => {
-      const container = await createCheckbox(
-        'id="test" name="test" label="Test" tagText="Custom" optionalTag requiredTag',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
+      checkbox.tagText = 'Custom'
+      checkbox.optionalTag = true
+      checkbox.requiredTag = true
       await checkbox.updateComplete
 
       const customTag = checkbox.querySelector('.pkt-tag--gray')
@@ -347,9 +401,11 @@ describe('PktCheckbox', () => {
 
   describe('User interaction', () => {
     test('toggles checked state when clicked', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
@@ -371,9 +427,12 @@ describe('PktCheckbox', () => {
     })
 
     test('does not toggle when disabled', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test" disabled')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+        disabled: true,
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
@@ -390,9 +449,11 @@ describe('PktCheckbox', () => {
     })
 
     test('handles focus and blur events', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
@@ -410,9 +471,11 @@ describe('PktCheckbox', () => {
     })
 
     test('marks as touched when interacted with', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
@@ -431,9 +494,11 @@ describe('PktCheckbox', () => {
 
   describe('Label position and structure', () => {
     test('places label on the right by default', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Right Label"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Right Label',
+      })
       await checkbox.updateComplete
 
       const inputDiv = checkbox.querySelector('.pkt-input-check__input')
@@ -445,11 +510,12 @@ describe('PktCheckbox', () => {
     })
 
     test('places label on the left when labelPosition is left', async () => {
-      const container = await createCheckbox(
-        'id="test" name="test" label="Left Label" labelPosition="left"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Left Label',
+      })
+      checkbox.labelPosition = 'left'
       await checkbox.updateComplete
 
       const inputDiv = checkbox.querySelector('.pkt-input-check__input')
@@ -463,9 +529,11 @@ describe('PktCheckbox', () => {
 
   describe('Error handling', () => {
     test('applies error styling when hasError is true', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       checkbox.hasError = true
       await checkbox.updateComplete
 
@@ -474,9 +542,11 @@ describe('PktCheckbox', () => {
     })
 
     test('does not apply error styling when hasError is false', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('.pkt-input-check__input-checkbox')
@@ -486,11 +556,11 @@ describe('PktCheckbox', () => {
 
   describe('Accessibility', () => {
     test('has no accessibility violations', async () => {
-      const container = await createCheckbox(
-        'id="accessible-checkbox" name="test" label="Accessible Checkbox"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'accessible-checkbox',
+        name: 'test',
+        label: 'Accessible Checkbox',
+      })
       await checkbox.updateComplete
 
       const results = await axe(checkbox)
@@ -498,11 +568,11 @@ describe('PktCheckbox', () => {
     })
 
     test('associates label with input correctly', async () => {
-      const container = await createCheckbox(
-        'id="test-association" name="test" label="Associated Label"',
-      )
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test-association',
+        name: 'test',
+        label: 'Associated Label',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]')
@@ -513,9 +583,12 @@ describe('PktCheckbox', () => {
     })
 
     test('has correct role for switch when isSwitch is true', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test Switch" isSwitch')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test Switch',
+      })
+      checkbox.isSwitch = true
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]')
@@ -523,9 +596,11 @@ describe('PktCheckbox', () => {
     })
 
     test('has correct role for checkbox by default', async () => {
-      const container = await createCheckbox('id="test" name="test" label="Test Checkbox"')
-
-      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      const { checkbox } = await createCheckboxTest({
+        id: 'test',
+        name: 'test',
+        label: 'Test Checkbox',
+      })
       await checkbox.updateComplete
 
       const input = checkbox.querySelector('input[type="checkbox"]')