E2E testing

.env.production

@@ -3,4 +3,6 @@
 NEXT_PUBLIC_API_URL=/api/
 NEXT_PUBLIC_SLACK_CLIENT_ID=10831824934.7404945710466
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-1BFJYBDC76
-NEXT_PUBLIC_RECAPTCHA_KEY=6Le63OUqAAAAABxxDrbaU9OywDLLHqutVwbw7a9d
+NEXT_PUBLIC_RECAPTCHA_KEY=6Le63OUqAAAAABxxDrbaU9OywDLLHqutVwbw7a9d
+
+ENV_FILE=.env.production

.env.test

@@ -1,9 +1,20 @@
-NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXTAUTH_URL=http://localhost:3000/
+NEXTAUTH_SECRET=testsecret
+
+NEXT_PUBLIC_API_URL=/api/
 
 DEVELOPER_EMAILS=["test@gmail.com"]
 
 TOA_URL=https://example.com
 TOA_APP_ID=123
 TOA_KEY=456
 
-DEFAULT_IMAGE=https://example.com/default.jpg
+DEFAULT_IMAGE=https://example.com/default.jpg
+
+BASE_URL_FOR_PLAYWRIGHT=http://localhost:3000/
+ENABLE_TEST_SIGNIN_ROUTE=true
+FALLBACK_MONGODB_URI=mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000
+
+ENV_FILE=.env.test
+
+DB=playwright_tests

.github/workflows/ci.yml

@@ -66,3 +66,9 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+  e2e_test:
+    uses: ./.github/workflows/e2e_test.yml
+    permissions:
+      contents: read
+      pull-requests: write

.github/workflows/e2e_test.yml

@@ -0,0 +1,71 @@
+name: Playwright Tests
+on: [workflow_dispatch, workflow_call]
+jobs:
+  e2e_tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # Make sure to require each shard in GitHub!
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.12.0
+        with:
+          mongodb-version: "8.0"
+
+      - name: Run Playwright tests
+        run: npx cross-env NODE_ENV=test playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
+
+  merge_reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ !cancelled() }}
+    needs: [e2e_tests]
+
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

.gitignore

@@ -41,4 +41,11 @@ next-env.d.ts
 
 # PWA
 public/sw.js
-public/swe-worker*
+public/swe-worker*
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -8,6 +8,7 @@
 		"pmneo.tsimporter",
 		"austenc.tailwind-docs",
 		"bradlc.vscode-tailwindcss",
-		"Orta.vscode-jest"
+		"Orta.vscode-jest",
+		"ms-playwright.playwright"
 	]
 }

environment.d.ts

@@ -56,6 +56,10 @@ declare global {
 
 			DEPLOY_ID: string;
 
+			BASE_URL_FOR_PLAYWRIGHT: string | undefined;
+			ENABLE_TEST_SIGNIN_ROUTE: string | undefined;
+			FALLBACK_MONGODB_URI: string | undefined;
+
 			NODE_ENV: "development" | "production";
 		}
 	}

index.ts

@@ -8,22 +8,26 @@ import {
 	createServer as createServerHttp,
 } from "http";
 import Logger from "./lib/client/Logger";
-import { configDotenv } from "dotenv";
-import getRollbar from "./lib/client/RollbarUtils";
-import reportDeploymentToRollbar from "./lib/reportDeploymentToRollbar";
+import { loadEnvConfig } from "@next/env";
+import getRollbar, {
+	reportDeploymentToRollbar,
+} from "./lib/client/RollbarUtils";
 
-configDotenv();
+const projectDir = process.cwd();
+loadEnvConfig(projectDir);
 
 const logger = new Logger(["STARTUP"]);
 
 logger.log("Starting server...");
 
-const dev = process.env.NODE_ENV !== "production";
+const mode = process.env.NODE_ENV;
 
-logger.debug("Constants set");
+logger.info("Constants set. Using mode:", mode);
 
 const useHttps =
-	existsSync("./certs/key.pem") && existsSync("./certs/cert.pem");
+	mode !== "test" &&
+	existsSync("./certs/key.pem") &&
+	existsSync("./certs/cert.pem");
 
 const httpsOptions = useHttps
 	? {
@@ -32,10 +36,14 @@ const httpsOptions = useHttps
 		}
 	: {};
 
-const port = useHttps ? 443 : 80;
+const port = useHttps ? 443 : mode == "test" ? 3000 : 80;
 logger.debug(`Using port ${port}`);
 
-const app = next({ dev, port });
+const app = next({
+	dev: mode == "development",
+	port,
+	turbopack: mode == "development",
+});
 const handle = app.getRequestHandler();
 
 logger.debug("App preparing...");

jest.config.ts

