@oslokommune/punkt-elements 13.5.1 → 13.5.3

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

@@ -1,49 +1,48 @@
 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 './calendar'
 
 expect.extend(toHaveNoViolations)
 
-import './calendar'
-import { PktCalendar } from './calendar'
-
-const waitForCustomElements = async () => {
-  await customElements.whenDefined('pkt-calendar')
+export interface CalendarTestConfig extends BaseTestConfig {
+  withcontrols?: boolean
+  weeknumbers?: boolean
+  multiple?: boolean
+  range?: boolean
+  earliest?: string
+  latest?: string
+  currentmonth?: string
+  excludedates?: string
+  excludeweekdays?: string
 }
 
-// Helper function to create calendar markup
-const createCalendar = async (calendarProps = '') => {
-  const container = document.createElement('div')
-  container.innerHTML = `
-    <pkt-calendar ${calendarProps}></pkt-calendar>
-  `
-  document.body.appendChild(container)
-  await waitForCustomElements()
-  return container
+// Use shared framework
+export const createCalendarTest = async (config: CalendarTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-calendar'>,
+    CalendarTestConfig
+  >('pkt-calendar', config)
+
+  return {
+    container,
+    calendar: element,
+  }
 }
 
-// Cleanup after each test
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
 describe('PktCalendar', () => {
   describe('Accessibility', () => {
     test('has no accessibility violations', async () => {
-      const container = await createCalendar('withcontrols weeknumbers')
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest({ withcontrols: true, weeknumbers: true })
 
       const results = await axe(calendar)
       expect(results).toHaveNoViolations()
     })
 
     test('has proper ARIA attributes', async () => {
-      const container = await createCalendar('withcontrols')
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest({ withcontrols: true })
 
       const calendarTable = calendar.querySelector('.pkt-calendar__body')
       expect(calendarTable).toHaveAttribute('role', 'grid')
@@ -56,10 +55,7 @@ describe('PktCalendar', () => {
     })
 
     test('navigation buttons have proper labels', async () => {
-      const container = await createCalendar('withcontrols')
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest({ withcontrols: true })
 
       const prevButton = calendar.querySelector('.pkt-calendar__prev-month')
       const nextButton = calendar.querySelector('.pkt-calendar__next-month')
@@ -69,10 +65,7 @@ describe('PktCalendar', () => {
     })
 
     test('date buttons have proper accessible names', async () => {
-      const container = await createCalendar()
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest()
 
       const dateButtons = calendar.querySelectorAll('.pkt-calendar__date')
       dateButtons.forEach((button) => {
@@ -82,10 +75,7 @@ describe('PktCalendar', () => {
     })
 
     test('selected dates have proper ARIA state', async () => {
-      const container = await createCalendar()
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest()
 
       const firstDate = calendar.querySelector(
         '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
@@ -97,10 +87,7 @@ describe('PktCalendar', () => {
     })
 
     test('disabled dates have proper ARIA state', async () => {
-      const container = await createCalendar('excludeweekdays="0,6"')
-
-      const calendar = container.querySelector('pkt-calendar') as PktCalendar
-      await calendar.updateComplete
+      const { calendar } = await createCalendarTest({ excludeweekdays: '0,6' })
 
       const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
       disabledDates.forEach((date) => {

package/src/components/card/card.test.ts

@@ -1,26 +1,40 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './card'
 
 expect.extend(toHaveNoViolations)
 
-import './card'
-import { PktCard } from './card'
-
-const waitForCustomElements = async () => {
-  await customElements.whenDefined('pkt-card')
+export interface CardTestConfig extends BaseTestConfig {
+  skin?: string
+  layout?: string
+  padding?: string
+  borderOnHover?: boolean
+  heading?: string
+  subheading?: string
+  headingLevel?: number
+  href?: string
+  linkText?: string
+  image?: string
+  imageAlt?: string
+  tags?: string
+  metaPrefix?: string
+  metaLabel?: string
+  metaDate?: string
 }
 
-// Helper function to create card markup
-const createCard = async (cardProps = '', content = 'Card content') => {
-  const container = document.createElement('div')
-  container.innerHTML = `
-    <pkt-card ${cardProps}>
-      ${content}
-    </pkt-card>
-  `
-  document.body.appendChild(container)
-  await waitForCustomElements()
-  return container
+// Use shared framework
+export const createCardTest = async (config: CardTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-card'>,
+    CardTestConfig
+  >('pkt-card', config)
+
+  return {
+    container,
+    card: element,
+  }
 }
 
 // Cleanup after each test
@@ -43,9 +57,8 @@ afterEach(() => {
 describe('PktCard', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
-      const container = await createCard()
+      const { card } = await createCardTest()
 
-      const card = container.querySelector('pkt-card') as PktCard
       expect(card).toBeInTheDocument()
 
       await card.updateComplete
@@ -57,9 +70,7 @@ describe('PktCard', () => {
     })
 
     test('renders content in slot', async () => {
-      const container = await createCard('', '<p>Test content here</p>')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ content: '<p>Test content here</p>' })
       await card.updateComplete
 
       const content = card.querySelector('.pkt-card__content')
@@ -68,9 +79,7 @@ describe('PktCard', () => {
     })
 
     test('renders basic structure correctly', async () => {
-      const container = await createCard('heading="Test Heading"', 'Test content')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test Heading', content: 'Test content' })
       await card.updateComplete
 
       const article = card.querySelector('article')
@@ -86,9 +95,7 @@ describe('PktCard', () => {
 
   describe('Properties and attributes', () => {
     test('applies default properties correctly', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       expect(card.skin).toBe('outlined')
@@ -111,8 +118,7 @@ describe('PktCard', () => {
       const skins = ['outlined', 'outlined-beige', 'gray', 'beige', 'green', 'blue']
 
       for (const skin of skins) {
-        const container = await createCard(`skin="${skin}"`)
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card } = await createCardTest({ skin })
         await card.updateComplete
 
         expect(card.skin).toBe(skin)
@@ -120,9 +126,6 @@ describe('PktCard', () => {
 
         const article = card.querySelector('article')
         expect(article).toHaveClass(`pkt-card--${skin}`)
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
@@ -130,8 +133,7 @@ describe('PktCard', () => {
       const unsupportedSkins = ['zebra', 'goldenrod', 'hotpink', 'rainbow', 'invalid']
 
       for (const invalidSkin of unsupportedSkins) {
-        const container = await createCard(`skin="${invalidSkin}"`)
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card } = await createCardTest({ skin: invalidSkin })
         await card.updateComplete
 
         // The component should now validate skin values and fall back to default
@@ -143,9 +145,6 @@ describe('PktCard', () => {
         expect(article).not.toHaveClass(`pkt-card--${invalidSkin}`)
         // Should have the default skin class instead
         expect(article).toHaveClass('pkt-card--outlined')
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
@@ -154,8 +153,7 @@ describe('PktCard', () => {
       consoleWarnSpy.mockRestore()
       const localConsoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
 
-      const container = await createCard(`skin="zebra"`)
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ skin: 'zebra' })
       await card.updateComplete
 
       // Should have logged a warning with the correct default value from spec
@@ -175,8 +173,7 @@ describe('PktCard', () => {
       const layouts = ['vertical', 'horizontal']
 
       for (const layout of layouts) {
-        const container = await createCard(`layout="${layout}"`)
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card } = await createCardTest({ layout })
         await card.updateComplete
 
         expect(card.layout).toBe(layout)
@@ -184,9 +181,6 @@ describe('PktCard', () => {
 
         const article = card.querySelector('article')
         expect(article).toHaveClass(`pkt-card--${layout}`)
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
@@ -194,8 +188,7 @@ describe('PktCard', () => {
       const paddingOptions = ['none', 'default']
 
       for (const padding of paddingOptions) {
-        const container = await createCard(`padding="${padding}"`)
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card } = await createCardTest({ padding })
         await card.updateComplete
 
         expect(card.padding).toBe(padding)
@@ -203,16 +196,12 @@ describe('PktCard', () => {
 
         const article = card.querySelector('article')
         expect(article).toHaveClass(`pkt-card--padding-${padding}`)
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
     test('handles borderOnHover property correctly', async () => {
       // Test with borderOnHover false
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.borderOnHover = false
       await card.updateComplete
 
@@ -225,9 +214,7 @@ describe('PktCard', () => {
 
   describe('Heading functionality', () => {
     test('renders heading when provided', async () => {
-      const container = await createCard('heading="Test Card Title"')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test Card Title' })
       await card.updateComplete
 
       expect(card.heading).toBe('Test Card Title')
@@ -239,9 +226,7 @@ describe('PktCard', () => {
     })
 
     test('renders subheading when provided', async () => {
-      const container = await createCard('subheading="Test Subheading"')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ subheading: 'Test Subheading' })
       await card.updateComplete
 
       expect(card.subheading).toBe('Test Subheading')
@@ -252,9 +237,7 @@ describe('PktCard', () => {
     })
 
     test('applies correct heading level', async () => {
-      const container = await createCard('heading="Test" headinglevel="2"')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test', headingLevel: 2 })
       await card.updateComplete
 
       expect(card.headinglevel).toBe(2)
@@ -264,9 +247,7 @@ describe('PktCard', () => {
     })
 
     test('does not render header when no heading or subheading', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       const header = card.querySelector('.pkt-card__header')
@@ -276,9 +257,7 @@ describe('PktCard', () => {
 
   describe('Link functionality', () => {
     test('renders as regular card when no clickCardLink', async () => {
-      const container = await createCard('heading="Test Title"')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test Title' })
       await card.updateComplete
 
       expect(card.clickCardLink).toBe(null)
@@ -293,8 +272,7 @@ describe('PktCard', () => {
     })
 
     test('renders as link card when clickCardLink provided', async () => {
-      const container = await createCard('heading="Test Title"')
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test Title' })
       card.clickCardLink = '/test-url'
       await card.updateComplete
 
@@ -312,8 +290,7 @@ describe('PktCard', () => {
     })
 
     test('handles openLinkInNewTab correctly', async () => {
-      const container = await createCard('heading="Test"')
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test' })
       card.clickCardLink = '/test'
       card.openLinkInNewTab = true
       await card.updateComplete
@@ -325,8 +302,7 @@ describe('PktCard', () => {
     })
 
     test('applies correct aria-label for link cards', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.clickCardLink = '/test'
       card.ariaLabel = 'Custom aria label'
       await card.updateComplete
@@ -338,8 +314,7 @@ describe('PktCard', () => {
 
   describe('Image functionality', () => {
     test('renders image when provided', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.image = { src: '/test-image.jpg', alt: 'Test image' }
       await card.updateComplete
 
@@ -355,9 +330,7 @@ describe('PktCard', () => {
     })
 
     test('does not render image when not provided', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       const imageDiv = card.querySelector('.pkt-card__image')
@@ -368,8 +341,7 @@ describe('PktCard', () => {
       const shapes = ['square', 'round'] as const
 
       for (const shape of shapes) {
-        const container = await createCard()
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card } = await createCardTest()
         card.image = { src: '/test.jpg', alt: 'Test' }
         card.imageShape = shape
         await card.updateComplete
@@ -378,17 +350,13 @@ describe('PktCard', () => {
 
         const imageDiv = card.querySelector('.pkt-card__image')
         expect(imageDiv).toHaveClass(`pkt-card__image-${shape}`)
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
   })
 
   describe('Tags functionality', () => {
     test('renders tags when provided', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.tags = [
         { text: 'Tag 1', skin: 'blue' },
         { text: 'Tag 2', skin: 'green' },
@@ -405,8 +373,7 @@ describe('PktCard', () => {
     })
 
     test('renders single tag with correct aria-label', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.tags = [{ text: 'Single Tag' }]
       await card.updateComplete
 
@@ -418,8 +385,7 @@ describe('PktCard', () => {
       const positions = ['top', 'bottom'] as const
 
       for (const position of positions) {
-        const container = await createCard()
-        const card = container.querySelector('pkt-card') as PktCard
+        const { card, container } = await createCardTest()
         card.tags = [{ text: 'Test Tag' }]
         card.tagPosition = position
         await card.updateComplete
@@ -435,9 +401,7 @@ describe('PktCard', () => {
     })
 
     test('does not render tags when array is empty', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       const tagsContainer = card.querySelector('.pkt-card__tags')
@@ -447,8 +411,7 @@ describe('PktCard', () => {
 
   describe('Metadata functionality', () => {
     test('renders metadata when provided', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.metaLead = 'Author Name'
       card.metaTrail = '2023-12-01'
       await card.updateComplete
@@ -468,8 +431,7 @@ describe('PktCard', () => {
     })
 
     test('renders only metaLead when metaTrail not provided', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.metaLead = 'Author Only'
       await card.updateComplete
 
@@ -484,8 +446,7 @@ describe('PktCard', () => {
     })
 
     test('renders only metaTrail when metaLead not provided', async () => {
-      const container = await createCard()
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       card.metaTrail = 'Date Only'
       await card.updateComplete
 
@@ -500,9 +461,7 @@ describe('PktCard', () => {
     })
 
     test('does not render metadata when neither provided', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       const metadata = card.querySelector('.pkt-card__metadata')
@@ -512,11 +471,10 @@ describe('PktCard', () => {
 
   describe('Content placement and structure', () => {
     test('renders content elements in correct order', async () => {
-      const container = await createCard(
-        'heading="Test Title" subheading="Test Sub"',
-        'Main content here',
-      )
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({
+        heading: 'Test Title',
+        subheading: 'Test Sub',
+      })
       card.tags = [{ text: 'Test Tag' }]
       card.image = { src: '/test.jpg', alt: 'Test' }
       card.metaLead = 'Author'
@@ -541,8 +499,7 @@ describe('PktCard', () => {
     })
 
     test('places tags at bottom when tagPosition is bottom', async () => {
-      const container = await createCard('heading="Test Title"', 'Main content')
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test Title' })
       card.tags = [{ text: 'Test Tag' }]
       card.tagPosition = 'bottom'
       await card.updateComplete
@@ -559,12 +516,10 @@ describe('PktCard', () => {
 
   describe('Accessibility', () => {
     test('has no accessibility violations', async () => {
-      const container = await createCard(
-        'heading="Accessible Card" aria-label="Test card"',
-        'Accessible content',
-      )
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({
+        heading: 'Accessible Card',
+      })
+      await card.updateComplete
       await card.updateComplete
 
       const results = await axe(card)
@@ -572,8 +527,7 @@ describe('PktCard', () => {
     })
 
     test('applies correct ARIA attributes', async () => {
-      const container = await createCard('heading="Test"')
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Test' })
       card.ariaLabel = 'Custom accessible label'
       await card.updateComplete
 
@@ -584,9 +538,7 @@ describe('PktCard', () => {
     })
 
     test('falls back to heading for aria-label when no explicit aria-label', async () => {
-      const container = await createCard('heading="Default Aria Label"')
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest({ heading: 'Default Aria Label' })
       await card.updateComplete
 
       const article = card.querySelector('article')
@@ -594,9 +546,7 @@ describe('PktCard', () => {
     })
 
     test('falls back to "kort" when no heading or aria-label', async () => {
-      const container = await createCard()
-
-      const card = container.querySelector('pkt-card') as PktCard
+      const { card } = await createCardTest()
       await card.updateComplete
 
       const article = card.querySelector('article')