Moved the navbar into self contained component

tests/components/HeardeNavBar.spec.ts

@@ -0,0 +1,138 @@
+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");
+    })
+  })
+})