@oslokommune/punkt-elements 13.5.2 → 13.5.3

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

@@ -1,40 +1,36 @@
 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 './backlink'
 
 expect.extend(toHaveNoViolations)
 
-import './backlink'
-import { PktBackLink } from './backlink' // For type checking
-
-const waitForCustomElements = async () => {
-  await Promise.all([customElements.whenDefined('pkt-backlink')])
+export interface BacklinkTestConfig extends BaseTestConfig {
+  href?: string
+  text?: string
+  ariaLabel?: string
 }
 
-// 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
+// Use shared framework
+export const createBacklinkTest = async (config: BacklinkTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-backlink'>,
+    BacklinkTestConfig
+  >('pkt-backlink', config)
+
+  return {
+    container,
+    backlink: element,
+  }
 }
 
-// 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 } = await createBacklinkTest()
 
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
       expect(backlink).toBeInTheDocument()
-
-      await backlink.updateComplete
       expect(backlink).toBeTruthy()
 
       const nav = backlink.querySelector('nav')
@@ -42,10 +38,7 @@ describe('PktBackLink', () => {
     })
 
     test('renders with correct structure', async () => {
-      const container = await createBacklink()
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest()
 
       const nav = backlink.querySelector('nav')
       const link = nav?.querySelector('a')
@@ -62,10 +55,7 @@ describe('PktBackLink', () => {
     })
 
     test('renders icon correctly', async () => {
-      const container = await createBacklink()
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest()
 
       const icon = backlink.querySelector('pkt-icon')
       expect(icon).toBeInTheDocument()
@@ -76,10 +66,7 @@ describe('PktBackLink', () => {
 
   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
+      const { backlink } = await createBacklinkTest()
 
       expect(backlink.href).toBe('')
       expect(backlink.text).toBe('Forsiden')
@@ -95,10 +82,7 @@ describe('PktBackLink', () => {
     })
 
     test('handles href property correctly', async () => {
-      const container = await createBacklink('href="/previous-page"')
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest({ href: '/previous-page' })
 
       expect(backlink.href).toBe('/previous-page')
 
@@ -113,10 +97,7 @@ describe('PktBackLink', () => {
     })
 
     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
+      const { backlink } = await createBacklinkTest({ text: 'Back to Home' })
 
       expect(backlink.text).toBe('Back to Home')
       // The text attribute should be removed from the custom element
@@ -133,13 +114,9 @@ describe('PktBackLink', () => {
     })
 
     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
+      const { backlink } = await createBacklinkTest({
+        ariaLabel: 'Navigate back to previous section',
+      })
 
       expect(backlink.ariaLabel).toBe('Navigate back to previous section')
 
@@ -154,10 +131,7 @@ describe('PktBackLink', () => {
     })
 
     test('uses default aria-label when none provided', async () => {
-      const container = await createBacklink()
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest()
 
       expect(backlink.ariaLabel).toBe('')
 
@@ -166,10 +140,7 @@ describe('PktBackLink', () => {
     })
 
     test('handles empty href by defaulting to "/"', async () => {
-      const container = await createBacklink('href=""')
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest({ href: '' })
 
       expect(backlink.href).toBe('')
 
@@ -180,10 +151,7 @@ describe('PktBackLink', () => {
 
   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
+      const { backlink } = await createBacklinkTest({ href: '/test', text: 'Test Text' })
 
       // The attributeChangedCallback should remove these attributes from the element
       // (this is implementation-specific behavior in the component)
@@ -195,10 +163,10 @@ describe('PktBackLink', () => {
 
   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 { backlink } = await createBacklinkTest({
+        href: '/dashboard',
+        text: 'Back to Dashboard',
+      })
 
       const link = backlink.querySelector('a')
       expect(link).toBeInTheDocument()
@@ -208,10 +176,7 @@ describe('PktBackLink', () => {
 
     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 { backlink } = await createBacklinkTest({ href: complexUrl })
 
       const link = backlink.querySelector('a')
       expect(link?.getAttribute('href')).toBe(complexUrl)
@@ -220,12 +185,10 @@ describe('PktBackLink', () => {
 
   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 { backlink } = await createBacklinkTest({
+        text: 'Home',
+        ariaLabel: 'Return to main page',
+      })
 
       const nav = backlink.querySelector('nav')
       const icon = backlink.querySelector('pkt-icon')
@@ -235,10 +198,7 @@ describe('PktBackLink', () => {
     })
 
     test('provides semantic navigation structure', async () => {
-      const container = await createBacklink()
-
-      const backlink = container.querySelector('pkt-backlink') as PktBackLink
-      await backlink.updateComplete
+      const { backlink } = await createBacklinkTest()
 
       const nav = backlink.querySelector('nav')
       const link = nav?.querySelector('a')
@@ -250,34 +210,28 @@ describe('PktBackLink', () => {
     })
 
     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 { container } = await createBacklinkTest()
 
       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 { container } = await createBacklinkTest({
+        href: '/categories',
+        text: 'Back to Categories',
+        ariaLabel: 'Navigate back to category listing',
+      })
 
       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 { container } = await createBacklinkTest({
+        href: 'https://example.com',
+        text: 'Back to External Site',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()