Front-end Testing 101: Integration and End-to-end Testing/

...

/

Solution Review: Register and Login

Solution Review: Register and Login

This review provides an explanation for solving the “Register and Login” challenge.

We'll cover the following...

Solution

Note: You can see the Cypress UI better by opening the link next to Your app can be found at:

let username, email, password;

context("Signup flow", () => {
  it("The happy path should work", () => {
    cy.visit("/register");
    const random = Math.floor(Math.random() * 100000);
    username = `Tester${random}`;
    email = `user+${random}@realworld.io`;
    password = "mysupersecretpassword";
    cy.findByPlaceholderText("Username").type(username);
    cy.findByPlaceholderText("Email").type(email);
    cy.findByPlaceholderText("Password").type(password);
    cy.get("form")
      .within(() => cy.findByText("Sign up").click())
    cy.findByText("No articles are here... yet.", { timeout: 10000 }).should("be.visible");
  });
});

context("Login flow", () => {
  it("The happy path should work", () => {
    cy.visit("/login");
    cy.findByPlaceholderText("Email").type(email);
    cy.findByPlaceholderText("Password").type(password);
    cy.get("form")
      .within(() => cy.findByText("Sign in").click())
    cy.findByText("No articles are here... yet.", { timeout: 10000 }).should("be.visible");
  });
});
Solution

Explanation

See the ...