@oslokommune/punkt-react 16.26.5 → 17.0.0

package/src/components/footer/Footer.tsx

@@ -1,55 +1,71 @@
 'use client'
 
-import { FC, Fragment, type HTMLAttributes } from 'react'
+import { FC, useEffect, useMemo, type HTMLAttributes } from 'react'
 
+import {
+  DEFAULT_FOOTER_PERSONVERN_URL,
+  DEFAULT_FOOTER_TILGJENGELIGHET_URL,
+  type IPktFooterColumn,
+  type IPktFooterLink,
+  type IPktFooterProps,
+} from 'shared-types'
+import { getLinkDomainLabel } from 'shared-utils/header-footer'
 import { PktConsent } from '../consent/Consent'
 import { PktIcon } from '../icon/Icon'
+import { FooterGlobal, useGlobalFooterData, type TFooterConsentConfig } from './FooterGlobal'
 
-interface Link {
-  href: string
-  text: string
-  external?: boolean
-  openInNewTab?: boolean
+export interface IPktFooter
+  extends IPktFooterProps<string>, TFooterConsentConfig, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  /** Kalles når henting fra endepunktet feiler (den globale footeren skjules stille). */
+  onDataError?: (error: Error) => void
 }
 
-interface Column {
-  title: string
-  links?: Link[]
-  text?: string
-}
-
-interface SocialLink {
-  href: string
-  iconName?: string
-  language?: string
-  openInNewTab?: boolean
+const CustomLink: FC<{ link: IPktFooterLink; openLinksInNewTab: boolean }> = ({ link, openLinksInNewTab }) => {
+  const newTab = link.openInNewTab || openLinksInNewTab
+  // external = vis toppdomenet i parentes bak lenketeksten
+  const domain = link.external ? getLinkDomainLabel(link.href) : undefined
+  return (
+    <li>
+      <a href={link.href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined}>
+        {link.text}
+        {domain && <span className="pkt-footer__link-domain"> ({domain})</span>}
+      </a>
+    </li>
+  )
 }
 
-export interface IPktFooter extends HTMLAttributes<HTMLDivElement> {
-  columnOne: Column
-  columnTwo: Column
-  socialLinks?: SocialLink[]
-  personvernOgInfoLink?: string
-  tilgjengelighetLink?: string
-  openLinksInNewTab?: boolean
-  includeConsent?: boolean
-  hotjarId?: string | null
-  googleAnalyticsId?: string | null
-  devMode?: boolean
-  cookieDomain?: string | null
-  cookieSecure?: string | null
-  cookieExpiryDays?: string | null
-  onToggleConsent?: (e: CustomEvent) => void
-}
+const Column: FC<{ column: IPktFooterColumn; openLinksInNewTab: boolean }> = ({ column, openLinksInNewTab }) => (
+  <section>
+    <h2>{column.title}</h2>
+    {column.text && <p>{column.text}</p>}
+    {!!column.links?.length && (
+      <ul className="pkt-footer__link-list">
+        {column.links.map((link) => (
+          <CustomLink key={`${link.href}|${link.text}`} link={link} openLinksInNewTab={openLinksInNewTab} />
+        ))}
+      </ul>
+    )}
+  </section>
+)
 
+/**
+ * PktFooter — footer med valgfritt custom innhold (grått sekundær-bånd)
+ * stablet oppå den globale (blå) footeren. Uten custom innhold rendres kun
+ * den globale. Den globale henter innhold fra Oslo kommunes felles
+ * header/footer-endepunkt (samme som PktHeader type="global").
+ */
 export const PktFooter: FC<IPktFooter> = ({
+  columns,
   columnOne,
   columnTwo,
+  personvernOgInfoLink,
+  tilgjengelighetLink,
   socialLinks,
-  className,
+  skipGlobal = false,
+  data,
+  dataUrl,
+  locale = 'nb-NO',
   openLinksInNewTab = false,
-  personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
-  tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
   includeConsent = false,
   hotjarId = null,
   googleAnalyticsId = null,
@@ -57,135 +73,129 @@ export const PktFooter: FC<IPktFooter> = ({
   cookieDomain = null,
   cookieSecure = null,
   cookieExpiryDays = null,
-  onToggleConsent = (e: CustomEvent) => {
-    // eslint-disable-next-line no-console
-    console.log(e.detail)
-  },
+  onToggleConsent,
+  onDataError,
+  className,
+  ...rest
 }) => {
+  useEffect(() => {
+    if (columnOne || columnTwo) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'PktFooter: The "columnOne"/"columnTwo" props are deprecated and will be removed in a future version. Please use "columns" instead.',
+      )
+    }
+  }, [columnOne, columnTwo])
+
+  useEffect(() => {
+    if (personvernOgInfoLink || tilgjengelighetLink) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'PktFooter: The "personvernOgInfoLink"/"tilgjengelighetLink" props are deprecated — the links now come from the global footer. Overridden values are rendered in the secondary footer.',
+      )
+    }
+  }, [personvernOgInfoLink, tilgjengelighetLink])
+
+  useEffect(() => {
+    if (socialLinks) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'PktFooter: The "socialLinks" prop is deprecated and will be removed in a future version — the social media links now come from the global footer.',
+      )
+    }
+  }, [socialLinks])
+
+  const globalFooter = useGlobalFooterData({ data, dataUrl, locale, skipGlobal, onDataError })
+
+  // Deprecated «Om nettstedet»-lenker rendres kun når de er eksplisitt
+  // overstyrt til noe annet enn default — ellers dekkes de av den globale
+  // footeren.
+  const effectiveColumns = useMemo(() => {
+    const base = columns?.length ? columns : ([columnOne, columnTwo].filter(Boolean) as IPktFooterColumn[])
+    const legacyLinks: IPktFooterLink[] = []
+    if (personvernOgInfoLink && personvernOgInfoLink !== DEFAULT_FOOTER_PERSONVERN_URL) {
+      legacyLinks.push({ text: 'Personvern og informasjonskapsler', href: personvernOgInfoLink })
+    }
+    if (tilgjengelighetLink && tilgjengelighetLink !== DEFAULT_FOOTER_TILGJENGELIGHET_URL) {
+      legacyLinks.push({ text: 'Tilgjengelighet', href: tilgjengelighetLink })
+    }
+    if (!legacyLinks.length) return base
+    return [...base, { title: 'Om nettstedet', links: legacyLinks }]
+  }, [columns, columnOne, columnTwo, personvernOgInfoLink, tilgjengelighetLink])
+
+  const consent: TFooterConsentConfig = {
+    hotjarId,
+    googleAnalyticsId,
+    devMode,
+    cookieDomain,
+    cookieSecure,
+    cookieExpiryDays,
+    onToggleConsent,
+  }
+
+  // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet for i
+  // den globale footeren.
+  const consentInSecondary = skipGlobal && includeConsent
+  const languageLinks = socialLinks?.filter((link) => link.language) ?? []
+  const iconLinks = socialLinks?.filter((link) => link.iconName) ?? []
+  const hasSecondary = effectiveColumns.length > 0 || consentInSecondary || !!socialLinks?.length
+
   const classNames = [className, 'pkt-footer'].filter(Boolean).join(' ')
 
   return (
-    <footer className={classNames} data-mode="dark">
-      <div className="pkt-footer__container">
-        <div className="pkt-grid pkt-grid--rowgap-size-32 pkt-grid--gap-size-16">
-          <div className="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up">
-            <h2 className="pkt-footer__title">{columnOne.title}</h2>
-            <ul className="pkt-footer__list">
-              {columnOne.text && <li className="pkt-footer__text">{columnOne.text}</li>}
-              {columnOne.links?.map((link, index) => (
-                <li className="pkt-footer__list-item" key={`links-${index}`}>
-                  <a
-                    className={`pkt-footer__link ${link.external ? 'pkt-link--external' : ''}`}
-                    href={link.href}
-                    target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
-                    rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                  >
-                    <PktIcon className="pkt-footer__link-icon" name="chevron-right" />
-                    {link.text}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up">
-            <h2 className="pkt-footer__title">{columnTwo.title}</h2>
-            <ul className="pkt-footer__list">
-              {columnTwo.text && <li className="pkt-footer__text">{columnTwo.text}</li>}
-              {columnTwo.links?.map((link, index) => (
-                <li className="pkt-footer__list-item" key={`links-${index}`}>
-                  <a
-                    className={`pkt-footer__link ${link.external ? 'pkt-link--external' : ''}`}
-                    href={link.href}
-                    target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
-                    rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                  >
-                    <PktIcon className="pkt-footer__link-icon" name="chevron-right" />
-                    {link.text}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up">
-            <h2 className="pkt-footer__title">Om nettstedet</h2>
-            <ul className="pkt-footer__list">
-              <li className="pkt-footer__list-item">
-                <a
-                  className="pkt-footer__link"
-                  href={personvernOgInfoLink}
-                  target={openLinksInNewTab ? '_blank' : '_self'}
-                  rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                >
-                  <PktIcon className="pkt-footer__link-icon" name="chevron-right" />
-                  Personvern og informasjonskapsler
-                </a>
-              </li>
-              <li className="pkt-footer__list-item">
-                <a
-                  className="pkt-footer__link"
-                  href={tilgjengelighetLink}
-                  target={openLinksInNewTab ? '_blank' : '_self'}
-                  rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                >
-                  <PktIcon className="pkt-footer__link-icon" name="chevron-right" />
-                  Tilgjengelighet
-                </a>
-              </li>
-              {includeConsent && (
-                <li className="pkt-footer__list-item">
-                  <PktConsent
-                    triggerType="footerlink"
-                    hotjarId={hotjarId}
-                    googleAnalyticsId={googleAnalyticsId}
-                    devMode={devMode}
-                    cookieDomain={cookieDomain}
-                    cookieSecure={cookieSecure}
-                    cookieExpiryDays={cookieExpiryDays}
-                    onToggleConsent={onToggleConsent}
-                  />
-                </li>
-              )}
-            </ul>
-          </div>
-        </div>
-        {socialLinks && (
-          <div className="pkt-footer__social" aria-label="standard lenker">
-            <div className="pkt-footer__social-languages">
-              {socialLinks
-                .filter((link) => link.language)
-                .map((link, index) => (
-                  <div key={`sociallinks-language-${index}`} className="pkt-footer__social-language">
-                    <a
-                      href={link.href}
-                      aria-label={`til ${link.language} versjon av nettsiden`}
-                      target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
-                      rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                    >
-                      {link.language}
-                    </a>
-                  </div>
+    <footer className={classNames} {...rest}>
+      {hasSecondary && (
+        <div className="pkt-footer__band pkt-footer__band--secondary">
+          <div className="pkt-footer__inner">
+            {effectiveColumns.length > 0 && (
+              <div className="pkt-footer__sections">
+                {effectiveColumns.map((column) => (
+                  <Column key={column.title} column={column} openLinksInNewTab={openLinksInNewTab} />
                 ))}
-            </div>
-            <div className="pkt-footer__social-icons">
-              {socialLinks
-                .filter((link) => link.iconName)
-                .map((link, index) => (
-                  <Fragment key={`sociallinks-${index}`}>
-                    <a
-                      href={link.href}
-                      aria-label={`til ${link.iconName}`}
-                      className="pkt-footer__social-icon-link"
-                      target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
-                      rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
-                    >
-                      <PktIcon className="pkt-footer__social-icon" name={link.iconName} />
-                    </a>
-                  </Fragment>
-                ))}
-            </div>
+              </div>
+            )}
+            {consentInSecondary && (
+              <div className="pkt-footer__consent">
+                <PktConsent triggerType="footerlink" {...consent} />
+              </div>
+            )}
+            {!!socialLinks?.length && (
+              <div className="pkt-footer__bottom">
+                <ul className="pkt-footer__bottom-links">
+                  {languageLinks.map((link) => (
+                    <li key={`${link.href}|${link.language}`}>
+                      <a
+                        href={link.href}
+                        aria-label={`til ${link.language} versjon av nettsiden`}
+                        target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
+                        rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
+                      >
+                        {link.language}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+                <ul className="pkt-footer__some">
+                  {iconLinks.map((link) => (
+                    <li key={`${link.href}|${link.iconName}`}>
+                      <a
+                        className="pkt-footer__some-link"
+                        href={link.href}
+                        aria-label={`til ${link.iconName}`}
+                        target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
+                        rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
+                      >
+                        <PktIcon className="pkt-footer__some-icon" name={link.iconName} />
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
+      {globalFooter && <FooterGlobal footer={globalFooter} includeConsent={includeConsent} consent={consent} />}
     </footer>
   )
 }

package/src/components/footer/FooterGlobal.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { FC, useEffect, useMemo, useRef, useState } from 'react'
+
+import {
+  deriveSocialIcon,
+  fetchHeaderFooterData,
+  getExternalDomainLabel,
+  selectLocaleData,
+} from 'shared-utils/header-footer'
+import type {
+  IHeaderFooter,
+  IHeaderMenuLink,
+  IHeaderMenuSection,
+  THeaderFooterApi,
+  THeaderMenuLocale,
+} from 'shared-types'
+import { PktConsent, type IPktConsent } from '../consent/Consent'
+import { PktIcon } from '../icon/Icon'
+
+/** The payload marks the cookie-settings entry with this pseudo-URL. */
+const CONSENT_TRIGGER_URL = '#cb-trigger'
+
+export type TFooterConsentConfig = Pick<
+  IPktConsent,
+  | 'hotjarId'
+  | 'googleAnalyticsId'
+  | 'devMode'
+  | 'cookieDomain'
+  | 'cookieSecure'
+  | 'cookieExpiryDays'
+  | 'onToggleConsent'
+>
+
+interface IUseGlobalFooterDataOptions {
+  data?: THeaderFooterApi<string>
+  dataUrl?: string
+  locale?: THeaderMenuLocale
+  skipGlobal?: boolean
+  onDataError?: (error: Error) => void
+}
+
+export function useGlobalFooterData({
+  data,
+  dataUrl,
+  locale = 'nb-NO',
+  skipGlobal = false,
+  onDataError,
+}: IUseGlobalFooterDataOptions): IHeaderFooter | undefined {
+  const [fetchedData, setFetchedData] = useState<THeaderFooterApi<string>>()
+  const onDataErrorRef = useRef(onDataError)
+  onDataErrorRef.current = onDataError
+
+  useEffect(() => {
+    if (data || skipGlobal) return
+    const controller = new AbortController()
+    fetchHeaderFooterData<string>(dataUrl, controller.signal)
+      .then((payload) => {
+        if (!controller.signal.aborted) setFetchedData(payload)
+      })
+      .catch((error: Error) => {
+        if (error.name === 'AbortError') return
+        // eslint-disable-next-line no-console -- Error on fetching data
+        console.warn('Failed to fetch header/footer data:', error)
+        onDataErrorRef.current?.(error)
+      })
+    return () => controller.abort()
+  }, [data, dataUrl, skipGlobal])
+
+  const effectiveData = data ?? fetchedData
+  return useMemo(() => {
+    if (skipGlobal) return undefined
+    return selectLocaleData(effectiveData, locale)?.footer
+  }, [effectiveData, locale, skipGlobal])
+}
+
+interface ISectionLinkProps {
+  link: IHeaderMenuLink
+  includeConsent: boolean
+  consent: TFooterConsentConfig
+}
+
+const SectionLink: FC<ISectionLinkProps> = ({ link, includeConsent, consent }) => {
+  if (link.url === CONSENT_TRIGGER_URL) {
+    // Punkt's own consent dialog replaces the CDN cookie-banner trigger.
+    if (!includeConsent) return null
+    return (
+      <li>
+        <PktConsent triggerType="footerlink" triggerText={link.text} {...consent} />
+      </li>
+    )
+  }
+  const domain = getExternalDomainLabel(link.url)
+  return (
+    <li>
+      <a href={link.url}>
+        {link.text}
+        {domain && <span className="pkt-footer__link-domain"> ({domain})</span>}
+      </a>
+    </li>
+  )
+}
+
+const Section: FC<{ section: IHeaderMenuSection } & Omit<ISectionLinkProps, 'link'>> = ({
+  section,
+  includeConsent,
+  consent,
+}) => (
+  <section>
+    <h2>{section.title}</h2>
+    <ul className="pkt-footer__link-list">
+      {section.links.map((link) => (
+        <SectionLink key={`${link.url}|${link.text}`} link={link} includeConsent={includeConsent} consent={consent} />
+      ))}
+    </ul>
+  </section>
+)
+
+const SomeLink: FC<{ entry: IHeaderMenuLink }> = ({ entry }) => {
+  const icon = deriveSocialIcon(entry.url, entry.text)
+  if (!icon) {
+    return (
+      <li>
+        <a href={entry.url}>{entry.text}</a>
+      </li>
+    )
+  }
+  return (
+    <li>
+      <a className="pkt-footer__some-link" href={entry.url} aria-label={entry.text}>
+        <PktIcon className="pkt-footer__some-icon" name={icon} />
+      </a>
+    </li>
+  )
+}
+
+interface IFooterGlobalProps {
+  footer: IHeaderFooter
+  includeConsent?: boolean
+  consent?: TFooterConsentConfig
+}
+
+/**
+ * The global (blue) footer band, fed by the shared header/footer payload.
+ * Internal — rendered by PktFooter / PktFooterSimple, not exported.
+ */
+export const FooterGlobal: FC<IFooterGlobalProps> = ({ footer, includeConsent = false, consent = {} }) => {
+  const hasLinks = footer.links?.length > 0
+  const hasSome = footer.some?.length > 0
+  return (
+    <div className="pkt-footer__band pkt-footer__band--global">
+      <div className="pkt-footer__inner">
+        <div className="pkt-footer__sections">
+          {footer.sections.map((section) => (
+            <Section key={section.title} section={section} includeConsent={includeConsent} consent={consent} />
+          ))}
+          {(hasLinks || hasSome) && (
+            <div className="pkt-footer__bottom">
+              {hasLinks && (
+                <ul className="pkt-footer__bottom-links">
+                  {footer.links.map((link) => (
+                    <li key={`${link.url}|${link.text}`}>
+                      <a href={link.url}>{link.text}</a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {hasSome && (
+                <ul className="pkt-footer__some">
+                  {footer.some.map((entry) => (
+                    <SomeLink key={`${entry.url}|${entry.text}`} entry={entry} />
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/footerSimple/FooterSimple.test.tsx

@@ -1,55 +1,58 @@
-// Test med axe https://www.npmjs.com/package/jest-axe
-import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 
-import { axe, toHaveNoViolations } from 'jest-axe'
-
-import { render } from '../../utils/test-utils'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import type { IPktFooterLink } from 'shared-types'
 import { PktFooterSimple } from './FooterSimple'
 
-expect.extend(toHaveNoViolations)
+const LINKS: IPktFooterLink[] = [
+  { text: 'Lenke 1', href: 'https://example.test/lenke-1' },
+  { text: 'Lenke 2', href: 'https://example.test/lenke-2', external: true },
+]
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
 
 describe('PktFooterSimple', () => {
-  const links = [
-    { href: 'https://www.example.com', text: 'Example Link 1' },
-    { href: 'https://www.example.com', text: 'Example Link 2' },
-    { href: 'https://www.example.com', text: 'Example Link 3' },
-  ]
-
-  describe('basic rendering', () => {
-    it('renders a list of links', () => {
-      const { getByText } = render(<PktFooterSimple links={links} />)
-      links.forEach((link) => {
-        expect(getByText(link.text)).toBeInTheDocument()
-        expect(getByText(link.text).getAttribute('href')).toEqual(link.href)
-      })
-    })
-
-    it('renders an external link with an external class', () => {
-      const links = [{ href: 'https://www.example.com', text: 'Example Link', external: true }]
-      const { getByText } = render(<PktFooterSimple links={links} />)
-      expect(getByText(links[0].text)).toHaveClass('pkt-link--external')
-    })
-
-    it('renders a privacy link', () => {
-      const { getByText } = render(<PktFooterSimple />)
-      expect(getByText('Personvern og informasjonskapsler')).toBeInTheDocument()
-      expect(getByText('Personvern og informasjonskapsler').getAttribute('href')).toEqual(
-        'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
-      )
-    })
-
-    it('renders an accessibility link', () => {
-      const { getByText } = render(<PktFooterSimple />)
-      expect(getByText('Tilgjengelighet')).toBeInTheDocument()
-      expect(getByText('Tilgjengelighet').getAttribute('href')).toEqual('https://www.oslo.kommune.no/tilgjengelighet/')
-    })
+  test('rendrer kompakt lenkerad med pil-ikoner + global footer', () => {
+    const { container } = render(<PktFooterSimple links={LINKS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const links = [...container.querySelectorAll('.pkt-footer-simple__link')]
+    expect(links).toHaveLength(2)
+    expect(links[0].querySelector('.pkt-footer-simple__link-icon')).not.toBeNull()
+    expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('rendrer kun global footer uten links', () => {
+    const { container } = render(<PktFooterSimple data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    expect(container.querySelector('.pkt-footer-simple .pkt-footer__band--secondary')).toBeNull()
+    expect(container.querySelector('.pkt-footer__band--global')).not.toBeNull()
+  })
+
+  test('eksterne lenker viser toppdomenet i parentes', () => {
+    render(<PktFooterSimple links={LINKS} data={EXAMPLE_HEADER_FOOTER_DATA} />)
+    const external = screen.getByRole('link', { name: /Lenke 2/ })
+    expect(external.querySelector('.pkt-footer-simple__link-domain')?.textContent?.trim()).toBe('(example.test)')
+  })
+
+  test('skipGlobal dropper global footer og henter ikke data', () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('should not run'))
+    const { container } = render(<PktFooterSimple links={LINKS} skipGlobal />)
+    expect(container.querySelector('.pkt-footer__band--global')).toBeNull()
+    expect(container.querySelector('.pkt-footer-simple .pkt-footer__band--secondary')).not.toBeNull()
+    expect(fetchSpy).not.toHaveBeenCalled()
+  })
+
+  test('consent rendres som listepunkt ved skipGlobal + includeConsent', () => {
+    const { container } = render(<PktFooterSimple links={LINKS} skipGlobal includeConsent />)
+    const consent = container.querySelector('.pkt-footer-simple__list a.pkt-footer__link')
+    expect(consent).not.toBeNull()
   })
 
-  describe('accessibility', () => {
-    it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktFooterSimple links={links} />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
+  test('openLinksInNewTab åpner lenker i ny fane', () => {
+    render(<PktFooterSimple links={LINKS} data={EXAMPLE_HEADER_FOOTER_DATA} openLinksInNewTab />)
+    const link = screen.getByRole('link', { name: 'Lenke 1' })
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer')
   })
 })