fix: simplified mock oauth with mswjs

.env.example

@@ -1,3 +1,5 @@
+# APP_ENV=test # if you wish to use test mode (no real github oauth)
+
 NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_ID=
 FLAGSMITH_ENVIRONMENT_API_KEY=
 

README.md

@@ -70,6 +70,8 @@ How friendly is your GitHub Open Source Repo? This project will check to make su
 
    b. In your GitHub OAuth app, GitHub will generate the `client id` and `client secret`, add these to your the `.env` file
 
+   You can change the environment variable `APP_ENV` to the value of `test`, and this will mock out the OAuth.
+
 9. Run the project with one of these
 
    a. If you have Postgres installed, you can run the app locally `npm run dev` OR

package.json

@@ -13,7 +13,7 @@
     "lint": "set TRUNK_TELEMETRY=off && trunk check",
     "fmt": "set TRUNK_TELEMETRY=off && trunk fmt",
     "lint-old": "next lint",
-    "test": "npx playwright test",
+    "test": "npx playwright test --trace on",
     "prepare": "husky",
     "postinstall": "shx cp -n ./.env.example ./.env",
     "format:write": "prettier . --write",

playwright.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://127.0.0.1:3000",
+    baseURL: "http://localhost:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -71,8 +71,9 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "cross-env APP_ENV=test npm run dev",
-    url: "http://127.0.0.1:3000",
+    command:
+      "cross-env APP_ENV=test GITHUB_ID=aaa GITHUB_SECRET=bbb npm run dev",
+    url: "http://localhost:3000",
     reuseExistingServer: !process.env.CI,
   },
 });

src/app/api/auth/[...nextauth]/route.js

