Setting page (#5)
* 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
This commit is contained in:
Liviu Burcusel
GitHub
parent
304d5188b8
commit
a3177f0dd7
9 changed files with 234 additions and 206 deletions
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue