Enhance testing setup with Docker integration and Vitest configuration

- Added testing instructions to README.md for Docker usage.
- Updated package.json to include new test and coverage scripts for containerized testing.
- Modified test files to utilize environment variables for API host configuration.
- Introduced vite-env.d.ts to define environment variables for TypeScript.
- Created run_test_container.mjs to manage test execution in Docker.
- Updated Dockerfile.test and docker-compose.yml for test service configuration.
- Added entrypoint script for test container setup.
- Refactored CI scripts to use Docker for backend services.

Author: Oksamies

README.md

@@ -150,6 +150,25 @@ running:
 docker compose -f docker-compose.build.yml build
 ```
 
+## Testing (Docker)
+
+Frontend tests run in Vitest browser mode (Playwright). To keep the environment consistent, use the dedicated test runner compose file instead of the dev container.
+
+Prereqs:
+- Ensure `./build-secrets/.npmrc` exists (same requirement as Docker builds).
+
+Run tests:
+
+```bash
+yarn test:container
+```
+
+Run coverage:
+
+```bash
+yarn coverage:container
+```
+
 ## pre-commit
 
 [Pre-commit](https://pre-commit.com/) enforces code style practices in this

package.json

@@ -12,7 +12,9 @@
     "plop": "plop",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "test:container": "node tools/scripts/run_test_container.mjs test",
+    "coverage:container": "node tools/scripts/run_test_container.mjs coverage"
   },
   "engines": {
     "node": ">=20.17.0"

packages/dapper-ts/src/__tests__/index.test.ts

@@ -9,7 +9,11 @@ let dapper: DapperTs;
 
 beforeAll(() => {
   dapper = new DapperTs(() => {
-    return { apiHost: "http://127.0.0.1:8000" };
+    return {
+      apiHost:
+        import.meta.env.VITE_THUNDERSTORE_TEST_API_HOST ??
+        "http://127.0.0.1:8000",
+    };
   });
 });
 

packages/dapper-ts/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+interface ImportMeta {
+  readonly env: {
+    readonly VITE_THUNDERSTORE_TEST_API_HOST?: string;
+    readonly [key: string]: string | undefined;
+  };
+}

packages/dapper-ts/tsconfig.json

@@ -23,7 +23,7 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "jsx": "react-jsx",
-    "types": ["@vitest/browser/providers/playwright"]
+    "types": ["vite/client", "@vitest/browser/providers/playwright"]
   },
   "include": ["./src/**/*.tsx", "./src/**/*.ts"],
   "exclude": ["node_modules"]

packages/thunderstore-api/src/__tests__/defaultConfig.ts

@@ -1,6 +1,8 @@
 export const config = () => {
   return {
-    apiHost: "http://127.0.0.1:8000",
+    apiHost:
+      import.meta.env.VITE_THUNDERSTORE_TEST_API_HOST ??
+      "http://127.0.0.1:8000",
   };
 };
 

packages/thunderstore-api/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+interface ImportMeta {
+  readonly env: {
+    readonly VITE_THUNDERSTORE_TEST_API_HOST?: string;
+    readonly [key: string]: string | undefined;
+  };
+}

packages/thunderstore-api/tsconfig.json

@@ -23,7 +23,7 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "jsx": "react-jsx",
-    "types": ["@vitest/browser/providers/playwright"]
+    "types": ["vite/client", "@vitest/browser/providers/playwright"]
   },
   "include": ["./src/**/*.tsx", "./src/**/*.ts"],
   "exclude": ["node_modules"]

tools/scripts/run_test_container.mjs

@@ -0,0 +1,209 @@
+import { spawn } from "node:child_process";
+import process from "node:process";
+
+function usage(exitCode = 1) {
+  // Keep this short: it shows up in CI logs.
+  console.error(
+    "Usage: node tools/scripts/run_test_container.mjs <test|coverage> [-- <vitest args...>]"
+  );
+  process.exit(exitCode);
+}
+
+function spawnLogged(command, args, options = {}) {
+  const printable = [command, ...args].join(" ");
+  console.log(printable);
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: "inherit",
+      shell: false,
+      ...options,
+    });
+
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        const err = new Error(`${printable} failed with exit code ${code}`);
+        err.exitCode = code;
+        reject(err);
+      }
+    });
+  });
+}
+
+async function waitForUrl(url, { timeoutMs = 120_000, pollMs = 1_000 } = {}) {
+  const deadline = Date.now() + timeoutMs;
+
+  // Node 24 has global fetch.
+  while (Date.now() < deadline) {
+    try {
+      const abortController = new AbortController();
+      const timeout = setTimeout(() => abortController.abort(), 3000);
+      const response = await fetch(url, {
+        signal: abortController.signal,
+        // The backend may redirect to host.docker.internal (needed for browser-in-container),
+        // but that hostname isn't guaranteed to resolve on the host. Don't follow redirects.
+        redirect: "manual",
+      });
+      clearTimeout(timeout);
+
+      // Treat any successful/redirect response as "up".
+      if (response.status >= 200 && response.status < 400) {
+        return;
+      }
+    } catch {
+      // ignore until timeout
+    }
+
+    const remainingSeconds = Math.max(
+      0,
+      Math.round((deadline - Date.now()) / 1000)
+    );
+    console.log(`Waiting for ${url} (${remainingSeconds}s remaining)`);
+    await new Promise((r) => setTimeout(r, pollMs));
+  }
+
+  throw new Error(`Timed out waiting for ${url}`);
+}
+
+async function waitForDjangoInContainer(
+  composeFile,
+  { timeoutMs = 120_000, pollMs = 1_000 } = {}
+) {
+  const deadline = Date.now() + timeoutMs;
+
+  const pythonCheck =
+    "import http.client, sys; " +
+    "c=http.client.HTTPConnection('127.0.0.1',8000,timeout=2); " +
+    "c.request('GET','/'); " +
+    "r=c.getresponse(); " +
+    "sys.exit(0 if 200 <= r.status < 400 else 1)";
+
+  while (Date.now() < deadline) {
+    try {
+      await spawnLogged(
+        "docker",
+        [
+          "compose",
+          "-f",
+          composeFile,
+          "exec",
+          "-T",
+          "django",
+          "python",
+          "-c",
+          pythonCheck,
+        ],
+        {
+          env: process.env,
+          stdio: "ignore",
+        }
+      );
+      return;
+    } catch {
+      // ignore until timeout
+    }
+
+    const remainingSeconds = Math.max(
+      0,
+      Math.round((deadline - Date.now()) / 1000)
+    );
+    console.log(
+      `Waiting for django to be ready inside container (${remainingSeconds}s remaining)`
+    );
+    await new Promise((r) => setTimeout(r, pollMs));
+  }
+
+  throw new Error("Timed out waiting for django to be ready inside container");
+}
+
+function parseArgs(argv) {
+  const [subcommand, ...rest] = argv;
+  if (!subcommand || subcommand === "-h" || subcommand === "--help") {
+    usage(0);
+  }
+
+  if (subcommand !== "test" && subcommand !== "coverage") {
+    console.error(`Unknown subcommand: ${subcommand}`);
+    usage(1);
+  }
+
+  const dashDashIndex = rest.indexOf("--");
+  // Yarn v1 forwards args without requiring `--`. Accept both forms:
+  //   yarn test:container path/to/test
+  //   yarn test:container -- path/to/test
+  const vitestArgs =
+    dashDashIndex === -1 ? rest : rest.slice(dashDashIndex + 1);
+
+  return { subcommand, vitestArgs };
+}
+
+async function main() {
+  const { subcommand, vitestArgs } = parseArgs(process.argv.slice(2));
+
+  const backendComposeFile =
+    "tools/thunderstore-test-backend/docker-compose.yml";
+
+  try {
+    // Start backend in the background.
+    await spawnLogged(
+      "docker",
+      [
+        "compose",
+        "-f",
+        backendComposeFile,
+        "up",
+        "-d",
+        "--remove-orphans",
+        "--build",
+        // Only start backend dependencies; the same compose file also contains
+        // the test runner services.
+        "db",
+        "redis",
+        "rabbitmq",
+        "minio",
+        "django",
+      ],
+      { env: process.env }
+    );
+
+    // Wait until it's actually serving traffic (cold starts can take a while).
+    // We probe from inside the container network so we don't depend on any
+    // published host port and we implicitly wait for the setup commands in
+    // run_test_backend.py to finish.
+    await waitForDjangoInContainer(backendComposeFile, { timeoutMs: 300_000 });
+
+    const command = subcommand === "test" ? "test" : "coverage";
+
+    const args = [
+      "compose",
+      "-f",
+      backendComposeFile,
+      "run",
+      "--rm",
+      "--build",
+      "cyberstorm-tests",
+      "yarn",
+      command,
+      ...vitestArgs,
+    ];
+
+    await spawnLogged("docker", args, { env: process.env });
+  } finally {
+    // Always tear down the test backend so it doesn't conflict with dev.
+    await spawnLogged(
+      "docker",
+      ["compose", "-f", backendComposeFile, "down", "--remove-orphans"],
+      { env: process.env }
+    ).catch(() => {
+      // Best-effort cleanup.
+    });
+  }
+}
+
+main().catch((err) => {
+  console.error(err?.stack || String(err));
+  process.exit(typeof err?.exitCode === "number" ? err.exitCode : 1);
+});

tools/test-ci/run_ci_script.py

@@ -112,12 +112,26 @@ def poll_backend() -> bool:
 
 
 def start_backend() -> bool:
-    run_command("docker compose up -d", cwd=BACKEND_DIR)
+    run_command(
+        [
+            "docker",
+            "compose",
+            "up",
+            "-d",
+            "--remove-orphans",
+            "db",
+            "redis",
+            "rabbitmq",
+            "minio",
+            "django",
+        ],
+        cwd=BACKEND_DIR,
+    )
     return wait_for_url("http://127.0.0.1:8000/")
 
 
 def stop_backend():
-    run_command("docker compose down", cwd=BACKEND_DIR)
+    run_command(["docker", "compose", "down", "--remove-orphans"], cwd=BACKEND_DIR)
 
 
 def run_tests():