chore: frontend testing setup (#1739)

* add vitest

* initialize lib w/ tests

* move to dev dep

* run tests in CI

* update file names

* move api folder to lib

* move api and api types to same folder

* update generator outpath

* rm husky

* i guess i _did_ need those types

* reorg types

* extract validators into testable components

* (WIP) start composable testing

* fix import type

* fix linter complaint

* simplify icon type def

* fix linter errors (maybe?)

* rename client file for sorting

frontend/lib/api/base/base-clients.ts

@@ -0,0 +1,53 @@
+import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
+
+export interface CrudAPIInterface {
+  requests: ApiRequestInstance;
+
+  // Route Properties / Methods
+  baseRoute: string;
+  itemRoute(itemId: string | number): string;
+
+  // Methods
+}
+
+export abstract class BaseAPI {
+  requests: ApiRequestInstance;
+
+  constructor(requests: ApiRequestInstance) {
+    this.requests = requests;
+  }
+}
+
+export abstract class BaseCRUDAPI<CreateType, ReadType, UpdateType = CreateType>
+  extends BaseAPI
+  implements CrudAPIInterface
+{
+  abstract baseRoute: string;
+  abstract itemRoute(itemId: string | number): string;
+
+  async getAll(page = 1, perPage = -1, params = {} as any) {
+    return await this.requests.get<PaginationData<ReadType>>(this.baseRoute, {
+      params: { page, perPage, ...params },
+    });
+  }
+
+  async createOne(payload: CreateType) {
+    return await this.requests.post<ReadType>(this.baseRoute, payload);
+  }
+
+  async getOne(itemId: string | number) {
+    return await this.requests.get<ReadType>(this.itemRoute(itemId));
+  }
+
+  async updateOne(itemId: string | number, payload: UpdateType) {
+    return await this.requests.put<ReadType, UpdateType>(this.itemRoute(itemId), payload);
+  }
+
+  async patchOne(itemId: string, payload: Partial<UpdateType>) {
+    return await this.requests.patch<ReadType, Partial<UpdateType>>(this.itemRoute(itemId), payload);
+  }
+
+  async deleteOne(itemId: string | number) {
+    return await this.requests.delete<ReadType>(this.itemRoute(itemId));
+  }
+}

frontend/lib/api/base/index.ts

@@ -0,0 +1 @@
+export { route } from "./route";

frontend/lib/api/base/route.ts

@@ -0,0 +1,38 @@
+const parts = {
+  host: "http://localhost.com",
+  prefix: "/api",
+};
+
+export function overrideParts(host: string, prefix: string) {
+  parts.host = host;
+  parts.prefix = prefix;
+}
+
+export type QueryValue = string | string[] | number | number[] | boolean | null | undefined;
+
+/**
+ * route is a the main URL builder for the API. It will use a predefined host and prefix (global)
+ * in the urls.ts file and then append the passed in path parameter uring the `URL` class from the
+ * browser. It will also append any query parameters passed in as the second parameter.
+ *
+ * The default host `http://localhost.com` is removed from the path if it is present. This allows us
+ * to bootstrap the API with different hosts as needed (like for testing) but still allows us to use
+ * relative URLs in production because the API and client bundle are served from the same server/host.
+ */
+export function route(rest: string, params: Record<string, QueryValue> | null = null): string {
+  const url = new URL(parts.prefix + rest, parts.host);
+
+  if (params) {
+    for (const [key, value] of Object.entries(params)) {
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          url.searchParams.append(key, String(item));
+        }
+      } else {
+        url.searchParams.append(key, String(value));
+      }
+    }
+  }
+
+  return url.toString().replace("http://localhost.com", "");
+}

frontend/lib/api/base/routes.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { route } from ".";
+
+describe("UrlBuilder", () => {
+  it("basic query parameter", () => {
+    const result = route("/test", { a: "b" });
+    expect(result).toBe("/api/test?a=b");
+  });
+
+  it("multiple query parameters", () => {
+    const result = route("/test", { a: "b", c: "d" });
+    expect(result).toBe("/api/test?a=b&c=d");
+  });
+
+  it("no query parameters", () => {
+    const result = route("/test");
+    expect(result).toBe("/api/test");
+  });
+
+  it("list-like query parameters", () => {
+    const result = route("/test", { a: ["b", "c"] });
+    expect(result).toBe("/api/test?a=b&a=c");
+  });
+});