@oslokommune/punkt-react 16.26.3 → 17.0.0

package/src/components/footer/Footer.test.tsx

@@ -1,111 +1,217 @@
-// Test med axe https://www.npmjs.com/package/jest-axe
-import '@testing-library/jest-dom'
+import { render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 
-import { axe, toHaveNoViolations } from 'jest-axe'
-
-import { render, screen } from '../../utils/test-utils'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import type { IPktFooterColumn } from 'shared-types'
 import { PktFooter } from './Footer'
 
-expect.extend(toHaveNoViolations)
-
-describe('PktFooter', () => {
-  const columnOne = {
-    title: 'Column One',
+const COLUMNS: IPktFooterColumn[] = [
+  {
+    title: 'Overskrift 1',
+    text: 'Her kan du skrive en lengre tekst som beskriver løsningen.',
+    links: [{ text: 'Lenke 1', href: 'https://example.test/lenke-1' }],
+  },
+  {
+    title: 'Overskrift 2',
     links: [
-      {
-        href: 'https://example.com',
-        text: 'Link 1',
-        external: true,
-      },
-      {
-        href: 'https://example.com',
-        text: 'Link 2',
-      },
+      { text: 'Lenke 2', href: 'https://example.test/lenke-2', external: true },
+      { text: 'Lenke 3', href: 'https://example.test/lenke-3', openInNewTab: true },
     ],
-    text: 'Column One Text',
-  }
+  },
+]
 
-  const columnTwo = {
-    title: 'Column Two',
-    links: [
-      {
-        href: 'https://example.com',
-        text: 'Link 3',
-        external: true,
-      },
-      {
-        href: 'https://example.com',
-        text: 'Link 4',
-      },
-    ],
-    text: 'Column Two Text',
-  }
+afterEach(() => {
+  vi.restoreAllMocks()
+})
 
-  const socialLinks = [
-    {
-      href: 'https://example.com',
-      iconName: 'facebook',
-    },
-    {
-      href: 'https://example.com',
-      iconName: 'twitter',
-    },
-  ]
+describe('PktFooter global footer', () => {
+  test('rendrer kun global footer uten custom innhold', () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(container.querySelector('.pkt-footer__band--secondary')).toBeNull()
+    expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull()
+    const titles = [...container.querySelectorAll('.pkt-footer__band--global h2')].map(
+      (t) => t.textContent,
+    )
+    expect(titles).toEqual(['Kontakt', 'Jobb i Oslo kommune', 'Om nettstedet'])
+  })
 
-  describe('basic rendering', () => {
-    it('should render columns and social links', () => {
-      render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
+  test('rendrer bunnrad med språklenke og some-ikoner', () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const bottom = container.querySelector('.pkt-footer__band--global .pkt-footer__bottom')
+    expect(bottom?.textContent).toContain('English')
+    const someLinks = [...container.querySelectorAll('.pkt-footer__band--global .pkt-footer__some-link')]
+    expect(someLinks).toHaveLength(3)
+    expect(someLinks[0].getAttribute('aria-label')).toBe('Facebook')
+  })
 
-      const columnOneElement = screen.getByText('Column One')
-      expect(columnOneElement).toBeInTheDocument()
+  test('merker eksterne lenker med toppdomene i parentes', () => {
+    render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const jobLink = screen.getByRole('link', { name: /Ledige stillinger/ })
+    expect(jobLink.querySelector('.pkt-footer__link-domain')?.textContent?.trim()).toBe('(webcruiter.com)')
+    const internalLink = screen.getByRole('link', { name: 'Tilgjengelighet' })
+    expect(internalLink.querySelector('.pkt-footer__link-domain')).toBeNull()
+  })
+
+  test('skjuler #cb-trigger-lenken uten includeConsent', () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(container.textContent).not.toContain('Innstillinger for informasjonskapsler')
+  })
 
-      const columnOneLink1Element = screen.getByText('Link 1')
-      expect(columnOneLink1Element).toHaveAttribute('href', 'https://example.com')
-      expect(columnOneLink1Element).toHaveClass('pkt-link--external')
+  test('erstatter #cb-trigger med consent-lenke når includeConsent er satt', () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} includeConsent />)
+    const consentLink = [...container.querySelectorAll('a.pkt-footer__link')].find((link) =>
+      link.textContent?.includes('Innstillinger for informasjonskapsler'),
+    )
+    expect(consentLink).toBeDefined()
+    expect(consentLink?.closest('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('bruker valgt locale', () => {
+    const { container } = render(<PktFooter data={EXAMPLE_HEADER_FOOTER_DATA} locale="en-GB" />)
+    const titles = [...container.querySelectorAll('.pkt-footer__band--global h2')].map(
+      (t) => t.textContent,
+    )
+    expect(titles).toContain('Contact us')
+  })
 
-      const columnOneLink2Element = screen.getByText('Link 2')
-      expect(columnOneLink2Element).toHaveAttribute('href', 'https://example.com')
-      expect(columnOneLink2Element).not.toHaveClass('pkt-link--external')
+  test('skipGlobal dropper global footer og henter ikke data', () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('should not run'))
+    const { container } = render(<PktFooter skipGlobal columns={COLUMNS} />)
+    expect(container.querySelector('.pkt-footer__band--global')).toBeNull()
+    expect(container.querySelector('.pkt-footer__band--secondary')).not.toBeNull()
+    expect(fetchSpy).not.toHaveBeenCalled()
+  })
+})
 
-      const columnOneTextElement = screen.getByText('Column One Text')
-      expect(columnOneTextElement).toBeInTheDocument()
+describe('PktFooter henting av data', () => {
+  test('henter data fra endepunkt når data ikke er satt', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify(EXAMPLE_HEADER_FOOTER_DATA), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    )
+    const { container } = render(<PktFooter />)
+    await waitFor(() => expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull())
+    expect(globalThis.fetch).toHaveBeenCalledWith('https://cdn.web.oslo.kommune.no/header-footer/header-footer.json')
+  })
 
-      const columnTwoElement = screen.getByText('Column Two')
-      expect(columnTwoElement).toBeInTheDocument()
+  test('rendrer ingenting og kaller onDataError når hentingen feiler', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('boom', { status: 500 }) as unknown as Response)
+    const onDataError = vi.fn()
+    const { container } = render(<PktFooter onDataError={onDataError} />)
+    await waitFor(() => expect(onDataError).toHaveBeenCalled())
+    expect(container.querySelector('.pkt-footer__band--global')).toBeNull()
+    expect(container.querySelector('footer')?.textContent?.trim()).toBe('')
+  })
+})
 