@@ -5,19 +5,24 @@ import { PrismaClient } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
+let githubProvierConfig = {
+  clientId: process.env.GITHUB_ID,
+  clientSecret: process.env.GITHUB_SECRET,
+  authorization: {
+    params: {
+      scope: "read:user user:email public_repo read:project",
+    },
+  },
+};
+
+if (process.env.NEXT_RUNTIME === "nodejs" && process.env.APP_ENV === "test") {
+  githubProvierConfig.authorization.url =
+    "http://localhost:3000/api/auth/callback/github?code=abcd";
+}
+
 const authOptions = {
   adapter: PrismaAdapter(prisma),
-  providers: [
-    GithubProvider({
-      clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET,
-      authorization: {
-        params: {
-          scope: "read:user user:email public_repo read:project",
-        },
-      },
-    }),
-  ],
+  providers: [GithubProvider(githubProvierConfig)],
   callbacks: {
     async session({ session, token, user }) {
       session.user.id = user.id;

src/instrumentation.js

@@ -1,6 +1,6 @@
 export async function register() {
   const unmocked = [
-    "localhost:3000",
+    "nextjs.org",
     "googleapis.com",
     "gstatic.com",
     "github.com/mona.png",

tests/account/repo/add.spec.ts

@@ -2,35 +2,36 @@ import { test, expect } from "@playwright/test";
 
 import { login, logout } from "../../setup/auth";
 
-test("Guest user cannot access add repo", async ({ browser }) => {
-  const page = await logout(browser);
+test("Guest user cannot access add repo", async ({ page }) => {
+  await logout(page);
   await page.goto("/account/repo/add");
-  await expect(page).toHaveURL(/\//);
+  await expect(page).toHaveURL("/");
 });
 
-test("Logged in user can access add repo", async ({ browser }) => {
-  const page = await login(browser);
+test("Logged in user can access add repo", async ({ page }) => {
+  await login(page);
+
   await page.goto("/account/repo/add");
   await expect(page).toHaveURL(/account\/repo\/add/);
 });
 
-test("Logged in user can see add user nav button", async ({ browser }) => {
-  const page = await login(browser);
+test("Logged in user can see add user nav button", async ({ page }) => {
+  await login(page);
   await page.goto("/");
   await page.getByRole("link", { name: "Add" }).click();
   await expect(page).toHaveURL(/account\/repo\/add/);
 });
 
-test("test url required", async ({ browser }) => {
-  const page = await login(browser);
+test("test url required", async ({ page }) => {
+  await login(page);
   await page.goto("/account/repo/add");
   await page.getByLabel("url").fill("abcdefg");
   await page.getByRole("button", { name: "SAVE" }).click();
   await expect(page.locator("#url-error")).toContainText("Invalid url");
 });
 
-test("test valid url navigates to the check list page", async ({ browser }) => {
-  const page = await login(browser);
+test("test valid url navigates to the check list page", async ({ page }) => {
+  await login(page);
   await page.goto("/account/repo/add");
 
   await page

tests/data/flagsmith/flags.json

@@ -1 +1,70 @@
-[]
+[
+  {
+    "id": 1,
+    "feature": {
+      "id": 1,
+      "name": "tagline",
+      "created_date": "2023-05-14T06:11:08.178802Z",
+      "description": null,
+      "initial_value": "How friendly is your Open Source Repo?",
+      "default_enabled": true,
+      "type": "STANDARD"
+    },
+    "feature_state_value": "How friendly is your Open Source Repo?",
+    "environment": 5242,
+    "identity": null,
+    "feature_segment": null,
+    "enabled": true
+  },
+  {
+    "id": 2,
+    "feature": {
+      "id": 2,
+      "name": "news",
+      "created_date": "2023-05-14T06:11:08.178802Z",
+      "description": null,
+      "initial_value": "Give our GitHub repo a Star",
+      "default_enabled": true,
+      "type": "STANDARD"
+    },
+    "feature_state_value": "Give our GitHub repo a Star",
+    "environment": 5242,
+    "identity": null,
+    "feature_segment": null,
+    "enabled": true
+  },
+  {
+    "id": 3,
+    "feature": {
+      "id": 3,
+      "name": "banner",
+      "created_date": "2023-05-14T06:11:08.178802Z",
+      "description": null,
+      "initial_value": "A big thank you to Flagsmith for sponsoring this Open Source project",
+      "default_enabled": true,
+      "type": "STANDARD"
+    },
+    "feature_state_value": "A big thank you to Flagsmith for sponsoring this Open Source project",
+    "environment": 5242,
+    "identity": null,
+    "feature_segment": null,
+    "enabled": true
+  },
+  {
+    "id": 4,
+    "feature": {
+      "id": 5,
+      "name": "repolimit",
+      "created_date": "2023-05-14T06:11:08.178802Z",
+      "description": null,
+      "initial_value": "8",
+      "default_enabled": true,
+      "type": "STANDARD"
+    },
+    "feature_state_value": 5,
+    "environment": 5242,
+    "identity": null,
+    "feature_segment": null,
+    "enabled": true
+  }
+]

tests/data/flagsmith/identities.json

@@ -1,4 +1,73 @@
 {
   "traits": [],
-  "flags": []
+  "flags": [
+    {
+      "id": 1,
+      "feature": {
+        "id": 1,
+        "name": "tagline",
+        "created_date": "2023-05-14T06:11:08.178802Z",
+        "description": null,
+        "initial_value": "How friendly is your Open Source Repo?",
+        "default_enabled": true,
+        "type": "STANDARD"
+      },
+      "feature_state_value": "How friendly is your Open Source Repo?",
+      "environment": 5242,
+      "identity": null,
+      "feature_segment": null,
+      "enabled": true
+    },
+    {
+      "id": 2,
+      "feature": {
+        "id": 2,
+        "name": "news",
+        "created_date": "2023-05-14T06:11:08.178802Z",
+        "description": null,
+        "initial_value": "Give our GitHub repo a Star",
+        "default_enabled": true,
+        "type": "STANDARD"
+      },
+      "feature_state_value": "Give our GitHub repo a Star",
+      "environment": 5242,
+      "identity": null,
+      "feature_segment": null,
+      "enabled": true
+    },
+    {
+      "id": 3,
+      "feature": {
+        "id": 3,
+        "name": "banner",
+        "created_date": "2023-05-14T06:11:08.178802Z",
+        "description": null,
+        "initial_value": "A big thank you to Flagsmith for sponsoring this Open Source project",
+        "default_enabled": true,
+        "type": "STANDARD"
+      },
+      "feature_state_value": "A big thank you to Flagsmith for sponsoring this Open Source project",
+      "environment": 5242,
+      "identity": null,
+      "feature_segment": null,
+      "enabled": true
+    },
+    {
+      "id": 4,
+      "feature": {
+        "id": 5,
+        "name": "repolimit",
+        "created_date": "2023-05-14T06:11:08.178802Z",
+        "description": null,
+        "initial_value": "8",
+        "default_enabled": true,
+        "type": "STANDARD"
+      },
+      "feature_state_value": 5,
+      "environment": 5242,
+      "identity": null,
+      "feature_segment": null,
+      "enabled": true
+    }
+  ]
 }

tests/data/github/access_token.json

@@ -0,0 +1,5 @@
+{
+  "access_token": "abcdefg",
+  "scope": "repo,gist",
+  "token_type": "bearer"
+}

tests/data/github/user.json

@@ -0,0 +1,46 @@
+{
+  "login": "mona",
+  "id": 1,
+  "node_id": "MDQ6VXNlcjE=",
+  "avatar_url": "https://github.com/mona.png",
+  "gravatar_id": "",
+  "url": "https://api.github.com/users/mona",
+  "html_url": "https://github.com/mona",
+  "followers_url": "https://api.github.com/users/mona/followers",
+  "following_url": "https://api.github.com/users/mona/following{/other_user}",
+  "gists_url": "https://api.github.com/users/mona/gists{/gist_id}",
+  "starred_url": "https://api.github.com/users/mona/starred{/owner}{/repo}",
+  "subscriptions_url": "https://api.github.com/users/mona/subscriptions",
+  "organizations_url": "https://api.github.com/users/mona/orgs",
+  "repos_url": "https://api.github.com/users/mona/repos",
+  "events_url": "https://api.github.com/users/mona/events{/privacy}",
+  "received_events_url": "https://api.github.com/users/mona/received_events",
+  "type": "User",
+  "site_admin": false,
+  "name": "monalisa octocat",
+  "company": "GitHub",
+  "blog": "https://github.com/blog",
+  "location": "San Francisco",
+  "email": "[email protected]",
+  "hireable": false,
+  "bio": "There once was...",
+  "twitter_username": "monatheoctocat",
+  "public_repos": 2,
+  "public_gists": 1,
+  "followers": 20,
+  "following": 0,
+  "created_at": "2008-01-14T04:33:35Z",
+  "updated_at": "2008-01-14T04:33:35Z",
+  "private_gists": 81,
+  "total_private_repos": 100,
+  "owned_private_repos": 100,
+  "disk_usage": 10000,
+  "collaborators": 8,
+  "two_factor_authentication": true,
+  "plan": {
+    "name": "Medium",
+    "space": 400,
+    "private_repos": 20,
+    "collaborators": 0
+  }
+}