@oslokommune/punkt-elements 13.4.0 → 13.4.2

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

@@ -0,0 +1,535 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './checkbox'
+import { PktCheckbox } from './checkbox'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-checkbox')
+}
+
+// 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
+}
+
+// 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 = container.querySelector('pkt-checkbox') as PktCheckbox
+      expect(checkbox).toBeInTheDocument()
+
+      await checkbox.updateComplete
+      expect(checkbox).toBeTruthy()
+
+      const inputElement = checkbox.querySelector('input[type="checkbox"]')
+      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
+      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(wrapper).toBeInTheDocument()
+      expect(inputDiv).toBeInTheDocument()
+      expect(input).toBeInTheDocument()
+      expect(label).toBeInTheDocument()
+      expect(label?.textContent?.trim()).toBe('Test Label')
+    })
+
+    test('renders input with correct attributes', async () => {
+      const container = await createCheckbox('id="test-id" name="test-name" value="test-value"')
+
+      const checkbox = container.querySelector('pkt-checkbox') as PktCheckbox
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input?.getAttribute('id')).toBe('test-id-internal')
+      expect(input?.getAttribute('name')).toBe('test-name-internal')
+      expect(input?.getAttribute('type')).toBe('checkbox')
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      expect(checkbox.value).toBe('')
+      expect(checkbox.checked).toBe(false)
+      expect(checkbox.defaultChecked).toBe(false)
+      expect(checkbox.hasTile).toBe(false)
+      expect(checkbox.isSwitch).toBe(false)
+      expect(checkbox.labelPosition).toBe('right')
+      expect(checkbox.hideLabel).toBe(false)
+      expect(checkbox.disabled).toBe(false)
+      expect(checkbox.optionalTag).toBe(false)
+      expect(checkbox.requiredTag).toBe(false)
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input?.getAttribute('role')).toBe('checkbox')
+    })
+
+    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
+
+      expect(checkbox.value).toBe('test-value')
+      expect(checkbox.getAttribute('value')).toBe('test-value')
+
+      // Test value updates
+      checkbox.value = 'updated-value'
+      await checkbox.updateComplete
+
+      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
+      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
+      await checkbox.updateComplete
+
+      expect(checkbox.defaultChecked).toBe(true)
+      expect(checkbox.checked).toBe(true)
+
+      // Wait for another update cycle to ensure DOM is updated
+      await checkbox.updateComplete
+
+      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
+      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')
+    })
+
+    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
+      checkbox.labelPosition = 'left'
+      await checkbox.updateComplete
+
+      expect(checkbox.labelPosition).toBe('left')
+
+      let label = checkbox.querySelector('.pkt-input-check__input-label')
+      expect(label).toHaveClass('pkt-input-check__input-label--left')
+
+      // Test right position (default)
+      checkbox.labelPosition = 'right'
+      await checkbox.updateComplete
+
+      // Re-query the label element after DOM change
+      label = checkbox.querySelector('.pkt-input-check__input-label')
+      expect(label).toHaveClass('pkt-input-check__input-label--right')
+      expect(label).not.toHaveClass('pkt-input-check__input-label--left')
+    })
+
+    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
+      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
+
+      expect(checkbox.isSwitch).toBe(true)
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input?.getAttribute('role')).toBe('switch')
+    })
+
+    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
+
+      expect(checkbox.hasTile).toBe(true)
+
+      const inputDiv = checkbox.querySelector('.pkt-input-check__input')
+      expect(inputDiv).toHaveClass('pkt-input-check__input--tile')
+
+      // Test disabled with tile
+      checkbox.disabled = true
+      await checkbox.updateComplete
+
+      expect(inputDiv).toHaveClass('pkt-input-check__input--tile-disabled')
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      expect(checkbox.label).toBe('Checkbox Label')
+
+      const label = checkbox.querySelector('.pkt-input-check__input-label')
+      expect(label?.textContent?.trim()).toBe('Checkbox Label')
+      expect(label?.getAttribute('for')).toBe('test-internal')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      expect(checkbox.checkHelptext).toBe('This is help text')
+
+      const helptext = checkbox.querySelector('.pkt-input-check__input-helptext')
+      expect(helptext).toBeInTheDocument()
+      expect(helptext?.textContent).toBe('This is help text')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const helptext = checkbox.querySelector('.pkt-input-check__input-helptext')
+      expect(helptext).not.toBeInTheDocument()
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      expect(checkbox.tagText).toBe('Custom Tag')
+
+      const tagElement = checkbox.querySelector('.pkt-tag--gray')
+      expect(tagElement).toBeInTheDocument()
+      expect(tagElement?.textContent).toBe('Custom Tag')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      expect(checkbox.optionalTag).toBe(true)
+      expect(checkbox.optionalText).toBe('Valgfritt')
+
+      const optionalTag = checkbox.querySelector('.pkt-tag--blue-light')
+      expect(optionalTag).toBeInTheDocument()
+      expect(optionalTag?.textContent).toBe('Valgfritt')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      expect(checkbox.requiredTag).toBe(true)
+      expect(checkbox.requiredText).toBe('Må fylles ut')
+
+      const requiredTag = checkbox.querySelector('.pkt-tag--beige')
+      expect(requiredTag).toBeInTheDocument()
+      expect(requiredTag?.textContent).toBe('Må fylles ut')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      expect(checkbox.optionalText).toBe('Custom Optional')
+      expect(checkbox.requiredText).toBe('Custom Required')
+
+      const optionalTag = checkbox.querySelector('.pkt-tag--blue-light')
+      const requiredTag = checkbox.querySelector('.pkt-tag--beige')
+      expect(optionalTag?.textContent).toBe('Custom Optional')
+      expect(requiredTag?.textContent).toBe('Custom Required')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const customTag = checkbox.querySelector('.pkt-tag--gray')
+      const optionalTag = checkbox.querySelector('.pkt-tag--blue-light')
+      const requiredTag = checkbox.querySelector('.pkt-tag--beige')
+
+      expect(customTag).toBeInTheDocument()
+      expect(optionalTag).toBeInTheDocument()
+      expect(requiredTag).toBeInTheDocument()
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input.checked).toBe(false)
+
+      // Click to check
+      fireEvent.click(input)
+      await checkbox.updateComplete
+
+      expect(input.checked).toBe(true)
+      expect(checkbox.checked).toBe(true)
+
+      // Click to uncheck
+      fireEvent.click(input)
+      await checkbox.updateComplete
+
+      expect(input.checked).toBe(false)
+      expect(checkbox.checked).toBe(false)
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+      expect(input.checked).toBe(false)
+      expect(input.disabled).toBe(true)
+
+      // Try to click
+      fireEvent.click(input)
+      await checkbox.updateComplete
+
+      // Should remain unchecked
+      expect(input.checked).toBe(false)
+      expect(checkbox.checked).toBe(false)
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+
+      // Test focus
+      fireEvent.focus(input)
+      await checkbox.updateComplete
+
+      // Test blur
+      fireEvent.blur(input)
+      await checkbox.updateComplete
+
+      // These should not throw errors and the element should remain functional
+      expect(checkbox).toBeInTheDocument()
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]') as HTMLInputElement
+
+      // Initially not touched
+      expect(checkbox.touched).toBe(false)
+
+      // Click to interact
+      fireEvent.click(input)
+      await checkbox.updateComplete
+
+      // Should be marked as touched
+      expect(checkbox.touched).toBe(true)
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      const inputDiv = checkbox.querySelector('.pkt-input-check__input')
+      const children = Array.from(inputDiv?.children || [])
+
+      // Should have input first, then label
+      expect(children[0]).toHaveAttribute('type', 'checkbox')
+      expect(children[1]).toHaveClass('pkt-input-check__input-label')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const inputDiv = checkbox.querySelector('.pkt-input-check__input')
+      const children = Array.from(inputDiv?.children || [])
+
+      // Should have label first, then input
+      expect(children[0]).toHaveClass('pkt-input-check__input-label')
+      expect(children[1]).toHaveAttribute('type', 'checkbox')
+    })
+  })
+
+  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
+      checkbox.hasError = true
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('.pkt-input-check__input-checkbox')
+      expect(input).toHaveClass('pkt-input-check__input-checkbox--error')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('.pkt-input-check__input-checkbox')
+      expect(input).not.toHaveClass('pkt-input-check__input-checkbox--error')
+    })
+  })
+
+  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
+      await checkbox.updateComplete
+
+      const results = await axe(checkbox)
+      expect(results).toHaveNoViolations()
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      const label = checkbox.querySelector('.pkt-input-check__input-label')
+
+      expect(input?.getAttribute('id')).toBe('test-association-internal')
+      expect(label?.getAttribute('for')).toBe('test-association-internal')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input?.getAttribute('role')).toBe('switch')
+    })
+
+    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
+      await checkbox.updateComplete
+
+      const input = checkbox.querySelector('input[type="checkbox"]')
+      expect(input?.getAttribute('role')).toBe('checkbox')
+    })
+  })
+})

