cypress mock login

cypress.json

@@ -1,5 +1,4 @@
 {
   "baseUrl": "http://localhost:3000",
-  "fixturesFolder": false,
   "pluginsFile": false
 }

cypress/fixtures/user.nzap.json

@@ -0,0 +1,9 @@
+{
+  "id": 12,
+  "username": "NZAP",
+  "discriminator": "6227",
+  "discordId": "455039198672453645",
+  "discordAvatar": "f809176af93132c3db5f0a5019e96339",
+  "iat": 1614241069,
+  "exp": 1616833069
+}

cypress/fixtures/user.sendou.json

@@ -0,0 +1,9 @@
+{
+  "id": 11,
+  "username": "Sendou",
+  "discriminator": "4059",
+  "discordId": "79237403620945920",
+  "discordAvatar": "1e0968214a6ea74aebce4bbd699d6aae",
+  "iat": 1614241069,
+  "exp": 1616833069
+}

cypress/integration/plus.spec.ts

@@ -1,10 +1,7 @@
 /// <reference types="cypress" />
+/// <reference path="../support/index.d.ts" />
 
-context("Actions", () => {
-  // beforeEach(() => {
-  //   cy.visit('/plus/history')
-  // })
-
+context("Plus Voting History", () => {
   it("show 404 if invalid route ([[...slug]])", () => {
     cy.visit("/plus/history/asd", { failOnStatusCode: false });
     cy.contains("Not Found");
@@ -13,7 +10,14 @@ context("Actions", () => {
     cy.contains("Not Found");
   });
 
-  it("correctly calculates voting percentage", () => {
-    getPercentageFromCounts;
-  });
+  it("correctly calculates voting percentage", () => {});
+});
+
+context("Plus Home Page", () => {
+  beforeEach(() => {
+    cy.login("sendou");
+    cy.visit("/plus");
+  });
+
+  it.only("correctly calculates voting percentage", () => {});
 });

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.d.ts

@@ -0,0 +1,18 @@
+// in cypress/support/index.d.ts
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-cy attribute.
+     * @example cy.dataCy('greeting')
+     */
+    dataCy(value: string): Chainable<Element>;
+    /**
+     * Mock login
+     * @example cy.login('sendou')
+     */
+    login(user: "sendou" | "nzap"): Chainable<Element>;
+  }
+}

cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

cypress/support/index.ts

@@ -0,0 +1,13 @@
+Cypress.Commands.add("dataCy", (value: string) => {
+  return cy.get(`[data-cy=${value}]`);
+});
+
+Cypress.Commands.add("login", (user: "sendou" | "nzap") => {
+  return cy.fixture(`user.${user}`).then((u) => {
+    const d = new Date();
+    u.iat = Math.floor(d.setHours(-168) / 1000);
+    u.exp = Math.floor(d.setHours(336) / 1000);
+    cy.setCookie("mockUser", JSON.stringify(u));
+    cy.intercept("/api/auth/session", u);
+  });
+});

lib/api.ts

@@ -2,6 +2,14 @@ import { User } from "@prisma/client";
 import { NextApiRequest } from "next";
 import { getSession } from "next-auth/client";
 
-export const getMySession = (req: NextApiRequest): Promise<User | null> =>
+export const getMySession = (req: NextApiRequest): Promise<User | null> => {
+  if (
+    process.env.NODE_ENV === "development" &&
+    req.headers.cookie?.includes("mockUser=")
+  ) {
+    return JSON.parse(req.headers.cookie.replace("mockUser=", ""));
+  }
+
   // @ts-expect-error
-  getSession({ req });
+  return getSession({ req });
+};

package.json

@@ -16,7 +16,9 @@
     "compile": "lingui compile",
     "restore": "pg_restore -d 'postgresql://sendou@localhost:5432/postgres' --jobs 4 dumped.sql --clean",
     "seed": "prisma db seed --preview-feature",
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "cy:clearcache": "cypress cache clear",
+    "cy:install": "cypress install"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.5",

prisma/mocks/plus.ts

@@ -53,6 +53,16 @@ export const getPlusStatusesData = (): Prisma.PlusStatusCreateManyInput[] => {
       userId: 10,
       region: "NA",
     },
+    {
+      userId: 11,
+      region: "EU",
+      membershipTier: 1,
+    },
+    {
+      userId: 12,
+      region: "EU",
+      membershipTier: 2,
+    },
   ];
 };
 
@@ -62,7 +72,7 @@ export const getPlusSuggestionsData = (): Prisma.PlusSuggestionCreateManyInput[]
       description: "yooo so cracked",
       region: "NA",
       tier: 2,
-      suggestedId: 10,
+      suggestedId: 11,
       suggesterId: 1,
     },
   ];

prisma/mocks/user.ts

@@ -2,20 +2,27 @@ import { Prisma } from "@prisma/client";
 
 export const getUsersData = (): Prisma.UserCreateManyInput[] => {
   return [
+    ...new Array(10).fill(null).map((_, i) => ({
+      id: i + 1,
+      discordId: padWithZero(i, 17),
+      discriminator: padWithZero(i, 4),
+      username: `User${i + 1}`,
+    })),
     {
-      id: 1,
+      id: 11,
       discordId: "79237403620945920",
       username: "Sendou",
       discriminator: "4059",
       patreonTier: 1,
       discordAvatar: "1e0968214a6ea74aebce4bbd699d6aae",
     },
-    ...new Array(9).fill(null).map((_, i) => ({
-      id: i + 2,
-      discordId: padWithZero(i, 17),
-      discriminator: padWithZero(i, 4),
-      username: `User${i + 2}`,
-    })),
+    {
+      id: 12,
+      discordId: "455039198672453645",
+      username: "NZAP",
+      discriminator: "6227",
+      discordAvatar: "f809176af93132c3db5f0a5019e96339",
+    },
   ];
 };