chore: update RWA to make running locally easier (#1524)

* chore: fix typings issues from yarn start when starting the backend dev server

* reseed data as test shouldnt fail for new users

* fix aws exports not failing RWA if missing

* use @cypress/vite-dev-server to use different port from app so users can go between e2e and ct at the same time

* fix types

* run prettier

* fix unit tests

* fix linting issue by breaking chainable up

Author: AtofStryker

backend/app.ts

@@ -44,7 +44,7 @@ const schemaWithResolvers = addResolversToSchema({
 const app = express();
 
 /* istanbul ignore next */
-// @ts-ignore
+// @ts-expect-error
 if (global.__coverage__) {
   require("@cypress/code-coverage/middleware/express")(app);
 }
@@ -55,16 +55,19 @@ app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 
 app.use(
+  // @ts-expect-error
   session({
     secret: "session secret",
     resave: false,
     saveUninitialized: false,
     unset: "destroy",
   })
 );
+// @ts-expect-error
 app.use(passport.initialize());
 app.use(passport.session());
 
+// @ts-expect-error
 app.use(paginate.middleware(+process.env.PAGINATION_PAGE_SIZE!));
 
 /* istanbul ignore next */

backend/auth.ts

@@ -48,7 +48,7 @@ router.post("/login", passport.authenticate("local"), (req: Request, res: Respon
 
 router.post("/logout", (req: Request, res: Response): void => {
   res.clearCookie("connect.sid");
-  req.logout();
+  req.logout(() => res.redirect("/"));
   req.session!.destroy(function (err) {
     res.redirect("/");
   });

backend/transaction-routes.ts

@@ -40,8 +40,8 @@ router.get(
     const transactions = getTransactionsForUserForApi(req.user?.id!, req.query);
 
     const { totalPages, data: paginatedItems } = getPaginatedItems(
-      req.query.page,
-      req.query.limit,
+      req.query.page as unknown as number,
+      req.query.limit as unknown as number,
       transactions
     );
 
@@ -72,8 +72,8 @@ router.get(
     const transactions = getTransactionsForUserContacts(req.user?.id!, req.query);
 
     const { totalPages, data: paginatedItems } = getPaginatedItems(
-      req.query.page,
-      req.query.limit,
+      req.query.page as unknown as number,
+      req.query.limit as unknown as number,
       transactions
     );
 
@@ -96,7 +96,7 @@ router.get(
   ensureAuthenticated,
   validateMiddleware(isTransactionPublicQSValidator),
   (req, res) => {
-    const isFirstPage = req.query.page === 1;
+    const isFirstPage = (req.query.page as unknown as number) === 1;
 
     /* istanbul ignore next */
     let transactions = !isEmpty(req.query)
@@ -115,8 +115,8 @@ router.get(
     }
 
     const { totalPages, data: paginatedItems } = getPaginatedItems(
-      req.query.page,
-      req.query.limit,
+      req.query.page as unknown as number,
+      req.query.limit as unknown as number,
       isFirstPage ? publicTransactionsWithContacts : publicTransactions
     );
 

backend/user-routes.ts

@@ -33,7 +33,7 @@ router.get("/search", ensureAuthenticated, validateMiddleware([searchValidation]
   const { q } = req.query;
 
   /* istanbul ignore next */
-  const users = removeUserFromResults(req.user?.id!, searchUsers(q));
+  const users = removeUserFromResults(req.user?.id!, searchUsers(q as string));
 
   res.status(200).json({ results: users });
 });

cypress.config.ts

@@ -4,12 +4,20 @@ import axios from "axios";
 import dotenv from "dotenv";
 import Promise from "bluebird";
 import codeCoverageTask from "@cypress/code-coverage/task";
+import { devServer } from "@cypress/vite-dev-server";
 import { defineConfig } from "cypress";
+import { mergeConfig, loadEnv } from "vite";
 
 dotenv.config({ path: ".env.local" });
 dotenv.config();
 
-const awsConfig = require(path.join(__dirname, "./aws-exports-es5.js"));
+let awsConfig = {
+  default: undefined,
+};
+
+try {
+  awsConfig = require(path.join(__dirname, "./aws-exports-es5.js"));
+} catch (e) {}
 
 module.exports = defineConfig({
   projectId: "7s5okt",
@@ -52,9 +60,28 @@ module.exports = defineConfig({
     googleClientSecret: process.env.VITE_GOOGLE_CLIENT_SECRET,
   },
   component: {
-    devServer: {
-      framework: "react",
-      bundler: "vite",
+    devServer(devServerConfig) {
+      const viteConfig = require("./vite.config.ts");
+      const conf = {
+        define: {
+          "process.env": loadEnv("development", process.cwd(), "VITE"),
+        },
+        server: {
+          /**
+           * start the CT dev server on a different port than the full RWA
+           * so users can switch between CT and E2E testing without having to
+           * stop/start the RWA dev server.
+           */
+          port: 3002,
+        },
+      };
+
+      const resolvedViteConfig = mergeConfig(viteConfig, conf);
+      return devServer({
+        ...devServerConfig,
+        framework: "react",
+        viteConfig: resolvedViteConfig,
+      });
     },
     specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
     supportFile: "cypress/support/component.ts",

cypress/support/commands.ts

@@ -116,9 +116,8 @@ Cypress.Commands.add("reactComponent", { prevSubject: "element" }, ($el) => {
 });
 
 Cypress.Commands.add("setTransactionAmountRange", (min, max) => {
-  cy.getBySel("transaction-list-filter-amount-range-button")
-    .scrollIntoView()
-    .click({ force: true });
+  cy.getBySel("transaction-list-filter-amount-range-button").scrollIntoView();
+  cy.getBySel("transaction-list-filter-amount-range-button").click({ force: true });
 
   return cy
     .getBySelLike("filter-amount-range-slider")

cypress/tests/ui/transaction-view.spec.ts

@@ -52,7 +52,7 @@ describe("Transaction View", function () {
     cy.wait("@getTransaction");
 
     cy.getBySelLike("like-button").click();
-    cy.getBySelLike("like-count").should("contain", 1);
+    cy.getBySelLike("like-count").should("contain", 2);
     cy.getBySelLike("like-button").should("be.disabled");
     cy.visualSnapshot("Transaction after Liked");
   });