bstein-dev-home/testing/frontend/unit/home.spec.js

import { shallowMount } from "../../../frontend/node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs";
import { describe, expect, it } from "../../../frontend/node_modules/vitest/dist/index.js";

import HomeView from "../../../frontend/src/views/HomeView.vue";

describe("HomeView", () => {
  it("adds fallback icons and builds diagrams for the overview page", () => {
    const wrapper = shallowMount(HomeView, {
      global: {
        stubs: {
          MetricRow: true,
          ServiceGrid: true,
          MermaidCard: true,
        },
      },
      props: {
        serviceData: {
          services: [
            { name: "Nextcloud", summary: "Storage", link: "https://cloud.example.dev" },
            { name: "Jellyfin", summary: "Media", link: "https://stream.example.dev" },
            { name: "Matrix (Synapse)", summary: "Chat", link: "https://chat.example.dev" },
            { name: "Element", summary: "Rooms", link: "https://rooms.example.dev" },
            { name: "LiveKit", summary: "Calls", link: "https://calls.example.dev" },
            { name: "Coturn", summary: "TURN", link: "https://turn.example.dev" },
            { name: "Mailu", summary: "Mail", link: "https://mail.example.dev" },
            { name: "Vaultwarden", summary: "Passwords", link: "https://vault.example.dev" },
            { name: "Vault", summary: "Secrets", link: "https://secret.example.dev" },
            { name: "Gitea", summary: "Git", link: "https://scm.example.dev" },
            { name: "Jenkins", summary: "CI", link: "https://ci.example.dev" },
            { name: "Harbor", summary: "Registry", link: "https://registry.example.dev" },
            { name: "Flux", summary: "GitOps", link: "https://cd.example.dev" },
            { name: "Monero", summary: "Node", link: "https://monero.example.dev" },
            { name: "SUI Validator", summary: "Crypto", link: "https://sui.example.dev" },
            { name: "Keycloak", summary: "SSO", link: "https://sso.example.dev" },
            { name: "AI Translation", summary: "Translate", link: "https://translate.example.dev" },
            { name: "Grafana", summary: "Metrics", link: "https://metrics.example.dev" },
            { name: "Pegasus", summary: "Uploads", link: "https://pegasus.example.dev" },
            { name: "AI Chat", summary: "Chat", link: "https://chat.example.dev" },
            { name: "AI Vision", summary: "Vision", link: "https://vision.example.dev" },
            { name: "AI Speech", summary: "Speech", link: "https://speech.example.dev" },
            { name: "Mystery", summary: "Default", link: "https://default.example.dev" },
          ],
        },
      },
    });

    const icons = wrapper.vm.displayServices.map((service) => service.icon);
    expect(icons).toContain("☁️");
    expect(icons).toContain("🎞️");
    expect(icons).toContain("🗨️");
    expect(icons).toContain("🧩");
    expect(icons).toContain("🎥");
    expect(icons).toContain("📞");
    expect(icons).toContain("📮");
    expect(icons).toContain("🔒");
    expect(icons).toContain("🔑");
    expect(icons).toContain("📚");
    expect(icons).toContain("🧰");
    expect(icons).toContain("📦");
    expect(icons).toContain("🔄");
    expect(icons).toContain("⛏️");
    expect(icons).toContain("💠");
    expect(icons).toContain("🛡️");
    expect(icons).toContain("🌐");
    expect(icons).toContain("📈");
    expect(icons).toContain("🚀");
    expect(icons).toContain("💬");
    expect(icons).toContain("🖼️");
    expect(icons).toContain("🎙️");
    expect(icons).toContain("🛰️");
    expect(wrapper.vm.hardwareDiagram).toContain("Titan Lab");
    expect(wrapper.vm.networkDiagram).toContain("oauth2-proxy");
    expect(wrapper.vm.pipelineDiagram).toContain("flux[cd.bstein.dev]");
  });

  it("renders loading, error, and healthy status states", () => {
    const wrapper = shallowMount(HomeView, {
      global: {
        stubs: {
          MetricRow: true,
          ServiceGrid: true,
          MermaidCard: true,
        },
      },
      props: {
        labStatus: { connected: true, atlas: { up: true }, oceanus: { up: true } },
        serviceData: undefined,
        loading: true,
        error: "",
      },
    });

    expect(wrapper.vm.atlasPillClass).toBe("pill-ok");
    expect(wrapper.vm.oceanusPillClass).toBe("pill-ok");
    expect(wrapper.get(".status").text()).toBe("Loading...");
    expect(wrapper.vm.displayServices.length).toBeGreaterThan(0);
  });

  it("shows the error state when lab data fetches fail", () => {
    const wrapper = shallowMount(HomeView, {
      global: {
        stubs: {
          MetricRow: true,
          ServiceGrid: true,
          MermaidCard: true,
        },
      },
      props: {
        labStatus: { connected: false, atlas: { up: false }, oceanus: { up: false } },
        serviceData: { services: [] },
        loading: false,
        error: "unable to load status",
      },
    });

    expect(wrapper.vm.atlasPillClass).toBe("pill-bad");
    expect(wrapper.vm.oceanusPillClass).toBe("pill-bad");
    expect(wrapper.get(".status").text()).toBe("unable to load status");
  });

  it("shows live data unavailable and respects custom metric items", () => {
    const wrapper = shallowMount(HomeView, {
      global: {
        stubs: {
          MetricRow: true,
          ServiceGrid: true,
          MermaidCard: true,
        },
      },
      props: {
        labStatus: { connected: false, atlas: { up: false }, oceanus: { up: false } },
        serviceData: { services: [] },
        metricsData: {
          items: [{ label: "Custom", value: "1", note: "" }],
        },
        loading: false,
        error: "",
      },
    });

    expect(wrapper.get(".status").text()).toBe("Live data unavailable");
    expect(wrapper.vm.metricItems[0].note).toBe("");
  });
});