Merge pull request #60 from gentlementlegen/fix/cypress

.env.example

@@ -1,4 +1,2 @@
 SUPABASE_URL=
 SUPABASE_ANON_KEY=
-UBIQUIBOT_GITHUB_USERNAME=
-UBIQUIBOT_GITHUB_PASSWORD=

.github/workflows/cypress-testing.yml

@@ -1,7 +1,7 @@
 name: Run Cypress testing suite
 on:
   workflow_dispatch:
-  push:
+  pull_request:
 
 jobs:
   cypress-run:
@@ -18,10 +18,9 @@ jobs:
           build: yarn run build
           start: yarn start
         env:
+          NODE_ENV: "test"
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          UBIQUIBOT_GITHUB_USERNAME: ${{ secrets.UBIQUIBOT_GITHUB_USERNAME }}
-          UBIQUIBOT_GITHUB_PASSWORD: ${{ secrets.UBIQUIBOT_GITHUB_PASSWORD }}
           # Values are set because the code requires them, but they are not actually used.
           SUPABASE_URL: "https://wfzpewmlyiozupulbuur.supabase.co"
           SUPABASE_ANON_KEY: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndmenBld21seWlvenVwdWxidXVyIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTU2NzQzMzksImV4cCI6MjAxMTI1MDMzOX0.SKIL3Q0NOBaMehH0ekFspwgcu3afp3Dl9EDzPqs1nKs"

build/esbuild-build.ts

@@ -28,6 +28,7 @@ export const esBuildContext: esbuild.BuildOptions = {
   define: createEnvDefines(["SUPABASE_URL", "SUPABASE_ANON_KEY"], {
     SUPABASE_STORAGE_KEY: generateSupabaseStorageKey(),
     commitHash: execSync(`git rev-parse --short HEAD`).toString().trim(),
+    NODE_ENV: process.env.NODE_ENV || "development",
   }),
 };
 

cypress.config.ts

@@ -11,21 +11,6 @@ export default defineConfig({
   },
   viewportHeight: 900,
   viewportWidth: 1440,
-  env: readEnvironmentVariables(),
   watchForFileChanges: false,
   video: true,
 });
-
-function readEnvironmentVariables() {
-  const UBIQUIBOT_GITHUB_USERNAME = process.env["UBIQUIBOT_GITHUB_USERNAME"];
-  const UBIQUIBOT_GITHUB_PASSWORD = process.env["UBIQUIBOT_GITHUB_PASSWORD"];
-
-  if (!UBIQUIBOT_GITHUB_USERNAME) {
-    throw new Error("Please provide `UBIQUIBOT_GITHUB_USERNAME` environment variable");
-  }
-
-  if (!UBIQUIBOT_GITHUB_PASSWORD) {
-    throw new Error("Please provide `UBIQUIBOT_GITHUB_PASSWORD` environment variable");
-  }
-  return { UBIQUIBOT_GITHUB_USERNAME, UBIQUIBOT_GITHUB_PASSWORD };
-}

cypress/e2e/devpool.cy.ts

@@ -1,8 +1,10 @@
 import { RestEndpointMethodTypes } from "@octokit/rest";
