@oslokommune/punkt-elements 13.5.1 → 13.5.3

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

@@ -0,0 +1,364 @@
+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 { PktLinkCard, type TLinkCardSkin } from './linkcard'
+import type { IPktLinkCard } from './linkcard'
+import './linkcard'
+
+export interface LinkCardTestConfig extends IPktLinkCard, BaseTestConfig {}
+
+// Use shared framework
+export const createLinkCardTest = async (config: LinkCardTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-linkcard'>,
+    LinkCardTestConfig
+  >('pkt-linkcard', config)
+
+  const link = element.querySelector('a') as HTMLAnchorElement
+
+  return {
+    container,
+    linkCard: element,
+    link,
+  }
+}
+expect.extend(toHaveNoViolations)
+
+// Test data constants
+const VALID_SKINS: TLinkCardSkin[] = [
+  'normal',
+  'no-padding',
+  'blue',
+  'beige',
+  'green',
+  'gray',
+  'beige-outline',
+  'gray-outline',
+]
+
+const SAMPLE_ICONS = ['arrow-right', 'external-link', 'download', 'info']
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+// ----------- THE TESTS -----------
+
+describe('PktLinkCard', () => {
+  describe('Basic Rendering', () => {
+    test('renders without errors', async () => {
+      const { linkCard, link } = await createLinkCardTest()
+
+      expect(linkCard).toBeInTheDocument()
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveClass('pkt-linkcard')
+    })
+
+    test('renders with default properties', async () => {
+      const { linkCard, link } = await createLinkCardTest()
+
+      expect(linkCard.title).toBe('')
+      expect(linkCard.href).toBe('#')
+      expect(linkCard.iconName).toBe('')
+      expect(linkCard.openInNewTab).toBe(false)
+      expect(linkCard.skin).toBe('normal')
+      expect(linkCard.external).toBe(false)
+
+      expect(link.getAttribute('href')).toBe('#')
+      expect(link.getAttribute('target')).toBe('_self')
+      // When openInNewTab is false, rel should be null (ifDefined behavior)
+      expect(link.getAttribute('rel')).toBeNull()
+    })
+
+    test('renders content in slot', async () => {
+      const content = '<p>Custom link card content</p>'
+      const { linkCard } = await createLinkCardTest({ content })
+
+      const textSlot = linkCard.querySelector('.pkt-linkcard__text')
+      expect(textSlot).toBeInTheDocument()
+      expect(textSlot?.innerHTML).toBe(content)
+    })
+  })
+
+  describe('Title Functionality', () => {
+    test('renders title when provided', async () => {
+      const title = 'Test Link Card Title'
+      const { linkCard } = await createLinkCardTest({ title })
+
+      expect(linkCard.title).toBe(title)
+
+      const titleElement = linkCard.querySelector('.pkt-linkcard__title')
+      expect(titleElement).toBeInTheDocument()
+      expect(titleElement?.textContent).toBe(title)
+    })
+
+    test('does not render title when not provided', async () => {
+      const { linkCard } = await createLinkCardTest()
+
+      const titleElement = linkCard.querySelector('.pkt-linkcard__title')
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    test('applies correct title classes', async () => {
+      const title = 'Test Title'
+      const { linkCard } = await createLinkCardTest({ title })
+
+      const titleElement = linkCard.querySelector('.pkt-linkcard__title')
+      expect(titleElement).toHaveClass('pkt-linkcard__title')
+    })
+  })
+
+  describe('Link Functionality', () => {
+    test('renders with custom href', async () => {
+      const href = '/custom-path'
+      const { linkCard, link } = await createLinkCardTest({ href })
+
+      expect(linkCard.href).toBe(href)
+      expect(link.getAttribute('href')).toBe(href)
+    })
+
+    test('handles openInNewTab correctly', async () => {
+      const { linkCard, link } = await createLinkCardTest({ openInNewTab: true })
+
+      expect(linkCard.openInNewTab).toBe(true)
+      expect(link.getAttribute('target')).toBe('_blank')
+    })
+
+    test('handles openInNewTab false correctly', async () => {
+      const { linkCard, link } = await createLinkCardTest({ openInNewTab: false })
+
+      expect(linkCard.openInNewTab).toBe(false)
+      expect(link.getAttribute('target')).toBe('_self')
+    })
+
+    test('applies correct rel attribute for new tab', async () => {
+      const { link } = await createLinkCardTest({ openInNewTab: true })
+      expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+    })
+  })
+
+  describe('Icon Functionality', () => {
+    test('renders icon when iconName provided', async () => {
+      const iconName = 'arrow-right'
+      const { linkCard } = await createLinkCardTest({ iconName })
+
+      expect(linkCard.iconName).toBe(iconName)
+
+      const icon = linkCard.querySelector('pkt-icon')
+      expect(icon).toBeInTheDocument()
+      expect(icon).toHaveClass('pkt-link__icon')
+      expect(icon?.getAttribute('name')).toBe(iconName)
+    })
+
+    test('does not render icon when iconName not provided', async () => {
+      const { linkCard } = await createLinkCardTest()
+
+      const icon = linkCard.querySelector('pkt-icon')
+      expect(icon).not.toBeInTheDocument()
+    })
+
+    test('renders with different icon names', async () => {
+      for (const iconName of SAMPLE_ICONS) {
+        const { linkCard } = await createLinkCardTest({ iconName })
+
+        const icon = linkCard.querySelector('pkt-icon')
+        expect(icon?.getAttribute('name')).toBe(iconName)
+      }
+    })
+  })
+
+  describe('Skin Variations', () => {
+    test('applies default skin class', async () => {
+      const { link } = await createLinkCardTest()
+      expect(link).toHaveClass('pkt-linkcard')
+      expect(link).toHaveClass('pkt-linkcard--normal')
+    })
+
+    test('applies different skin classes correctly', async () => {
+      for (const skin of VALID_SKINS) {
+        const { link } = await createLinkCardTest({ skin })
+
+        expect(link).toHaveClass('pkt-linkcard')
+        expect(link).toHaveClass(`pkt-linkcard--${skin}`)
+      }
+    })
+
+    test('handles skin property changes', async () => {
+      const { linkCard, link } = await createLinkCardTest({ skin: 'blue' })
+
+      expect(link).toHaveClass('pkt-linkcard--blue')
+
+      // Change skin
+      linkCard.skin = 'green'
+      await linkCard.updateComplete
+
+      expect(link).toHaveClass('pkt-linkcard--green')
+      expect(link).not.toHaveClass('pkt-linkcard--blue')
+    })
+  })
+
+  describe('Property Updates', () => {
+    test('updates title dynamically', async () => {
+      const { linkCard } = await createLinkCardTest({ title: 'Initial Title' })
+
+      expect(linkCard.querySelector('.pkt-linkcard__title')?.textContent).toBe('Initial Title')
+
+      linkCard.title = 'Updated Title'
+      await linkCard.updateComplete
+
+      expect(linkCard.querySelector('.pkt-linkcard__title')?.textContent).toBe('Updated Title')
+    })
+
+    test('updates href dynamically', async () => {
+      const { linkCard, link } = await createLinkCardTest({ href: '/initial' })
+
+      expect(link.getAttribute('href')).toBe('/initial')
+
+      linkCard.href = '/updated'
+      await linkCard.updateComplete
+
+      expect(link.getAttribute('href')).toBe('/updated')
+    })
+
+    test('updates openInNewTab dynamically', async () => {
+      const { linkCard, link } = await createLinkCardTest({ openInNewTab: false })
+
+      expect(link.getAttribute('target')).toBe('_self')
+
+      linkCard.openInNewTab = true
+      await linkCard.updateComplete
+
+      expect(link.getAttribute('target')).toBe('_blank')
+    })
+  })
+
+  describe('Complex Configurations', () => {
+    test('renders with all properties set', async () => {
+      const config: LinkCardTestConfig = {
+        title: 'Complete Link Card',
+        href: '/complete-path',
+        iconName: 'arrow-right',
+        openInNewTab: true,
+        skin: 'blue',
+        content: '<p>Complete content</p>',
+      }
+
+      const { linkCard, link } = await createLinkCardTest(config)
+
+      // Verify all properties
+      expect(linkCard.title).toBe(config.title)
+      expect(linkCard.href).toBe(config.href)
+      expect(linkCard.iconName).toBe(config.iconName)
+      expect(linkCard.openInNewTab).toBe(config.openInNewTab)
+      expect(linkCard.skin).toBe(config.skin)
+
+      // Verify DOM elements
+      expect(link.getAttribute('href')).toBe(config.href)
+      expect(link.getAttribute('target')).toBe('_blank')
+      expect(link).toHaveClass(`pkt-linkcard--${config.skin}`)
+
+      const titleElement = linkCard.querySelector('.pkt-linkcard__title')
+      expect(titleElement?.textContent).toBe(config.title)
+
+      const icon = linkCard.querySelector('pkt-icon')
+      expect(icon?.getAttribute('name')).toBe(config.iconName)
+
+      const textSlot = linkCard.querySelector('.pkt-linkcard__text')
+      expect(textSlot?.innerHTML).toBe(config.content)
+    })
+
+    test('renders minimal configuration', async () => {
+      const { linkCard, link } = await createLinkCardTest({ href: '/minimal' })
+
+      expect(linkCard.href).toBe('/minimal')
+      expect(link.getAttribute('href')).toBe('/minimal')
+      expect(link).toHaveClass('pkt-linkcard--normal')
+
+      // Should not have title or icon
+      expect(linkCard.querySelector('.pkt-linkcard__title')).not.toBeInTheDocument()
+      expect(linkCard.querySelector('pkt-icon')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    test('handles empty string values', async () => {
+      const { linkCard } = await createLinkCardTest({
+        title: '',
+        href: '',
+        iconName: '',
+      })
+
+      expect(linkCard.title).toBe('')
+      expect(linkCard.href).toBe('')
+      expect(linkCard.iconName).toBe('')
+
+      // Should not render title or icon with empty strings
+      expect(linkCard.querySelector('.pkt-linkcard__title')).not.toBeInTheDocument()
+      expect(linkCard.querySelector('pkt-icon')).not.toBeInTheDocument()
+    })
+
+    test('handles special characters in title', async () => {
+      const specialTitle = 'Title with "quotes" & <symbols>'
+      const { linkCard } = await createLinkCardTest()
+
+      // Set title via property to avoid HTML attribute encoding issues
+      linkCard.title = specialTitle
+      await linkCard.updateComplete
+
+      expect(linkCard.title).toBe(specialTitle)
+
+      const titleElement = linkCard.querySelector('.pkt-linkcard__title')
+      expect(titleElement).toBeInTheDocument()
+      expect(titleElement?.textContent).toBe(specialTitle)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const { linkCard } = await createLinkCardTest({
+        title: 'Accessible Link Card',
+        href: '/accessible',
+      })
+
+      const results = await axe(linkCard)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('maintains proper link semantics', async () => {
+      const { link } = await createLinkCardTest({
+        title: 'Semantic Link',
+        href: '/semantic',
+      })
+
+      expect(link.tagName).toBe('A')
+      expect(link.getAttribute('href')).toBe('/semantic')
+      expect(link.textContent).toContain('Semantic Link')
+    })
+
+    test('handles external link accessibility', async () => {
+      const { link } = await createLinkCardTest({
+        title: 'External Link',
+        href: 'https://example.com',
+        openInNewTab: true,
+      })
+
+      expect(link.getAttribute('target')).toBe('_blank')
+      expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+    })
+  })
+
+  describe('Type Safety', () => {
+    test('validates interface implementation', () => {
+      const linkCard = new PktLinkCard()
+
+      // Check that all interface properties exist
+      expect(linkCard).toHaveProperty('title')
+      expect(linkCard).toHaveProperty('href')
+      expect(linkCard).toHaveProperty('iconName')
+      expect(linkCard).toHaveProperty('openInNewTab')
+      expect(linkCard).toHaveProperty('skin')
+    })
+  })
+})

package/src/components/linkcard/linkcard.ts

@@ -5,6 +5,7 @@ import { Ref, createRef } from 'lit/directives/ref.js'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/icon'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 export type TLinkCardSkin =
   | 'normal'
@@ -15,6 +16,7 @@ export type TLinkCardSkin =
   | 'gray'
   | 'beige-outline'
   | 'gray-outline';
+
 export interface IPktLinkCard {
   title?: string
   href?: string
@@ -54,7 +56,7 @@ export class PktLinkCard extends PktElement implements IPktLinkCard {
         href=${this.href}
         class=${classes}
         target=${this.openInNewTab ? '_blank' : '_self'}
-        rel=${this.openInNewTab ?? 'noopener noreferrer'}
+        rel=${ifDefined(this.openInNewTab ? 'noopener noreferrer' : undefined)}
       >
         ${this.iconName && html`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
         ${this.title && html`<div class=${titleClasses}>${this.title}</div>`}