layout setup

agdb_studio/e2e/vue.spec.ts

@@ -4,5 +4,5 @@ import { test, expect } from "@playwright/test";
 // https://playwright.dev/docs/intro
 test("visits the app root url", async ({ page }) => {
     await page.goto("/");
-    await expect(page.locator("div.greetings > h1")).toHaveText("Main layout");
+    await expect(page.locator("div.greetings > h1")).toHaveText("Hello agdb");
 });

agdb_studio/package.json

@@ -12,7 +12,8 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint --max-warnings=0 . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/ e2e/",
-    "format:check": "prettier --check src/ e2e/"
+    "format:check": "prettier --check src/ e2e/",
+    "before-commit": "npm run format && npm run lint && npm run test:unit && npm run test:e2e"
   },
   "dependencies": {
     "pinia": "^2.1.7",

agdb_studio/src/App.vue

@@ -1,82 +1,9 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
-    <header>
-        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-        <div class="wrapper">
-            <nav>
-                <RouterLink to="/">Home</RouterLink>
-                <RouterLink to="/about">About</RouterLink>
-            </nav>
-        </div>
-    </header>
-
     <RouterView />
 </template>
 
-<style scoped>
-header {
-    line-height: 1.5;
-    max-height: 100vh;
-}
-
-.logo {
-    display: block;
-    margin: 0 auto 2rem;
-}
-
-nav {
-    width: 100%;
-    font-size: 12px;
-    text-align: center;
-    margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-    color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-    background-color: transparent;
-}
-
-nav a {
-    display: inline-block;
-    padding: 0 1rem;
-    border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-    border: 0;
-}
-
-@media (min-width: 1024px) {
-    header {
-        display: flex;
-        place-items: center;
-        padding-right: calc(var(--section-gap) / 2);
-    }
-
-    .logo {
-        margin: 0 2rem 0 0;
-    }
-
-    header .wrapper {
-        display: flex;
-        place-items: flex-start;
-        flex-wrap: wrap;
-    }
-
-    nav {
-        text-align: left;
-        margin-left: -1rem;
-        font-size: 1rem;
-
-        padding: 1rem 0;
-        margin-top: 1rem;
-    }
-}
-</style>
+<style scoped></style>

agdb_studio/src/layouts/MainLayout.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+<template>
+    <div>
+        <header>
+            <img alt="agdb logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+
+            <div class="wrapper">
+                <nav>
+                    <RouterLink to="/">Home</RouterLink>
+                    <RouterLink to="/about">About</RouterLink>
+                </nav>
+            </div>
+        </header>
+        <main>
+            <RouterView />
+        </main>
+        <footer></footer>
+    </div>
+</template>
+
+<style lang="css" scoped>
+header {
+    line-height: 1.5;
+    max-height: 100vh;
+}
+
+.logo {
+    display: block;
+    margin: 0 auto 2rem;
+}
+
+nav {
+    width: 100%;
+    font-size: 12px;
+    text-align: center;
+    margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+    color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+    background-color: transparent;
+}
+
+nav a {
+    display: inline-block;
+    padding: 0 1rem;
+    border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+    border: 0;
+}
+
+@media (min-width: 1024px) {
+    header {
+        display: flex;
+        place-items: center;
+        padding-right: calc(var(--section-gap) / 2);
+    }
+
+    .logo {
+        margin: 0 2rem 0 0;
+    }
+
+    header .wrapper {
+        display: flex;
+        place-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    nav {
+        text-align: left;
+        margin-left: -1rem;
+        font-size: 1rem;
+
+        padding: 1rem 0;
+        margin-top: 1rem;
+    }
+}
+</style>

agdb_studio/src/router/index.ts

@@ -1,29 +1,35 @@
 import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue";
-import LoginView from "@/views/LoginView.vue";
+import MainLayout from "@/layouts/MainLayout.vue";
+
+const routes = [
+    {
+        path: "/login",
+        name: "login",
+        component: () => import("@/views/LoginView.vue"),
+    },
+    {
+        path: "",
+        component: MainLayout,
+        children: [
+            {
+                path: "",
+                name: "home",
+                component: () => import("@/views/HomeView.vue"),
+            },
+            {
+                path: "/about",
+                name: "about",
+                component: () => import("@/views/AboutView.vue"),
+            },
+        ],
+    },
+];
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    routes: [
-        {
-            path: "/",
-            name: "home",
-            component: HomeView,
-        },
-        {
-            path: "/about",
-            name: "about",
-            // route level code-splitting
-            // this generates a separate chunk (About.[hash].js) for this route
-            // which is lazy-loaded when the route is visited.
-            component: () => import("../views/AboutView.vue"),
-        },
-        {
-            path: "/login",
-            name: "login",
-            component: LoginView,
-        },
-    ],
+    routes,
 });
 
