ydioy/tests/components/HeardeNavBar.spec.ts

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";

globalThis.ResizeObserver = require("resize-observer-polyfill");

// Mock routes for testing
const routes = [
  { path: "/", component: { template: "<div>Home</div>" } },
  { path: "/about", component: { template: "<div>About</div>" } },
  { path: "/settings", component: { template: "<div>Settings</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 all navigation buttons", () => {
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");
    const settingsButton = wrapper.find("[data-role='settingsNavigation']");

    expect(homeButton.exists()).toBe(true);
    expect(aboutButton.exists()).toBe(true);
    expect(settingsButton.exists()).toBe(true);
    expect(homeButton.text()).toContain("Home");
    expect(aboutButton.text()).toContain("About");
    expect(settingsButton.text()).toContain("Settings");
  });

  it("has correct icons on buttons", () => {
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");
    const settingsButton = wrapper.find("[data-role='settingsNavigation']");

    expect(homeButton.find("i").attributes("class")).toContain("mdi-home-outline");
    expect(aboutButton.find("i").attributes("class")).toContain("mdi-chat-question-outline");
    expect(settingsButton.find("i").attributes("class")).toContain("mdi-cog-outline");
  });

  it("has correct RouterLink paths", () => {
    const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });

    expect(routerLinks).toHaveLength(3);
    expect(routerLinks[0].props("to")).toBe("/");
    expect(routerLinks[1].props("to")).toBe("/about");
    expect(routerLinks[2].props("to")).toBe("/settings");
  });

  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 and the rest are outlined
    const homeButton = wrapper.find("[data-role='homeNavigation']");
    const aboutButton = wrapper.find("[data-role='aboutNavigation']");
    const settingsButton = wrapper.find("[data-role='settingsNavigation']");

    expect(homeButton.find("button").attributes("class")).toContain("elevated");
    expect(aboutButton.find("button").attributes("class")).toContain("outlined");
    expect(settingsButton.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 the rest are outlined
    expect(homeButton.find("button").attributes("class")).toContain("outlined");
    expect(aboutButton.find("button").attributes("class")).toContain("elevated");
    expect(settingsButton.find("button").attributes("class")).toContain("outlined");

    // Navigate to settings route
    await router.push("/settings");
    await wrapper.vm.$nextTick();

    // Check about button is now elevated and the rest are outlined
    expect(homeButton.find("button").attributes("class")).toContain("outlined");
    expect(aboutButton.find("button").attributes("class")).toContain("outlined");
    expect(settingsButton.find("button").attributes("class")).toContain("elevated");
  });

  it("has correct button styling classes", () => {
    const routerLinks = wrapper.findAllComponents({ name: "RouterLink" });

    for (const link of routerLinks) {
      expect(link.classes()).toContain("mx-2");
      expect(link.classes()).toContain("text-decoration-none");
    }

    const buttons = wrapper.findAllComponents({ name: "v-btn" });
    for (const button of buttons) {
      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(3);
    for (const button of buttons) {
      expect(button.element.tagName).toBe("BUTTON");
    }
  });
});