@oslokommune/punkt-elements 13.4.2 → 13.5.1

package/src/components/datepicker/datepicker.validation.test.ts

@@ -0,0 +1,176 @@
+import '@testing-library/jest-dom'
+
+import './datepicker'
+import '../calendar/calendar'
+import { PktDatepicker } from './datepicker'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-datepicker')
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create datepicker markup
+const createDatepicker = async (datepickerProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-datepicker ${datepickerProps}></pkt-datepicker>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepicker', () => {
+  describe('Date boundary testing', () => {
+    test('handles minimum possible dates', async () => {
+      const minDate = '1900-01-01'
+      const container = await createDatepicker(`value="${minDate}" earliest="${minDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(minDate)
+    })
+
+    test('handles maximum possible dates', async () => {
+      const maxDate = '2100-12-31'
+      const container = await createDatepicker(`value="${maxDate}" latest="${maxDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(maxDate)
+    })
+
+    test('handles year boundaries correctly', async () => {
+      const yearBoundaryDates = ['1999-12-31', '2000-01-01', '2000-12-31', '2001-01-01']
+
+      for (const date of yearBoundaryDates) {
+        const container = await createDatepicker(`value="${date}"`)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+
+        expect(datepicker.value).toBe(date)
+        container.remove()
+      }
+    })
+
+    test('handles month boundaries correctly', async () => {
+      const monthBoundaryDates = [
+        '2024-01-31',
+        '2024-02-01',
+        '2024-02-28',
+        '2024-02-29', // Leap year
+        '2024-03-01',
+      ]
+
+      for (const date of monthBoundaryDates) {
+        const container = await createDatepicker(`value="${date}"`)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+
+        expect(datepicker.value).toBe(date)
+        container.remove()
+      }
+    })
+
+    test('validates dates against earliest/latest boundaries', async () => {
+      const container = await createDatepicker('min="2024-06-10" max="2024-06-20"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+
+      // Test date before min - component should filter it out
+      datepicker.value = '2024-06-05'
+      await datepicker.updateComplete
+
+      // Component should reject invalid date (filter it out)
+      expect(datepicker.value).toBe('')
+      expect(input.value).toBe('')
+
+      // Test date after max - component should filter it out
+      datepicker.value = '2024-06-25'
+      await datepicker.updateComplete
+
+      // Component should reject invalid date (filter it out)
+      expect(datepicker.value).toBe('')
+      expect(input.value).toBe('')
+
+      // Test valid date - should be accepted
+      datepicker.value = '2024-06-15'
+      await datepicker.updateComplete
+
+      // Valid date should be accepted
+      expect(datepicker.value).toBe('2024-06-15')
+      expect(input.value).toBe('2024-06-15')
+      expect(input.validity.valid).toBe(true)
+    })
+  })
+
+  describe('Error handling and edge cases', () => {
+    test('handles invalid date formats gracefully', async () => {
+      const container = await createDatepicker('value="not-a-date"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should not crash
+      expect(datepicker).toBeInTheDocument()
+    })
+
+    test('handles empty values correctly', async () => {
+      const container = await createDatepicker('value=""')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe('')
+      expect(datepicker.hasError).toBe(false)
+    })
+
+    test('handles malformed multiple values', async () => {
+      const malformedDates = '2024-06-15,,2024-06-20,,,'
+      const container = await createDatepicker(`value="${malformedDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should filter out empty values
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBe(2) // Only valid dates
+    })
+
+    test('handles very long value strings', async () => {
+      // Create a string with many dates
+      const longValueArray = Array.from({ length: 100 }, (_, i) => `2024-06-${(i % 30) + 1}`)
+      const longValue = longValueArray.join(',')
+      const container = await createDatepicker(`value="${longValue}" multiple maxlength="50"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should handle gracefully - maxlength may or may not be enforced at render time
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBeGreaterThan(0) // Should show some tags
+      expect(datepicker).toBeInTheDocument() // Should not crash
+    })
+
+    test('handles conflicting properties gracefully', async () => {
+      // Both multiple and range shouldn't typically be used together
+      const container = await createDatepicker('multiple range value="2024-06-15,2024-06-20"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should still render without errors
+      expect(datepicker).toBeInTheDocument()
+    })
+  })
+})

package/src/components/heading/heading.test.ts

@@ -0,0 +1,458 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+import './heading'
+import { PktHeading, TPktHeadingLevel, TPktHeadingSize } from './heading'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-heading')
+}
+
+// Helper function to create heading element
+const createHeading = async (headingProps = '', content = 'Test Heading') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-heading ${headingProps}>${content}</pkt-heading>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktHeading', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+
+      expect(heading).toBeInTheDocument()
+      expect(heading.shadowRoot).toBeTruthy()
+    })
+
+    test('renders with default properties', async () => {
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.size).toBe('medium')
+      expect(heading.level).toBe(2)
+      expect(heading.visuallyHidden).toBe(false)
+      expect(heading.align).toBe('start')
+    })
+
+    test('renders content in shadow DOM slot', async () => {
+      const container = await createHeading('', 'Custom Heading Text')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      const slot = heading.shadowRoot?.querySelector('slot')
+      expect(slot).toBeInTheDocument()
+      expect(heading.textContent).toContain('Custom Heading Text')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.getAttribute('size')).toBe('medium')
+      expect(heading.getAttribute('level')).toBe('2')
+      expect(heading.getAttribute('visually-hidden')).toBe(null)
+      expect(heading.getAttribute('align')).toBe('start')
+    })
+
+    test('sets size property correctly', async () => {
+      const sizes: TPktHeadingSize[] = ['xsmall', 'small', 'medium', 'large', 'xlarge']
+
+      for (const size of sizes) {
+        const container = await createHeading(`size="${size}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.size).toBe(size)
+        expect(heading.getAttribute('size')).toBe(size)
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('sets level property correctly', async () => {
+      const levels: TPktHeadingLevel[] = [1, 2, 3, 4, 5, 6]
+
+      for (const level of levels) {
+        const container = await createHeading(`level="${level}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.level).toBe(level)
+        expect(heading.getAttribute('level')).toBe(String(level))
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('sets visuallyHidden property correctly', async () => {
+      const container = await createHeading('visuallyHidden="true"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.visuallyHidden).toBe(true)
+      expect(heading.hasAttribute('visuallyHidden')).toBe(true)
+    })
+
+    test('sets align property correctly', async () => {
+      const alignments = ['start', 'center', 'end'] as const
+
+      for (const align of alignments) {
+        const container = await createHeading(`align="${align}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.align).toBe(align)
+        expect(heading.getAttribute('align')).toBe(align)
+        document.body.innerHTML = ''
+      }
+    })
+  })
+
+  describe('CSS classes and styling', () => {
+    test('applies default CSS classes', async () => {
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading')).toBe(true)
+      expect(heading.classList.contains('pkt-heading--medium')).toBe(true)
+      expect(heading.classList.contains('pkt-heading--start')).toBe(true)
+    })
+
+    test('applies size-specific CSS classes', async () => {
+      const sizes: TPktHeadingSize[] = ['xsmall', 'small', 'medium', 'large', 'xlarge']
+
+      for (const size of sizes) {
+        const container = await createHeading(`size="${size}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.classList.contains(`pkt-heading--${size}`)).toBe(true)
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('applies visually hidden class when enabled', async () => {
+      const container = await createHeading('visuallyHidden="true"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-sr-only')).toBe(true)
+    })
+
+    test('applies alignment-specific CSS classes', async () => {
+      const alignments = ['start', 'center', 'end'] as const
+
+      for (const align of alignments) {
+        const container = await createHeading(`align="${align}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.classList.contains(`pkt-heading--${align}`)).toBe(true)
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('removes old classes when properties change', async () => {
+      const container = await createHeading('size="small" align="center"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--small')).toBe(true)
+      expect(heading.classList.contains('pkt-heading--center')).toBe(true)
+
+      // Change properties
+      heading.size = 'large'
+      heading.align = 'end'
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--small')).toBe(false)
+      expect(heading.classList.contains('pkt-heading--center')).toBe(false)
+      expect(heading.classList.contains('pkt-heading--large')).toBe(true)
+      expect(heading.classList.contains('pkt-heading--end')).toBe(true)
+    })
+  })
+
+  describe('ARIA and accessibility attributes', () => {
+    test('sets role and aria-level attributes on connection', async () => {
+      const container = await createHeading('level="3"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.getAttribute('role')).toBe('heading')
+      expect(heading.getAttribute('aria-level')).toBe('3')
+    })
+
+    test('updates aria-level when level property changes', async () => {
+      const container = await createHeading('level="2"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.getAttribute('aria-level')).toBe('2')
+
+      heading.level = 4
+      await heading.updateComplete
+
+      expect(heading.getAttribute('aria-level')).toBe('4')
+    })
+
+    test('updates aria-level when level attribute changes', async () => {
+      const container = await createHeading('level="1"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.getAttribute('aria-level')).toBe('1')
+
+      heading.setAttribute('level', '5')
+      await heading.updateComplete
+
+      expect(heading.getAttribute('aria-level')).toBe('5')
+      expect(heading.level).toBe(5)
+    })
+  })
+
+  describe('Level validation', () => {
+    test('accepts valid heading levels (1-6)', async () => {
+      const validLevels: TPktHeadingLevel[] = [1, 2, 3, 4, 5, 6]
+
+      for (const level of validLevels) {
+        const container = await createHeading(`level="${level}"`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        expect(heading.level).toBe(level)
+        expect(heading.getAttribute('aria-level')).toBe(String(level))
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('handles invalid levels gracefully', async () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
+
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      // Test invalid level via property
+      heading.level = 0 as TPktHeadingLevel
+      await heading.updateComplete
+
+      expect(consoleSpy).toHaveBeenCalledWith('Invalid heading level: 0. Must be between 1 and 6.')
+
+      heading.level = 7 as TPktHeadingLevel
+      await heading.updateComplete
+
+      expect(consoleSpy).toHaveBeenCalledWith('Invalid heading level: 7. Must be between 1 and 6.')
+
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('Property updates and lifecycle', () => {
+    test('updates classes when size property changes', async () => {
+      const container = await createHeading('size="small"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--small')).toBe(true)
+
+      heading.size = 'xlarge'
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--small')).toBe(false)
+      expect(heading.classList.contains('pkt-heading--xlarge')).toBe(true)
+    })
+
+    test('updates classes when visuallyHidden property changes', async () => {
+      const container = await createHeading()
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-sr-only')).toBe(false)
+
+      heading.visuallyHidden = true
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-sr-only')).toBe(true)
+    })
+
+    test('updates classes when align property changes', async () => {
+      const container = await createHeading('align="start"')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--start')).toBe(true)
+
+      heading.align = 'center'
+      await heading.updateComplete
+
+      expect(heading.classList.contains('pkt-heading--start')).toBe(false)
+      expect(heading.classList.contains('pkt-heading--center')).toBe(true)
+    })
+  })
+
+  describe('Content rendering', () => {
+    test('renders simple text content', async () => {
+      const container = await createHeading('', 'Simple Heading')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+
+      expect(heading.textContent).toContain('Simple Heading')
+    })
+
+    test('renders HTML content safely', async () => {
+      const container = await createHeading('', '<strong>Bold</strong> heading')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+
+      expect(heading.innerHTML).toContain('<strong>Bold</strong>')
+      expect(heading.innerHTML).toContain('heading')
+      expect(heading.querySelector('strong')).toBeInTheDocument()
+    })
+
+    test('renders multiple child elements', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pkt-heading>
+          <span>Part 1</span>
+          <em>Part 2</em>
+        </pkt-heading>
+      `
+      document.body.appendChild(container)
+      await waitForCustomElements()
+
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      expect(heading.querySelector('span')).toBeInTheDocument()
+      expect(heading.querySelector('em')).toBeInTheDocument()
+      expect(heading.textContent).toContain('Part 1')
+      expect(heading.textContent).toContain('Part 2')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic heading is accessible', async () => {
+      const container = await createHeading('', 'Accessible Heading')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      const results = await axe(heading)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('heading with different levels is accessible', async () => {
+      const levels: TPktHeadingLevel[] = [1, 2, 3, 4, 5, 6]
+
+      for (const level of levels) {
+        const container = await createHeading(`level="${level}"`, `Level ${level} Heading`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        const results = await axe(heading)
+        expect(results).toHaveNoViolations()
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('visually hidden heading is accessible', async () => {
+      const container = await createHeading('visually-hidden="true"', 'Hidden Heading')
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      const results = await axe(heading)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('heading with different alignments is accessible', async () => {
+      const alignments = ['start', 'center', 'end'] as const
+
+      for (const align of alignments) {
+        const container = await createHeading(`align="${align}"`, `${align} aligned heading`)
+        const heading = container.querySelector('pkt-heading') as PktHeading
+        await heading.updateComplete
+
+        const results = await axe(heading)
+        expect(results).toHaveNoViolations()
+        document.body.innerHTML = ''
+      }
+    })
+
+    test('complex heading content is accessible', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pkt-heading level="1" size="large" align="center">
+          <span>Main</span> <em>Title</em> with <strong>emphasis</strong>
+        </pkt-heading>
+      `
+      document.body.appendChild(container)
+      await waitForCustomElements()
+
+      const heading = container.querySelector('pkt-heading') as PktHeading
+      await heading.updateComplete
+
+      const results = await axe(heading)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Integration scenarios', () => {
+    test('works correctly with multiple headings', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pkt-heading level="1" size="xlarge">Main Title</pkt-heading>
+        <pkt-heading level="2" size="large">Subtitle</pkt-heading>
+        <pkt-heading level="3" size="medium">Section</pkt-heading>
+      `
+      document.body.appendChild(container)
+      await waitForCustomElements()
+
+      const headings = container.querySelectorAll('pkt-heading') as NodeListOf<PktHeading>
+      await Promise.all([...headings].map((h) => h.updateComplete))
+
+      expect(headings[0].level).toBe(1)
+      expect(headings[0].size).toBe('xlarge')
+      expect(headings[1].level).toBe(2)
+      expect(headings[1].size).toBe('large')
+      expect(headings[2].level).toBe(3)
+      expect(headings[2].size).toBe('medium')
+    })
+
+    test('maintains independence between multiple instances', async () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pkt-heading id="h1" level="1" size="large">Heading 1</pkt-heading>
+        <pkt-heading id="h2" level="2" size="small">Heading 2</pkt-heading>
+      `
+      document.body.appendChild(container)
+      await waitForCustomElements()
+
+      const heading1 = container.querySelector('#h1') as PktHeading
+      const heading2 = container.querySelector('#h2') as PktHeading
+      await Promise.all([heading1.updateComplete, heading2.updateComplete])
+
+      // Change properties on first heading
+      heading1.size = 'xlarge'
+      heading1.align = 'center'
+      await heading1.updateComplete
+
+      // Verify second heading is unaffected
+      expect(heading2.size).toBe('small')
+      expect(heading2.align).toBe('start')
+      expect(heading1.size).toBe('xlarge')
+      expect(heading1.align).toBe('center')
+    })
+  })
+})

package/src/components/heading/heading.ts

@@ -31,6 +31,9 @@ export class PktHeading extends PktShadowElement<IPktHeading> implements IPktHea
     if (name === 'level' && value) {
       this.setLevel(Number(value) as TPktHeadingLevel)
     }
+    if (name === 'visuallyHidden') {
+      this.visuallyHidden = value !== null && value !== 'false'
+    }
     if (name === 'size' || name === 'visuallyHidden' || name === 'align') {
       this.updateHostClasses()
     }