#716 | [TASK]: Refactor Multiplayer & Typing Logic

package.json

@@ -9,7 +9,9 @@
     "dev:db": "npm run db --workspace @code-racer/app",
     "dev:wss": "cross-env PORT=3001 npm run dev --workspace @code-racer/wss",
     "deploy:wss": "source packages/wss/.env && fly deploy --build-arg DATABASE_URL=$DATABASE_URL --config packages/wss/fly.toml --dockerfile packages/wss/Dockerfile",
-    "pr:precheck": "npm run lint -w @code-racer/app && npm run type-check -w @code-racer/app && npm run build -w @code-racer/app"
+    "pr:precheck": "npm run lint -w @code-racer/app && npm run type-check -w @code-racer/app && npm run build -w @code-racer/app",
+    "format:write": "echo 'Formatting app' && npm run format:write --workspace @code-racer/app && echo 'Formatting server...' && npm run format:write --workspace @code-racer/wss",
+    "e2e:app": "npm run e2e --workspace @code-racer/app"
   },
   "repository": {
     "type": "git",

packages/app/.eslintrc.json

@@ -15,7 +15,7 @@
     "quotes": ["error", "double", { "allowTemplateLiterals": true }],
     "react/react-in-jsx-scope": "off",
     "jsx-a11y/anchor-is-valid": "off",
-    "no-unused-vars": "warn",
+    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
     "@typescript-eslint/no-empty-interface": "warn",
     "@typescript-eslint/no-explicit-any": "warn",
 

packages/app/cypress.config.ts

@@ -10,4 +10,11 @@ export default defineConfig({
     baseUrl: "http://localhost:3000",
     scrollBehavior: "center",
   },
+
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
 });

packages/app/cypress/component/TestComponentName.cy.tsx

@@ -1,5 +1,5 @@
 describe("ComponentName.cy.tsx", () => {
   it("playground", () => {
     // cy.mount()
-  })
-})
+  });
+});

packages/app/cypress/e2e/business-layer/raceBL.ts

@@ -1,35 +1,34 @@
 import { RacePage } from "../page-objects/pages/RacePage";
 export class RaceBL {
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    public static runTypingRace(spans: any): RacePage{
-        const NEW_LINE = "⏎\n";
-        let code = "";
-        let isIndentWhiteSpace = false;
-        for (let i = 0; i < spans.length; i++) {
-            const char = spans[i].innerText;
-            if (char !== " " && isIndentWhiteSpace) {
-            // Encounter non-whitespace character when isIndentWhiteSpace=true
-            // Unset isIndentWhiteSpace back to false
-            isIndentWhiteSpace = false;
-            }
-            if (char === " " && isIndentWhiteSpace) {
-            continue;
-            }
-            code += char === NEW_LINE ? "\n" : char;
-            if (char === NEW_LINE) {
-            // When we encounter new line, the following whitespace up to
-            // encounting non-whitespace character will be considered indent whitespace.
-            // Since our app auto indent, we don't type it
-            isIndentWhiteSpace = true;
-            }
-        }
-        cy.get("[data-cy=\"race-practice-input\"]").type(code, {
-            force: true,
-            parseSpecialCharSequences: false,
-            delay: 30,
-            waitForAnimations: true,
-        });
-        return new RacePage();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public static runTypingRace(spans: Array<HTMLSpanElement>): RacePage {
+    const NEW_LINE = "⏎\n";
+    let code = "";
+    let isIndentWhiteSpace = false;
+    for (let i = 0; i < spans.length; ++i) {
+      const char = spans[i].innerText;
+      if (char !== " " && isIndentWhiteSpace) {
+        // Encounter non-whitespace character when isIndentWhiteSpace=true
+        // Unset isIndentWhiteSpace back to false
+        isIndentWhiteSpace = false;
+      }
+      if (char === " " && isIndentWhiteSpace) {
+        continue;
+      }
+      code += char === NEW_LINE ? "\n" : char;
+      if (char === NEW_LINE) {
+        // When we encounter new line, the following whitespace up to
+        // encounting non-whitespace character will be considered indent whitespace.
+        // Since our app auto indent, we don't type it
+        isIndentWhiteSpace = true;
+      }
     }
-}
+    cy.get("[data-cy='race-practice-input']").type(code, {
+      force: true,
+      parseSpecialCharSequences: false,
+      delay: 30,
+      waitForAnimations: true,
+    });
+    return new RacePage();
+  }
+}

