@oslokommune/punkt-react 15.4.6 → 16.0.0

package/src/components/datepicker/Datepicker.accessibility.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -23,7 +24,7 @@ const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
 describe('PktDatepicker', () => {
   describe('Event handling', () => {
     test('dispatches onChange event when value changes', () => {
-      const handleChange = jest.fn()
+      const handleChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
       })
@@ -35,7 +36,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange event when value changes', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -67,8 +68,8 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches both onChange and onValueChange', () => {
-      const handleChange = jest.fn()
-      const handleValueChange = jest.fn()
+      const handleChange = vi.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.input.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 
 import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -20,7 +21,7 @@ const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
 describe('PktDatepicker', () => {
   describe('Input field behavior', () => {
     test('allows manual date entry via change event', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -62,7 +63,7 @@ describe('PktDatepicker', () => {
     })
 
     test('clears value when empty string entered', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         value: '2024-06-15',
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.selection.test.tsx

@@ -32,7 +32,7 @@ describe('PktDatepicker', () => {
     })
 
     test('removes dates when clicking tag close button', async () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         multiple: true,
         value: ['2024-06-15', '2024-06-20'],
@@ -107,7 +107,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with remaining dates when tag removed', async () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         multiple: true,
         value: ['2024-06-15', '2024-06-20', '2024-06-25'],
@@ -199,7 +199,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange for partial range (only from)', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         onValueChange: handleValueChange,
@@ -212,7 +212,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange when both range dates are present', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         value: ['2024-06-15'],
@@ -226,7 +226,7 @@ describe('PktDatepicker', () => {
     })
 
     test('validates range order on blur (rejects end before start)', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         range: true,
         value: ['2024-06-25', '2024-06-15'],
@@ -300,7 +300,7 @@ describe('PktDatepicker', () => {
 
   describe('Single date selection', () => {
     test('dispatches onChange when input value changes', () => {
-      const handleChange = jest.fn()
+      const handleChange = vi.fn()
       const { container } = createDatepickerTest({
         onChange: handleChange,
       })
@@ -312,7 +312,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with array when input value changes', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         onValueChange: handleValueChange,
       })
@@ -324,7 +324,7 @@ describe('PktDatepicker', () => {
     })
 
     test('dispatches onValueChange with empty array when cleared', () => {
-      const handleValueChange = jest.fn()
+      const handleValueChange = vi.fn()
       const { container } = createDatepickerTest({
         value: '2024-06-15',
         onValueChange: handleValueChange,

package/src/components/datepicker/Datepicker.validation.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
+import { vi } from 'vitest'
 
 import { IPktDatepicker, PktDatepicker } from './Datepicker'
 
@@ -301,7 +302,7 @@ describe('PktDatepicker', () => {
     })
 
     test('submits form on Enter key press', () => {
-      const submitHandler = jest.fn((e: Event) => e.preventDefault())
+      const submitHandler = vi.fn((e: Event) => e.preventDefault())
       const { container } = render(
         <form onSubmit={submitHandler as unknown as React.FormEventHandler}>
           <PktDatepicker id={datePickerId} label={label} value="2024-06-15" />

package/src/components/radio/RadioButton.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { PktRadioButton } from './RadioButton'
@@ -21,7 +22,7 @@ describe('PktRadiobutton', () => {
   })
 
   it('allows selecting one option from the group', async () => {
-    const handleChange = jest.fn()
+    const handleChange = vi.fn()
     const { container } = render(
       <PktInputWrapper forId="radioGroup" label="Etikett" hasFieldset>
         <PktRadioButton
@@ -42,7 +43,7 @@ describe('PktRadiobutton', () => {
     expect(option1).toBeInTheDocument()
     expect(option2).toBeInTheDocument()
 
-    const changeHandler = jest.fn()
+    const changeHandler = vi.fn()
     option2?.addEventListener('change', changeHandler)
 
     // Manually dispatch a change event

package/src/components/searchinput/SearchInput.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { ChangeEvent, useState } from 'react'
+import { vi } from 'vitest'
 
 import { PktSearchInput } from './SearchInput'
 
@@ -49,7 +50,7 @@ describe('PktSearchInput', () => {
   })
 
   it('calls onSearch prop with input value on button click', async () => {
-    const mockOnSearch = jest.fn()
+    const mockOnSearch = vi.fn()
     const { getByRole, getByPlaceholderText } = render(<Wrapper onChange={mockOnSearch} />)
     await window.customElements.whenDefined('pkt-icon')
 
@@ -70,8 +71,8 @@ describe('PktSearchInput', () => {
 
   it('renders search suggestions when suggestions prop exists', async () => {
     const suggestions = [
-      { title: 'Suggestion 1', onClick: jest.fn() },
-      { title: 'Suggestion 2', onClick: jest.fn() },
+      { title: 'Suggestion 1', onClick: vi.fn() },
+      { title: 'Suggestion 2', onClick: vi.fn() },
     ]
 
     render(<PktSearchInput id="test-search-input" suggestions={suggestions} />)
@@ -86,8 +87,8 @@ describe('PktSearchInput', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const suggestions = [
-        { title: 'Suggestion 1', onClick: jest.fn() },
-        { title: 'Suggestion 2', onClick: jest.fn() },
+        { title: 'Suggestion 1', onClick: vi.fn() },
+        { title: 'Suggestion 2', onClick: vi.fn() },
       ]
       const { container } = render(<PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />)
       await window.customElements.whenDefined('pkt-icon')

package/src/components/tabs/Tabs.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 
 import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktTabItem, PktTabs } from './Tabs'
 
@@ -9,8 +10,8 @@ expect.extend(toHaveNoViolations)
 
 describe('Tabs component', () => {
   const tabs = [
-    { text: 'Tab 1', href: '#', action: jest.fn() },
-    { text: 'Tab 2', action: jest.fn() },
+    { text: 'Tab 1', href: '#', action: vi.fn() },
+    { text: 'Tab 2', action: vi.fn() },
   ]
 
   it('renders tabs with links and buttons', () => {
@@ -36,7 +37,7 @@ describe('Tabs component', () => {
   })
 
   it('calls onTabSelected prop when a tab is clicked', () => {
-    const onTabSelected = jest.fn()
+    const onTabSelected = vi.fn()
     const { getByText } = render(<PktTabs tabs={tabs} onTabSelected={onTabSelected} />)
     tabs.forEach((tab, index) => {
       const tabElement = getByText(tab.text)
@@ -47,8 +48,8 @@ describe('Tabs component', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const tabs = [
-        { text: 'Tab 1', href: '/page1', action: jest.fn() },
-        { text: 'Tab 2', action: jest.fn() },
+        { text: 'Tab 1', href: '/page1', action: vi.fn() },
+        { text: 'Tab 2', action: vi.fn() },
       ]
       const { container } = render(<PktTabs tabs={tabs} />)
       const results = await axe(container)
@@ -89,7 +90,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls onClick handler when tab is clicked', () => {
-    const handleClick = jest.fn()
+    const handleClick = vi.fn()
     const { getByText } = render(
       <PktTabs>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -106,7 +107,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls onTabSelected when tab is clicked', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -120,8 +121,8 @@ describe('PktTabItem children format', () => {
   })
 
   it('calls both onClick and onTabSelected when tab is clicked', () => {
-    const handleClick = jest.fn()
-    const handleTabSelected = jest.fn()
+    const handleClick = vi.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -268,7 +269,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('selects tab when Space key is pressed', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -283,7 +284,7 @@ describe('PktTabItem children format', () => {
   })
 
   it('selects tab when ArrowDown key is pressed', () => {
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>
         <PktTabItem index={0}>First Tab</PktTabItem>
@@ -357,7 +358,7 @@ describe('PktTabItem children format', () => {
 
   it('works with mapped children when explicit index is provided', () => {
     const items = ['First', 'Second', 'Third']
-    const handleTabSelected = jest.fn()
+    const handleTabSelected = vi.fn()
 
     const { getByText } = render(
       <PktTabs onTabSelected={handleTabSelected}>

package/src/components/tag/Tag.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom'
 import { fireEvent, render as originalRender, RenderOptions, RenderResult } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { createRef, ReactNode } from 'react'
+import { vi } from 'vitest'
 
 import { PktTag } from './Tag'
 
@@ -68,7 +69,7 @@ describe('PktTag', () => {
     })
 
     it('calls onClose when tag is clicked', async () => {
-      const onClose = jest.fn()
+      const onClose = vi.fn()
       const { getByText } = await render(
         <PktTag closeTag={true} onClose={onClose}>
           Closeable Tag