@@ -143,7 +143,7 @@ const config: Config = {
 	// runner: "jest-runner",
 
 	// The paths to modules that run some code to configure or set up the testing environment before each test
-	setupFiles: ["<rootDir>/lib/testutils/setup.ts"],
+	setupFiles: ["<rootDir>/lib/testutils/JestSetup.ts"],
 
 	// A list of paths to modules that run some code to configure or set up the testing framework before each test
 	// setupFilesAfterEnv: [],
@@ -164,10 +164,7 @@ const config: Config = {
 	// testLocationInResults: false,
 
 	// The glob patterns Jest uses to detect test files
-	// testMatch: [
-	//   "**/__tests__/**/*.[jt]s?(x)",
-	//   "**/?(*.)+(spec|test).[tj]s?(x)"
-	// ],
+	testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(test).[tj]s?(x)"],
 
 	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
 	// testPathIgnorePatterns: [

lib/MongoDB.ts

@@ -11,22 +11,29 @@ import { default as BaseMongoDbInterface } from "mongo-anywhere/MongoDbInterface
 import CachedDbInterface from "./client/dbinterfaces/CachedDbInterface";
 import { cacheOptions } from "./client/dbinterfaces/CachedDbInterface";
 import { findObjectBySlugLookUp } from "./slugToId";
+import { loadEnvConfig } from "@next/env";
 
-if (!process.env.MONGODB_URI) {
+let uri = process.env.MONGODB_URI ?? process.env.FALLBACK_MONGODB_URI;
+
+if (!uri) {
 	// Necessary to allow connections from files running outside of Next
-	require("dotenv").config();
+	const projectDir = process.cwd();
+	loadEnvConfig(projectDir);
+
+	uri = process.env.MONGODB_URI ?? process.env.FALLBACK_MONGODB_URI;
 
-	if (!process.env.MONGODB_URI)
-		console.error('Invalid/Missing environment variable: "MONGODB_URI"');
+	if (!uri)
+		console.warn(
+			'Invalid/Missing environment variables: "MONGODB_URI", "FALLBACK_MONGODB_URI". Using default connection string.',
+		);
 }
 
-const uri = process.env.MONGODB_URI ?? "mongodb://localhost:27017";
 const options: MongoClientOptions = { maxPoolSize: 3 };
 
 let client;
 let clientPromise: Promise<MongoClient>;
 
-if (!global.clientPromise) {
+if (uri && !global.clientPromise) {
 	client = new MongoClient(uri, options);
 	global.clientPromise = client.connect();
 }
@@ -37,21 +44,19 @@ export { clientPromise };
 export async function getDatabase(
 	useCache: boolean = true,
 ): Promise<DbInterface> {
-	if (!global.interface) {
-		await clientPromise;
+	if (global.interface) return global.interface; // Return the existing instance if already created
 
-		const mongo = new MongoDBInterface(clientPromise);
+	await clientPromise;
 
-		const dbInterface = useCache
-			? new CachedDbInterface(mongo, cacheOptions)
-			: mongo;
-		await dbInterface.init();
-		global.interface = dbInterface;
+	const mongo = new MongoDBInterface(clientPromise);
 
-		return dbInterface;
-	}
+	const dbInterface = useCache
+		? new CachedDbInterface(mongo, cacheOptions)
+		: mongo;
+	await dbInterface.init();
+	global.interface = dbInterface;
 
-	return global.interface;
+	return dbInterface;
 }
 
 export class MongoDBInterface

lib/ResendUtils.ts

@@ -11,10 +11,11 @@ export interface ResendInterface {
 }
 
 export class ResendUtils implements ResendInterface {
-	private static resend: Resend;
+	private static resend: Resend | undefined;
 
 	constructor() {
-		ResendUtils.resend ??= new Resend(process.env.SMTP_PASSWORD);
+		if (process.env.SMTP_PASSWORD)
+			ResendUtils.resend ??= new Resend(process.env.SMTP_PASSWORD);
 	}
 
 	async createContact(rawUser: NextAuthUser) {
@@ -31,15 +32,15 @@ export class ResendUtils implements ResendInterface {
 
 		const nameParts = user.name?.split(" ");
 
-		const res = await ResendUtils.resend.contacts.create({
+		const res = await ResendUtils.resend?.contacts.create({
 			email: user.email,
 			firstName: nameParts[0],
 			lastName: nameParts.length > 1 ? nameParts[1] : "",
 			unsubscribed: false,
 			audienceId: process.env.RESEND_AUDIENCE_ID,
 		});
 
-		if (!res.data?.id) {
+		if (!res?.data?.id) {
 			console.error("Failed to create contact for", user.email);
 			console.error(res);
 			return;
@@ -64,7 +65,7 @@ export class ResendUtils implements ResendInterface {
 			return;
 		}
 
-		ResendUtils.resend.emails.send({
+		ResendUtils.resend?.emails.send({
 			from: "Gearbox Server <server-no-reply@4026.org>",
 			to: JSON.parse(process.env.DEVELOPER_EMAILS), // Environment variables are always strings, so we need to parse it
 			subject,

lib/TheBlueAlliance.ts

@@ -155,6 +155,8 @@ export namespace TheBlueAlliance {
 		}
 
 		async request(suburl: string): Promise<any> {
+			if (!this.apiKey) return;
+
 			var res = await fetch(this.baseUrl + suburl, {
 				method: "GET",
 				headers: {
@@ -334,7 +336,7 @@ export namespace TheBlueAlliance {
 		async allCompetitionsToPairings(year: number) {
 			var allCompetitions = await this.req.getEvents(year);
 			var pairings: CompetitonNameIdPair[] = [];
-			allCompetitions.forEach((comp) => {
+			allCompetitions?.forEach((comp) => {
 				pairings.push({ name: comp.name, tbaId: comp.key });
 			});
 

lib/Types.ts

@@ -32,6 +32,9 @@ export interface Session extends NextAuthSession {
 	_id: string;
 	sessionToken: string;
 	userId: ObjectId;
+	/**
+	 * Should actually be a Date
+	 */
 	expires: string;
 }