-      const columnTwoLink3Element = screen.getByText('Link 3')
-      expect(columnTwoLink3Element).toHaveAttribute('href', 'https://example.com')
-      expect(columnTwoLink3Element).toHaveClass('pkt-link--external')
+describe('PktFooter sekundær footer (custom innhold)', () => {
+  test('rendrer kolonner med tittel, tekst og lenker', () => {
+    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const columns = [...container.querySelectorAll('.pkt-footer__band--secondary section')]
+    expect(columns).toHaveLength(2)
+    expect(columns[0].querySelector('h2')?.textContent).toBe('Overskrift 1')
+    expect(columns[0].querySelector('p')?.textContent).toContain('lengre tekst')
+    expect(columns[1].querySelector('p')).toBeNull()
+  })
 
-      const columnTwoLink4Element = screen.getByText('Link 4')
-      expect(columnTwoLink4Element).toHaveAttribute('href', 'https://example.com')
-      expect(columnTwoLink4Element).not.toHaveClass('pkt-link--external')
+  test('eksterne og nye-fane-lenker får riktige attributter', () => {
+    render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    // external-flagget viser toppdomenet i parentes bak lenketeksten
+    const external = screen.getByRole('link', { name: /Lenke 2/ })
+    expect(external.querySelector('.pkt-footer__link-domain')?.textContent?.trim()).toBe('(example.test)')
+    const newTab = screen.getByRole('link', { name: 'Lenke 3' })
+    expect(newTab.querySelector('.pkt-footer__link-domain')).toBeNull()
+    expect(newTab).toHaveAttribute('target', '_blank')
+    expect(newTab).toHaveAttribute('rel', 'noopener noreferrer')
+  })
 
-      const columnTwoTextElement = screen.getByText('Column Two Text')
-      expect(columnTwoTextElement).toBeInTheDocument()
+  test('openLinksInNewTab åpner alle custom lenker i ny fane', () => {
+    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} openLinksInNewTab />)
+    const links = [...container.querySelectorAll<HTMLAnchorElement>('.pkt-footer__band--secondary a')]
+    expect(links.length).toBeGreaterThan(0)
+    expect(links.every((l) => l.getAttribute('target') === '_blank')).toBe(true)
+  })
 
