Add vitest, add json validation tests, fix broken json files (#566)

frontend/src/__tests__/app/page.test.tsx

@@ -0,0 +1,11 @@
+import { screen } from "@testing-library/dom";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import Page from "@/app/page";
+
+describe("Page", () => {
+  it("should show button to view scripts", () => {
+    render(<Page />);
+    expect(screen.getByRole("button", { name: "View Scripts" })).toBeDefined();
+  });
+});

frontend/src/__tests__/public/validate-json.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, assert, beforeAll } from "vitest";
+import { promises as fs } from "fs";
+import path from "path";
+import { ScriptSchema, type Script } from "@/app/json-editor/_schemas/schemas";
+import { Metadata } from "@/lib/types";
+
+const jsonDir = "public/json";
+const metadataFileName = "metadata.json";
+const encoding = "utf-8";
+
+const fileNames = (await fs.readdir(jsonDir))
+  .filter((fileName) => fileName !== metadataFileName)
+
+describe.each(fileNames)("%s", async (fileName) => {
+  let script: Script;
+
+  beforeAll(async () => {
+    const filePath =  path.resolve(jsonDir, fileName);
+    const fileContent = await fs.readFile(filePath, encoding)
+    script = JSON.parse(fileContent);
+  })
+
+  it("should have valid json according to script schema", () => {
+    ScriptSchema.parse(script);
+  });
+
+  it("should have a corresponding script file", () => {
+    script.install_methods.forEach((method) => {
+      const scriptPath = path.resolve("..", method.script)
+      assert(fs.stat(scriptPath), `Script file not found: ${scriptPath}`)
+    })
+  });
+})
+
+describe(`${metadataFileName}`, async () => {
+  let metadata: Metadata;
+
+  beforeAll(async () => {
+    const filePath =  path.resolve(jsonDir, metadataFileName);
+    const fileContent = await fs.readFile(filePath, encoding)
+    metadata = JSON.parse(fileContent);
+  })
+
+  it("should have valid json according to metadata schema", () => {
+    // TODO: create zod schema for metadata. Move zod schemas to /lib/types.ts
+    assert(metadata.categories.length > 0);
+    metadata.categories.forEach((category) => {
+        assert.isString(category.name)
+        assert.isNumber(category.id)
+        assert.isNumber(category.sort_order)
+    });
+  });
+})

frontend/src/__tests__/setupTests.ts

@@ -0,0 +1,4 @@
+import { vi } from "vitest";
+
+// Mock canvas getContext
+HTMLCanvasElement.prototype.getContext = vi.fn();