feat: add orders link to header nav for authenticated users
- 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
This commit is contained in:
parent
32b315654e
commit
0c62d7e60a
3 changed files with 47 additions and 0 deletions
|
|
@ -38,6 +38,23 @@ test.describe('Header auth state', () => {
|
||||||
).toBeVisible()
|
).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 ({
|
test('hides login and register links when authenticated', async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,11 @@ function createTestRouter() {
|
||||||
name: 'register',
|
name: 'register',
|
||||||
component: { template: '<div>Register</div>' },
|
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')
|
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', () => {
|
describe('when authenticated', () => {
|
||||||
|
|
@ -141,6 +158,16 @@ describe('AppHeader', () => {
|
||||||
expect(registerLink).toBeUndefined()
|
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 () => {
|
it('calls logout when clicking logout button', async () => {
|
||||||
const wrapper = mountAuthenticated()
|
const wrapper = mountAuthenticated()
|
||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,9 @@ const auth = useAuthStore()
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
<RouterLink to="/orders" class="app-header__link"
|
||||||
|
>Mina beställningar</RouterLink
|
||||||
|
>
|
||||||
<span class="app-header__email">{{ auth.email }}</span>
|
<span class="app-header__email">{{ auth.email }}</span>
|
||||||
<button class="app-header__logout" @click="auth.logout()">
|
<button class="app-header__logout" @click="auth.logout()">
|
||||||
Logga ut
|
Logga ut
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue