added practice test

cypress.config.ts

@@ -97,6 +97,7 @@ module.exports = defineConfig({
     viewportHeight: 1000,
     viewportWidth: 1280,
     experimentalRunAllSpecs: true,
+    experimentalStudio: true,
     setupNodeEvents(on, config) {
       const testDataApiEndpoint = `${config.env.apiUrl}/testData`;
 

cypress/tests/ui/auth_practice.spec.ts

@@ -0,0 +1,174 @@
+import { User } from "../../../src/models";
+import { isMobile } from "../../support/utils";
+
+const apiGraphQL = `${Cypress.env("apiUrl")}/graphql`;
+
+describe("User Sign-up and Login", function () {
+  beforeEach(function () {
+    cy.task("db:seed");
+
+    cy.intercept("POST", "/users").as("signup");
+    cy.intercept("POST", apiGraphQL, (req) => {
+      const { body } = req;
+
+      if (body.hasOwnProperty("operationName") && body.operationName === "CreateBankAccount") {
+        req.alias = "gqlCreateBankAccountMutation";
+      }
+    });
+  });
+
+  it("should redirect unauthenticated user to signin page", function () {
+    cy.visit("/personal");
+    cy.location("pathname").should("equal", "/signin");
+    cy.visualSnapshot("Redirect to SignIn");
+  });
+
+  it("should redirect to the home page after login", function () {
+    cy.database("find", "users").then((user: User) => {
+      cy.login(user.username, "s3cret", { rememberUser: true });
+    });
+    cy.location("pathname").should("equal", "/");
+  });
+
+  it("should remember a user for 30 days after login", function () {
+    cy.database("find", "users").then((user: User) => {
+      cy.login(user.username, "s3cret", { rememberUser: true });
+    });
+
+    // Verify Session Cookie
+    cy.getCookie("connect.sid").should("have.property", "expiry");
+
+    // Logout User
+    if (isMobile()) {
+      cy.getBySel("sidenav-toggle").click();
+    }
+    cy.getBySel("sidenav-signout").click();
+    cy.location("pathname").should("eq", "/signin");
+    cy.visualSnapshot("Redirect to SignIn");
+  });
+
+  it("should allow a visitor to sign-up, login, and logout", function () {
+    const userInfo = {
+      firstName: "Bob",
+      lastName: "Ross",
+      username: "PainterJoy90",
+      password: "s3cret",
+    };
+
+    // Sign-up User
+    cy.visit("/");
+
+    cy.getBySel("signup").click();
+    cy.getBySel("signup-title").should("be.visible").and("contain", "Sign Up");
+    cy.visualSnapshot("Sign Up Title");
+
+    cy.getBySel("signup-first-name").type(userInfo.firstName);
+    cy.getBySel("signup-last-name").type(userInfo.lastName);
+    cy.getBySel("signup-username").type(userInfo.username);
+    cy.getBySel("signup-password").type(userInfo.password);
+    cy.getBySel("signup-confirmPassword").type(userInfo.password);
+    cy.visualSnapshot("About to Sign Up");
+    cy.getBySel("signup-submit").click();
+    cy.wait("@signup");
+
+    // Login User
+    cy.login(userInfo.username, userInfo.password);
+
+    // Onboarding
+    cy.getBySel("user-onboarding-dialog").should("be.visible");
+    cy.getBySel("list-skeleton").should("not.exist");
+    cy.getBySel("nav-top-notifications-count").should("exist");
+    cy.visualSnapshot("User Onboarding Dialog");
+    cy.getBySel("user-onboarding-next").click();
+
+    cy.getBySel("user-onboarding-dialog-title").should("contain", "Create Bank Account");
+
+    cy.getBySelLike("bankName-input").type("The Best Bank");
+    cy.getBySelLike("accountNumber-input").type("123456789");
+    cy.getBySelLike("routingNumber-input").type("987654321");
+    cy.visualSnapshot("About to complete User Onboarding");
+    cy.getBySelLike("submit").click();
+
+    cy.wait("@gqlCreateBankAccountMutation");
+
+    cy.getBySel("user-onboarding-dialog-title").should("contain", "Finished");
+    cy.getBySel("user-onboarding-dialog-content").should("contain", "You're all set!");
+    cy.visualSnapshot("Finished User Onboarding");
+    cy.getBySel("user-onboarding-next").click();
+
+    cy.getBySel("transaction-list").should("be.visible");
+    cy.visualSnapshot("Transaction List is visible after User Onboarding");
+
+    // Logout User
+    if (isMobile()) {
+      cy.getBySel("sidenav-toggle").click();
+    }
+    cy.getBySel("sidenav-signout").click();
+    cy.location("pathname").should("eq", "/signin");
+    cy.visualSnapshot("Redirect to SignIn");
+  });
+
+  it("should display login errors", function () {
+    cy.visit("/");
+
+    cy.getBySel("signin-username").type("User").find("input").clear().blur();
+    cy.get("#username-helper-text").should("be.visible").and("contain", "Username is required");
+    cy.visualSnapshot("Display Username is Required Error");
+
+    cy.getBySel("signin-password").type("abc").find("input").blur();
+    cy.get("#password-helper-text")
+      .should("be.visible")
+      .and("contain", "Password must contain at least 4 characters");
+    cy.visualSnapshot("Display Password Error");
+
+    cy.getBySel("signin-submit").should("be.disabled");
+    cy.visualSnapshot("Sign In Submit Disabled");
+  });
+
+  it("should display signup errors", function () {
+    cy.intercept("GET", "/signup");
+
+    cy.visit("/signup");
+
+    cy.getBySel("signup-first-name").type("First").find("input").clear().blur();
+    cy.get("#firstName-helper-text").should("be.visible").and("contain", "First Name is required");
+
+    cy.getBySel("signup-last-name").type("Last").find("input").clear().blur();
+    cy.get("#lastName-helper-text").should("be.visible").and("contain", "Last Name is required");
+
+    cy.getBySel("signup-username").type("User").find("input").clear().blur();
+    cy.get("#username-helper-text").should("be.visible").and("contain", "Username is required");
+
+    cy.getBySel("signup-password").type("password").find("input").clear().blur();
+    cy.get("#password-helper-text").should("be.visible").and("contain", "Enter your password");
+
+    cy.getBySel("signup-confirmPassword").type("DIFFERENT PASSWORD").find("input").blur();
+    cy.get("#confirmPassword-helper-text")
+      .should("be.visible")
+      .and("contain", "Password does not match");
+    cy.visualSnapshot("Display Sign Up Required Errors");
+
+    cy.getBySel("signup-submit").should("be.disabled");
+    cy.visualSnapshot("Sign Up Submit Disabled");
+  });
+
+  it("should error for an invalid user", function () {
+    cy.login("invalidUserName", "invalidPa$$word");
+
+    cy.getBySel("signin-error")
+      .should("be.visible")
+      .and("have.text", "Username or password is invalid");
+    cy.visualSnapshot("Sign In, Invalid Username and Password, Username or Password is Invalid");
+  });
+
+  it("should error for an invalid password for existing user", function () {
+    cy.database("find", "users").then((user: User) => {
+      cy.login(user.username, "INVALID");
+    });
+
+    cy.getBySel("signin-error")
+      .should("be.visible")
+      .and("have.text", "Username or password is invalid");
+    cy.visualSnapshot("Sign In, Invalid Username, Username or Password is Invalid");
+  });
+});

data/database.json

@@ -9855,6 +9855,19 @@
       "requestResolvedAt": "",
       "createdAt": "2023-11-10T07:15:28.127Z",
       "modifiedAt": "2024-03-07T21:58:09.668Z"
+    },
+    {
+      "id": "_ZtTjLSf4",
+      "uuid": "253c5116-ce05-45e9-9e90-32706cef7e61",
+      "amount": 30000,
+      "description": "🛫🛬 Airfare",
+      "receiverId": "_XblMqbuoP",
+      "senderId": "uBmeaz5pX",
+      "privacyLevel": "public",
+      "status": "pending",
+      "requestStatus": "pending",
+      "createdAt": "2024-04-21T21:00:55.910Z",
+      "modifiedAt": "2024-04-21T21:00:55.910Z"
     }
   ],
   "likes": [
@@ -10431,6 +10444,16 @@
       "isRead": false,
       "createdAt": "2024-02-01T18:53:45.699Z",
       "modifiedAt": "2024-03-07T17:13:52.110Z"
+    },
+    {
+      "id": "-Zkbo3JpUI",
+      "uuid": "4bab9cc9-f19e-4123-bc6f-d48f51a90d87",
+      "userId": "_XblMqbuoP",
+      "transactionId": "_ZtTjLSf4",
+      "status": "requested",
+      "isRead": false,
+      "createdAt": "2024-04-21T21:00:55.912Z",
+      "modifiedAt": "2024-04-21T21:00:55.912Z"
     }
   ],
   "banktransfers": [