+import { Session } from "@supabase/supabase-js";
 
 describe("DevPool", () => {
   let issue1: RestEndpointMethodTypes["issues"]["get"]["response"]["data"];
   let issue2: RestEndpointMethodTypes["issues"]["get"]["response"]["data"];
+  let githubUser: Session["user"];
 
   before(() => {
     cy.fixture("issue-1.json").then((content) => {
@@ -11,6 +13,9 @@ describe("DevPool", () => {
     cy.fixture("issue-2.json").then((content) => {
       issue2 = content;
     });
+    cy.fixture("user-github.json").then((content) => {
+      githubUser = content;
+    });
   });
 
   beforeEach(() => {
@@ -28,6 +33,11 @@ describe("DevPool", () => {
         body: issue1,
       });
     }).as("orgs");
+    cy.intercept("https://api.github.com/user/memberships/orgs/*", (req) => {
+      req.reply({
+        statusCode: 404,
+      });
+    }).as("membership");
   });
 
   it("Main page displays issues", () => {
@@ -118,7 +128,7 @@ describe("DevPool", () => {
     it("Should display retry timeframe with no tasks loaded and a logged in user", () => {
       cy.intercept("https://api.github.com/user", {
         statusCode: 200,
-        body: { login: "mockUser" },
+        body: githubUser,
       }).as("getUser");
 
       cy.visit("/");
@@ -175,36 +185,45 @@ describe("DevPool", () => {
   });
 
   it("User can log in", () => {
+    cy.intercept("https://api.github.com/user**", (req) => {
+      req.reply({
+        statusCode: 404,
+      });
+    }).as("getUser");
     cy.intercept("https://api.github.com/repos/*/*/issues**", (req) => {
       req.reply({
         statusCode: 200,
         body: [issue1, issue2],
       });
     }).as("getIssues");
+    cy.intercept("https://github.com/login**", (req) => {
+      req.reply({
+        statusCode: 200,
+      });
+      // Simulates the token set in the storage
+      window.localStorage.setItem(
+        "sb-wfzpewmlyiozupulbuur-auth-token",
+        JSON.stringify({
+          provider_token: "token",
+          access_token: "token",
+          token_type: "bearer",
+          user: githubUser,
+        })
+      );
+    }).as("githubPage");
     cy.visit("/");
     // Check that there is no text field visible for sorting
     cy.get("#filter").should("not.be.visible");
     cy.get("#github-login-button").click();
-    cy.origin("https://github.com/login", () => {
-      const username = Cypress.env("UBIQUIBOT_GITHUB_USERNAME");
-      const password = Cypress.env("UBIQUIBOT_GITHUB_PASSWORD");
-
-      cy.get("#login_field").type(username);
-      cy.get("#password").type(password, { parseSpecialCharSequences: false });
-      cy.get(".position-relative > .btn").click();
-      // This part of the test can sometimes fail if the endpoint for OAuth is hit too many times, asking the user to
-      // authorize the app again. It should not happen in a normal testing scenario since it's only hit once, but more
-      // commonly happens in local testing where the test can be run many times in a row. Uncomment this part to add
-      // the authorization of the app again.
-
-      // cy.get('button[data-octo-click="oauth_application_authorization"]').then(($button) => {
-      //   if ($button.is(":visible")) {
-      //     cy.wrap($button).click();
-      //   } else {
-      //     cy.log('"Authorize" button is not visible');
-      //   }
-      // });
-    });
+    // Change the interception because now we are supposed to be logged in
+    cy.intercept("https://api.github.com/user**", (req) => {
+      req.reply({
+        statusCode: 200,
+        body: githubUser,
+      });
+    }).as("getUser");
+    // Simulates the redirection after a successful login
+    cy.visit("/");
     cy.get("#authenticated").should("exist");
     cy.get("#filter").should("be.visible");
   });
@@ -215,14 +234,22 @@ describe("DevPool", () => {
         statusCode: 500,
         body: "Internal Server Error",
       }).as("getPublicIssues");
+      // Expect the error to be thrown
+      cy.once("uncaught:exception", () => false);
+      cy.intercept("https://api.github.com/user**", (req) => {
+        req.reply({
+          statusCode: 200,
+          body: githubUser,
+        });
+      }).as("getUser");
 
       cy.visit("/");
 
       cy.wait("@getPublicIssues");
 
       cy.get(".preview-header").should("be.visible");
-      cy.get(".preview-header").should("contain", "Something went wrong");
-      cy.get(".preview-body-inner").should("contain", "HttpError: Internal Server Error");
+      cy.get(".preview-header").should("contain", "HttpError");
+      cy.get(".preview-body-inner").should("contain", "Internal Server Error");
     });
   });
 });

package.json

@@ -41,7 +41,7 @@
     "@types/node": "^20.10.0",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
-    "cypress": "13.7.0",
+    "cypress": "13.11.0",
     "esbuild": "^0.19.8",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",

src/home/fetch-github/fetch-issues-preview.ts

@@ -3,7 +3,6 @@ import { Octokit } from "@octokit/rest";
 import { getGitHubAccessToken, getGitHubUserName } from "../getters/get-github-access-token";
 import { GitHubIssue } from "../github-types";
 import { displayPopupMessage } from "../rendering/display-popup-modal";
-import { gitHubLoginButton } from "../rendering/render-github-login-button";
 import { handleRateLimit } from "./handle-rate-limit";
 import { TaskNoFull } from "./preview-to-full-mapping";
 
@@ -65,16 +64,10 @@ export async function fetchIssuePreviews(): Promise<TaskNoFull[]> {
       freshIssues = publicIssues;
     }
   } catch (error) {
-    if (error instanceof RequestError && error.status === 403) {
-      await handleRateLimit(octokit, error);
+    if (!!error && typeof error === "object" && "status" in error && error.status === 403) {
+      await handleRateLimit(octokit, error as RequestError);
     } else {
-      // renderErrorInModal(error as Error, "You have been rate limited. Please login to increase your limits."); // @DEV: user another method to render the modal not as an error
-      displayPopupMessage({
-        modalHeader: "GitHub API rate limit exceeded.",
-        modalBody: "You have been rate limited. Please login to increase your limits.",
-        isError: false,
-      });
-      gitHubLoginButton?.classList.add("highlight");
+      throw error;
     }
   }
 

src/home/getters/get-github-user.ts

@@ -41,8 +41,8 @@ async function getNewGitHubUser(providerToken: string | null): Promise<GitHubUse
     const response = (await octokit.request("GET /user")) as GitHubUserResponse;
     return response.data;
   } catch (error) {
-    if (error instanceof RequestError && error.status === 403) {
-      await handleRateLimit(providerToken ? octokit : undefined, error);
+    if (!!error && typeof error === "object" && "status" in error && error.status === 403) {
+      await handleRateLimit(providerToken ? octokit : undefined, error as RequestError);
     }
     console.warn("You have been logged out. Please login again.", error);
   }

src/home/rendering/render-github-login-button.ts

@@ -4,6 +4,7 @@ import { renderErrorInModal } from "./display-popup-modal";
 
 declare const SUPABASE_URL: string; // @DEV: passed in at build time check build/esbuild-build.ts
 declare const SUPABASE_ANON_KEY: string; // @DEV: passed in at build time check build/esbuild-build.ts
+declare const NODE_ENV: string; // @DEV: passed in at build time check build/esbuild-build.ts
 
 const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
@@ -12,6 +13,13 @@ export function getSupabase() {
 }
 
 export async function checkSupabaseSession() {
+  // In testing mode, we directly read the storage since we cannot use Supabase for auth operations
+  if (NODE_ENV === "test") {
+    const stored = localStorage.getItem("sb-wfzpewmlyiozupulbuur-auth-token");
+    if (!stored) return null;
+    return JSON.parse(stored);
+  }
+
   const {
     data: { session },
   } = await supabase.auth.getSession();

static/style/inverted-style.css

@@ -688,4 +688,9 @@
     align-items: center;
     margin-right: 8px;
   }
+  .github-avatar-default {
+    width: 48px;
+    height: 48px;
+    background-color: #808080;
+  }
 }

yarn.lock

@@ -1541,10 +1541,10 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-cypress@13.7.0:
-  version "13.7.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.7.0.tgz#19e53c0bd6eca5e3bde0d6ac9e98fbf1782e3a9e"
-  integrity sha512-UimjRSJJYdTlvkChcdcfywKJ6tUYuwYuk/n1uMMglrvi+ZthNhoRYcxnWgTqUtkl17fXrPAsD5XT2rcQYN1xKA==
+cypress@13.11.0:
+  version "13.11.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.11.0.tgz#17097366390424cba5db6bf0ee5e97503f036e07"
+  integrity sha512-NXXogbAxVlVje4XHX+Cx5eMFZv4Dho/2rIcdBHg9CNPFUGZdM4cRdgIgM7USmNYsC12XY0bZENEQ+KBk72fl+A==
   dependencies:
     "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"
@@ -4325,7 +4325,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4400,7 +4409,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4880,7 +4896,7 @@ which@^4.0.0:
   dependencies:
     isexe "^3.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -4898,6 +4914,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"