@oslokommune/punkt-elements 13.5.1 → 13.5.3

package/src/components/button/button.test.ts

@@ -1,30 +1,39 @@
 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 './button'
 
 expect.extend(toHaveNoViolations)
 
-import './button'
-import { PktButton } from './button' // For type checking
-
-const waitForCustomElements = async () => {
-  await Promise.all([
-    customElements.whenDefined('pkt-button'),
-    customElements.whenDefined('pkt-icon'),
-  ])
+export interface ButtonTestConfig extends BaseTestConfig {
+  size?: string
+  skin?: string
+  variant?: string
+  color?: string
+  type?: string
+  disabled?: boolean
+  isLoading?: boolean
+  iconName?: string
+  iconNameSecond?: string
+  iconPosition?: string
+  mode?: string
+  form?: string
+  content?: string
 }
 
-// Helper function to create button markup
-const createButton = async (buttonProps = '', content = 'Test Button') => {
-  const container = document.createElement('div')
-  container.innerHTML = `
-    <pkt-button ${buttonProps}>
-      ${content}
-    </pkt-button>
-  `
-  document.body.appendChild(container)
-  await waitForCustomElements()
-  return container
+// Use shared framework
+export const createButtonTest = async (config: ButtonTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-button'>,
+    ButtonTestConfig
+  >('pkt-button', config)
+
+  return {
+    container,
+    button: element,
+  }
 }
 
 // Cleanup after each test
@@ -35,41 +44,36 @@ afterEach(() => {
 describe('PktButton', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
-      const container = await createButton()
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      expect(pktButton).toBeInTheDocument()
+      const { button } = await createButtonTest({ content: 'Test Button' })
 
-      await pktButton.updateComplete
-      expect(pktButton).toBeTruthy()
-
-      const button = pktButton.querySelector('button')
       expect(button).toBeInTheDocument()
+      expect(button).toBeTruthy()
+
+      const nativeButton = button.querySelector('button')
+      expect(nativeButton).toBeInTheDocument()
     })
 
     test('renders with correct structure', async () => {
-      const container = await createButton('variant="icon-left" icon-name="user"', 'Click Me')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({
+        variant: 'icon-left',
+        iconName: 'user',
+        content: 'Click Me',
+      })
 
-      const button = pktButton.querySelector('button')
-      const icon = button?.querySelector('pkt-icon')
-      const textSpan = button?.querySelector('.pkt-btn__text')
+      const nativeButton = button.querySelector('button')
+      const icon = nativeButton?.querySelector('pkt-icon')
+      const textSpan = nativeButton?.querySelector('.pkt-btn__text')
 
-      expect(button).toHaveClass('pkt-btn')
+      expect(nativeButton).toHaveClass('pkt-btn')
       expect(icon).toHaveClass('pkt-btn__icon')
       expect(textSpan).toHaveClass('pkt-btn__text')
       expect(textSpan?.textContent?.trim()).toContain('Click Me')
     })
 
     test('renders text correctly', async () => {
-      const container = await createButton('', 'Button Text Content')
+      const { button } = await createButtonTest({ content: 'Button Text Content' })
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
-
-      const textSpan = pktButton.querySelector('.pkt-btn__text')
+      const textSpan = button.querySelector('.pkt-btn__text')
       expect(textSpan).toBeInTheDocument()
       expect(textSpan?.textContent?.trim()).toContain('Button Text Content')
     })
@@ -77,41 +81,35 @@ describe('PktButton', () => {
 
   describe('Properties and attributes', () => {
     test('applies default properties correctly', async () => {
-      const container = await createButton()
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
-
-      expect(pktButton.size).toBe('medium')
-      expect(pktButton.skin).toBe('primary')
-      expect(pktButton.variant).toBe('label-only')
-      expect(pktButton.type).toBe('button')
-      expect(pktButton.mode).toBe('light')
-      expect(pktButton.disabled).toBe(false)
-      expect(pktButton.isLoading).toBe(false)
-
-      const button = pktButton.querySelector('button')
-      expect(button).toHaveClass('pkt-btn')
-      expect(button).toHaveClass('pkt-btn--medium')
-      expect(button).toHaveClass('pkt-btn--primary')
-      expect(button).toHaveClass('pkt-btn--label-only')
+      const { button } = await createButtonTest({ content: 'Test Button' })
+      await button.updateComplete
+
+      expect(button.size).toBe('medium')
+      expect(button.skin).toBe('primary')
+      expect(button.variant).toBe('label-only')
+      expect(button.type).toBe('button')
+      expect(button.mode).toBe('light')
+      expect(button.disabled).toBe(false)
+      expect(button.isLoading).toBe(false)
+
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl).toHaveClass('pkt-btn')
+      expect(buttonEl).toHaveClass('pkt-btn--medium')
+      expect(buttonEl).toHaveClass('pkt-btn--primary')
+      expect(buttonEl).toHaveClass('pkt-btn--label-only')
     })
 
     test('applies different size properties correctly', async () => {
       const sizes = ['small', 'medium', 'large'] as const
 
       for (const size of sizes) {
-        const container = await createButton(`size="${size}"`)
-        const pktButton = container.querySelector('pkt-button') as PktButton
-        await pktButton.updateComplete
-
-        expect(pktButton.size).toBe(size)
+        const { button } = await createButtonTest({ size, content: 'Test Button' })
+        await button.updateComplete
 
-        const button = pktButton.querySelector('button')
-        expect(button).toHaveClass(`pkt-btn--${size}`)
+        expect(button.size).toBe(size)
 
-        // Cleanup for next iteration
-        container.remove()
+        const buttonEl = button.querySelector('button')
+        expect(buttonEl).toHaveClass(`pkt-btn--${size}`)
       }
     })
 
@@ -119,17 +117,13 @@ describe('PktButton', () => {
       const skins = ['primary', 'secondary', 'tertiary'] as const
 
       for (const skin of skins) {
-        const container = await createButton(`skin="${skin}"`)
-        const pktButton = container.querySelector('pkt-button') as PktButton
-        await pktButton.updateComplete
+        const { button } = await createButtonTest({ skin, content: 'Test Button' })
+        await button.updateComplete
 
-        expect(pktButton.skin).toBe(skin)
+        expect(button.skin).toBe(skin)
 
-        const button = pktButton.querySelector('button')
-        expect(button).toHaveClass(`pkt-btn--${skin}`)
-
-        // Cleanup for next iteration
-        container.remove()
+        const buttonEl = button.querySelector('button')
+        expect(buttonEl).toHaveClass(`pkt-btn--${skin}`)
       }
     })
 
@@ -143,19 +137,21 @@ describe('PktButton', () => {
       ] as const
 
       for (const variant of variants) {
-        const container = await createButton(
-          `variant="${variant}" icon-name="user" second-icon-name="star"`,
-        )
-        const pktButton = container.querySelector('pkt-button') as PktButton
-        await pktButton.updateComplete
+        const { button } = await createButtonTest({
+          variant,
+          iconName: 'user',
+          iconNameSecond: 'star',
+          content: 'Test Button',
+        })
+        await button.updateComplete
 
-        expect(pktButton.variant).toBe(variant)
+        expect(button.variant).toBe(variant)
 
-        const button = pktButton.querySelector('button')
-        expect(button).toHaveClass(`pkt-btn--${variant}`)
+        const buttonEl = button.querySelector('button')
+        expect(buttonEl).toHaveClass(`pkt-btn--${variant}`)
 
         // Check icon rendering based on variant
-        const icons = button?.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
+        const icons = buttonEl?.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
         if (variant === 'label-only') {
           expect(icons).toHaveLength(0)
         } else if (variant === 'icons-right-and-left') {
@@ -163,9 +159,6 @@ describe('PktButton', () => {
         } else {
           expect(icons).toHaveLength(1)
         }
-
-        // Cleanup for next iteration
-        container.remove()
       }
     })
 
@@ -173,17 +166,13 @@ describe('PktButton', () => {
       const colors = ['blue', 'green', 'red', 'yellow'] as const
 
       for (const color of colors) {
-        const container = await createButton(`color="${color}"`)
-        const pktButton = container.querySelector('pkt-button') as PktButton
-        await pktButton.updateComplete
+        const { button } = await createButtonTest({ color, content: 'Test Button' })
+        await button.updateComplete
 
-        expect(pktButton.color).toBe(color)
+        expect(button.color).toBe(color)
 
-        const button = pktButton.querySelector('button')
-        expect(button).toHaveClass(`pkt-btn--${color}`)
-
-        // Cleanup for next iteration
-        container.remove()
+        const buttonEl = button.querySelector('button')
+        expect(buttonEl).toHaveClass(`pkt-btn--${color}`)
       }
     })
 
@@ -191,46 +180,46 @@ describe('PktButton', () => {
       const types = ['button', 'submit', 'reset'] as const
 
       for (const type of types) {
-        const container = await createButton(`type="${type}"`)
-        const pktButton = container.querySelector('pkt-button') as PktButton
-        await pktButton.updateComplete
-
-        expect(pktButton.type).toBe(type)
+        const { button } = await createButtonTest({ type, content: 'Test Button' })
+        await button.updateComplete
 
-        const button = pktButton.querySelector('button')
-        expect(button?.getAttribute('type')).toBe(type)
+        expect(button.type).toBe(type)
 
-        // Cleanup for next iteration
-        container.remove()
+        const buttonEl = button.querySelector('button')
+        expect(buttonEl?.getAttribute('type')).toBe(type)
       }
     })
 
     test('handles icon properties correctly', async () => {
-      const container = await createButton('variant="icon-left" icon-name="user"')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({
+        variant: 'icon-left',
+        iconName: 'user',
+        content: 'Test Button',
+      })
+      await button.updateComplete
 
-      expect(pktButton.iconName).toBe('user')
+      expect(button.iconName).toBe('user')
 
-      const icon = pktButton.querySelector('pkt-icon:not(.pkt-btn__spinner)')
+      const icon = button.querySelector('pkt-icon:not(.pkt-btn__spinner)')
       expect(icon?.getAttribute('name')).toBe('user')
       expect(icon).toHaveClass('pkt-btn__icon')
     })
 
     test('handles second icon for icons-right-and-left variant', async () => {
-      const container = await createButton('variant="icons-right-and-left"')
-      const pktButton = container.querySelector('pkt-button') as PktButton
+      const { button } = await createButtonTest({
+        variant: 'icons-right-and-left',
+        content: 'Test Button',
+      })
 
       // Set both icon names as properties
-      pktButton.iconName = 'home'
-      pktButton.secondIconName = 'star'
-      await pktButton.updateComplete
+      button.iconName = 'home'
+      button.secondIconName = 'star'
+      await button.updateComplete
 
-      expect(pktButton.iconName).toBe('home')
-      expect(pktButton.secondIconName).toBe('star')
+      expect(button.iconName).toBe('home')
+      expect(button.secondIconName).toBe('star')
 
-      const icons = pktButton.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
+      const icons = button.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
       expect(icons).toHaveLength(2)
       expect(icons[0]?.getAttribute('name')).toBe('home')
       expect(icons[1]?.getAttribute('name')).toBe('star')
@@ -239,190 +228,175 @@ describe('PktButton', () => {
 
   describe('Disabled state', () => {
     test('handles disabled property correctly', async () => {
-      const container = await createButton('disabled')
+      const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
+      await button.updateComplete
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      expect(button.disabled).toBe(true)
 
-      expect(pktButton.disabled).toBe(true)
-
-      const button = pktButton.querySelector('button')
-      expect(button).toHaveClass('pkt-btn--disabled')
-      expect(button?.hasAttribute('disabled')).toBe(true)
-      expect(button?.getAttribute('aria-disabled')).toBe('true')
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl).toHaveClass('pkt-btn--disabled')
+      expect(buttonEl?.hasAttribute('disabled')).toBe(true)
+      expect(buttonEl?.getAttribute('aria-disabled')).toBe('true')
     })
 
     test('prevents click events when disabled', async () => {
-      const container = await createButton('disabled')
+      const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
       const clickSpy = jest.fn()
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      await button.updateComplete
 
-      pktButton.addEventListener('click', clickSpy)
+      button.addEventListener('click', clickSpy)
 
-      const button = pktButton.querySelector('button')
-      fireEvent.click(button!)
+      const buttonEl = button.querySelector('button')
+      fireEvent.click(buttonEl!)
 
       expect(clickSpy).not.toHaveBeenCalled()
     })
 
     test('prevents keyboard events when disabled', async () => {
-      const container = await createButton('disabled')
+      const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
       const clickSpy = jest.fn()
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      await button.updateComplete
 
-      pktButton.addEventListener('click', clickSpy)
+      button.addEventListener('click', clickSpy)
 
-      const button = pktButton.querySelector('button')
-      fireEvent.keyDown(button!, { key: 'Enter' })
-      fireEvent.keyDown(button!, { key: ' ' })
+      const buttonEl = button.querySelector('button')
+      fireEvent.keyDown(buttonEl!, { key: 'Enter' })
+      fireEvent.keyDown(buttonEl!, { key: ' ' })
 
       expect(clickSpy).not.toHaveBeenCalled()
     })
 
     test('converts string "false" to boolean false for disabled', async () => {
-      const container = await createButton('disabled="false"')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({ disabled: false, content: 'Test Button' })
+      await button.updateComplete
 
-      expect(pktButton.disabled).toBe(false)
+      expect(button.disabled).toBe(false)
 
-      const button = pktButton.querySelector('button')
-      expect(button).not.toHaveClass('pkt-btn--disabled')
-      expect(button?.hasAttribute('disabled')).toBe(false)
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl).not.toHaveClass('pkt-btn--disabled')
+      expect(buttonEl?.hasAttribute('disabled')).toBe(false)
     })
   })
 
   describe('Loading state', () => {
     test('handles isLoading property correctly', async () => {
-      const container = await createButton()
-      const pktButton = container.querySelector('pkt-button') as PktButton
+      const { button } = await createButtonTest({ content: 'Test Button' })
 
       // Set isLoading as a property
-      pktButton.isLoading = true
-      await pktButton.updateComplete
+      button.isLoading = true
+      await button.updateComplete
 
-      expect(pktButton.isLoading).toBe(true)
+      expect(button.isLoading).toBe(true)
 
-      const button = pktButton.querySelector('button')
-      expect(button).toHaveClass('pkt-btn--isLoading')
-      expect(button?.getAttribute('aria-busy')).toBe('true')
-      expect(button?.getAttribute('aria-disabled')).toBe('true')
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl).toHaveClass('pkt-btn--isLoading')
+      expect(buttonEl?.getAttribute('aria-busy')).toBe('true')
+      expect(buttonEl?.getAttribute('aria-disabled')).toBe('true')
     })
 
     test('renders loading spinner when isLoading is true', async () => {
-      const container = await createButton()
-      const pktButton = container.querySelector('pkt-button') as PktButton
+      const { button } = await createButtonTest({ content: 'Test Button' })
 
       // Set isLoading as a property
-      pktButton.isLoading = true
-      await pktButton.updateComplete
+      button.isLoading = true
+      await button.updateComplete
 
-      const spinner = pktButton.querySelector('.pkt-btn__spinner')
+      const spinner = button.querySelector('.pkt-btn__spinner')
       expect(spinner).toBeInTheDocument()
       expect(spinner?.getAttribute('name')).toBe('spinner-blue')
     })
 
     test('prevents click events when loading', async () => {
-      const container = await createButton()
+      const { button } = await createButtonTest({ content: 'Test Button' })
       const clickSpy = jest.fn()
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-
       // Set isLoading as a property
-      pktButton.isLoading = true
-      await pktButton.updateComplete
+      button.isLoading = true
+      await button.updateComplete
 
-      pktButton.addEventListener('click', clickSpy)
+      button.addEventListener('click', clickSpy)
 
-      const button = pktButton.querySelector('button')
-      fireEvent.click(button!)
+      const buttonEl = button.querySelector('button')
+      fireEvent.click(buttonEl!)
 
       expect(clickSpy).not.toHaveBeenCalled()
     })
 
     test('uses custom loading animation path', async () => {
       const customPath = 'https://custom.example.com/animations/'
-      const container = await createButton('isLoading')
-      const pktButton = container.querySelector('pkt-button') as PktButton
+      const { button } = await createButtonTest({ isLoading: true, content: 'Test Button' })
 
-      pktButton.loadingAnimationPath = customPath
-      await pktButton.updateComplete
+      button.loadingAnimationPath = customPath
+      await button.updateComplete
 
-      expect(pktButton.loadingAnimationPath).toBe(customPath)
+      expect(button.loadingAnimationPath).toBe(customPath)
 
-      const spinner = pktButton.querySelector('.pkt-btn__spinner')
+      const spinner = button.querySelector('.pkt-btn__spinner')
       expect(spinner?.getAttribute('path')).toBe(customPath)
     })
 
     test('converts string "false" to boolean false for isLoading', async () => {
-      const container = await createButton('isLoading="false"')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({ isLoading: false, content: 'Test Button' })
+      await button.updateComplete
 
-      expect(pktButton.isLoading).toBe(false)
+      expect(button.isLoading).toBe(false)
 
-      const button = pktButton.querySelector('button')
-      expect(button).not.toHaveClass('pkt-btn--isLoading')
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl).not.toHaveClass('pkt-btn--isLoading')
     })
   })
 
   describe('Form integration', () => {
     test('handles form attribute correctly', async () => {
-      const container = await createButton('form="test-form" type="submit"')
+      const { button } = await createButtonTest({
+        form: 'test-form',
+        type: 'submit',
+        content: 'Test Button',
+      })
+      await button.updateComplete
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      expect(button.form).toBe('test-form')
 
-      expect(pktButton.form).toBe('test-form')
-
-      const button = pktButton.querySelector('button')
-      expect(button?.getAttribute('form')).toBe('test-form')
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl?.getAttribute('form')).toBe('test-form')
     })
 
     test('works as submit button', async () => {
-      const container = await createButton('type="submit"')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({ type: 'submit', content: 'Test Button' })
+      await button.updateComplete
 
-      const button = pktButton.querySelector('button')
-      expect(button?.getAttribute('type')).toBe('submit')
+      const buttonEl = button.querySelector('button')
+      expect(buttonEl?.getAttribute('type')).toBe('submit')
     })
   })
 
   describe('Click functionality', () => {
     test('allows click events when not disabled or loading', async () => {
-      const container = await createButton()
+      const { button } = await createButtonTest({ content: 'Test Button' })
       const clickSpy = jest.fn()
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      await button.updateComplete
 
-      pktButton.addEventListener('click', clickSpy)
+      button.addEventListener('click', clickSpy)
 
-      const button = pktButton.querySelector('button')
-      fireEvent.click(button!)
+      const buttonEl = button.querySelector('button')
+      fireEvent.click(buttonEl!)
 
       expect(clickSpy).toHaveBeenCalledTimes(1)
     })
 
     test('allows keyboard activation when not disabled or loading', async () => {
-      const container = await createButton()
+      const { button } = await createButtonTest({ content: 'Test Button' })
       const clickSpy = jest.fn()
 
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      await button.updateComplete
 
-      pktButton.addEventListener('click', clickSpy)
+      button.addEventListener('click', clickSpy)
 
-      const button = pktButton.querySelector('button')
-      fireEvent.keyDown(button!, { key: 'Enter' })
+      const buttonEl = button.querySelector('button')
+      fireEvent.keyDown(buttonEl!, { key: 'Enter' })
 
       // Note: Native button handles Enter key, so we just test that events aren't prevented
       // The actual click event would be triggered by the browser
@@ -431,81 +405,69 @@ describe('PktButton', () => {
 
   describe('Accessibility', () => {
     test('has correct ARIA attributes', async () => {
-      const container = await createButton('disabled')
-      const pktButton = container.querySelector('pkt-button') as PktButton
+      const { button } = await createButtonTest({ disabled: true, content: 'Test Button' })
 
       // Set isLoading as a property
-      pktButton.isLoading = true
-      await pktButton.updateComplete
+      button.isLoading = true
+      await button.updateComplete
 
-      const button = pktButton.querySelector('button')
+      const buttonEl = button.querySelector('button')
 
-      expect(button?.getAttribute('aria-disabled')).toBe('true')
-      expect(button?.getAttribute('aria-busy')).toBe('true')
-      expect(button?.hasAttribute('disabled')).toBe(true)
+      expect(buttonEl?.getAttribute('aria-disabled')).toBe('true')
+      expect(buttonEl?.getAttribute('aria-busy')).toBe('true')
+      expect(buttonEl?.hasAttribute('disabled')).toBe(true)
     })
 
     test('provides semantic button structure', async () => {
-      const container = await createButton()
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { button } = await createButtonTest({ content: 'Test Button' })
+      await button.updateComplete
 
-      const button = pktButton.querySelector('button')
+      const buttonEl = button.querySelector('button')
 
-      expect(button).toBeInTheDocument()
-      expect(button?.tagName.toLowerCase()).toBe('button')
-      expect(button?.getAttribute('type')).toBe('button')
+      expect(buttonEl).toBeInTheDocument()
+      expect(buttonEl?.tagName.toLowerCase()).toBe('button')
+      expect(buttonEl?.getAttribute('type')).toBe('button')
     })
 
     test('renders with no WCAG errors with axe - default button', async () => {
-      const container = await createButton('', 'Click me')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { container } = await createButtonTest({ content: 'Click me' })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - icon button', async () => {
-      const container = await createButton(
-        'variant="icon-left" icon-name="user" skin="secondary"',
-        'User Profile',
-      )
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { container } = await createButtonTest({
+        variant: 'icon-left',
+        iconName: 'user',
+        skin: 'secondary',
+        content: 'User Profile',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - disabled button', async () => {
-      const container = await createButton('disabled', 'Disabled Button')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { container } = await createButtonTest({ disabled: true, content: 'Disabled Button' })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - loading button', async () => {
-      const container = await createButton('isLoading', 'Loading...')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { container } = await createButtonTest({ isLoading: true, content: 'Loading...' })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     test('renders with no WCAG errors with axe - submit button', async () => {
-      const container = await createButton('type="submit" color="green"', 'Submit Form')
-
-      const pktButton = container.querySelector('pkt-button') as PktButton
-      await pktButton.updateComplete
+      const { container } = await createButtonTest({
+        type: 'submit',
+        color: 'green',
+        content: 'Submit Form',
+      })
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()