From 0c62d7e60ab60f0dd301f416e7ce7b0c87f2fee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20M=C3=B6rling?= <jcamorling@gmail.com>
Date: Thu, 14 May 2026 15:31:06 +0200
Subject: [PATCH] feat: add orders link to header nav for authenticated users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 'Mina beställningar' RouterLink to AppHeader in authenticated template
- Add Vitest tests: link visible when authenticated, hidden when not
- Add Playwright E2E test: shows orders link when authenticated
- Add Playwright E2E test: can navigate from home to orders via header link
---
 frontend/e2e/header-auth.spec.ts         | 17 +++++++++++++++
 frontend/src/__tests__/AppHeader.spec.ts | 27 ++++++++++++++++++++++++
 frontend/src/components/AppHeader.vue    |  3 +++
 3 files changed, 47 insertions(+)

diff --git a/frontend/e2e/header-auth.spec.ts b/frontend/e2e/header-auth.spec.ts
index fe41fed..b8b4ad3 100644
--- a/frontend/e2e/header-auth.spec.ts
+++ b/frontend/e2e/header-auth.spec.ts
@@ -38,6 +38,23 @@ test.describe('Header auth state', () => {
     ).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,
   }) => {
diff --git a/frontend/src/__tests__/AppHeader.spec.ts b/frontend/src/__tests__/AppHeader.spec.ts
index 48618bd..5c4e641 100644
--- a/frontend/src/__tests__/AppHeader.spec.ts
+++ b/frontend/src/__tests__/AppHeader.spec.ts
@@ -20,6 +20,11 @@ function createTestRouter() {
         name: 'register',
         component: { template: '<div>Register</div>' },
       },
+      {
+        path: '/orders',
+        name: 'orders',
+        component: { template: '<div>Orders</div>' },
+      },
     ],
   })
 }
@@ -97,6 +102,18 @@ describe('AppHeader', () => {
       })
       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', () => {
@@ -141,6 +158,16 @@ describe('AppHeader', () => {
       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('calls logout when clicking logout button', async () => {
       const wrapper = mountAuthenticated()
       const auth = useAuthStore()
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index f5e5286..6262ef5 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -19,6 +19,9 @@ const auth = useAuthStore()
         >
       </template>
       <template v-else>
+        <RouterLink to="/orders" class="app-header__link"
+          >Mina beställningar</RouterLink
+        >
         <span class="app-header__email">{{ auth.email }}</span>
         <button class="app-header__logout" @click="auth.logout()">
           Logga ut