@oslokommune/punkt-react 13.22.0 → 14.0.0

package/src/components/header/HeaderService.test.tsx

@@ -0,0 +1,515 @@
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+//mock element width to control mobile/desktop behavior
+let mockedWidth = 1280
+
+vi.mock('../../hooks/useElementWidth', async () => {
+  return {
+    useElementWidth: () => mockedWidth,
+  }
+})
+
+import { PktHeaderService } from './HeaderService'
+
+describe('PktHeaderService', () => {
+  // jsdom does not implement scrollTo; our scroll lock hook uses it
+  beforeAll(() => {
+    window.scrollTo = vi.fn()
+  })
+
+  beforeEach(() => {
+    mockedWidth = 1280
+    vi.clearAllMocks()
+  })
+
+  it('renders service name and link when provided', () => {
+    const { container } = render(<PktHeaderService serviceName="My Service" serviceLink="#" />)
+    const host = container.querySelector('.pkt-header-service__service-link') as HTMLElement | null
+    expect(host).toBeTruthy()
+    expect(screen.getByText('My Service')).toBeInTheDocument()
+  })
+
+  it('applies compact class when compact=true', () => {
+    const { container } = render(<PktHeaderService serviceName="Svc" compact />)
+    const header = container.querySelector('.pkt-header-service')
+    expect(header).toHaveClass('pkt-header-service--compact')
+  })
+
+  it('shows children inline on desktop, menu button on mobile', () => {
+    // Desktop
+    mockedWidth = 1440
+    const { rerender } = render(
+      <PktHeaderService serviceName="Svc">
+        <a className="pkt-header-service__slot-link" href="#">
+          Link
+        </a>
+      </PktHeaderService>,
+    )
+    expect(screen.getByText('Link')).toBeInTheDocument()
+
+    // Mobile
+    mockedWidth = 500
+    rerender(
+      <PktHeaderService serviceName="Svc">
+        <a className="pkt-header-service__slot-link" href="#">
+          Link
+        </a>
+      </PktHeaderService>,
+    )
+    expect(screen.getByRole('button', { name: 'Åpne meny' })).toBeInTheDocument()
+  })
+
+  it('renders desktop search input when showSearch is true (desktop)', () => {
+    mockedWidth = 1400
+    render(<PktHeaderService serviceName="Svc" showSearch={true} />)
+    const search = screen.getByRole('searchbox', { name: 'Søk' })
+    expect(search).toBeInTheDocument()
+    expect(search).toHaveAttribute('id', 'header-service-search')
+  })
+
+  it('renders mobile search toggle and opens search field when clicked (mobile)', () => {
+    mockedWidth = 500
+    render(<PktHeaderService serviceName="Svc" showSearch={true} />)
+    const btn = screen.getByRole('button', { name: 'Åpne søkefelt' })
+    fireEvent.click(btn)
+    // After opening, the mobile menu should show the search input
+    expect(screen.getByRole('searchbox', { name: 'Søk' })).toBeInTheDocument()
+    expect(screen.getByRole('searchbox')).toHaveAttribute('id', 'mobile-search-menu')
+  })
+
+  it('renders user button on desktop and opens user menu on click', () => {
+    mockedWidth = 1400
+    render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel' }} />)
+    // Button shows both fullname and shortname (both 'Aksel' when no shortname provided)
+    const userBtn = screen.getByRole('button', { name: /Aksel/ })
+    expect(userBtn).toBeInTheDocument()
+    fireEvent.click(userBtn)
+    // User menu should be mounted
+    const menu = screen.getByRole('navigation')
+    expect(menu).toHaveClass('pkt-user-menu')
+  })
+
+  // New tests for hideLogo prop
+  describe('hideLogo prop', () => {
+    it('shows oslo logo by default (hideLogo=false)', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" />)
+      const logos = container.querySelectorAll('.pkt-header-service__logo')
+      expect(logos.length).toBe(1)
+    })
+
+    it('hides oslo logo when hideLogo=true', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" hideLogo={true} />)
+      const logos = container.querySelectorAll('.pkt-header-service__logo')
+      expect(logos.length).toBe(0)
+    })
+  })
+
+  // New tests for logoLink prop
+  describe('logoLink prop', () => {
+    it('renders logo as link when logoLink is a string', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" logoLink="https://oslo.kommune.no" />)
+      const logoLink = container.querySelector('.pkt-header-service__logo a')
+      expect(logoLink).toBeTruthy()
+      expect(logoLink).toHaveAttribute('href', 'https://oslo.kommune.no')
+    })
+
+    it('renders logo without link/button when logoLink is not provided', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" />)
+      const logoLink = container.querySelector('.pkt-header-service__logo a')
+      const logoButton = container.querySelector('.pkt-header-service__logo button')
+      expect(logoLink).toBeNull()
+      expect(logoButton).toBeNull()
+    })
+  })
+
+  // New tests for position and scrollBehavior props
+  describe('position and scrollBehavior props', () => {
+    it('applies fixed class by default (position="fixed")', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" />)
+      const header = container.querySelector('.pkt-header-service')
+      expect(header).toHaveClass('pkt-header-service--fixed')
+    })
+
+    it('does not apply fixed class when position="relative"', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" position="relative" />)
+      const header = container.querySelector('.pkt-header-service')
+      expect(header).not.toHaveClass('pkt-header-service--fixed')
+    })
+
+    it('applies scroll-to-hide class by default (scrollBehavior="hide")', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" />)
+      const header = container.querySelector('.pkt-header-service')
+      expect(header).toHaveClass('pkt-header-service--scroll-to-hide')
+    })
+
+    it('does not apply scroll-to-hide class when scrollBehavior="none"', () => {
+      const { container } = render(<PktHeaderService serviceName="Svc" scrollBehavior="none" />)
+      const header = container.querySelector('.pkt-header-service')
+      expect(header).not.toHaveClass('pkt-header-service--scroll-to-hide')
+    })
+  })
+
+  // New tests for user with lastLoggedIn
+  describe('user props', () => {
+    it('displays user name in button', () => {
+      mockedWidth = 1400
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel Olsen' }} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel Olsen/ })
+      expect(userBtn).toBeInTheDocument()
+    })
+
+    it('logs deprecation warning when shortname is provided', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mockedWidth = 1400
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel', shortname: 'AO' }} />)
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('shortname'))
+      consoleSpy.mockRestore()
+    })
+
+    it('displays formatted lastLoggedIn in user menu', () => {
+      mockedWidth = 1400
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel', lastLoggedIn: new Date('2025-09-19') }} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      // Should format the date in Norwegian
+      expect(screen.getByText(/Sist pålogget:/)).toBeInTheDocument()
+    })
+
+    it('displays lastLoggedIn string as-is in user menu', () => {
+      mockedWidth = 1400
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel', lastLoggedIn: '19. september 2025' }} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      expect(screen.getByText('19. september 2025')).toBeInTheDocument()
+    })
+  })
+
+  // New tests for representing props
+  describe('representing props', () => {
+    it('displays representing name in user button when representing is provided', () => {
+      mockedWidth = 1400
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel' }} representing={{ name: 'Oslo Kommune' }} />)
+      const userBtn = screen.getByRole('button', { name: /Oslo Kommune/ })
+      expect(userBtn).toBeInTheDocument()
+    })
+
+    it('logs deprecation warning when representing.shortname is provided', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mockedWidth = 1400
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          representing={{ name: 'Oslo Kommune', shortname: 'OK' }}
+        />,
+      )
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('shortname'))
+      consoleSpy.mockRestore()
+    })
+
+    it('displays orgNumber in user menu when representing has orgNumber', () => {
+      mockedWidth = 1400
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          representing={{ name: 'Oslo Kommune', orgNumber: '911738066' }}
+        />,
+      )
+      const userBtn = screen.getByRole('button', { name: /Oslo Kommune/ })
+      fireEvent.click(userBtn)
+      expect(screen.getByText('Org.nr. 911738066')).toBeInTheDocument()
+    })
+  })
+
+  // New tests for canChangeRepresentation
+  describe('canChangeRepresentation prop', () => {
+    it('shows change representation button when canChangeRepresentation=true', () => {
+      mockedWidth = 1400
+      const handleChange = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          representing={{ name: 'Oslo Kommune' }}
+          canChangeRepresentation={true}
+          changeRepresentation={handleChange}
+        />,
+      )
+      const userBtn = screen.getByRole('button', { name: /Oslo Kommune/ })
+      fireEvent.click(userBtn)
+      const changeBtn = screen.getByRole('button', { name: 'Endre organisasjon' })
+      expect(changeBtn).toBeInTheDocument()
+      fireEvent.click(changeBtn)
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not show change representation button when canChangeRepresentation=false', () => {
+      mockedWidth = 1400
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          representing={{ name: 'Oslo Kommune' }}
+          canChangeRepresentation={false}
+        />,
+      )
+      const userBtn = screen.getByRole('button', { name: /Oslo Kommune/ })
+      fireEvent.click(userBtn)
+      expect(screen.queryByRole('button', { name: 'Endre organisasjon' })).not.toBeInTheDocument()
+    })
+  })
+
+  // New tests for userMenu prop
+  describe('userMenu prop', () => {
+    it('renders userMenu items in user menu dropdown', () => {
+      mockedWidth = 1400
+      const userMenu = [
+        { title: 'Mine bookinger', iconName: 'heart', target: '/bookinger' },
+        { title: 'Innstillinger', iconName: 'cogwheel', target: () => {} },
+      ]
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel' }} userMenu={userMenu} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      expect(screen.getByText('Mine bookinger')).toBeInTheDocument()
+      expect(screen.getByText('Innstillinger')).toBeInTheDocument()
+    })
+
+    it('renders userMenu link items as links', () => {
+      mockedWidth = 1400
+      const userMenu = [{ title: 'Min profil', target: '/profil' }]
+      const { container } = render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel' }} userMenu={userMenu} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      // PktLink renders as an <a> tag with class pkt-link
+      const linkElement = container.querySelector('a.pkt-link[href="/profil"]')
+      expect(linkElement).toBeTruthy()
+      expect(screen.getByText('Min profil')).toBeInTheDocument()
+    })
+
+    it('calls userMenu button item onClick when clicked', () => {
+      mockedWidth = 1400
+      const handleClick = vi.fn()
+      const userMenu = [{ title: 'Custom Action', target: handleClick }]
+      render(<PktHeaderService serviceName="Svc" user={{ name: 'Aksel' }} userMenu={userMenu} />)
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      const actionBtn = screen.getByRole('button', { name: 'Custom Action' })
+      fireEvent.click(actionBtn)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // New tests for logOut callback and placement
+  describe('logOut callback', () => {
+    it('shows logout button in header when logOutButtonPlacement="header"', () => {
+      mockedWidth = 1400
+      const handleLogout = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="header"
+          logOut={handleLogout}
+        />,
+      )
+      const logoutBtn = screen.getByRole('button', { name: 'Logg ut' })
+      expect(logoutBtn).toBeInTheDocument()
+      fireEvent.click(logoutBtn)
+      expect(handleLogout).toHaveBeenCalledTimes(1)
+    })
+
+    it('shows logout button in userMenu when logOutButtonPlacement="userMenu"', () => {
+      mockedWidth = 1400
+      const handleLogout = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="userMenu"
+          logOut={handleLogout}
+        />,
+      )
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      const logoutBtn = screen.getByRole('button', { name: 'Logg ut' })
+      expect(logoutBtn).toBeInTheDocument()
+      fireEvent.click(logoutBtn)
+      expect(handleLogout).toHaveBeenCalledTimes(1)
+    })
+
+    it('shows logout button in both header and userMenu when logOutButtonPlacement="both"', () => {
+      mockedWidth = 1400
+      const handleLogout = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="both"
+          logOut={handleLogout}
+        />,
+      )
+      // Header logout
+      const headerLogoutBtn = screen.getByRole('button', { name: 'Logg ut' })
+      expect(headerLogoutBtn).toBeInTheDocument()
+
+      // Open user menu
+      const userBtn = screen.getByRole('button', { name: /Aksel/ })
+      fireEvent.click(userBtn)
+      // Should have logout in menu too
+      const logoutBtns = screen.getAllByRole('button', { name: 'Logg ut' })
+      expect(logoutBtns.length).toBe(2)
+    })
+  })
+
+  // Test for userMenuFooter deprecation warning
+  describe('userMenuFooter deprecation', () => {
+    it('logs deprecation warning when userMenuFooter is provided', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mockedWidth = 1400
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          userMenuFooter={[{ title: 'Footer Item', target: '#' }]}
+        />,
+      )
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('userMenuFooter'))
+      consoleSpy.mockRestore()
+    })
+  })
+
+  // Test for userOptions "no longer available" warning
+  describe('userOptions warning', () => {
+    it('logs warning when userOptions is provided', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      mockedWidth = 1400
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          userOptions={[{ title: 'Option', target: '#' }]}
+        />,
+      )
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('userOptions'))
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('no longer available'))
+      consoleSpy.mockRestore()
+    })
+  })
+
+  // Tests for serviceLink and serviceClick props
+  describe('serviceLink and serviceClick props', () => {
+    it('renders service name as link when serviceLink is a string', () => {
+      const { container } = render(<PktHeaderService serviceName="My Service" serviceLink="https://example.com" />)
+      const link = container.querySelector('a.pkt-link.pkt-header-service__service-link')
+      expect(link).toBeTruthy()
+      expect(link).toHaveAttribute('href', 'https://example.com')
+    })
+
+    it('renders service name as button when serviceClick is provided', () => {
+      const handleClick = vi.fn()
+      const { container } = render(<PktHeaderService serviceName="My Service" serviceClick={handleClick} />)
+      const button = container.querySelector('button.pkt-header-service__service-link')
+      expect(button).toBeTruthy()
+      fireEvent.click(button!)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders service name as span when neither serviceLink nor serviceClick is provided', () => {
+      const { container } = render(<PktHeaderService serviceName="My Service" />)
+      const span = container.querySelector('span.pkt-header-service__service-link')
+      expect(span).toBeTruthy()
+      expect(span?.tagName).toBe('SPAN')
+    })
+
+    it('prioritizes serviceLink over serviceClick when both are provided', () => {
+      const handleClick = vi.fn()
+      const { container } = render(
+        <PktHeaderService serviceName="My Service" serviceLink="https://example.com" serviceClick={handleClick} />,
+      )
+      const link = container.querySelector('a.pkt-link.pkt-header-service__service-link')
+      const button = container.querySelector('button.pkt-header-service__service-link')
+      expect(link).toBeTruthy()
+      expect(button).toBeNull()
+    })
+  })
+
+  // Tests for logoClick prop
+  describe('logoClick prop', () => {
+    it('renders logo as button when logoClick is provided', () => {
+      const handleClick = vi.fn()
+      const { container } = render(<PktHeaderService serviceName="Svc" logoClick={handleClick} />)
+      const logoButton = container.querySelector('.pkt-header-service__logo button')
+      expect(logoButton).toBeTruthy()
+      fireEvent.click(logoButton!)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('prioritizes logoLink over logoClick when both are provided', () => {
+      const handleClick = vi.fn()
+      const { container } = render(
+        <PktHeaderService serviceName="Svc" logoLink="https://oslo.kommune.no" logoClick={handleClick} />,
+      )
+      const logoLink = container.querySelector('.pkt-header-service__logo a')
+      const logoButton = container.querySelector('.pkt-header-service__logo button')
+      expect(logoLink).toBeTruthy()
+      expect(logoButton).toBeNull()
+    })
+  })
+
+  // Tests for logout button placement on mobile vs desktop
+  describe('logout button placement mobile vs desktop', () => {
+    it('shows logout button in user area on desktop when logOutButtonPlacement="header"', () => {
+      mockedWidth = 1400
+      const handleLogout = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="header"
+          logOut={handleLogout}
+        />,
+      )
+      // On desktop, logout button should be in user area
+      const logoutBtn = screen.getByRole('button', { name: 'Logg ut' })
+      expect(logoutBtn).toBeInTheDocument()
+    })
+
+    it('shows logout button in content area on mobile when logOutButtonPlacement="header"', () => {
+      mockedWidth = 500
+      const handleLogout = vi.fn()
+      const { container } = render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="header"
+          logOut={handleLogout}
+        />,
+      )
+      const contentArea = container.querySelector('.pkt-header-service__content')
+      const logoutBtn = contentArea?.querySelector('button')
+      expect(logoutBtn).toBeTruthy()
+      expect(screen.getByRole('button', { name: 'Logg ut' })).toBeInTheDocument()
+    })
+
+    it('does not show logout button in header areas when logOutButtonPlacement="userMenu"', () => {
+      mockedWidth = 1400
+      const handleLogout = vi.fn()
+      render(
+        <PktHeaderService
+          serviceName="Svc"
+          user={{ name: 'Aksel' }}
+          logOutButtonPlacement="userMenu"
+          logOut={handleLogout}
+        />,
+      )
+      // When logOutButtonPlacement is userMenu, logout button should not be visible outside the menu
+      // Only the user menu button should be visible, not a separate logout button
+      const logoutButtons = screen.queryAllByRole('button', { name: 'Logg ut' })
+      expect(logoutButtons.length).toBe(0)
+    })
+  })
+})