@oslokommune/punkt-elements 13.4.2 → 13.5.1

package/src/components/consent/consent.test.ts

@@ -0,0 +1,436 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './consent'
+import { PktConsent } from './consent'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-consent')
+  await customElements.whenDefined('pkt-button')
+}
+
+// Helper function to create consent markup
+const createConsent = async (consentProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-consent ${consentProps}></pkt-consent>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+  // Clean up any injected scripts
+  const existingScript = document.querySelector('#oslo-consent-script')
+  if (existingScript) {
+    existingScript.remove()
+  }
+  const existingStyles = document.querySelector('#oslo-consent-styles')
+  if (existingStyles) {
+    existingStyles.remove()
+  }
+  // Clean up global variables
+  delete window.cookieBanner_googleAnalyticsId
+  delete window.cookieBanner_hotjarId
+  delete window.cookieBanner_devMode
+  delete window.cookieBanner_cookieDomain
+  delete window.cookieBanner_cookieSecure
+  delete window.cookieBanner_cookieExpiryDays
+  delete window.cookieBanner
+  delete window.__cookieEvents
+})
+
+describe('PktConsent', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createConsent()
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      expect(consent).toBeInTheDocument()
+
+      await consent.updateComplete
+      expect(consent).toBeTruthy()
+    })
+
+    test('renders with default trigger type as button', async () => {
+      const container = await createConsent()
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerType).toBe('button')
+
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+    })
+
+    test('renders with custom trigger text', async () => {
+      const customText = 'Custom consent settings'
+      const container = await createConsent(`triggerText="${customText}"`)
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerText).toBe(customText)
+      const button = consent.querySelector('pkt-button')
+      expect(button?.textContent?.trim()).toBe(customText)
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createConsent()
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.devMode).toBe(false)
+      expect(consent.triggerType).toBe('button')
+      expect(consent.i18nLanguage).toBe('nb')
+      expect(consent.hotjarId).toBe(null)
+      expect(consent.googleAnalyticsId).toBe(null)
+      expect(consent.cookieDomain).toBe(null)
+      expect(consent.cookieSecure).toBe(null)
+      expect(consent.cookieExpiryDays).toBe(null)
+    })
+
+    test('sets dev mode correctly', async () => {
+      const container = await createConsent('devMode')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.devMode).toBe(true)
+    })
+
+    test('sets analytics IDs correctly', async () => {
+      const googleId = 'GA-123456789'
+      const hotjarId = 'HJ-987654321'
+      const container = await createConsent(
+        `googleAnalyticsId="${googleId}" hotjarId="${hotjarId}"`,
+      )
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.googleAnalyticsId).toBe(googleId)
+      expect(consent.hotjarId).toBe(hotjarId)
+    })
+
+    test('sets cookie configuration correctly', async () => {
+      const domain = '.example.com'
+      const secure = 'true'
+      const expiryDays = '365'
+      const container = await createConsent(
+        `cookieDomain="${domain}" cookieSecure="${secure}" cookieExpiryDays="${expiryDays}"`,
+      )
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.cookieDomain).toBe(domain)
+      expect(consent.cookieSecure).toBe(secure)
+      expect(consent.cookieExpiryDays).toBe(expiryDays)
+    })
+
+    test('sets language correctly', async () => {
+      const container = await createConsent('i18nLanguage="en"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.i18nLanguage).toBe('en')
+    })
+  })
+
+  describe('Trigger types', () => {
+    test('renders as button trigger type', async () => {
+      const container = await createConsent('triggerType="button"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerType).toBe('button')
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+      expect(button?.getAttribute('skin')).toBe(null) // Default button
+    })
+
+    test('renders as link trigger type', async () => {
+      const container = await createConsent('triggerType="link"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerType).toBe('link')
+      const link = consent.querySelector('a.pkt-link')
+      expect(link).toBeInTheDocument()
+      expect(link?.getAttribute('href')).toBe('#')
+    })
+
+    test('renders as footer link trigger type', async () => {
+      const container = await createConsent('triggerType="footerlink"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerType).toBe('footerlink')
+      const footerLink = consent.querySelector('a.pkt-footer__link')
+      expect(footerLink).toBeInTheDocument()
+
+      const icon = footerLink?.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('chevron-right')
+    })
+
+    test('renders as icon trigger type', async () => {
+      const container = await createConsent('triggerType="icon"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(consent.triggerType).toBe('icon')
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+      expect(button?.getAttribute('skin')).toBe('tertiary')
+      expect(button?.getAttribute('variant')).toBe('icon-only')
+      expect(button?.getAttribute('iconName')).toBe('cookie')
+    })
+  })
+
+  describe('Event handling', () => {
+    beforeEach(() => {
+      // Mock the entire window.cookieBanner object
+      Object.defineProperty(window, 'cookieBanner', {
+        value: {
+          cookieConsent: {
+            validateConsentCookie: jest.fn().mockResolvedValue(true),
+            getConsentCookie: jest.fn().mockReturnValue('mock-cookie'),
+          },
+          openCookieModal: jest.fn(),
+        },
+        writable: true,
+      })
+
+      // Mock window.__cookieEvents
+      Object.defineProperty(window, '__cookieEvents', {
+        value: {
+          on: jest.fn(),
+          off: jest.fn(),
+        },
+        writable: true,
+      })
+
+      // Use fake timers to control setTimeout
+      jest.useFakeTimers()
+    })
+
+    afterEach(() => {
+      // Clean up mocks and timers
+      jest.useRealTimers()
+      delete (window as any).cookieBanner
+      delete (window as any).__cookieEvents
+    })
+
+    test('handles click event on button trigger', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+
+      fireEvent.click(button!)
+
+      // Fast-forward time to trigger setTimeout
+      jest.runAllTimers()
+
+      expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
+    })
+
+    test('handles click event on link trigger', async () => {
+      const container = await createConsent('triggerType="link"')
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const link = consent.querySelector('a.pkt-link')
+      expect(link).toBeInTheDocument()
+
+      fireEvent.click(link!)
+
+      // Fast-forward time to trigger setTimeout
+      jest.runAllTimers()
+
+      expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
+    })
+
+    test('dispatches toggle-consent event', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      let eventFired = false
+      let eventDetail: any = null
+
+      consent.addEventListener('toggle-consent', (e: Event) => {
+        eventFired = true
+        eventDetail = (e as CustomEvent).detail
+      })
+
+      // Mock consent data
+      const mockConsent = {
+        value: JSON.stringify({
+          items: [
+            { name: 'analytics', consent: true },
+            { name: 'marketing', consent: false },
+          ],
+        }),
+      }
+
+      consent.emitCookieConsents(mockConsent)
+
+      expect(eventFired).toBe(true)
+      expect(eventDetail).toEqual({
+        analytics: true,
+        marketing: false,
+      })
+    })
+  })
+
+  describe('Utility methods', () => {
+    test('returnJsonOrObject handles JSON strings', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+
+      const jsonString = '{"test": "value"}'
+      const result = consent.returnJsonOrObject(jsonString)
+
+      expect(result).toEqual({ test: 'value' })
+    })
+
+    test('returnJsonOrObject handles non-JSON objects', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+
+      const nonJsonObject = { test: 'value' }
+      const result = consent.returnJsonOrObject(nonJsonObject)
+
+      expect(result).toEqual(nonJsonObject)
+    })
+
+    test('returnJsonOrObject handles invalid JSON gracefully', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+
+      const invalidJson = 'invalid json string'
+      const result = consent.returnJsonOrObject(invalidJson)
+
+      expect(result).toBe(invalidJson)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('button trigger is accessible', async () => {
+      const container = await createConsent('triggerText="Cookie settings"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+      expect(button?.textContent?.trim()).toBe('Cookie settings')
+    })
+
+    test('link trigger is accessible', async () => {
+      const container = await createConsent('triggerType="link" triggerText="Cookie settings"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+
+      const link = consent.querySelector('a')
+      expect(link).toBeInTheDocument()
+      expect(link?.textContent?.trim()).toBe('Cookie settings')
+    })
+
+    test('footer link trigger is accessible', async () => {
+      const container = await createConsent(
+        'triggerType="footerlink" triggerText="Cookie settings"',
+      )
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+
+      const link = consent.querySelector('a.pkt-footer__link')
+      expect(link).toBeInTheDocument()
+      expect(link?.textContent?.trim()).toContain('Cookie settings')
+    })
+
+    test('icon trigger is accessible', async () => {
+      const container = await createConsent('triggerType="icon" triggerText="Cookie settings"')
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+
+      const button = consent.querySelector('pkt-button')
+      expect(button).toBeInTheDocument()
+      expect(button?.textContent?.trim()).toContain('Cookie settings')
+    })
+  })
+
+  describe('Integration and lifecycle', () => {
+    test('sets global variables on firstUpdated', async () => {
+      const googleId = 'GA-123456789'
+      const hotjarId = 'HJ-987654321'
+      const container = await createConsent(
+        `devMode googleAnalyticsId="${googleId}" hotjarId="${hotjarId}" cookieDomain=".test.com"`,
+      )
+
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      expect(window.cookieBanner_googleAnalyticsId).toBe(googleId)
+      expect(window.cookieBanner_hotjarId).toBe(hotjarId)
+      expect(window.cookieBanner_devMode).toBe(true)
+      expect(window.cookieBanner_cookieDomain).toBe('.test.com')
+    })
+
+    test('cleans up event listeners on disconnect', async () => {
+      const container = await createConsent()
+      const consent = container.querySelector('pkt-consent') as PktConsent
+      await consent.updateComplete
+
+      // Mock the event system
+      window.__cookieEvents = {
+        on: jest.fn(),
+        off: jest.fn(),
+      }
+
+      // Set up a handler
+      const mockHandler = jest.fn()
+      consent['_cookieEventHandler'] = mockHandler
+
+      // Disconnect the component
+      consent.disconnectedCallback()
+
+      expect(window.__cookieEvents.off).toHaveBeenCalledWith('CookieManager.setCookie', mockHandler)
+    })
+  })
+})

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

@@ -0,0 +1,193 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+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('Event handling', () => {
+    test('dispatches change event when value changes', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let changeEventFired = false
+      datepicker.addEventListener('change', () => {
+        changeEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      expect(changeEventFired).toBe(true)
+    })
+
+    test('dispatches input event during typing', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let inputEventFired = false
+      datepicker.addEventListener('input', () => {
+        inputEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.input(input, { target: { value: '2024-06-15' } })
+      await datepicker.updateComplete
+
+      expect(inputEventFired).toBe(true)
+    })
+
+    test('dispatches focus and blur events', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let focusEventFired = false
+      let blurEventFired = false
+
+      datepicker.addEventListener('focus', () => {
+        focusEventFired = true
+      })
+      datepicker.addEventListener('blur', () => {
+        blurEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.focus(input)
+      await datepicker.updateComplete
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      expect(focusEventFired).toBe(true)
+      expect(blurEventFired).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const container = await createDatepicker(
+        'label="Test Datepicker" helptext="Select your date"',
+      )
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const results = await axe(datepicker)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('associates label with input correctly', async () => {
+      const container = await createDatepicker('id="test-datepicker" label="Test Label"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const label = datepicker.querySelector('label')
+      const input = datepicker.querySelector('input')
+
+      expect(label).toHaveAttribute('for')
+      expect(input).toHaveAttribute('id')
+      expect(label?.getAttribute('for')).toBe(input?.getAttribute('id'))
+    })
+
+    test('has proper ARIA attributes for calendar button', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      expect(calendarButton).toBeInTheDocument()
+
+      // Check initial state
+      expect(datepicker.calendarOpen).toBe(false)
+
+      // Open calendar
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(true)
+    })
+
+    test('provides proper screen reader announcements', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input')
+      expect(input).toHaveAttribute('aria-describedby')
+    })
+
+    test('handles focus management correctly', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLElement
+
+      // Focus should be manageable
+      if (calendarButton) {
+        calendarButton.focus()
+        expect(document.activeElement).toBe(calendarButton)
+      }
+    })
+
+    test('supports keyboard-only interaction', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLElement
+
+      // Should open with keyboard
+      if (calendarButton) {
+        calendarButton.focus()
+        fireEvent.keyDown(calendarButton, { key: 'Enter' })
+        await datepicker.updateComplete
+
+        expect(datepicker.calendarOpen).toBe(true)
+      }
+
+      // Should close with keyboard
+      fireEvent.keyDown(datepicker, { key: 'Escape' })
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(false)
+    })
+  })
+})