Moved the footer into self contained component

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterView } from "vue-router";
 import HeaderNavBar from "./components/HeaderNavBar.vue";
+import FooterComponent from "./components/FooterComponent.vue";
 </script>
 
 <template>
@@ -13,24 +14,12 @@ import HeaderNavBar from "./components/HeaderNavBar.vue";
             </v-container>
         </v-main>
 
-        <v-footer class="d-flex flex-column">
+        <FooterComponent />
-            <div class="d-flex w-100 align-left px-4 py-2">
-                Dexie.js - A Minimalistic Wrapper for IndexedDB
-            </div>
-            <v-divider thickness="2" width="100%"></v-divider>
-            <div class="px-4 py-2 align-left w-100">
-                &copy; 2014-2024
-                <a href="https://dexie.org/" target="_blank" rel="noopener">
-                    <v-btn variant="outlined" color="primary">Dexie.js</v-btn>
-                </a>
-                is the creation of David Fahlander and managed by Awarica AB.
-            </div>
-        </v-footer>
     </v-app>
 </template>
 
 <style lang="scss" scoped>
 .fill-height {
-    min-height: calc(100vh - 180px);
+    min-height: calc(100vh - 160px);
 }
 </style>

src/components/FooterComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-footer class="d-flex flex-column">
+    <div class="d-flex w-100 align-left px-4 py-2">
+      YDIOY - Your Data Is Only Yours
+    </div>
+    <v-divider thickness="2" width="100%"></v-divider>
+    <div class="px-4 py-2 align-left w-100">
+      &copy; 2025
+    </div>
+</v-footer>
+</template>

tests/components/FooterComponent.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import FooterComponent from "../../src/components/FooterComponent.vue";
+
+global.ResizeObserver = require('resize-observer-polyfill');
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("FooterComponent", () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = mount({
+      template: `
+        <v-app>
+          <v-layout>
+            <FooterComponent />
+          </v-layout>
+        </v-app>
+      `,
+    }, {
+      global: {
+        components: {
+          FooterComponent,
+        },
+        plugins: [vuetify]
+      }
+    })
+  });
+
+  it("renders the component", () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findComponent({ name: "VFooter" }).exists()).toBe(true);
+  });
+
+  it("has the correct content", () => {
+    expect(wrapper.findComponent({ name: "VFooter" }).findAll("div")).toHaveLength(2);
+    expect(wrapper.findComponent({ name: "VDivider"}).exists()).toBe(true);
+  });
+
+  it("contains current year", () => {
+    expect(wrapper.text()).toContain(new Date().getFullYear());
+  });
+
+});