@oslokommune/punkt-elements 13.5.2 → 13.5.4

package/src/components/loader/loader.test.ts

@@ -0,0 +1,257 @@
+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 { type IPktLoader } from './loader'
+import './loader'
+
+export interface LoaderTestConfig extends Partial<IPktLoader>, BaseTestConfig {}
+
+// Use shared framework
+export const createLoaderTest = async (config: LoaderTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-loader'>,
+    LoaderTestConfig
+  >('pkt-loader', { ...config, isLoading: undefined })
+
+  // Set boolean properties directly on the element after creation
+  if (config.isLoading !== undefined) {
+    element.isLoading = config.isLoading
+    await element.updateComplete
+  }
+  if (config.inline !== undefined) {
+    element.inline = config.inline
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    loader: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktLoader', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader).toBeInTheDocument()
+      expect(loader).toBeTruthy()
+    })
+
+    test('renders loading state by default', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader.isLoading).toBe(true)
+      const spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+
+    test('renders content when not loading', async () => {
+      const { loader } = await createLoaderTest({
+        content: '<p>Content</p>',
+        isLoading: false,
+      })
+
+      expect(loader.isLoading).toBe(false)
+      const content = loader.querySelector('.pkt-contents')
+      expect(content).toBeInTheDocument()
+      expect(content?.classList.contains('pkt-hide')).toBe(false)
+    })
+
+    test('renders with slot content', async () => {
+      const { loader } = await createLoaderTest({
+        content: '<p>Test content</p>',
+      })
+
+      const content = loader.querySelector('p')
+      expect(content).toBeInTheDocument()
+      expect(content?.textContent).toBe('Test content')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { loader } = await createLoaderTest()
+
+      expect(loader.isLoading).toBe(true)
+      expect(loader.inline).toBe(false)
+      expect(loader.size).toBe('medium')
+      expect(loader.variant).toBe('shapes')
+      expect(loader.delay).toBe(0)
+    })
+
+    test('sets properties correctly', async () => {
+      const { loader } = await createLoaderTest({
+        size: 'small',
+        variant: 'blue',
+        delay: 100,
+        isLoading: false,
+        inline: true,
+      })
+
+      expect(loader.isLoading).toBe(false)
+      expect(loader.inline).toBe(true)
+      expect(loader.size).toBe('small')
+      expect(loader.variant).toBe('blue')
+      expect(loader.delay).toBe(100)
+    })
+  })
+
+  describe('Size variants', () => {
+    test('applies small size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'small' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--small')).toBe(true)
+    })
+
+    test('applies medium size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'medium' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--medium')).toBe(true)
+    })
+
+    test('applies large size correctly', async () => {
+      const { loader } = await createLoaderTest({ size: 'large' })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--large')).toBe(true)
+    })
+  })
+
+  describe('Loader variants', () => {
+    test('applies shapes variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'shapes' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('loader')
+    })
+
+    test('applies blue variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'blue' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('spinner-blue')
+    })
+
+    test('applies rainbow variant correctly', async () => {
+      const { loader } = await createLoaderTest({ variant: 'rainbow' })
+
+      const icon = loader.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe('spinner')
+    })
+  })
+
+  describe('Inline mode', () => {
+    test('applies box class when inline is false', async () => {
+      const { loader } = await createLoaderTest({ inline: false })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--box')).toBe(true)
+    })
+
+    test('applies inline class when inline is true', async () => {
+      const { loader } = await createLoaderTest({ inline: true })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.classList.contains('pkt-loader--inline')).toBe(true)
+    })
+  })
+
+  describe('Message functionality', () => {
+    test('renders message when provided', async () => {
+      const { loader } = await createLoaderTest({ message: 'Loading data...' })
+
+      const message = loader.querySelector('p')
+      expect(message).toBeInTheDocument()
+      expect(message?.textContent).toBe('Loading data...')
+    })
+
+    test('does not render message when not provided', async () => {
+      const { loader } = await createLoaderTest()
+
+      const message = loader.querySelector('p')
+      expect(message).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Delay functionality', () => {
+    test('handles delay correctly', async () => {
+      const { loader } = await createLoaderTest({ delay: 100 })
+
+      // Initially should not show spinner due to delay
+      let spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).not.toBeInTheDocument()
+
+      // Wait for delay to pass
+      await new Promise((resolve) => setTimeout(resolve, 150))
+      await loader.updateComplete
+
+      // Now spinner should be visible
+      spinner = loader.querySelector('.pkt-loader__spinner')
+      expect(spinner).toBeInTheDocument()
+    }, 300)
+  })
+
+  describe('Content visibility', () => {
+    test('hides content when loading', async () => {
+      const { loader } = await createLoaderTest({
+        isLoading: true,
+        content: '<p>Content</p>',
+      })
+
+      const content = loader.querySelector('.pkt-contents')
+      expect(content?.classList.contains('pkt-hide')).toBe(true)
+    })
+
+    test('shows content when not loading', async () => {
+      const { loader } = await createLoaderTest({
+        isLoading: false,
+        content: '<p>Content</p>',
+      })
+
+      const content = loader.querySelector('.pkt-contents')
+      expect(content?.classList.contains('pkt-hide')).toBe(false)
+    })
+  })
+
+  describe('ARIA and accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const { loader } = await createLoaderTest()
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      expect(loaderDiv?.getAttribute('role')).toBe('status')
+      expect(loaderDiv?.getAttribute('aria-live')).toBe('polite')
+      // Check the aria-busy attribute
+      expect(loaderDiv?.getAttribute('aria-busy')).toBe('true')
+    })
+
+    test('updates aria-busy when loading state changes', async () => {
+      const { loader } = await createLoaderTest({ isLoading: false })
+
+      const loaderDiv = loader.querySelector('.pkt-loader')
+      // Check the aria-busy attribute
+      expect(loaderDiv?.getAttribute('aria-busy')).toBe('false')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('loader is accessible', async () => {
+      const { container } = await createLoaderTest({
+        message: 'Loading content',
+        content: '<p>Content</p>',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/loader/loader.ts

@@ -94,7 +94,12 @@ export class PktLoader extends PktElement implements IPktLoader {
       'pkt-hide': this.isLoading,
     })
 
-    return html`<div role="status" aria-live="polite" .aria-busy=${this.isLoading} class=${classes}>
+    return html`<div
+      role="status"
+      aria-live="polite"
+      aria-busy=${this.isLoading ? 'true' : 'false'}
+      class=${classes}
+    >
       ${this.isLoading && this._shouldDisplayLoader
         ? html`<div class="pkt-loader__spinner">
             <pkt-icon

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

@@ -0,0 +1,241 @@
+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 IPktMessagebox } from './messagebox'
+import './messagebox'
+
+export interface MessageboxTestConfig extends Partial<IPktMessagebox>, BaseTestConfig {}
+
+// Use shared framework
+export const createMessageboxTest = async (config: MessageboxTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-messagebox'>,
+    MessageboxTestConfig
+  >('pkt-messagebox', config)
+
+  return {
+    container,
+    messagebox: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktMessagebox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      expect(messagebox).toBeInTheDocument()
+      expect(messagebox).toBeTruthy()
+    })
+
+    test('renders with basic structure', async () => {
+      const { messagebox } = await createMessageboxTest({
+        title: 'Test Title',
+        content: 'Test content',
+      })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv).toBeInTheDocument()
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Test Title')
+
+      const text = messagebox.querySelector('.pkt-messagebox__text')
+      expect(text).toBeInTheDocument()
+    })
+
+    test('renders content correctly', async () => {
+      const { messagebox } = await createMessageboxTest({
+        content: 'This is the message content',
+      })
+
+      const text = messagebox.querySelector('.pkt-messagebox__text')
+      expect(text?.textContent).toContain('This is the message content')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      expect(messagebox.closable).toBe(false)
+      expect(messagebox.compact).toBe(false)
+      expect(messagebox.title).toBe('')
+      expect(messagebox.skin).toBe('beige')
+    })
+
+    test('sets properties correctly', async () => {
+      const { messagebox } = await createMessageboxTest({
+        closable: true,
+        compact: true,
+        title: 'Custom Title',
+        skin: 'blue',
+      })
+
+      expect(messagebox.closable).toBe(true)
+      expect(messagebox.compact).toBe(true)
+      expect(messagebox.title).toBe('Custom Title')
+      expect(messagebox.skin).toBe('blue')
+    })
+  })
+
+  describe('Skin variants', () => {
+    test('applies beige skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'beige' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--beige')).toBe(true)
+    })
+
+    test('applies blue skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'blue' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--blue')).toBe(true)
+    })
+
+    test('applies red skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'red' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--red')).toBe(true)
+    })
+
+    test('applies green skin correctly', async () => {
+      const { messagebox } = await createMessageboxTest({ skin: 'green' })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--green')).toBe(true)
+    })
+  })
+
+  describe('Compact mode', () => {
+    test('applies compact class when compact is true', async () => {
+      const { messagebox } = await createMessageboxTest({ compact: true })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--compact')).toBe(true)
+    })
+
+    test('does not apply compact class when compact is false', async () => {
+      const { messagebox } = await createMessageboxTest({ compact: false })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--compact')).toBe(false)
+    })
+  })
+
+  describe('Closable functionality', () => {
+    test('renders close button when closable is true', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      expect(closeButton).toBeInTheDocument()
+
+      const closeIcon = messagebox.querySelector('pkt-icon[name="close"]')
+      expect(closeIcon).toBeInTheDocument()
+    })
+
+    test('does not render close button when closable is false', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: false })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close')
+      expect(closeButton).not.toBeInTheDocument()
+    })
+
+    test('closes messagebox when close button is clicked', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      fireEvent.click(closeButton!)
+
+      await messagebox.updateComplete
+      expect(messagebox._isClosed).toBe(true)
+      expect(messagebox.classList.contains('pkt-hide')).toBe(true)
+    })
+
+    test('dispatches close events when closed', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const closeHandler = jest.fn()
+      const onCloseHandler = jest.fn()
+      messagebox.addEventListener('close', closeHandler)
+      messagebox.addEventListener('on-close', onCloseHandler)
+
+      const closeButton = messagebox.querySelector('.pkt-messagebox__close button')
+      fireEvent.click(closeButton!)
+
+      expect(closeHandler).toHaveBeenCalled()
+      expect(onCloseHandler).toHaveBeenCalled()
+    })
+  })
+
+  describe('Title functionality', () => {
+    test('renders title when provided', async () => {
+      const { messagebox } = await createMessageboxTest({ title: 'Important Message' })
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Important Message')
+      expect(title?.textContent).toBe('Important Message')
+    })
+
+    test('does not render title when empty', async () => {
+      const { messagebox } = await createMessageboxTest({ title: '' })
+
+      const title = messagebox.querySelector('.pkt-messagebox__title')
+      expect(title).not.toBeInTheDocument()
+    })
+  })
+
+  describe('CSS classes', () => {
+    test('applies base messagebox class', async () => {
+      const { messagebox } = await createMessageboxTest()
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox')).toBe(true)
+    })
+
+    test('applies closable class when closable', async () => {
+      const { messagebox } = await createMessageboxTest({ closable: true })
+
+      const messageboxDiv = messagebox.querySelector('.pkt-messagebox')
+      expect(messageboxDiv?.classList.contains('pkt-messagebox--closable')).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('basic messagebox is accessible', async () => {
+      const { container } = await createMessageboxTest({
+        title: 'Accessible Message',
+        content: 'This is an accessible message',
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('closable messagebox is accessible', async () => {
+      const { container } = await createMessageboxTest({
+        closable: true,
+        title: 'Closable Message',
+        content: 'This message can be closed',
+      })
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/messagebox/messagebox.ts

@@ -65,6 +65,7 @@ export class PktMessagebox extends PktElement implements IPktMessagebox {
             <button
               @click=${this.close}
               class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+              aria-label="Lukk"
             >
               <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
             </button>