Cypress test with auth initial

app/routes/links.tsx

@@ -0,0 +1,3 @@
+export default function LinksPage() {
+  return <div>links page</div>;
+}

app/routes/to/$organization.$tournament.tsx

@@ -42,10 +42,10 @@ export const loader: LoaderFunction = ({ params, context }) => {
 };
 
 export const meta: MetaFunction = (props) => {
-  const data = props.data as FindTournamentByNameForUrlI;
+  const data = props.data as FindTournamentByNameForUrlI | undefined;
 
   return {
-    title: makeTitle(data.name),
+    title: makeTitle(data?.name),
     //description: data.description ?? undefined,
   };
 };
@@ -218,7 +218,11 @@ function InfoBannerActionButton() {
   }
 
   return (
-    <Link to="register" className="info-banner__action-button">
+    <Link
+      to="register"
+      className="info-banner__action-button"
+      data-cy="register-button"
+    >
       Register
     </Link>
   );

app/routes/to/$organization.$tournament/register.tsx

@@ -134,6 +134,7 @@ export default function RegisterPage() {
               required
               minLength={TEAM_NAME_MIN_LENGTH}
               maxLength={TEAM_NAME_MAX_LENGTH}
+              data-cy="team-name-input"
             />
             <ErrorMessage errorMsg={actionData?.fieldErrors?.teamName} />
             <div className="tournament__register__buttons-container">
@@ -146,7 +147,7 @@ export default function RegisterPage() {
               >
                 Cancel
               </button>
-              <button type="submit">
+              <button type="submit" data-cy="register-submit-button">
                 {transition.state === "idle" ? "Submit" : "Submitting..."}
               </button>
             </div>

app/utils/index.ts

@@ -1,6 +1,7 @@
 import { json, useMatches } from "remix";
 
-export const makeTitle = (endOfTitle: string) => `sendou.ink | ${endOfTitle}`;
+export const makeTitle = (endOfTitle?: string) =>
+  endOfTitle ? `sendou.ink | ${endOfTitle}` : "sendou.ink";
 
 /** Get logged in user from context. Throws with 401 error if no user found. */
 export const requireUser = (ctx: any) => {

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/tournament.spec.ts

@@ -0,0 +1,24 @@
+describe("Before tournament starts", () => {
+  before(() => {
+    cy.seed();
+    cy.intercept(
+      "GET",
+      "/to/sendou/in-the-zone-x/register?_data=routes%2Fto%2F%24organization.%24tournament"
+    ).as("tournaments");
+  });
+
+  it("Registers a new team", () => {
+    cy.logIn("sendou");
+    cy.visit("/to/sendou/in-the-zone-x");
+    cy.title().should("include", "In The Zone X");
+    cy.getCy("register-button").click();
+    cy.getCy("team-name-input").type("Anaheim");
+    cy.getCy("register-submit-button").click();
+    cy.contains("Team name already taken");
+
+    cy.wait("@tournaments");
+    cy.getCy("team-name-input").clear().type("Team Olive");
+    cy.getCy("register-submit-button").click();
+    cy.url().should("include", "manage-roster");
+  });
+});

cypress/support/index.ts

@@ -1,10 +1,14 @@
 export {};
 
+type MockUser = "sendou";
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable<Subject> {
       getCy(id: string): Chainable<JQuery<HTMLElement>>;
+      seed(): void;
+      logIn(user: MockUser): void;
     }
   }
 }
@@ -12,3 +16,21 @@ declare global {
 Cypress.Commands.add("getCy", (value: string) => {
   return cy.get(`[data-cy=${value}]`);
 });
+
+Cypress.Commands.add("seed", () => {
+  cy.exec("npm run seed:reset");
+});
+
+Cypress.Commands.add("logIn", (user: MockUser) => {
+  const mockUsers = {
+    sendou: {
+      id: 1,
+      discordId: "79237403620945920",
+      discordAvatar: "fcfd65a3bea598905abb9ca25296816b",
+    },
+  } as const;
+
+  cy.intercept("*", (req) => {
+    req.headers["mock-auth"] = JSON.stringify(mockUsers[user]);
+  });
+});

package.json

@@ -50,6 +50,7 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "concurrently": "^6.4.0",
+    "cypress": "^9.1.0",
     "faker": "^5.5.3",
     "prisma": "^3.5.0",
     "stylelint": "^14.1.0",

prisma/seed.ts

@@ -3,22 +3,37 @@ import { stages as stagesList } from "../app/constants";
 const prisma = new PrismaClient();
 import faker from "faker";
 
-faker.seed(5800);
+const FAKER_SEED = 5800;
 
 const randomOneDigitNumber = (includeZero?: boolean) =>
   faker.datatype.number(10) + (includeZero ? 0 : 1);
 
 async function main() {
+  faker.seed(FAKER_SEED);
   const userCreated = await user();
+
+  faker.seed(FAKER_SEED);
   await users();
+
+  faker.seed(FAKER_SEED);
   const organization = await organizations(userCreated.id);
+
+  faker.seed(FAKER_SEED);
   const tournament = await tournaments(organization.id);
+
+  faker.seed(FAKER_SEED);
   const usersCreated = await prisma.user.findMany({});
+
+  faker.seed(FAKER_SEED);
   await tournamentTeams(
     tournament.id,
     usersCreated.map((u) => u.id)
   );
+
+  faker.seed(FAKER_SEED);
   await stages();
+
+  faker.seed(FAKER_SEED);
   await tournamentAddMaps(tournament.id);
 }
 

server/index.ts

@@ -26,6 +26,14 @@ try {
 }
 
 function userToContext(req: Express.Request) {
+  if (process.env.NODE_ENV === "development") {
+    // @ts-expect-error
+    const mockedUser = req.headers["mock-auth"];
+    if (mockedUser) {
+      console.log(mockedUser);
+      return { user: JSON.parse(mockedUser) };
+    }
+  }
   return { user: req.user };
 }
 

tsconfig.json

@@ -8,6 +8,7 @@
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
+    "types": ["cypress"],
     "paths": {
       "~/*": ["./app/*"]
     },