@oslokommune/punkt-elements 13.5.6 → 13.5.9

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.5.6",
+  "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": "5f0019a262ea4b9086590f7b6d572f5a39142f31"
+  "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

@@ -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 IPktTag } from './tag'
@@ -125,7 +126,7 @@ describe('PktTag', () => {
 
     test('dispatches close event when close button is clicked', async () => {
       const { tag } = await createTagTest({ closeTag: true })
-      const closeSpy = jest.fn()
+      const closeSpy = vi.fn()
       tag.addEventListener('close', closeSpy)
 
       const button = tag.querySelector('button') as HTMLButtonElement