From 8910613676aa65507c6ed4569f1e105f76b551cf Mon Sep 17 00:00:00 2001
From: Liviu Burcusel <x.liviu@gmail.com>
Date: Tue, 16 Sep 2025 14:26:10 +0200
Subject: [PATCH] Moved the footer into self contained component

---
 src/App.vue                              | 17 ++------
 src/components/FooterComponent.vue       | 11 +++++
 tests/components/FooterComponent.spec.ts | 51 ++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 src/components/FooterComponent.vue
 create mode 100644 tests/components/FooterComponent.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 9feede6..c8c4bfb 100644
--- a/src/App.vue
+++ b/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">
-            <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>
+        <FooterComponent />
     </v-app>
 </template>
 
 <style lang="scss" scoped>
 .fill-height {
-    min-height: calc(100vh - 180px);
+    min-height: calc(100vh - 160px);
 }
 </style>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
new file mode 100644
index 0000000..e94ae00
--- /dev/null
+++ b/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>
diff --git a/tests/components/FooterComponent.spec.ts b/tests/components/FooterComponent.spec.ts
new file mode 100644
index 0000000..affc224
--- /dev/null
+++ b/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());
+  });
+
+});