package/src/components/checkbox/checkbox.ts

@@ -45,6 +45,13 @@ export class PktCheckbox extends PktInputElement {
     super.firstUpdated(_changedProperties)
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('defaultChecked') && !this.checked) {
+      this.checked = this.defaultChecked
+    }
+    super.updated(changedProperties)
+  }
+
   render() {
     const inputTileClasses = classMap({
       'pkt-input-check__input': true,
@@ -103,7 +110,8 @@ export class PktCheckbox extends PktInputElement {
             ?disabled=${this.disabled}
             name=${this.name + '-internal'}
             ${ref(this.inputRef)}
-            @change=${this.toggleChecked}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
             @blur=${this.onBlur}
             @focus=${this.onFocus}
             ?checked=${this.checked}
@@ -115,7 +123,42 @@ export class PktCheckbox extends PktInputElement {
     `
   }
 
+  private handleClick(e: Event) {
+    // Prevent click on disabled checkbox
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return false
+    }
+  }
+
+  private handleChange(e: Event) {
+    // Don't process change if disabled
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return false
+    }
+
+    this.toggleChecked(e)
+  }
+
   private toggleChecked(e: Event) {
+    // Don't toggle if disabled
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return
+    }
+
+    // Also check if the input element itself is disabled
+    const target = e.target as HTMLInputElement
+    if (target && target.disabled) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return
+    }
+
     e.stopImmediatePropagation()
     this.touched = true
     if (this.inputRef.value) {