@oslokommune/punkt-elements 13.5.5 → 13.5.9

package/CHANGELOG.md

@@ -5,6 +5,40 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.5.9](https://github.com/oslokommune/punkt/compare/13.5.8...13.5.9) (2025-09-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
+## [13.5.6](https://github.com/oslokommune/punkt/compare/13.5.5...13.5.6) (2025-09-09)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.5.5](https://github.com/oslokommune/punkt/compare/13.5.4...13.5.5) (2025-09-09)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.5",
+  "version": "13.5.9",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -19,14 +19,14 @@
     "build": "tsc && vite build",
     "build-app": "tsc && vite build --config vite.config-app.ts",
     "preview": "vite preview --outDir dist-app",
-    "test": "jest --config jest.config.cjs"
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
     "@lit-labs/router": "^0.1.3",
-    "@types/jest": "^29.5.14",
     "@types/node": "^20.17.30",
-    "@types/testing-library__jest-dom": "^5.14.9",
     "date-fns": "^4.1.0",
     "dialog-polyfill": "^0.5.6",
     "lit": "^3.3.0",
@@ -43,15 +43,15 @@
     "@oslokommune/punkt-assets": "^13.3.1",
     "@oslokommune/punkt-css": "^13.5.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "jest": "^29.7.0",
+    "@vitest/ui": "^1.0.0",
     "jest-axe": "^9.0.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^23.0.0",
     "sass": "^1.78.0",
-    "ts-jest": "^29.2.6",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.2.1",
-    "vite-plugin-web-components-hmr": "^0.1.3"
+    "vite-plugin-web-components-hmr": "^0.1.3",
+    "vitest": "^1.0.0"
   },
   "private": false,
   "publishConfig": {
@@ -73,5 +73,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f65d3c81c0543cc360a34fe346b4e0585deb46ac"
+  "gitHead": "92ee2058dae920d5ab968d8a1691f435a795e2ca"
 }

