@oslokommune/punkt-elements 13.4.0 → 13.4.1

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

@@ -0,0 +1,348 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './alert'
+import { PktAlert } from './alert' // For type checking
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-alert')
+}
+
+// Helper function to create alert markup
+const createAlert = async (alertProps = '', content = 'Test alert content') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-alert ${alertProps}>
+      ${content}
+    </pkt-alert>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktAlert', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createAlert()
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      expect(alert).toBeInTheDocument()
+
+      await alert.updateComplete
+      expect(alert).toBeTruthy()
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createAlert('title="Test Title"', 'Test alert message')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      const grid = alertDiv?.querySelector('.pkt-alert__grid')
+      const icon = alert.querySelector('.pkt-alert__icon')
+      const title = alert.querySelector('.pkt-alert__title')
+      const text = alert.querySelector('.pkt-alert__text')
+
+      expect(alertDiv).toHaveClass('pkt-alert')
+      expect(grid).toHaveClass('pkt-alert__grid')
+      expect(icon).toBeInTheDocument()
+      expect(title).toBeInTheDocument()
+      expect(text).toBeInTheDocument()
+      expect(title?.textContent).toContain('Test Title')
+    })
+
+    test('renders icon correctly based on skin', async () => {
+      const skins = ['error', 'success', 'warning', 'info'] as const
+
+      for (const skin of skins) {
+        const container = await createAlert(`skin="${skin}"`)
+        const alert = container.querySelector('pkt-alert') as PktAlert
+        await alert.updateComplete
+
+        const icon = alert.querySelector('pkt-icon')
+        const expectedIconName = skin === 'info' ? 'alert-information' : `alert-${skin}`
+
+        expect(icon?.getAttribute('name')).toBe(expectedIconName)
+        expect(icon?.getAttribute('aria-hidden')).toBe('true')
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createAlert()
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.skin).toBe('info')
+      expect(alert.compact).toBe(false)
+      expect(alert.closeAlert).toBe(false)
+      expect(alert.title).toBe('')
+      expect(alert.date).toBe(null)
+      expect(alert.role).toBe('status')
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert--info')
+      expect(alertDiv).not.toHaveClass('pkt-alert--compact')
+    })
+
+    test('applies different skin properties correctly', async () => {
+      const skins = ['error', 'success', 'warning', 'info'] as const
+
+      for (const skin of skins) {
+        const container = await createAlert(`skin="${skin}"`)
+        const alert = container.querySelector('pkt-alert') as PktAlert
+        await alert.updateComplete
+
+        expect(alert.skin).toBe(skin)
+        expect(alert.getAttribute('skin')).toBe(skin)
+
+        const alertDiv = alert.querySelector('.pkt-alert')
+        expect(alertDiv).toHaveClass(`pkt-alert--${skin}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies compact property correctly', async () => {
+      const container = await createAlert('compact')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.compact).toBe(true)
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert--compact')
+    })
+
+    test('handles title property', async () => {
+      const container = await createAlert('title="Alert Title"')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.title).toBe('Alert Title')
+      expect(alert.getAttribute('title')).toBe('Alert Title')
+
+      const title = alert.querySelector('.pkt-alert__title')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Alert Title')
+
+      // Test title updates
+      alert.title = 'Updated Title'
+      await alert.updateComplete
+
+      expect(title?.textContent).toBe('Updated Title')
+    })
+
+    test('handles date property', async () => {
+      const container = await createAlert('date="2024-01-15"')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.date).toBe('2024-01-15')
+      expect(alert.getAttribute('date')).toBe('2024-01-15')
+
+      const dateElement = alert.querySelector('.pkt-alert__date')
+      expect(dateElement).toBeInTheDocument()
+      expect(dateElement?.textContent).toContain('2024-01-15')
+    })
+
+    test('handles aria-live property', async () => {
+      const container = await createAlert('aria-live="assertive"')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      // Note: The component sets aria-live to the ariaLive property value,
+      // which defaults to 'polite' from specs, not the attribute value
+      expect(alert['aria-live']).toBe('polite')
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv?.getAttribute('aria-live')).toBe('polite')
+    })
+  })
+
+  describe('Close functionality', () => {
+    test('renders close button when closeAlert is true', async () => {
+      const container = await createAlert('closealert')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.closeAlert).toBe(true)
+
+      const closeDiv = alert.querySelector('.pkt-alert__close')
+      const closeButton = alert.querySelector('pkt-button')
+
+      expect(closeDiv).toBeInTheDocument()
+      expect(closeButton).toBeInTheDocument()
+      expect(closeButton?.getAttribute('aria-label')).toBe('close')
+      expect(closeButton?.getAttribute('skin')).toBe('tertiary')
+      expect(closeButton?.getAttribute('variant')).toBe('icon-only')
+    })
+
+    test('does not render close button when closeAlert is false', async () => {
+      const container = await createAlert()
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      expect(alert.closeAlert).toBe(false)
+
+      const closeDiv = alert.querySelector('.pkt-alert__close')
+      const closeButton = alert.querySelector('pkt-button')
+
+      expect(closeDiv).not.toBeInTheDocument()
+      expect(closeButton).not.toBeInTheDocument()
+    })
+
+    test('closes alert when close button is clicked', async () => {
+      const container = await createAlert('closealert')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      // Listen for close events
+      const closeSpy = jest.fn()
+      const onCloseSpy = jest.fn()
+      alert.addEventListener('close', closeSpy)
+      alert.addEventListener('on-close', onCloseSpy)
+
+      const closeButton = alert.querySelector('pkt-button')
+      expect(closeButton).toBeInTheDocument()
+
+      // Click the close button
+      fireEvent.click(closeButton!)
+      await alert.updateComplete
+
+      // Alert should be hidden
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-hide')
+      expect(alert).toHaveClass('pkt-hide')
+
+      // Events should be dispatched
+      expect(closeSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'close',
+          detail: expect.objectContaining({
+            origin: expect.any(Object),
+          }),
+        }),
+      )
+      expect(onCloseSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'on-close',
+          detail: expect.objectContaining({
+            origin: expect.any(Object),
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('Grid layout classes', () => {
+    test('applies correct grid classes based on content', async () => {
+      // Test with no title and no date
+      const container1 = await createAlert()
+      const alert1 = container1.querySelector('pkt-alert') as PktAlert
+      await alert1.updateComplete
+
+      const grid1 = alert1.querySelector('.pkt-alert__grid')
+      expect(grid1).toHaveClass('pkt-alert__noTitle')
+      expect(grid1).toHaveClass('pkt-alert__noDate')
+
+      container1.remove()
+
+      // Test with title but no date
+      const container2 = await createAlert('title="Test Title"')
+      const alert2 = container2.querySelector('pkt-alert') as PktAlert
+      await alert2.updateComplete
+
+      const grid2 = alert2.querySelector('.pkt-alert__grid')
+      expect(grid2).not.toHaveClass('pkt-alert__noTitle')
+      expect(grid2).toHaveClass('pkt-alert__noDate')
+
+      container2.remove()
+
+      // Test with both title and date
+      const container3 = await createAlert('title="Test Title" date="2024-01-15"')
+      const alert3 = container3.querySelector('pkt-alert') as PktAlert
+      await alert3.updateComplete
+
+      const grid3 = alert3.querySelector('.pkt-alert__grid')
+      expect(grid3).not.toHaveClass('pkt-alert__noTitle')
+      expect(grid3).not.toHaveClass('pkt-alert__noDate')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const container = await createAlert('aria-live="polite" role="alert"')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      const icon = alert.querySelector('pkt-icon')
+
+      expect(alertDiv?.getAttribute('aria-live')).toBe('polite')
+      expect(alert.role).toBe('alert')
+      expect(icon?.getAttribute('aria-hidden')).toBe('true')
+    })
+
+    test('renders with no WCAG errors with axe - simple alert', async () => {
+      const container = await createAlert('title="Test Alert"', 'This is a test alert message.')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - complex alert', async () => {
+      const container = await createAlert(
+        'skin="error" title="Error Alert" date="2024-01-15" close-alert aria-live="assertive"',
+        '<p>This is an error message with <a href="#">a link</a>.</p>',
+      )
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - compact alert', async () => {
+      const container = await createAlert('skin="success" compact close-alert', 'Success message')
+
+      const alert = container.querySelector('pkt-alert') as PktAlert
+      await alert.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/alert/alert.ts

@@ -9,6 +9,7 @@ import { updateClassAttribute } from '@/utils/classutils'
 import specs from 'componentSpecs/alert.json'
 
 import '@/components/icon'
+import '@/components/button'
 
 export type TAlertSkin = 'error' | 'success' | 'warning' | 'info'
 

package/src/components/backlink/backlink.test.ts

@@ -0,0 +1,286 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+import './backlink'
+import { PktBackLink } from './backlink' // For type checking
+
+const waitForCustomElements = async () => {
+  await Promise.all([customElements.whenDefined('pkt-backlink')])
+}
+
+// Helper function to create backlink markup
+const createBacklink = async (backlinkProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-backlink ${backlinkProps}></pkt-backlink>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktBackLink', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      expect(backlink).toBeInTheDocument()
+
+      await backlink.updateComplete
+      expect(backlink).toBeTruthy()
+
+      const nav = backlink.querySelector('nav')
+      expect(nav).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const nav = backlink.querySelector('nav')
+      const link = nav?.querySelector('a')
+      const icon = link?.querySelector('pkt-icon')
+      const textSpan = link?.querySelector('.pkt-back-link__text')
+
+      expect(nav).toHaveClass('pkt-back-link')
+      expect(link).toHaveClass('pkt-link')
+      expect(link).toHaveClass('pkt-link--icon-left')
+      expect(icon).toHaveClass('pkt-back-link__icon')
+      expect(icon).toHaveClass('pkt-icon')
+      expect(icon).toHaveClass('pkt-link__icon')
+      expect(textSpan).toHaveClass('pkt-back-link__text')
+    })
+
+    test('renders icon correctly', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const icon = backlink.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon?.getAttribute('name')).toBe('chevron-thin-left')
+      expect(icon?.getAttribute('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      expect(backlink.href).toBe('')
+      expect(backlink.text).toBe('Forsiden')
+      expect(backlink.ariaLabel).toBe('')
+
+      const nav = backlink.querySelector('nav')
+      const link = nav?.querySelector('a')
+      const textSpan = link?.querySelector('.pkt-back-link__text')
+
+      expect(link?.getAttribute('href')).toBe('/')
+      expect(textSpan?.textContent).toBe('Forsiden')
+      expect(nav?.getAttribute('aria-label')).toBe('Gå tilbake til forrige side')
+    })
+
+    test('handles href property correctly', async () => {
+      const container = await createBacklink('href="/previous-page"')
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      expect(backlink.href).toBe('/previous-page')
+
+      const link = backlink.querySelector('a')
+      expect(link?.getAttribute('href')).toBe('/previous-page')
+
+      // Test href updates
+      backlink.href = '/another-page'
+      await backlink.updateComplete
+
+      expect(link?.getAttribute('href')).toBe('/another-page')
+    })
+
+    test('handles text property correctly', async () => {
+      const container = await createBacklink('text="Back to Home"')
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      expect(backlink.text).toBe('Back to Home')
+      // The text attribute should be removed from the custom element
+      expect(backlink.getAttribute('text')).toBe(null)
+
+      const textSpan = backlink.querySelector('.pkt-back-link__text')
+      expect(textSpan?.textContent).toBe('Back to Home')
+
+      // Test text updates
+      backlink.text = 'Return to Start'
+      await backlink.updateComplete
+
+      expect(textSpan?.textContent).toBe('Return to Start')
+    })
+
+    test('handles ariaLabel property correctly', async () => {
+      // Set the property directly instead of using attribute
+      const container = await createBacklink()
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+
+      // Set ariaLabel property directly
+      backlink.ariaLabel = 'Navigate back to previous section'
+      await backlink.updateComplete
+
+      expect(backlink.ariaLabel).toBe('Navigate back to previous section')
+
+      const nav = backlink.querySelector('nav')
+      expect(nav?.getAttribute('aria-label')).toBe('Navigate back to previous section')
+
+      // Test ariaLabel updates
+      backlink.ariaLabel = 'Go back to main menu'
+      await backlink.updateComplete
+
+      expect(nav?.getAttribute('aria-label')).toBe('Go back to main menu')
+    })
+
+    test('uses default aria-label when none provided', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      expect(backlink.ariaLabel).toBe('')
+
+      const nav = backlink.querySelector('nav')
+      expect(nav?.getAttribute('aria-label')).toBe('Gå tilbake til forrige side')
+    })
+
+    test('handles empty href by defaulting to "/"', async () => {
+      const container = await createBacklink('href=""')
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      expect(backlink.href).toBe('')
+
+      const link = backlink.querySelector('a')
+      expect(link?.getAttribute('href')).toBe('/')
+    })
+  })
+
+  describe('Attribute cleanup', () => {
+    test('removes reflected attributes from the element', async () => {
+      const container = await createBacklink('href="/test" text="Test Text"')
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      // The attributeChangedCallback should remove these attributes from the element
+      // (this is implementation-specific behavior in the component)
+      expect(backlink.hasAttribute('href')).toBe(false)
+      expect(backlink.hasAttribute('text')).toBe(false)
+      expect(backlink.hasAttribute('arialabel')).toBe(false)
+    })
+  })
+
+  describe('Link functionality', () => {
+    test('creates clickable link with correct href', async () => {
+      const container = await createBacklink('href="/dashboard" text="Back to Dashboard"')
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const link = backlink.querySelector('a')
+      expect(link).toBeInTheDocument()
+      expect(link?.getAttribute('href')).toBe('/dashboard')
+      expect(link?.textContent?.trim()).toContain('Back to Dashboard')
+    })
+
+    test('handles complex URLs correctly', async () => {
+      const complexUrl = 'https://example.com/path?query=value#section'
+      const container = await createBacklink(`href="${complexUrl}"`)
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const link = backlink.querySelector('a')
+      expect(link?.getAttribute('href')).toBe(complexUrl)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const container = await createBacklink('text="Home"')
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+
+      // Set ariaLabel property to test custom aria-label
+      backlink.ariaLabel = 'Return to main page'
+      await backlink.updateComplete
+
+      const nav = backlink.querySelector('nav')
+      const icon = backlink.querySelector('pkt-icon')
+
+      expect(nav?.getAttribute('aria-label')).toBe('Return to main page')
+      expect(icon?.getAttribute('aria-hidden')).toBe('true')
+    })
+
+    test('provides semantic navigation structure', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const nav = backlink.querySelector('nav')
+      const link = nav?.querySelector('a')
+
+      expect(nav).toBeInTheDocument()
+      expect(link).toBeInTheDocument()
+      expect(nav?.tagName.toLowerCase()).toBe('nav')
+      expect(link?.tagName.toLowerCase()).toBe('a')
+    })
+
+    test('renders with no WCAG errors with axe - default backlink', async () => {
+      const container = await createBacklink()
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - custom backlink', async () => {
+      const container = await createBacklink(
+        'href="/categories" text="Back to Categories" aria-label="Navigate back to category listing"',
+      )
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - external link', async () => {
+      const container = await createBacklink(
+        'href="https://example.com" text="Back to External Site"',
+      )
+
+      const backlink = container.querySelector('pkt-backlink') as PktBackLink
+      await backlink.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/backlink/backlink.ts

@@ -3,6 +3,8 @@ import { html } from 'lit'
 import { property, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
+import '@/components/icon'
+
 export interface IPktBackLink {
   href?: string
   text?: string
@@ -13,9 +15,9 @@ export interface IPktBackLink {
 export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
   // Properties
 
-  @property({ type: String, reflect: true }) href: string = ''
-  @property({ type: String, reflect: true }) text: string = 'Forsiden'
-  @property({ type: String, reflect: true }) ariaLabel: string = ''
+  @property({ type: String }) href: string = ''
+  @property({ type: String }) text: string = 'Forsiden'
+  @property({ type: String }) ariaLabel: string = ''
 
   // Lifecycle