@oslokommune/punkt-elements 13.5.2 → 13.5.4

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

@@ -0,0 +1,224 @@
+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 './link'
+
+expect.extend(toHaveNoViolations)
+
+export interface LinkTestConfig extends BaseTestConfig {
+  href?: string
+  target?: string
+  skin?: string
+  variant?: string
+  iconName?: string
+  iconPosition?: string
+  openInNewTab?: boolean
+  external?: boolean
+}
+
+// Use shared framework
+export const createLinkTest = async (config: LinkTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-link'>,
+    LinkTestConfig
+  >('pkt-link', config)
+
+  return {
+    container,
+    link: element,
+  }
+}
+
+describe('PktLink', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { link } = await createLinkTest()
+
+      expect(link).toBeInTheDocument()
+      await link.updateComplete
+      expect(link).toBeTruthy()
+    })
+
+    test('renders with correct structure', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+        content: 'Click me',
+      })
+      await link.updateComplete
+
+      expect(link).toBeInTheDocument()
+      const anchor = link.querySelector('a')
+      expect(anchor).toBeInTheDocument()
+      expect(anchor?.href).toBe('https://example.com/')
+      expect(anchor?.textContent).toContain('Click me')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { link } = await createLinkTest()
+      await link.updateComplete
+
+      expect(link.href).toBe('#')
+      expect(link.external).toBe(false)
+      expect(link.iconName).toBeUndefined()
+      expect(link.target).toBe('_self')
+    })
+
+    test('sets href property correctly', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+      })
+      await link.updateComplete
+
+      expect(link.href).toBe('https://example.com')
+      const anchor = link.querySelector('a')
+      expect(anchor?.href).toBe('https://example.com/')
+    })
+
+    test('sets external property correctly', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+        external: true,
+      })
+      await link.updateComplete
+
+      expect(link.external).toBe(true)
+    })
+  })
+
+  describe('Icon functionality', () => {
+    test('renders icon when iconName is provided', async () => {
+      const { link } = await createLinkTest({
+        href: '#',
+        iconName: 'arrow-right',
+      })
+      await link.updateComplete
+
+      const icon = link.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('arrow-right')
+    })
+
+    test('positions icon correctly', async () => {
+      const { link } = await createLinkTest({
+        href: '#',
+        iconName: 'arrow-right',
+        iconPosition: 'right',
+      })
+      await link.updateComplete
+
+      const anchor = link.querySelector('a')
+      expect(anchor?.classList.contains('pkt-link--icon-right')).toBe(true)
+    })
+  })
+
+  describe('External link functionality', () => {
+    test('applies external class and rel attribute', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+        external: true,
+      })
+      await link.updateComplete
+
+      const anchor = link.querySelector('a')
+      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
+      expect(anchor?.rel).toBe('noopener noreferrer')
+    })
+
+    test('does not set rel attribute for internal links', async () => {
+      const { link } = await createLinkTest({
+        href: '/internal-page',
+      })
+      await link.updateComplete
+
+      const anchor = link.querySelector('a')
+      expect(anchor?.rel).toBe('')
+    })
+  })
+
+  describe('Event handling', () => {
+    test('handles click events', async () => {
+      const { link } = await createLinkTest({
+        href: '#test',
+      })
+      await link.updateComplete
+
+      const anchor = link.querySelector('a')
+      const clickHandler = jest.fn()
+      anchor?.addEventListener('click', clickHandler)
+
+      fireEvent.click(anchor!)
+      expect(clickHandler).toHaveBeenCalled()
+    })
+  })
+
+  describe('Dynamic updates', () => {
+    test('updates href dynamically', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+      })
+      await link.updateComplete
+
+      link.href = 'https://updated.com'
+      await link.updateComplete
+
+      expect(link.href).toBe('https://updated.com')
+      const anchor = link.querySelector('a')
+      expect(anchor?.href).toBe('https://updated.com/')
+    })
+
+    test('updates external property dynamically', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://example.com',
+      })
+      await link.updateComplete
+
+      link.external = true
+      await link.updateComplete
+
+      expect(link.external).toBe(true)
+      const anchor = link.querySelector('a')
+      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
+      expect(anchor?.rel).toBe('noopener noreferrer')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic link is accessible', async () => {
+      const { container } = await createLinkTest({
+        href: 'https://example.com',
+        content: 'Accessible Link',
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Integration scenarios', () => {
+    test('works with complex configurations', async () => {
+      const { link } = await createLinkTest({
+        href: 'https://external-site.com',
+        iconName: 'external',
+        iconPosition: 'right',
+        external: true,
+        target: '_blank',
+        content: 'Complex External Link',
+      })
+      await link.updateComplete
+
+      expect(link.href).toBe('https://external-site.com')
+      expect(link.iconName).toBe('external')
+      expect(link.external).toBe(true)
+      expect(link.target).toBe('_blank')
+
+      const anchor = link.querySelector('a')
+      expect(anchor?.classList.contains('pkt-link--external')).toBe(true)
+      expect(anchor?.classList.contains('pkt-link--icon-right')).toBe(true)
+    })
+  })
+})