package/src/components/alert/alert.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './alert'
@@ -215,8 +216,8 @@ describe('PktAlert', () => {
       await alert.updateComplete
 
       // Listen for close events
-      const closeSpy = jest.fn()
-      const onCloseSpy = jest.fn()
+      const closeSpy = vi.fn()
+      const onCloseSpy = vi.fn()
       alert.addEventListener('close', closeSpy)
       alert.addEventListener('on-close', onCloseSpy)
 

package/src/components/button/button.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './button'
@@ -241,7 +242,7 @@ describe('PktButton', () => {
 
     test('prevents click events when disabled', async () => {
       const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -255,7 +256,7 @@ describe('PktButton', () => {
 
     test('prevents keyboard events when disabled', async () => {
       const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -310,7 +311,7 @@ describe('PktButton', () => {
 
     test('prevents click events when loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       // Set isLoading as a property
       button.isLoading = true
@@ -375,7 +376,7 @@ describe('PktButton', () => {
   describe('Click functionality', () => {
     test('allows click events when not disabled or loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 
@@ -389,7 +390,7 @@ describe('PktButton', () => {
 
     test('allows keyboard activation when not disabled or loading', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
-      const clickSpy = jest.fn()
+      const clickSpy = vi.fn()
 
       await button.updateComplete
 

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

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './card'
@@ -43,9 +44,9 @@ afterEach(() => {
 })
 
 // Global console.warn spy to suppress validation warnings in tests
-let consoleWarnSpy: jest.SpyInstance
+let consoleWarnSpy: any
 beforeEach(() => {
-  consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 })
 
 afterEach(() => {
@@ -151,7 +152,7 @@ describe('PktCard', () => {
     test('validates skin values and logs warnings for invalid skins', async () => {
       // Clear the global spy and create a new one for this specific test
       consoleWarnSpy.mockRestore()
-      const localConsoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+      const localConsoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
       const { card } = await createCardTest({ skin: 'zebra' })
       await card.updateComplete
@@ -166,7 +167,7 @@ describe('PktCard', () => {
 
       // Restore and recreate global spy for subsequent tests
       localConsoleSpy.mockRestore()
-      consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+      consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
     })
 
     test('applies different layout properties correctly', async () => {

package/src/components/combobox/combobox.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 
 expect.extend(toHaveNoViolations)
 
@@ -706,7 +707,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const searchEventSpy = jest.fn()
+      const searchEventSpy = vi.fn()
       combobox.addEventListener('search', searchEventSpy)
 
       // Simulate search change

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

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './consent'
@@ -46,13 +47,13 @@ afterEach(() => {
   }
   // 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
+  ;(window as any).cookieBanner_hotjarId = undefined
+  ;(window as any).cookieBanner_devMode = undefined
+  ;(window as any).cookieBanner_cookieDomain = undefined
+  ;(window as any).cookieBanner_cookieSecure = undefined
+  ;(window as any).cookieBanner_cookieExpiryDays = undefined
+  ;(window as any).cookieBanner = undefined
+  ;(window as any).__cookieEvents = undefined
 })
 
 describe('PktConsent', () => {
@@ -218,10 +219,10 @@ describe('PktConsent', () => {
       Object.defineProperty(window, 'cookieBanner', {
         value: {
           cookieConsent: {
-            validateConsentCookie: jest.fn().mockResolvedValue(true),
-            getConsentCookie: jest.fn().mockReturnValue('mock-cookie'),
+            validateConsentCookie: vi.fn().mockResolvedValue(true),
+            getConsentCookie: vi.fn().mockReturnValue('mock-cookie'),
           },
-          openCookieModal: jest.fn(),
+          openCookieModal: vi.fn(),
         },
         writable: true,
       })
@@ -229,21 +230,21 @@ describe('PktConsent', () => {
       // Mock window.__cookieEvents
       Object.defineProperty(window, '__cookieEvents', {
         value: {
-          on: jest.fn(),
-          off: jest.fn(),
+          on: vi.fn(),
+          off: vi.fn(),
         },
         writable: true,
       })
 
       // Use fake timers to control setTimeout
-      jest.useFakeTimers()
+      vi.useFakeTimers()
     })
 
     afterEach(() => {
       // Clean up mocks and timers
-      jest.useRealTimers()
-      delete (window as any).cookieBanner
-      delete (window as any).__cookieEvents
+      vi.useRealTimers()
+      ;(window as any).cookieBanner = undefined
+      ;(window as any).__cookieEvents = undefined
     })
 
     test('handles click event on button trigger', async () => {
@@ -255,7 +256,7 @@ describe('PktConsent', () => {
       fireEvent.click(button!)
 
       // Fast-forward time to trigger setTimeout
-      jest.runAllTimers()
+      vi.runAllTimers()
 
       expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
     })
@@ -271,7 +272,7 @@ describe('PktConsent', () => {
       fireEvent.click(link!)
 
       // Fast-forward time to trigger setTimeout
-      jest.runAllTimers()
+      vi.runAllTimers()
 
       expect(window.cookieBanner.openCookieModal).toHaveBeenCalled()
     })
@@ -415,12 +416,12 @@ describe('PktConsent', () => {
 
       // Mock the event system
       window.__cookieEvents = {
-        on: jest.fn(),
-        off: jest.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
       }
 
       // Set up a handler
-      const mockHandler = jest.fn()
+      const mockHandler = vi.fn()
       consent['_cookieEventHandler'] = mockHandler
 
       // Disconnect the component

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

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 expect.extend(toHaveNoViolations)
 
@@ -241,7 +242,7 @@ describe('PktHeading', () => {
     })
 
     test('handles invalid levels gracefully', async () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 
       const container = await createHeading()
       const heading = container.querySelector('pkt-heading') as PktHeading

package/src/components/icon/icon.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import {
   createElementTest,
   BaseTestConfig,
@@ -43,7 +44,7 @@ afterEach(() => {
 })
 
 // Mock fetch for icon loading
-const mockFetch = jest.fn()
+const mockFetch = vi.fn()
 const mockSvgContent =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="test-path"></path></svg>'
 
@@ -270,7 +271,7 @@ describe('PktIcon', () => {
 
   describe('Global configuration', () => {
     test('uses custom pktFetch function when provided', async () => {
-      const customFetch = jest.fn().mockResolvedValue({
+      const customFetch = vi.fn().mockResolvedValue({
         ok: true,
         text: () => Promise.resolve('<svg>custom</svg>'),
       })

package/src/components/link/link.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './link'
@@ -147,7 +148,7 @@ describe('PktLink', () => {
       await link.updateComplete
 
       const anchor = link.querySelector('a')
-      const clickHandler = jest.fn()
+      const clickHandler = vi.fn()
       anchor?.addEventListener('click', clickHandler)
 
       fireEvent.click(anchor!)

package/src/components/messagebox/messagebox.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktMessagebox } from './messagebox'
@@ -167,8 +168,8 @@ describe('PktMessagebox', () => {
     test('dispatches close events when closed', async () => {
       const { messagebox } = await createMessageboxTest({ closable: true })
 
-      const closeHandler = jest.fn()
-      const onCloseHandler = jest.fn()
+      const closeHandler = vi.fn()
+      const onCloseHandler = vi.fn()
       messagebox.addEventListener('close', closeHandler)
       messagebox.addEventListener('on-close', onCloseHandler)
 

package/src/components/radiobutton/radiobutton.test.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './radiobutton'
@@ -203,8 +204,8 @@ describe('pkt-radiobutton', () => {
   test('manages focus events correctly', async () => {
     const { radiobutton } = await createRadioButtonTest()
 
-    const focusSpy = jest.fn()
-    const blurSpy = jest.fn()
+    const focusSpy = vi.fn()
+    const blurSpy = vi.fn()
     radiobutton.addEventListener('focus', focusSpy)
     radiobutton.addEventListener('blur', blurSpy)
 

package/src/components/select/select.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktSelect, type TSelectOption } from './select'
@@ -159,8 +160,8 @@ describe('pkt-select', () => {
   test('manages focus events correctly', async () => {
     const { select } = await createSelectTest()
 
-    const focusSpy = jest.spyOn(select, 'onFocus')
-    const blurSpy = jest.spyOn(select, 'onBlur')
+    const focusSpy = vi.spyOn(select, 'onFocus')
+    const blurSpy = vi.spyOn(select, 'onBlur')
 
     const selectElement = select.querySelector('select') as HTMLSelectElement
 

package/src/components/tag/tag.test.ts

@@ -0,0 +1,212 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktTag } from './tag'
+import './tag'
+
+export interface TagTestConfig extends Partial<IPktTag>, BaseTestConfig {}
+
+// Use shared framework
+export const createTagTest = async (config: TagTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-tag'>,
+    TagTestConfig
+  >('pkt-tag', config)
+
+  return {
+    container,
+    tag: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Test data constants
+const VALID_SKINS = [
+  'blue',
+  'blue-dark',
+  'blue-light',
+  'green',
+  'red',
+  'yellow',
+  'beige',
+  'gray',
+  'grey',
+] as const
+const VALID_SIZES = ['small', 'medium', 'large'] as const
+const VALID_TYPES = ['button', 'reset', 'submit'] as const
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktTag', () => {
+  describe('Basic Rendering', () => {
+    test('renders without errors', async () => {
+      const { tag } = await createTagTest()
+      expect(tag).toBeInTheDocument()
+    })
+
+    test('renders with default properties', async () => {
+      const { tag } = await createTagTest()
+      expect(tag.closeTag).toBe(false)
+      expect(tag.size).toBe('medium')
+      expect(tag.skin).toBe('blue')
+      expect(tag.type).toBe('button')
+    })
+
+    test('renders content in slot', async () => {
+      const content = 'Test Tag Content'
+      const { tag } = await createTagTest({ content })
+      expect(tag.textContent?.trim()).toBe(content)
+    })
+  })
+
+  describe('Skin Variations', () => {
+    test('applies different skin classes correctly', async () => {
+      for (const skin of VALID_SKINS) {
+        const { tag } = await createTagTest({ skin })
+        // For non-closeable tags, check the span element
+        const tagElement = tag.querySelector('span') || tag.querySelector('button')
+        expect(tagElement).toHaveClass(`pkt-tag--${skin}`)
+      }
+    })
+  })
+
+  describe('Size Variations', () => {
+    test('applies different size classes correctly', async () => {
+      for (const size of VALID_SIZES) {
+        const { tag } = await createTagTest({ size })
+        // For non-closeable tags, check the span element
+        const tagElement = tag.querySelector('span') || tag.querySelector('button')
+        expect(tagElement).toHaveClass(`pkt-tag--${size}`)
+      }
+    })
+  })
+
+  describe('Type Variations', () => {
+    test('sets correct type attribute', async () => {
+      for (const type of VALID_TYPES) {
+        const { tag } = await createTagTest({ type })
+        expect(tag.type).toBe(type)
+      }
+    })
+  })
+
+  describe('Icon Functionality', () => {
+    test('renders icon when iconName provided', async () => {
+      const { tag } = await createTagTest({ iconName: 'arrow-right' })
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('arrow-right')
+    })
+
+    test('does not render icon when iconName not provided', async () => {
+      const { tag } = await createTagTest()
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Close Functionality', () => {
+    test('renders close button when closeTag is true', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).toBeInTheDocument()
+    })
+
+    test('does not render close button when closeTag is false', async () => {
+      const { tag } = await createTagTest({ closeTag: false })
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).not.toBeInTheDocument()
+    })
+
+    test('dispatches close event when close button is clicked', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const closeSpy = vi.fn()
+      tag.addEventListener('close', closeSpy)
+
+      const button = tag.querySelector('button') as HTMLButtonElement
+      fireEvent.click(button)
+
+      expect(closeSpy).toHaveBeenCalled()
+    })
+
+    test('hides tag when closed', async () => {
+      const { tag } = await createTagTest({ closeTag: true })
+      const button = tag.querySelector('button') as HTMLButtonElement
+
+      fireEvent.click(button)
+      await tag.updateComplete
+
+      expect(button).toHaveClass('pkt-hide')
+    })
+  })
+
+  describe('Text Style', () => {
+    test('applies text style class when provided', async () => {
+      const { tag } = await createTagTest({ textStyle: 'thin-text' })
+      const tagElement = tag.querySelector('span') || tag.querySelector('button')
+      expect(tagElement).toHaveClass('pkt-tag--thin-text')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('applies aria-label when provided', async () => {
+      const { tag } = await createTagTest({ closeTag: true, ariaLabel: 'Close tag' })
+      const button = tag.querySelector('button')
+      expect(button?.getAttribute('aria-label')).toBe('Close tag')
+    })
+
+    test('tag is accessible', async () => {
+      const { tag } = await createTagTest({
+        content: 'Accessible Tag',
+        closeTag: true,
+        ariaLabel: 'Close tag',
+      })
+
+      const results = await axe(tag)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Complex Configurations', () => {
+    test('renders with all properties set', async () => {
+      const config: TagTestConfig = {
+        content: 'Complete Tag',
+        closeTag: true,
+        size: 'large',
+        skin: 'green',
+        iconName: 'check',
+        type: 'submit',
+        textStyle: 'thin-text',
+        ariaLabel: 'Complete tag',
+      }
+
+      const { tag } = await createTagTest(config)
+
+      expect(tag.textContent?.trim()).toBe(config.content)
+      expect(tag.closeTag).toBe(config.closeTag)
+      expect(tag.size).toBe(config.size)
+      expect(tag.skin).toBe(config.skin)
+      expect(tag.iconName).toBe(config.iconName)
+      expect(tag.type).toBe(config.type)
+      expect(tag.textStyle).toBe(config.textStyle)
+      expect(tag.ariaLabel).toBe(config.ariaLabel)
+
+      const button = tag.querySelector('button')
+      expect(button).toHaveClass(`pkt-tag--${config.size}`)
+      expect(button).toHaveClass(`pkt-tag--${config.skin}`)
+      expect(button).toHaveClass(`pkt-tag--${config.textStyle}`)
+
+      const icon = tag.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe(config.iconName)
+
+      const closeIcon = tag.querySelector('.pkt-tag__close-btn')
+      expect(closeIcon).toBeInTheDocument()
+    })
+  })
+})