Use self hosted SonarQube

* Switched to eslint.config.ts and demoted @typescript-eslint/no-unused-vars to warning

* Created /settings route, associated component and modified tests for routes

* Added tests for SettingsView.vue

* Added jiti library needed for linting

* Refactored routes' tests.

* Refactoring to reduce code duplication

.forgejo/workflows/production-build.yml

@@ -1,4 +1,4 @@
-name: Sonar
+name: Production Build and Deploy
 permissions:
   contents: read
   pull-requests: write
@@ -10,19 +10,23 @@ on:
     branches:
       - production
     types: [opened, synchronize, reopened]
+env:
+  FORGEJO_HOST: git.burcusel.nl
+  CONTAINER_NAME: ydioy
+  OWNER: public
 jobs:
-  sonarqube:
-    name: SonarQube
-    runs-on: ubuntu-latest
+  qa-and-build:
+    name: QA and Build
+    runs-on: node24
     steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Setup node environment
+      - name: Setup Node environment
         uses: actions/setup-node@v4
         with:
-          node-version: "22"
-          cache: "npm"
+          node-version: "24"
+      - name: Code checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Install dependencies
         run: npm ci
       - name: Type checking and linting
@@ -31,9 +35,10 @@ jobs:
           npm run lint
       - name: Run tests and generate coverage
         run: npm run coverage
-        env:
-          CI: true
+        # env:
+        #   CI: true
       - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@v6
+        uses: https://github.com/SonarSource/sonarqube-scan-action@v6
         env:
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

README.md

@@ -2,12 +2,14 @@
 
 Your Data Is Only Yours
 
-[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=bugs)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
-[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=lburcusel_ydioy&metric=coverage)](https://sonarcloud.io/summary/new_code?id=lburcusel_ydioy)
+---
+
+[![Lines of Code](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=ncloc&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Quality Gate Status](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=alert_status&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Bugs](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=bugs&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Code Smells](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=code_smells&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Vulnerabilities](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=vulnerabilities&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Reliability Rating](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=reliability_rating&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Security Rating](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=security_rating&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Maintainability Rating](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=sqale_rating&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)
+[![Coverage](https://sonar.burcusel.nl/api/project_badges/measure?project=DIO&metric=coverage&token=sqb_31bac28c32d3ffa5bbca264565f0838ded25fc4a)](https://sonar.burcusel.nl/dashboard?id=DIO)

eslint.config.ts

@@ -25,6 +25,7 @@ export default typescriptEslint.config(
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
     },
   },
   {

package.json

@@ -27,27 +27,28 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.16.5",
+    "@types/node": "^25.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.0.9",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsonc": "^2.21.0",
     "eslint-plugin-vue": "^10.5.1",
     "globals": "^16.4.0",
     "happy-dom": "^20.0.5",
+    "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
-    "prettier": "3.6.2",
+    "prettier": "^3.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "sass-embedded": "^1.92.1",
-    "typescript": "~5.8.0",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.1",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.0",
-    "vitest": "^3.2.4",
-    "vitest-sonar-reporter": "^2.0.4",
+    "vitest": "^4.0.9",
+    "vitest-sonar-reporter": "^3.0.0",
     "vue-tsc": "^3.0.4"
   }
 }

sonar-project.properties

@@ -1,5 +1,6 @@
-sonar.projectKey=lburcusel_ydioy
-sonar.organization=lburcusel
+# sonar.projectKey=lburcusel_ydioy
+# sonar.organization=lburcusel
+sonar.projectKey=DIO
 sonar.projectName=YDIOY
 sonar.projectVersion=1.0.0
 sonar.sourceEncoding=UTF-8

src/components/HeaderNavBar.vue

@@ -7,12 +7,7 @@ import { RouterLink } from "vue-router";
     <v-container class="d-flex align-center pa-0">
       <div class="d-flex align-center">
         <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/" data-role="homeNavigation">
-          <v-btn
-            :variant="isActive ? 'elevated' : 'outlined'"
-            color="primary"
-            size="large"
-            prepend-icon="mdi-home-outline"
-          >
+          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-home-outline">
             Home
           </v-btn>
         </RouterLink>
@@ -26,7 +21,12 @@ import { RouterLink } from "vue-router";
             About
           </v-btn>
         </RouterLink>
+        <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/settings" data-role="settingsNavigation">
+          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-cog-outline">
+            Settings
+          </v-btn>
+        </RouterLink>
       </div>
     </v-container>
   </v-app-bar>
-</template>
+</template>

src/router/index.ts

@@ -14,6 +14,11 @@ const router = createRouter({
       name: "about",
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/settings",
+      name: "settings",
+      component: () => import("~/views/SettingView.vue"),
+    },
   ],
 });
 