packages/app/cypress/e2e/page-objects/components/NavbarComponent.ts

@@ -1,14 +1,9 @@
-import { siteConfig } from "../../../../src/config/site";
-const headerLinks = siteConfig.getHeaderLinks(false);
 export class NavbarComponent {
+  race(): Cypress.Chainable {
+    return cy.get("[data-cy='Race-main-nav-link']");
+  }
 
-  race(): Cypress.Chainable{ return cy.get(`[data-cy="${
-    headerLinks.find((e) => e.title.includes("Race"))?.title ?? "Race"
-    }-main-nav-link"]`,
-  )}
-
-  leaderboard(): Cypress.Chainable{ return cy.get(`[data-cy="${
-    headerLinks.find((e) => e.title.includes("Leaderboard"))?.title ?? "Leaderboard"
-    }-main-nav-link"]`,
-  )}
-}
+  leaderboard(): Cypress.Chainable {
+    return cy.get("[data-cy='Leaderboard-main-nav-link']");
+  }
+}

packages/app/cypress/e2e/page-objects/pages/ContributorsPage.ts

@@ -1,11 +1,20 @@
-export class ContributorsPage{
+export class ContributorsPage {
+  contributorCard(): Cypress.Chainable {
+    return cy.get('[data-cy="contributor-card"]');
+  }
+  contributorName(): Cypress.Chainable {
+    return cy.get('[data-cy="contributor-name"]');
+  }
+  commitDisplay(): Cypress.Chainable {
+    return cy.get('[data-cy="github-commit-display"]');
+  }
+  commitLink(): Cypress.Chainable {
+    return cy.get('[data-cy="github-commit-link"]');
+  }
 
-    contributorCard(): Cypress.Chainable{ return cy.get("[data-cy=\"contributor-card\"]") }
-    contributorName(): Cypress.Chainable{ return cy.get("[data-cy=\"contributor-name\"]") }
-    commitDisplay(): Cypress.Chainable{ return cy.get("[data-cy=\"github-commit-display\"]") }
-    commitLink(): Cypress.Chainable{ return cy.get("[data-cy=\"github-commit-link\"]") }
-
-    public contributorCardText(contributorCard: Cypress.Chainable): Cypress.Chainable{
-        return contributorCard.find("[data-cy=\"contributor-name\"]").invoke("text")
-    }
-}
+  public contributorCardText(
+    contributorCard: Cypress.Chainable
+  ): Cypress.Chainable {
+    return contributorCard.find('[data-cy="contributor-name"]').invoke("text");
+  }
+}

packages/app/cypress/e2e/page-objects/pages/LeaderboardPage.ts

@@ -1,8 +1,15 @@
-export class LeaderboardPage{
+export class LeaderboardPage {
+  userRow(): Cypress.Chainable {
+    return cy.get(".table-row");
+  }
+  user(): Cypress.Chainable {
+    return cy.get(".flex.items-center.gap-2");
+  }
+  rowDropdown(): Cypress.Chainable {
+    return cy.get('[role="combobox"]');
+  }
 
-    userRow(): Cypress.Chainable{ return cy.get(".table-row") }
-    user(): Cypress.Chainable{ return cy.get(".flex.items-center.gap-2") }
-    rowDropdown(): Cypress.Chainable{ return cy.get("[role=\"combobox\"]") }
-
-    rowDropdownElement(): Cypress.Chainable{ return cy.get("[role=\"option\"]") }
-}
+  rowDropdownElement(): Cypress.Chainable {
+    return cy.get('[role="option"]');
+  }
+}

packages/app/cypress/e2e/page-objects/pages/RacePage.ts

@@ -1,6 +1,8 @@
 export class RacePage {
   practiceCardLanguageDropdown(): Cypress.Chainable {
-    return cy.get("[data-cy='practice-card'] [data-cy='language-dropdown']");
+    return cy.get(
+      "[data-cy='practice-card'] [data-cy='language-dropdown'] [data-cy='search-language-input']"
+    );
   }
   cppLanguageOption(): Cypress.Chainable {
     return cy.get("[data-cy='c++-value']");