package/src/components/linkcard/linkcard.test.ts

@@ -6,14 +6,11 @@ import { PktLinkCard, type TLinkCardSkin } from './linkcard'
 import type { IPktLinkCard } from './linkcard'
 import './linkcard'
 
-
-// Enhanced test configuration extends the component interface with additional test-specific properties
 export interface LinkCardTestConfig extends IPktLinkCard, BaseTestConfig {}
 
-
 // Use shared framework
 export const createLinkCardTest = async (config: LinkCardTestConfig = {}) => {
-  const { container, element} = await createElementTest<
+  const { container, element } = await createElementTest<
     CustomElementFor<'pkt-linkcard'>,
     LinkCardTestConfig
   >('pkt-linkcard', config)
@@ -30,7 +27,14 @@ expect.extend(toHaveNoViolations)
 
 // Test data constants
 const VALID_SKINS: TLinkCardSkin[] = [
-  'normal', 'no-padding', 'blue', 'beige', 'green', 'gray', 'beige-outline', 'gray-outline'
+  'normal',
+  'no-padding',
+  'blue',
+  'beige',
+  'green',
+  'gray',
+  'beige-outline',
+  'gray-outline',
 ]
 
 const SAMPLE_ICONS = ['arrow-right', 'external-link', 'download', 'info']
@@ -238,7 +242,7 @@ describe('PktLinkCard', () => {
         iconName: 'arrow-right',
         openInNewTab: true,
         skin: 'blue',
-        content: '<p>Complete content</p>'
+        content: '<p>Complete content</p>',
       }
 
       const { linkCard, link } = await createLinkCardTest(config)
@@ -283,7 +287,7 @@ describe('PktLinkCard', () => {
       const { linkCard } = await createLinkCardTest({
         title: '',
         href: '',
-        iconName: ''
+        iconName: '',
       })
 
       expect(linkCard.title).toBe('')
@@ -315,7 +319,7 @@ describe('PktLinkCard', () => {
     test('has no accessibility violations', async () => {
       const { linkCard } = await createLinkCardTest({
         title: 'Accessible Link Card',
-        href: '/accessible'
+        href: '/accessible',
       })
 
       const results = await axe(linkCard)
@@ -325,7 +329,7 @@ describe('PktLinkCard', () => {
     test('maintains proper link semantics', async () => {
       const { link } = await createLinkCardTest({
         title: 'Semantic Link',
-        href: '/semantic'
+        href: '/semantic',
       })
 
       expect(link.tagName).toBe('A')
@@ -337,7 +341,7 @@ describe('PktLinkCard', () => {
       const { link } = await createLinkCardTest({
         title: 'External Link',
         href: 'https://example.com',
-        openInNewTab: true
+        openInNewTab: true,
       })
 
       expect(link.getAttribute('target')).toBe('_blank')
@@ -345,7 +349,6 @@ describe('PktLinkCard', () => {
     })
   })
 
-
   describe('Type Safety', () => {
     test('validates interface implementation', () => {
       const linkCard = new PktLinkCard()
@@ -359,4 +362,3 @@ describe('PktLinkCard', () => {
     })
   })
 })
-

package/src/components/listbox/listbox.test.ts

@@ -0,0 +1,225 @@
+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 { type IPktListbox } from './listbox'
+import './listbox'
+
+export interface ListboxTestConfig extends Partial<IPktListbox>, BaseTestConfig {
+  label?: string
+  id?: string
+}
+
+// Use shared framework
+export const createListboxTest = async (config: ListboxTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-listbox'>,
+    ListboxTestConfig
+  >('pkt-listbox', { ...config, options: undefined })
+
+  // Set complex properties directly on the element after creation
+  if (config.options) {
+    element.options = config.options
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    listbox: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktListbox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { listbox } = await createListboxTest()
+
+      expect(listbox).toBeInTheDocument()
+      expect(listbox).toBeTruthy()
+    })
+
+    test('renders with options', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({
+        label: 'Test Listbox',
+        options,
+      })
+
+      const listboxElement = listbox.querySelector('.pkt-listbox')
+      expect(listboxElement).toBeInTheDocument()
+
+      const optionElements = listbox.querySelectorAll('.pkt-listbox__option')
+      expect(optionElements).toHaveLength(2)
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { listbox } = await createListboxTest()
+
+      expect(listbox.isOpen).toBe(false)
+      expect(listbox.disabled).toBe(false)
+      expect(listbox.includeSearch).toBe(false)
+      expect(listbox.isMultiSelect).toBe(false)
+      expect(listbox.allowUserInput).toBe(false)
+      expect(listbox.maxLength).toBe(0)
+    })
+
+    test('sets properties correctly', async () => {
+      const { listbox } = await createListboxTest({
+        isOpen: true,
+        disabled: true,
+        includeSearch: true,
+        isMultiSelect: true,
+      })
+
+      expect(listbox.isOpen).toBe(true)
+      expect(listbox.disabled).toBe(true)
+      expect(listbox.includeSearch).toBe(true)
+      expect(listbox.isMultiSelect).toBe(true)
+    })
+  })
+
+  describe('Option handling', () => {
+    test('renders single select options correctly', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({ options })
+
+      const selectedOption = listbox.querySelector('.pkt-listbox__option--selected')
+      expect(selectedOption).toBeInTheDocument()
+
+      const checkIcon = listbox.querySelector('pkt-icon[name="check-big"]')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    test('renders multi-select options with checkboxes', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({
+        isMultiSelect: true,
+        options,
+      })
+
+      const checkboxes = listbox.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(2)
+      expect(checkboxes[0]).toBeChecked()
+      expect(checkboxes[1]).not.toBeChecked()
+    })
+
+    test('handles option click', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { listbox } = await createListboxTest({ options })
+
+      // Listen for the option-toggle event
+      let toggledValue: string | null = null
+      listbox.addEventListener('option-toggle', (e: any) => {
+        toggledValue = e.detail
+      })
+
+      const optionElement = listbox.querySelector('.pkt-listbox__option')
+      fireEvent.click(optionElement!)
+
+      await listbox.updateComplete
+      expect(toggledValue).toBe('option1')
+    })
+  })
+
+  describe('Search functionality', () => {
+    test('renders search when includeSearch is true', async () => {
+      const { listbox } = await createListboxTest({ includeSearch: true })
+
+      const searchInput = listbox.querySelector('[role="searchbox"]')
+      expect(searchInput).toBeInTheDocument()
+    })
+
+    test('filters options based on search', async () => {
+      const options = [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+      ]
+      const { listbox } = await createListboxTest({
+        includeSearch: true,
+        options,
+      })
+
+      // Set search value and trigger filtering
+      listbox.searchValue = 'app'
+      listbox.filterOptions()
+      await listbox.updateComplete
+
+      // Should filter to only show Apple - check filtered options
+      const visibleOptions = listbox.querySelectorAll('.pkt-listbox__option')
+      expect(visibleOptions).toHaveLength(1)
+      expect(visibleOptions[0].textContent?.trim()).toContain('Apple')
+    })
+  })
+
+  describe('User input functionality', () => {
+    test('renders new option banner when allowUserInput is true', async () => {
+      const { listbox } = await createListboxTest({
+        allowUserInput: true,
+        customUserInput: 'New',
+      })
+
+      const newOptionBanner = listbox.querySelector('.pkt-listbox__banner--new-option')
+      expect(newOptionBanner).toBeInTheDocument()
+      expect(newOptionBanner?.getAttribute('data-value')).toBe('New')
+      // Check that the text contains the basic structure
+      expect(newOptionBanner?.textContent).toMatch(/Legg til.*New/)
+    })
+  })
+
+  describe('Maximum selection', () => {
+    test('shows maximum reached banner', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1', selected: true },
+        { value: 'option2', label: 'Option 2', selected: true },
+      ]
+      const { listbox } = await createListboxTest({
+        isMultiSelect: true,
+        maxLength: 3,
+        options,
+      })
+
+      const banner = listbox.querySelector('.pkt-listbox__banner--maximum-reached')
+      expect(banner).toBeInTheDocument()
+      expect(banner?.textContent).toContain('2 av maks 3')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic listbox is accessible', async () => {
+      const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]
+      const { container } = await createListboxTest({
+        label: 'Accessible Listbox',
+        options,
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})