bilhej/frontend/src/__tests__/AppHeader.spec.ts

import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import { setActivePinia, createPinia } from 'pinia'
import AppHeader from '@/components/AppHeader.vue'
import { useAuthStore } from '@/stores/authStore'

function createTestRouter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
      {
        path: '/logga-in',
        name: 'login',
        component: { template: '<div>Login</div>' },
      },
      {
        path: '/registrera',
        name: 'register',
        component: { template: '<div>Register</div>' },
      },
      {
        path: '/orders',
        name: 'orders',
        component: { template: '<div>Orders</div>' },
      },
      {
        path: '/andra-losenord',
        name: 'change-password',
        component: { template: '<div>Change password</div>' },
      },
      {
        path: '/andra-epost',
        name: 'change-email',
        component: { template: '<div>Change email</div>' },
      },
      {
        path: '/admin',
        name: 'admin',
        component: { template: '<div>Admin</div>' },
      },
    ],
  })
}

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}`
}

describe('AppHeader', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    localStorage.clear()
  })

  it('renders the logo text', () => {
    const router = createTestRouter()
    const wrapper = mount(AppHeader, {
      global: { plugins: [router, createPinia()] },
    })
    expect(wrapper.text()).toContain('Bilhej')
  })

  it('has a link to home', () => {
    const router = createTestRouter()
    const wrapper = mount(AppHeader, {
      global: { plugins: [router, createPinia()] },
    })
    const links = wrapper.findAll('a')
    const homeLink = links.find((a) => a.attributes('href') === '/')
    expect(homeLink).toBeTruthy()
  })

  describe('when not authenticated', () => {
    it('shows login link', () => {
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, createPinia()] },
      })
      const links = wrapper.findAll('a')
      const loginLink = links.find((a) => a.attributes('href') === '/logga-in')
      expect(loginLink).toBeTruthy()
      expect(loginLink?.text()).toBe('Logga in')
    })

    it('shows register link', () => {
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, createPinia()] },
      })
      const links = wrapper.findAll('a')
      const registerLink = links.find(
        (a) => a.attributes('href') === '/registrera',
      )
      expect(registerLink).toBeTruthy()
      expect(registerLink?.text()).toBe('Registrera')
    })

    it('does not show logout button', () => {
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, createPinia()] },
      })
      expect(wrapper.find('.app-header__logout').exists()).toBe(false)
    })

    it('does not show user email', () => {
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, createPinia()] },
      })
      expect(wrapper.text()).not.toContain('@bilhalsning.se')
    })

    it('does not show orders link', () => {
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, createPinia()] },
      })
      const links = wrapper.findAll('a')
      const ordersLink = links.find((a) => a.attributes('href') === '/orders')
      expect(ordersLink).toBeUndefined()
    })
  })

  describe('when authenticated', () => {
    function mountAuthenticated(role = 'user') {
      const jwt = makeJwt({ sub: 'test@bilhej.se', role })
      localStorage.setItem('auth_token', jwt)
      const pinia = createPinia()
      setActivePinia(pinia)
      const router = createTestRouter()
      const wrapper = mount(AppHeader, {
        global: { plugins: [router, pinia] },
      })
      return { wrapper, router }
    }

    it('shows user email', () => {
      const { wrapper } = mountAuthenticated()
      expect(wrapper.text()).toContain('test@bilhej.se')
    })

    it('shows logout button', () => {
      const { wrapper } = mountAuthenticated()
      const logoutButton = wrapper.find('.app-header__logout')
      expect(logoutButton.exists()).toBe(true)
      expect(logoutButton.text()).toBe('Logga ut')
    })

    it('does not show login link', () => {
      const { wrapper } = mountAuthenticated()
      const links = wrapper.findAll('a')
      const loginLink = links.find((a) => a.attributes('href') === '/logga-in')
      expect(loginLink).toBeUndefined()
    })

    it('does not show register link', () => {
      const { wrapper } = mountAuthenticated()
      const links = wrapper.findAll('a')
      const registerLink = links.find(
        (a) => a.attributes('href') === '/registrera',
      )
      expect(registerLink).toBeUndefined()
    })

    it('shows orders link', () => {
      const { wrapper } = mountAuthenticated()
      const links = wrapper.findAll('a')
      const ordersLink = links.find((a) => a.attributes('href') === '/orders')
      expect(ordersLink).toBeTruthy()
      expect(ordersLink?.text()).toBe('Mina beställningar')
    })

    it('shows settings menu with account links', async () => {
      const { wrapper } = mountAuthenticated()
      expect(wrapper.findAll('.app-header__settings-item')).toHaveLength(0)

      await wrapper.find('.app-header__settings-trigger').trigger('click')

      const links = wrapper.findAll('.app-header__settings-item')
      expect(links).toHaveLength(2)
      expect(links[0].attributes('href')).toBe('/andra-epost')
      expect(links[0].text()).toBe('Byt e-postadress')
      expect(links[1].attributes('href')).toBe('/andra-losenord')
      expect(links[1].text()).toBe('Byt lösenord')
    })

    it('toggles mobile menu open state when menu button is clicked', async () => {
      const { wrapper } = mountAuthenticated()

      await wrapper.find('.app-header__menu-toggle').trigger('click')
      await wrapper.vm.$nextTick()

      expect(wrapper.classes()).toContain('app-header--menu-open')
      expect(document.body.classList.contains('nav-menu-open')).toBe(true)
      expect(wrapper.text()).toContain('Byt e-postadress')
    })

    it('highlights settings trigger on change password page', async () => {
      const { wrapper, router } = mountAuthenticated()
      await router.push('/andra-losenord')
      await router.isReady()
      await wrapper.vm.$nextTick()

      expect(wrapper.find('.app-header__settings-trigger').classes()).toContain(
        'app-header__settings-trigger--active',
      )
    })

    it('highlights settings trigger on change email page', async () => {
      const { wrapper, router } = mountAuthenticated()
      await router.push('/andra-epost')
      await router.isReady()
      await wrapper.vm.$nextTick()

      expect(wrapper.find('.app-header__settings-trigger').classes()).toContain(
        'app-header__settings-trigger--active',
      )
    })

    it('does not highlight settings trigger on other pages', async () => {
      const { wrapper, router } = mountAuthenticated()
      await router.push('/orders')
      await router.isReady()
      await wrapper.vm.$nextTick()

      expect(
        wrapper.find('.app-header__settings-trigger').classes(),
      ).not.toContain('app-header__settings-trigger--active')
    })

    it('does not show admin link for regular user', () => {
      const { wrapper } = mountAuthenticated('user')
      const links = wrapper.findAll('a')
      const adminLink = links.find((a) => a.attributes('href') === '/admin')
      expect(adminLink).toBeUndefined()
    })

    it('shows admin link for admin user', () => {
      const { wrapper } = mountAuthenticated('admin')
      const links = wrapper.findAll('a')
      const adminLink = links.find((a) => a.attributes('href') === '/admin')
      expect(adminLink).toBeTruthy()
      expect(adminLink?.text()).toBe('Admin')
    })

    it('calls logout and redirects to home when clicking logout button', async () => {
      const { wrapper, router } = mountAuthenticated()
      const auth = useAuthStore()
      expect(auth.isAuthenticated).toBe(true)

      await router.push('/orders')
      await router.isReady()

      const navigationDone = new Promise<void>((resolve) => {
        const remove = router.afterEach(() => {
          remove()
          resolve()
        })
      })
      await wrapper.find('.app-header__logout').trigger('click')
      await navigationDone

      expect(auth.isAuthenticated).toBe(false)
      expect(router.currentRoute.value.path).toBe('/')
    })
  })
})