src/views/SettingView.vue

@@ -0,0 +1,5 @@
+<template>
+  <article>
+    <h1 class="text-h2 text-primary"><i class="mdi mdi-cog-outline"></i>Settings</h1>
+  </article>
+</template>

tests/App.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { mount, type VueWrapper } from "@vue/test-utils";
+import { vuetify } from "./setup.vuetify";
+
+import App from "~/App.vue";
+
+describe("App.vue", () => {
+  const wrapper: VueWrapper = mount(App, {
+    global: {
+      plugins: [vuetify],
+      stubs: {
+        HeaderNavBar: true,
+        FooterComponent: true,
+        RouterView: true,
+      },
+    },
+  });
+
+  describe("Component Structure", () => {
+    it("renders the component", () => {
+      expect(wrapper.exists()).toBe(true);
+    });
+
+    it("renders v-app as the root element", () => {
+      expect(wrapper.find(".v-application").exists()).toBe(true);
+    });
+
+    it("renders HeaderNavBar component", () => {
+      expect(wrapper.findComponent({ name: "HeaderNavBar" }).exists()).toBe(true);
+    });
+
+    it("renders FooterComponent component", () => {
+      expect(wrapper.findComponent({ name: "FooterComponent" }).exists()).toBe(true);
+    });
+
+    it("renders v-main element", () => {
+      expect(wrapper.find(".v-main").exists()).toBe(true);
+    });
+
+    it("renders v-container inside v-main", () => {
+      const main = wrapper.find(".v-main");
+      expect(main.find(".v-container").exists()).toBe(true);
+    });
+
+    it("renders RouterView component", () => {
+      expect(wrapper.findComponent({ name: "RouterView" }).exists()).toBe(true);
+    });
+  });
+});

tests/components/HeardeNavBar.spec.ts

