Disabled github actions

* 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

.disabled.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.disabled.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.disabled.github/workflows/sonar.yml

@@ -0,0 +1,39 @@
+name: Sonar
+permissions:
+  contents: read
+  pull-requests: write
+on:
+  push:
+    branches:
+      - production
+  pull_request:
+    branches:
+      - production
+    types: [opened, synchronize, reopened]
+jobs:
+  sonarqube:
+    name: SonarQube
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup node environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Type checking and linting
+        run: |
+          npm run type-check &&
+          npm run lint
+      - name: Run tests and generate coverage
+        run: npm run coverage
+        env:
+          CI: true
+      - name: SonarQube Scan
+        uses: SonarSource/sonarqube-scan-action@v6
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/production-ci.yml

@@ -1,66 +0,0 @@
-name: SonarCloud Analysis
-
-on:
-  push:
-    branches:
-      - production
-
-jobs:
-  do-scan:
-    name: SonarCloud Scan
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22"
-          cache: "npm"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run tests and generate coverage
-        run: npm run coverage
-        continue-on-error: true
-        env:
-          CI: true
-
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarqube-scan-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-        with:
-          args: >
-            -Dsonar.projectKey=xliviux_ydioy
-            -Dsonar.organization=xliviux
-            -Dsonar.projectName=YDIOY
-            -Dsonar.sourceEncoding=UTF-8
-            -Dsonar.sources=src,tests
-            -Dsonar.inclusions=src/**/*.ts,src/**/*.js,src/**/*.vue,src/**/*.css,src/**/*.scss,tests/**/*.spec.ts
-            -Dsonar.exclusions=**/node_modules/**,**/coverage/**,*.config.ts
-            -Dsonar.coverage.exclusions=tests/**,*.config.ts
-            -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
-            -Dsonar.testExecutionReportPaths=coverage/sonar-report.xml
-
-      - name: Check SonarCloud Quality Gate
-        uses: sonarsource/sonarqube-quality-gate-action@master
-        timeout-minutes: 5
-        env:
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-
-      - name: Upload test results
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: test-results
-          path: |
-            coverage/

CODE_OF_CONDUCT.md

@@ -0,0 +1,9 @@
+# Community Guidelines for Conduct.
+
+We follow this guidelines for conduct in all collaborative spaces, such as mailing lists, submitted patches, commit comments:
+
+- All communication is done using English language.
+- Participants are expected to be tolerant of opposing views.
+- Participants must ensure that their language and actions are free from personal attacks and disparaging remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behavior that could reasonably be considered harassment will not be tolerated.

CONTRIBUTING.md

@@ -0,0 +1,9 @@
+# Contributing To "Your Data Is Only Yours"
+
+## Steps
+
+- Fork repository
+- Add your contribution
+- Open pull request
+
+Thanks! :heart: :heart: :heart:

README.md

@@ -2,9 +2,12 @@
 
 Your Data Is Only Yours
 
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=xliviux_ydioy&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=xliviux_ydioy)
-[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=xliviux_ydioy&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=xliviux_ydioy)
-[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=xliviux_ydioy&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=xliviux_ydioy)
-[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=xliviux_ydioy&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=xliviux_ydioy)
-[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=xliviux_ydioy&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=xliviux_ydioy)
-
+[![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)

eslint.config.ts

@@ -1,6 +1,7 @@
 import eslint from "@eslint/js";
 import eslintConfigPrettier from "eslint-config-prettier";
 import eslintPluginVue from "eslint-plugin-vue";
+import jsonc from "eslint-plugin-jsonc";
 import globals from "globals";
 import typescriptEslint from "typescript-eslint";
 
@@ -24,7 +25,12 @@ export default typescriptEslint.config(
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
     },
   },
+  {
+    files: ["**/*.json"],
+    extends: [...jsonc.configs["flat/recommended-with-json"]],
+  },
   eslintConfigPrettier
 );

package.json

@@ -15,8 +15,8 @@
     "coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "lint": "eslint \"**/*.{vue,ts}\"",
-    "lint-files": "eslint --ext .js,.ts,.vue"
+    "lint": "eslint \"**/*.{js,json,ts,vue}\"",
+    "lint-files": "eslint --ext .js,.json,.ts,.vue"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
@@ -27,26 +27,28 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.16.5",
+    "@types/node": "^24.10.1",
     "@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",
     "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,11 +1,11 @@
-sonar.projectKey=xliviux_ydioy
-sonar.organization=xliviux
+sonar.projectKey=lburcusel_ydioy
+sonar.organization=lburcusel
 sonar.projectName=YDIOY
-sonar.projectVersion=1.0.0-1
+sonar.projectVersion=1.0.0
 sonar.sourceEncoding=UTF-8
 sonar.sources=src, tests
 sonar.inclusions=src/**/*.ts, src/**/*.js, src/**/*.vue, src/**/*.css, src/**/*.scss, tests/**/*.spec.ts
 sonar.exclusions=**/node_modules/**, **/coverage/**, *.config.ts
 sonar.coverage.exclusions=tests/**, *.config.ts
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.testExecutionReportPaths=coverage/sonar-report.xml
+# sonar.testExecutionReportPaths=coverage/sonar-report.xml

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,6 +21,11 @@ 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>

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,34 +1,36 @@
-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({
+    wrapper = mount(
+      {
         template: `
         <v-app>
           <v-layout>
@@ -36,74 +38,94 @@ describe("HeaderNavBar", () => {
           </v-layout>
         </v-app>
       `,
-		}, {
+      },
+      {
         global: {
           components: {
             HeaderNavBar,
           },
-        plugins: [router, vuetify]
+          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(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(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(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" });
@@ -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(() => ({
+    vi.mocked(createApp).mockImplementation(
+      () =>
+        ({
           use: vi.fn(),
           mount: vi.fn(),
-    } as any));
+        }) 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,13 +1,28 @@
-
 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();
   });
 
+  describe("General", () => {
+    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("creates a router instance", () => {
       expect(router).toBeDefined();
       expect(router).toHaveProperty("currentRoute");
@@ -15,99 +30,6 @@ describe("Router Integration Tests", () => {
       expect(router).toHaveProperty("replace");
     });
 
-  it("has hash history mode", () => {
-    expect(router.options.history.base).toContain("#");
-  });
-
-  it("has 2 routes configured", () => {
-    const routes = router.getRoutes();
-    expect(routes).toHaveLength(2);
-  });
-
-  it("has home route at root path", () => {
-    const routes = router.getRoutes();
-    const homeRoute = routes.find(route => route.path === "/");
-
-    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);
     });
@@ -165,4 +87,55 @@ describe("Router Integration Tests", () => {
         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.app.json

@@ -24,7 +24,7 @@
 
     "paths": {
       "~/*": ["./src/*"],
-      "@/*": ["./src/*"],
+      "@/*": ["./src/*"]
+    }
   }
-  },
 }

tsconfig.json

@@ -14,7 +14,7 @@
   "compilerOptions": {
     "paths": {
       "~/*": ["./src/*"],
-      "@/*": ["./src/*"],
-    },
-  },
+      "@/*": ["./src/*"]
+    }
+  }
 }

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"],
+    "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(
         },
       },
     },
-  }),
+  })
 );