-      const personvernLink = screen.getByText('Personvern og informasjonskapsler')
-      expect(personvernLink).toBeInTheDocument()
+  test('global footer rendres under sekundær footer', () => {
+    const { container } = render(<PktFooter columns={COLUMNS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const footer = container.querySelector('footer.pkt-footer')
+    const children = [...(footer?.children ?? [])].map((c) => c.className)
+    expect(children[0]).toContain('pkt-footer__band--secondary')
+    expect(children[1]).toContain('pkt-footer__band--global')
+  })
 
-      const tilgjengelighetLink = screen.getByText('Tilgjengelighet')
-      expect(tilgjengelighetLink).toBeInTheDocument()
+  test('consent rendres i sekundær footer ved skipGlobal + includeConsent', () => {
+    const { container } = render(<PktFooter columns={COLUMNS} skipGlobal includeConsent />)
+    const consent = container.querySelector('.pkt-footer__consent a.pkt-footer__link')
+    expect(consent).not.toBeNull()
+  })
+})
 
-      const socialLinksElement = screen.getByLabelText('standard lenker')
-      expect(socialLinksElement).toBeInTheDocument()
+describe('PktFooter deprecated props', () => {
+  test('columnOne/columnTwo mappes til kolonner og gir console.warn', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container } = render(
+      <PktFooter
+        columnOne={{ title: 'Gammel 1', links: [{ text: 'Lenke', href: '#' }] }}
+        columnTwo={{ title: 'Gammel 2' }}
+        data={EXAMPLE_HEADER_FOOTER_DATA}
+      />,
+    )
+    const titles = [...container.querySelectorAll('.pkt-footer__band--secondary h2')].map(
+      (t) => t.textContent,
+    )
+    expect(titles).toEqual(['Gammel 1', 'Gammel 2'])
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('columnOne'))
+  })
 
-      const socialLinksFacebookElement = screen.getByLabelText('til facebook')
-      expect(socialLinksFacebookElement).toHaveAttribute('href', 'https://example.com')
+  test('personvern/tilgjengelighet rendres kun ved eksplisitt overstyring', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container } = render(
+      <PktFooter
+        columns={COLUMNS}
+        personvernOgInfoLink="https://example.test/personvern"
+        data={EXAMPLE_HEADER_FOOTER_DATA}
+      />,
+    )
+    const legacyColumn = [...container.querySelectorAll('.pkt-footer__band--secondary section')].find(
+      (column) => column.querySelector('h2')?.textContent?.includes('Om nettstedet'),
+    )
+    expect(legacyColumn?.textContent).toContain('Personvern og informasjonskapsler')
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('personvernOgInfoLink'))
+  })
 
-      const socialLinksTwitterElement = screen.getByLabelText('til twitter')
-      expect(socialLinksTwitterElement).toHaveAttribute('href', 'https://example.com')
-    })
+  test('default-verdi på personvernOgInfoLink rendres ikke', () => {
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container } = render(
+      <PktFooter
+        columns={COLUMNS}
+        personvernOgInfoLink="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
+        data={EXAMPLE_HEADER_FOOTER_DATA}
+      />,
+    )
+    const titles = [...container.querySelectorAll('.pkt-footer__band--secondary h2')].map(
+      (t) => t.textContent,
+    )
+    expect(titles).not.toContain('Om nettstedet')
   })
 
-  describe('accessibility', () => {
-    it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
+  test('socialLinks rendres i sekundær footer med console.warn', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container } = render(
+      <PktFooter
+        columns={COLUMNS}
+        socialLinks={[
+          { href: 'https://example.test/en', language: 'English' },
+          { href: 'https://www.facebook.com/Oslo/', iconName: 'facebook' },
+        ]}
+        data={EXAMPLE_HEADER_FOOTER_DATA}
+      />,
+    )
+    const social = container.querySelector('.pkt-footer__band--secondary .pkt-footer__bottom')
+    expect(social?.textContent).toContain('English')
+    expect(social?.querySelector('.pkt-footer__some-link')).not.toBeNull()
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('socialLinks'))
   })
 })