@oslokommune/punkt-elements 13.5.2 → 13.5.3

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

@@ -1,26 +1,35 @@
 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 './consent'
 
 expect.extend(toHaveNoViolations)
 
-import './consent'
-import { PktConsent } from './consent'
-
-const waitForCustomElements = async () => {
-  await customElements.whenDefined('pkt-consent')
-  await customElements.whenDefined('pkt-button')
+export interface ConsentTestConfig extends BaseTestConfig {
+  devMode?: boolean
+  googleAnalyticsId?: string
+  hotjarId?: string
+  cookieDomain?: string
+  cookieSecure?: string // Using string to match the component's string attributes
+  cookieExpiryDays?: string
+  triggerType?: string
+  triggerText?: string
+  i18nLanguage?: string
 }
 
-// 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
+// Use shared framework
+export const createConsentTest = async (config: ConsentTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-consent'>,
+    ConsentTestConfig
+  >('pkt-consent', config)
+
+  return {
+    container,
+    consent: element,
+  }
 }
 
 // Cleanup after each test
@@ -49,9 +58,8 @@ afterEach(() => {
 describe('PktConsent', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
-      const container = await createConsent()
+      const { consent } = await createConsentTest()
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       expect(consent).toBeInTheDocument()
 
       await consent.updateComplete
@@ -59,9 +67,8 @@ describe('PktConsent', () => {
     })
 
     test('renders with default trigger type as button', async () => {
-      const container = await createConsent()
+      const { consent } = await createConsentTest()
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.triggerType).toBe('button')
@@ -72,9 +79,10 @@ describe('PktConsent', () => {
 
     test('renders with custom trigger text', async () => {
       const customText = 'Custom consent settings'
-      const container = await createConsent(`triggerText="${customText}"`)
+      const { consent } = await createConsentTest({
+        triggerText: customText,
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.triggerText).toBe(customText)
@@ -85,9 +93,8 @@ describe('PktConsent', () => {
 
   describe('Properties and attributes', () => {
     test('applies default properties correctly', async () => {
-      const container = await createConsent()
+      const { consent } = await createConsentTest()
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.devMode).toBe(false)
@@ -101,9 +108,10 @@ describe('PktConsent', () => {
     })
 
     test('sets dev mode correctly', async () => {
-      const container = await createConsent('devMode')
+      const { consent } = await createConsentTest({
+        devMode: true,
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.devMode).toBe(true)
@@ -112,11 +120,11 @@ describe('PktConsent', () => {
     test('sets analytics IDs correctly', async () => {
       const googleId = 'GA-123456789'
       const hotjarId = 'HJ-987654321'
-      const container = await createConsent(
-        `googleAnalyticsId="${googleId}" hotjarId="${hotjarId}"`,
-      )
+      const { consent } = await createConsentTest({
+        googleAnalyticsId: googleId,
+        hotjarId: hotjarId,
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.googleAnalyticsId).toBe(googleId)
@@ -127,11 +135,12 @@ describe('PktConsent', () => {
       const domain = '.example.com'
       const secure = 'true'
       const expiryDays = '365'
-      const container = await createConsent(
-        `cookieDomain="${domain}" cookieSecure="${secure}" cookieExpiryDays="${expiryDays}"`,
-      )
+      const { consent } = await createConsentTest({
+        cookieDomain: domain,
+        cookieSecure: secure,
+        cookieExpiryDays: expiryDays,
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.cookieDomain).toBe(domain)
@@ -140,9 +149,10 @@ describe('PktConsent', () => {
     })
 
     test('sets language correctly', async () => {
-      const container = await createConsent('i18nLanguage="en"')
+      const { consent } = await createConsentTest({
+        i18nLanguage: 'en',
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.i18nLanguage).toBe('en')
@@ -151,9 +161,10 @@ describe('PktConsent', () => {
 
   describe('Trigger types', () => {
     test('renders as button trigger type', async () => {
-      const container = await createConsent('triggerType="button"')
+      const { consent } = await createConsentTest({
+        triggerType: 'button',
+      })
 
-      const consent = container.querySelector('pkt-consent') as PktConsent
       await consent.updateComplete
 
       expect(consent.triggerType).toBe('button')
@@ -163,10 +174,9 @@ describe('PktConsent', () => {
     })
 
     test('renders as link trigger type', async () => {
-      const container = await createConsent('triggerType="link"')
-
-      const consent = container.querySelector('pkt-consent') as PktConsent
-      await consent.updateComplete
+      const { consent } = await createConsentTest({
+        triggerType: 'link',
+      })
 
       expect(consent.triggerType).toBe('link')
       const link = consent.querySelector('a.pkt-link')
@@ -175,10 +185,9 @@ describe('PktConsent', () => {
     })
 
     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
+      const { consent } = await createConsentTest({
+        triggerType: 'footerlink',
+      })
 
       expect(consent.triggerType).toBe('footerlink')
       const footerLink = consent.querySelector('a.pkt-footer__link')
@@ -190,10 +199,9 @@ describe('PktConsent', () => {
     })
 
     test('renders as icon trigger type', async () => {
-      const container = await createConsent('triggerType="icon"')
-
-      const consent = container.querySelector('pkt-consent') as PktConsent
-      await consent.updateComplete
+      const { consent } = await createConsentTest({
+        triggerType: 'icon',
+      })
 
       expect(consent.triggerType).toBe('icon')
       const button = consent.querySelector('pkt-button')
@@ -239,9 +247,7 @@ describe('PktConsent', () => {
     })
 
     test('handles click event on button trigger', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
-      await consent.updateComplete
+      const { consent } = await createConsentTest()
 
       const button = consent.querySelector('pkt-button')
       expect(button).toBeInTheDocument()
@@ -255,9 +261,9 @@ describe('PktConsent', () => {
     })
 
     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 { consent } = await createConsentTest({
+        triggerType: 'link',
+      })
 
       const link = consent.querySelector('a.pkt-link')
       expect(link).toBeInTheDocument()
@@ -271,9 +277,7 @@ describe('PktConsent', () => {
     })
 
     test('dispatches toggle-consent event', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
-      await consent.updateComplete
+      const { consent } = await createConsentTest()
 
       let eventFired = false
       let eventDetail: any = null
@@ -305,8 +309,7 @@ describe('PktConsent', () => {
 
   describe('Utility methods', () => {
     test('returnJsonOrObject handles JSON strings', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
+      const { consent } = await createConsentTest()
 
       const jsonString = '{"test": "value"}'
       const result = consent.returnJsonOrObject(jsonString)
@@ -315,8 +318,7 @@ describe('PktConsent', () => {
     })
 
     test('returnJsonOrObject handles non-JSON objects', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
+      const { consent } = await createConsentTest()
 
       const nonJsonObject = { test: 'value' }
       const result = consent.returnJsonOrObject(nonJsonObject)
@@ -325,8 +327,7 @@ describe('PktConsent', () => {
     })
 
     test('returnJsonOrObject handles invalid JSON gracefully', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
+      const { consent } = await createConsentTest()
 
       const invalidJson = 'invalid json string'
       const result = consent.returnJsonOrObject(invalidJson)
@@ -337,10 +338,9 @@ describe('PktConsent', () => {
 
   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 { container, consent } = await createConsentTest({
+        triggerText: 'Cookie settings',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -351,10 +351,10 @@ describe('PktConsent', () => {
     })
 
     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 { container, consent } = await createConsentTest({
+        triggerType: 'link',
+        triggerText: 'Cookie settings',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -365,12 +365,10 @@ describe('PktConsent', () => {
     })
 
     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 { container, consent } = await createConsentTest({
+        triggerType: 'footerlink',
+        triggerText: 'Cookie settings',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -381,10 +379,10 @@ describe('PktConsent', () => {
     })
 
     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 { container, consent } = await createConsentTest({
+        triggerType: 'icon',
+        triggerText: 'Cookie settings',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -399,12 +397,12 @@ describe('PktConsent', () => {
     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
+      await createConsentTest({
+        devMode: true,
+        googleAnalyticsId: googleId,
+        hotjarId: hotjarId,
+        cookieDomain: '.test.com',
+      })
 
       expect(window.cookieBanner_googleAnalyticsId).toBe(googleId)
       expect(window.cookieBanner_hotjarId).toBe(hotjarId)
@@ -413,9 +411,7 @@ describe('PktConsent', () => {
     })
 
     test('cleans up event listeners on disconnect', async () => {
-      const container = await createConsent()
-      const consent = container.querySelector('pkt-consent') as PktConsent
-      await consent.updateComplete
+      const { consent } = await createConsentTest()
 
       // Mock the event system
       window.__cookieEvents = {