138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
import { describe, it, expect, beforeEach } from "vitest"
|
|
import { mount } from "@vue/test-utils"
|
|
import { createRouter, createWebHistory } from "vue-router"
|
|
import { createVuetify } from "vuetify"
|
|
import * as components from 'vuetify/components'
|
|
import * as directives from 'vuetify/directives'
|
|
import HeaderNavBar from "../../src/components/HeaderNavBar.vue"
|
|
|
|
global.ResizeObserver = require('resize-observer-polyfill');
|
|
|
|
// Mock routes for testing
|
|
const routes = [
|
|
{ path: "/", component: { template: "<div>Home</div>" } },
|
|
{ path: "/about", component: { template: "<div>About</div>" } }
|
|
]
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory(),
|
|
routes
|
|
});
|
|
|
|
const vuetify = createVuetify({
|
|
components,
|
|
directives,
|
|
})
|
|
|
|
describe("HeaderNavBar", () => {
|
|
let wrapper: any
|
|
|
|
beforeEach(() => {
|
|
wrapper = mount({
|
|
template: `
|
|
<v-app>
|
|
<v-layout>
|
|
<HeaderNavBar />
|
|
</v-layout>
|
|
</v-app>
|
|
`,
|
|
}, {
|
|
global: {
|
|
components: {
|
|
HeaderNavBar,
|
|
},
|
|
plugins: [router, vuetify]
|
|
}
|
|
})
|
|
})
|
|
|
|
it("renders the component", () => {
|
|
expect(wrapper.exists()).toBe(true)
|
|
expect(wrapper.findComponent({ name: "VAppBar" }).exists()).toBe(true)
|
|
})
|
|
|
|
it("renders both navigation buttons", () => {
|
|
const homeButton = wrapper.find("[data-role='homeNavigation']");
|
|
const aboutButton = wrapper.find("[data-role='aboutNavigation']");
|
|
|
|
expect(homeButton.exists()).toBe(true);
|
|
expect(aboutButton.exists()).toBe(true);
|
|
expect(homeButton.text()).toContain("Home");
|
|
expect(aboutButton.text()).toContain("About");
|
|
});
|
|
|
|
it("has correct icons on buttons", () => {
|
|
const homeButton = wrapper.find("[data-role='homeNavigation']");
|
|
const aboutButton = wrapper.find("[data-role='aboutNavigation']");
|
|
|
|
expect(homeButton.find("i").attributes("class")).toContain("mdi-home-outline");
|
|
expect(aboutButton.find("i").attributes("class")).toContain("mdi-chat-question-outline");
|
|
});
|
|
|
|
it("has correct RouterLink paths", () => {
|
|
const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });
|
|
|
|
expect(routerLinks).toHaveLength(2);
|
|
expect(routerLinks[0].props("to")).toBe("/");
|
|
expect(routerLinks[1].props("to")).toBe("/about");
|
|
});
|
|
|
|
it("applies correct button variants based on active route", async () => {
|
|
// Navigate to home route
|
|
await router.push("/")
|
|
await wrapper.vm.$nextTick()
|
|
|
|
// Check home button is elevated (active) and about is outlined (inactive)
|
|
const homeButton = wrapper.find("[data-role='homeNavigation']");
|
|
const aboutButton = wrapper.find("[data-role='aboutNavigation']");
|
|
|
|
expect(homeButton.find("button").attributes("class")).toContain("elevated");
|
|
expect(aboutButton.find("button").attributes("class")).toContain("outlined");
|
|
|
|
// // Navigate to about route
|
|
await router.push("/about");
|
|
await wrapper.vm.$nextTick();
|
|
|
|
// // Check about button is now elevated and home is outlined
|
|
expect(homeButton.find("button").attributes("class")).toContain("outlined");
|
|
expect(aboutButton.find("button").attributes("class")).toContain("elevated");
|
|
});
|
|
|
|
it("has correct button styling classes", () => {
|
|
const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });
|
|
|
|
routerLinks.forEach((link: any) => {
|
|
expect(link.classes()).toContain("mx-2")
|
|
expect(link.classes()).toContain("text-decoration-none")
|
|
});
|
|
|
|
const buttons = wrapper.findAllComponents({ name: "v-btn" });
|
|
buttons.forEach((button: any) => {
|
|
expect(button.attributes("class")).toContain("v-btn--size-large");
|
|
expect(button.attributes("class")).toContain("-primary");
|
|
});
|
|
});
|
|
|
|
it("has proper app bar structure", () => {
|
|
const appBar = wrapper.findComponent({ name: "VAppBar" });
|
|
const container = wrapper.findComponent({ name: "VContainer" });
|
|
|
|
expect(appBar.attributes("fixed")).toBe("");
|
|
expect(appBar.attributes("app")).toBe("");
|
|
expect(container.classes()).toContain("d-flex");
|
|
expect(container.classes()).toContain("align-center");
|
|
expect(container.classes()).toContain("pa-0");
|
|
});
|
|
|
|
it("maintains accessibility attributes", () => {
|
|
const homeButton = wrapper.find("[data-role='homeNavigation']");
|
|
expect(homeButton.attributes("data-role")).toBe('homeNavigation');
|
|
|
|
// Check that buttons are actual button elements for screen readers
|
|
const buttons = wrapper.findAll("button")
|
|
expect(buttons).toHaveLength(2)
|
|
buttons.forEach((button: any) => {
|
|
expect(button.element.tagName).toBe("BUTTON");
|
|
})
|
|
})
|
|
})
|