+export { routes };
+
 export default router;

agdb_studio/src/components/__tests__/auth/LoginForm.spec.ts → agdb_studio/src/test/components/auth/LoginForm.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
-import LoginForm from "../../auth/LoginForm.vue";
+import LoginForm from "@/components/auth/LoginForm.vue";
 
 describe("LoginForm", () => {
     it("renders properly", () => {
@@ -10,5 +10,8 @@ describe("LoginForm", () => {
         // Check if both fields exists
         expect(wrapper.find('input[type="text"]#username').exists()).toBeTruthy();
         expect(wrapper.find('input[type="password"]#password').exists()).toBeTruthy();
+
+        // submit button is rendered
+        expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy();
     });
 });

agdb_studio/src/test/layouts/MainLayout.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import MainLayout from "@/layouts/MainLayout.vue";
+import { createRouter, createWebHistory } from "vue-router";
+
+const routes = [
+    { path: "/", name: "home", component: { template: "<div>Home</div>" } },
+    { path: "/about", name: "about", component: { template: "<div>About</div>" } },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+describe("MainLayout", () => {
+    it("renders navigation links", () => {
+        const wrapper = mount(MainLayout, {
+            global: {
+                plugins: [router],
+            },
+        });
+
+        const links = wrapper.findAllComponents({ name: "RouterLink" });
+        expect(links.length).toBeGreaterThan(1);
+
+        // home page link exists
+        expect(links.find((link) => link.props("to") === "/")?.text()).toContain("Home");
+
+        // about page link exists
+        expect(links.find((link) => link.props("to") === "/about")?.text()).toContain("About");
+    });
+
+    it("renders the router view", async () => {
+        const wrapper = mount(MainLayout, {
+            global: {
+                plugins: [router],
+            },
+        });
+
+        await router.push("/about");
+        await router.isReady();
+
+        expect(wrapper.text()).toContain("About");
+    });
+});

agdb_studio/src/test/router/router.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createRouter, createWebHistory } from "vue-router";
+import { mount } from "@vue/test-utils";
+import { routes } from "@/router";
+import type { Router } from "vue-router";
+import HomeView from "@/views/HomeView.vue";
+import AboutView from "@/views/HomeView.vue";
+import App from "@/App.vue";
+
+let router: Router | undefined;
+
+describe("router", () => {
+    beforeEach(async () => {
+        router = createRouter({
+            history: createWebHistory(),
+            routes,
+        });
+
+        router.push("/");
+        await router.isReady();
+    });
+
+    it("renders a default route", async () => {
+        if (!router) {
+            return;
+        }
+
+        const wrapper = mount(App, {
+            global: {
+                plugins: [router],
+                mocks: {
+                    $route: { path: "/" },
+                },
+            },
+        });
+
+        expect(wrapper.findComponent(HomeView).exists()).toBe(true);
+    });
+
+    it("renders the about route", async () => {
+        if (!router) {
+            return;
+        }
+
+        const wrapper = mount(App, {
+            global: {
+                plugins: [router],
+                mocks: {
+                    $route: { path: "/about" },
+                },
+            },
+        });
+
+        expect(wrapper.findComponent(AboutView).exists()).toBe(true);
+    });
+});

agdb_studio/src/views/HomeView.vue

@@ -1,9 +1,5 @@
-<script setup lang="ts">
-import MainLayout from "../components/layout/MainLayout.vue";
-</script>
+<script setup lang="ts"></script>
 
 <template>
-    <main>
-        <MainLayout />
-    </main>
+    <div class="greetings"><h1>Hello agdb</h1></div>
 </template>