bilhej/frontend/e2e/header-auth.spec.ts

import { test, expect } from '@playwright/test'

test.describe('Header auth state', () => {
  test('shows login and register links when not authenticated', async ({
    page,
  }) => {
    await page.goto('/')
    const header = page.locator('header')
    await expect(header.getByRole('link', { name: 'Logga in' })).toBeVisible()
    await expect(
      header.getByRole('link', { name: 'Registrera' }),
    ).toBeVisible()
  })

  test('does not show logout button when not authenticated', async ({
    page,
  }) => {
    await page.goto('/')
    const header = page.locator('header')
    await expect(
      header.getByRole('button', { name: 'Logga ut' }),
    ).not.toBeVisible()
  })

  test('shows email and logout when authenticated', async ({ page }) => {
    const jwt = makeJwt({ sub: 'test@bilhalsning.se', role: 'user' })
    await page.goto('/')
    await page.evaluate(
      (token) => localStorage.setItem('auth_token', token),
      jwt,
    )
    await page.goto('/')

    const header = page.locator('header')
    await expect(header.getByText('test@bilhalsning.se')).toBeVisible()
    await expect(
      header.getByRole('button', { name: 'Logga ut' }),
    ).toBeVisible()
  })

  test('shows orders link when authenticated', async ({ page }) => {
    const jwt = makeJwt({ sub: 'test@bilhalsning.se', role: 'user' })
    await page.goto('/')
    await page.evaluate(
      (token) => localStorage.setItem('auth_token', token),
      jwt,
    )
    await page.goto('/')

    const header = page.locator('header')
    const ordersLink = header.getByRole('link', {
      name: 'Mina beställningar',
    })
    await expect(ordersLink).toBeVisible()
    await expect(ordersLink).toHaveAttribute('href', '/orders')
  })

  test('hides login and register links when authenticated', async ({
    page,
  }) => {
    const jwt = makeJwt({ sub: 'test@bilhalsning.se', role: 'user' })
    await page.goto('/')
    await page.evaluate(
      (token) => localStorage.setItem('auth_token', token),
      jwt,
    )
    await page.goto('/')

    const header = page.locator('header')
    await expect(
      header.getByRole('link', { name: 'Logga in' }),
    ).not.toBeVisible()
    await expect(
      header.getByRole('link', { name: 'Registrera' }),
    ).not.toBeVisible()
  })

  test('logout restores login and register links', async ({ page }) => {
    const jwt = makeJwt({ sub: 'test@bilhalsning.se', role: 'user' })
    await page.goto('/')
    await page.evaluate(
      (token) => localStorage.setItem('auth_token', token),
      jwt,
    )
    await page.goto('/')

    const header = page.locator('header')
    await header.getByRole('button', { name: 'Logga ut' }).click()

    await expect(
      header.getByRole('link', { name: 'Logga in' }),
    ).toBeVisible()
    await expect(
      header.getByRole('link', { name: 'Registrera' }),
    ).toBeVisible()
    await expect(
      header.getByRole('button', { name: 'Logga ut' }),
    ).not.toBeVisible()
    await expect(header.getByText('test@bilhalsning.se')).not.toBeVisible()
  })
})

function makeJwt(payload: Record<string, unknown>): string {
  const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))
  const body = btoa(JSON.stringify(payload))
  const signature = 'test-sig'
  return `${header}.${body}.${signature}`
}