@@ -1,116 +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"
+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');
+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: "/about", component: { template: "<div>About</div>" } },
+  { path: "/settings", component: { template: "<div>Settings</div>" } },
+];
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
 });
 
 const vuetify = createVuetify({
   components,
   directives,
-})
+});
 
 describe("HeaderNavBar", () => {
-  let wrapper: any
+  let wrapper: any;
 
   beforeEach(() => {
-    wrapper = mount({
-			template: `
+    wrapper = mount(
+      {
+        template: `
         <v-app>
           <v-layout>
             <HeaderNavBar />
           </v-layout>
         </v-app>
       `,
-		}, {
-      global: {
-				components: {
-					HeaderNavBar,
-				},
-        plugins: [router, vuetify]
+      },
+      {
+        global: {
+          components: {
+            HeaderNavBar,
+          },
+          plugins: [router, vuetify],
+        },
       }
-    })
-  })
+    );
+  });
 
   it("renders the component", () => {
-    expect(wrapper.exists()).toBe(true)
-    expect(wrapper.findComponent({ name: "VAppBar" }).exists()).toBe(true)
-  })
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findComponent({ name: "VAppBar" }).exists()).toBe(true);
+  });
 
-  it("renders both navigation buttons", () => {
+  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(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(2);
+
+    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()
+    await router.push("/");
+    await wrapper.vm.$nextTick();
 
-    // Check home button is elevated (active) and about is outlined (inactive)
+    // 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(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
+    // Navigate to about route
     await router.push("/about");
     await wrapper.vm.$nextTick();
 
-    // // Check about button is now elevated and home is outlined
+    // 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(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")
+      expect(link.classes()).toContain("mx-2");
+      expect(link.classes()).toContain("text-decoration-none");
     }
 
-		const buttons = wrapper.findAllComponents({ name: "v-btn" });
+    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");
-		}
+      expect(button.attributes("class")).toContain("v-btn--size-large");
+      expect(button.attributes("class")).toContain("-primary");
+    }
   });
 
   it("has proper app bar structure", () => {
@@ -126,11 +148,11 @@ describe("HeaderNavBar", () => {
 
   it("maintains accessibility attributes", () => {
     const homeButton = wrapper.find("[data-role='homeNavigation']");
-    expect(homeButton.attributes("data-role")).toBe('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);
+    expect(buttons).toHaveLength(3);
     for (const button of buttons) {
       expect(button.element.tagName).toBe("BUTTON");
     }

tests/main.spec.ts

@@ -1,52 +1,55 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { createApp } from 'vue';
-import App from '../src/App.vue';
-import vuetify from '../src/plugins/vuetify';
-import router from '../src/router';
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp } from "vue";
+import App from "~/App.vue";
+import vuetify from "~/plugins/vuetify";
+import router from "~/router";
 
-vi.mock('vue', async () => {
-  const actual = await vi.importActual('vue');
+vi.mock("vue", async () => {
+  const actual = await vi.importActual("vue");
   return {
     ...actual,
     createApp: vi.fn(),
   };
 });
 
-vi.mock('./assets/main.css', () => ({}));
+vi.mock("./assets/main.css", () => ({}));
 
-vi.mock('./plugins/vuetify', () => ({
+vi.mock("./plugins/vuetify", () => ({
   default: {
     install: vi.fn(),
   },
 }));
 
-vi.mock('./router', () => ({
+vi.mock("./router", () => ({
   default: {
     install: vi.fn(),
   },
 }));
 
-describe('main.ts', () => {
+describe("main.ts", () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="app"></div>';
-    vi.mocked(createApp).mockImplementation(() => ({
-      use: vi.fn(),
-      mount: vi.fn(),
-    } as any));
+    vi.mocked(createApp).mockImplementation(
+      () =>
+        ({
+          use: vi.fn(),
+          mount: vi.fn(),
+        }) as any
+    );
   });
 
-  it('creates app and uses plugins', async () => {
-    await import("../src/main");
+  it("creates app and uses plugins", async () => {
+    await import("~/main");
 
     expect(createApp).toHaveBeenCalledTimes(1);
     expect(createApp).toHaveBeenCalledWith(App);
 
-    const appMock = vi.mocked(createApp).mock.results[0].value;
+    const appMock = vi.mocked(createApp).mock.results[0]?.value;
     expect(appMock.use).toHaveBeenCalledTimes(2);
     expect(appMock.use).toHaveBeenCalledWith(vuetify);
     expect(appMock.use).toHaveBeenCalledWith(router);
 
     expect(appMock.mount).toHaveBeenCalledTimes(1);
-    expect(appMock.mount).toHaveBeenCalledWith('#app');
+    expect(appMock.mount).toHaveBeenCalledWith("#app");
   });
 });

tests/router/index.spec.ts

@@ -1,168 +1,141 @@
-
 import { describe, it, expect, beforeEach } from "vitest";
 import router from "~/router/index";
 
 describe("Router Integration Tests", () => {
+  const testRoutes = [
+    { path: "/", name: "home", lazyLoaded: false },
+    { path: "/about", name: "about", lazyLoaded: true },
+    { path: "/settings", name: "settings", lazyLoaded: true },
+  ];
+
   beforeEach(async () => {
     await router.push("/");
     await router.isReady();
   });
 
-  it("creates a router instance", () => {
-    expect(router).toBeDefined();
-    expect(router).toHaveProperty("currentRoute");
-    expect(router).toHaveProperty("push");
-    expect(router).toHaveProperty("replace");
-  });
+  describe("General", () => {
+    it("has hash history mode", () => {
+      expect(router.options.history.base).toContain("#");
+    });
 
-  it("has hash history mode", () => {
-    expect(router.options.history.base).toContain("#");
-  });
+    it("has 3 routes configured", () => {
+      const routes = router.getRoutes();
+      expect(routes).toHaveLength(3);
+    });
 
-  it("has 2 routes configured", () => {
-    const routes = router.getRoutes();
-    expect(routes).toHaveLength(2);
-  });
+    it("creates a router instance", () => {
+      expect(router).toBeDefined();
+      expect(router).toHaveProperty("currentRoute");
+      expect(router).toHaveProperty("push");
+      expect(router).toHaveProperty("replace");
+    });
 
-  it("has home route at root path", () => {
-    const routes = router.getRoutes();
-    const homeRoute = routes.find(route => route.path === "/");
+    it("does not have undefined routes", () => {
+      expect(router.hasRoute("nonexistent")).toBe(false);
+    });
 
-    expect(homeRoute).toBeDefined();
-    expect(homeRoute?.name).toBe("home");
-  });
-
-  it("has about route", () => {
-    const routes = router.getRoutes();
-    const aboutRoute = routes.find(route => route.path === "/about");
-
-    expect(aboutRoute).toBeDefined();
-    expect(aboutRoute?.name).toBe("about");
-  });
-
-  it("navigates to home route", async () => {
-    await router.push("/");
-    await router.isReady();
-
-    expect(router.currentRoute.value.path).toBe("/");
-    expect(router.currentRoute.value.name).toBe("home");
-  });
-
-  it("navigates to about route", async () => {
-    await router.push("/about");
-    await router.isReady();
-
-    expect(router.currentRoute.value.path).toBe("/about");
-    expect(router.currentRoute.value.name).toBe("about");
-  });
-
-  it("navigates using route name for home", async () => {
-    await router.push({ name: "home" });
-    await router.isReady();
-
-    expect(router.currentRoute.value.name).toBe("home");
-    expect(router.currentRoute.value.path).toBe("/");
-  });
-
-  it("navigates using route name for about", async () => {
-    await router.push({ name: "about" });
-    await router.isReady();
-
-    expect(router.currentRoute.value.name).toBe("about");
-    expect(router.currentRoute.value.path).toBe("/about");
-  });
-
-  it("resolves home route correctly", () => {
-    const resolved = router.resolve("/");
-
-    expect(resolved.name).toBe("home");
-    expect(resolved.path).toBe("/");
-  });
-
-  it("resolves about route correctly", () => {
-    const resolved = router.resolve("/about");
-
-    expect(resolved.name).toBe("about");
-    expect(resolved.path).toBe("/about");
-  });
-
-  it("has HomeView component for home route", () => {
-    const routes = router.getRoutes();
-    const homeRoute = routes.find(route => route.path === "/");
-
-    expect(homeRoute?.components?.default).toBeDefined();
-  });
-
-  it("has lazy loaded component for about route", () => {
-    const routes = router.getRoutes();
-    const aboutRoute = routes.find(route => route.path === "/about");
-
-    expect(aboutRoute?.components).toBeDefined();
-  });
-
-  it("checks if home route exists", () => {
-    expect(router.hasRoute("home")).toBe(true);
-  });
-
-  it("checks if about route exists", () => {
-    expect(router.hasRoute("about")).toBe(true);
-  });
-
-  it("does not have undefined routes", () => {
-    expect(router.hasRoute("nonexistent")).toBe(false);
-  });
-
-  it("maintains navigation history", async () => {
-    await router.push("/");
-    await router.push("/about");
-
-    expect(router.currentRoute.value.path).toBe("/about");
-
-    router.back();
-    await router.isReady();
-
-    expect(router.back).toBeDefined();
-  });
-
-  it("handles programmatic navigation with replace", async () => {
-    await router.push("/");
-    await router.replace("/about");
-    await router.isReady();
-
-    expect(router.currentRoute.value.path).toBe("/about");
-  });
-
-  it("matches routes case-sensitively", () => {
-    const routes = router.getRoutes();
-    const upperCaseRoute = routes.find(route => route.path === "/ABOUT");
-
-    expect(upperCaseRoute).toBeUndefined();
-  });
-
-  it("provides route metadata access", () => {
-    const routes = router.getRoutes();
-
-    for (const route of routes) {
-      expect(route).toHaveProperty("path");
-      expect(route).toHaveProperty("name");
-      expect(route).toHaveProperty("meta");
-    }
-  });
-
-  it("is ready after initialization", async () => {
-    const ready = await router.isReady();
-
-    // Note: isReady() returns void when resolved
-    expect(ready).toBeUndefined();
-  });
-
-  it("handles navigation to current route", async () => {
-    await router.push("/");
-
-    try {
+    it("maintains navigation history", async () => {
       await router.push("/");
-    } catch (error: any) {
-      expect(error.message).toContain("Avoided redundant navigation to current location");
-    }
+      await router.push("/about");
+
+      expect(router.currentRoute.value.path).toBe("/about");
+
+      router.back();
+      await router.isReady();
+
+      expect(router.back).toBeDefined();
+    });
+
+    it("handles programmatic navigation with replace", async () => {
+      await router.push("/");
+      await router.replace("/about");
+      await router.isReady();
+
+      expect(router.currentRoute.value.path).toBe("/about");
+    });
+
+    it("matches routes case-sensitively", () => {
+      const routes = router.getRoutes();
+      const upperCaseRoute = routes.find(route => route.path === "/ABOUT");
+
+      expect(upperCaseRoute).toBeUndefined();
+    });
+
+    it("provides route metadata access", () => {
+      const routes = router.getRoutes();
+
+      for (const route of routes) {
+        expect(route).toHaveProperty("path");
+        expect(route).toHaveProperty("name");
+        expect(route).toHaveProperty("meta");
+      }
+    });
+
+    it("is ready after initialization", async () => {
+      const ready = await router.isReady();
+
+      // Note: isReady() returns void when resolved
+      expect(ready).toBeUndefined();
+    });
+
+    it("handles navigation to current route", async () => {
+      await router.push("/");
+
+      try {
+        await router.push("/");
+      } catch (error: any) {
+        expect(error.message).toContain("Avoided redundant navigation to current location");
+      }
+    });
   });
+
+  for (const r of testRoutes) {
+    describe(r.name, () => {
+      it("has route", () => {
+        const routes = router.getRoutes();
+        const currentRoute = routes.find(route => route.path === r.path);
+
+        expect(currentRoute).toBeDefined();
+        expect(currentRoute?.name).toBe(r.name);
+      });
+
+      it("checks if route exists", () => {
+        expect(router.hasRoute(r.name)).toBe(true);
+      });
+
+      it("navigates to route", async () => {
+        await router.push(r.path);
+        await router.isReady();
+
+        expect(router.currentRoute.value.path).toBe(r.path);
+        expect(router.currentRoute.value.name).toBe(r.name);
+      });
+
+      it("navigates using route name", async () => {
+        await router.push({ name: r.name });
+        await router.isReady();
+
+        expect(router.currentRoute.value.name).toBe(r.name);
+        expect(router.currentRoute.value.path).toBe(r.path);
+      });
+
+      it("resolves route correctly", () => {
+        const resolved = router.resolve(r.path);
+
+        expect(resolved.name).toBe(r.name);
+        expect(resolved.path).toBe(r.path);
+      });
+
+      it("has (lazy) loaded component", () => {
+        const routes = router.getRoutes();
+        const currentRoute = routes.find(route => route.path === r.path);
+
+        if (r.lazyLoaded) {
+          expect(currentRoute?.components).toBeDefined();
+        } else {
+          expect(currentRoute?.components?.default).toBeDefined();
+        }
+      });
+    });
+  }
 });

tests/setup.vuetify.ts

@@ -0,0 +1,10 @@
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const vuetify = createVuetify({
+  components,
+  directives,
+});
+
+export { vuetify };

tests/views/SettingsView.spec.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import SettingView from "~/views/SettingView.vue";
+
+describe("SettingView.vue", () => {
+  const wrapper: VueWrapper = mount(SettingView, {});
+  it("renders without crashing", () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+});

tsconfig.vitest.json

@@ -1,10 +1,14 @@
 {
   "extends": "./tsconfig.app.json",
-  "include": ["tests/**/*.spec.ts", "env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["tests/**/*.ts", "env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": [],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
 
     "types": ["node", "happy-dom"]
+  },
+  "paths": {
+    "~/*": ["./src/*"],
+    "@/*": ["./src/*"]
   }
 }

vitest.config.ts

@@ -9,12 +9,11 @@ export default mergeConfig(
       environment: "happy-dom",
       exclude: [...configDefaults.exclude, "e2e/**"],
       root: fileURLToPath(new URL("./", import.meta.url)),
-      reporters: [
-        'default',
-        ['vitest-sonar-reporter', { outputFile: 'coverage/sonar-report.xml' }],
-      ],
+      setupFiles: ["./tests/setup.vuetify.ts"],
+      reporters: ["default", ["vitest-sonar-reporter", { outputFile: "coverage/sonar-report.xml" }]],
       coverage: {
         reporter: ["text", "lcov"],
+        exclude: [...(configDefaults.coverage.exclude || []), "**/*.css", "**/*.scss"],
       },
       server: {
         deps: {
@@ -22,5 +21,5 @@ export default mergeConfig(
         },
       },
     },
-  }),
+  })
 );