Testing Next.js Applications with Cypress/

...

/

Testing the Create Page

Testing the Create Page

Learn to test a create page.

We'll cover the following...

Let’s begin testing the create page of the meetup application. According to our user acceptance tests, the following features should be available:

  • Users should be able to create a meetup by filling out the form with the following information:

    • Name

    • Location

    • Date and time

    • Description (optional)

  • After submitting the form successfully, users must be given a message that the meetup creation was successful.

  • A unique identifying slug should be created automatically based on the meetup’s name.

  • The meetup should be instantly available on the home page and the meetup detail page.

Let’s run the code below to see how this page works.

The create page

describe("Meetup create page", () => {
  beforeEach(() => {
    cy.task("reset");
  });

  it("Create page is rendered correctly", () => {
    cy.visit("/create");

    cy.contains("Add a new meetup");
  });

  it("Meetup title and datetime input work", () => {
    cy.visit("/create");

    cy.get("input#name").should("have.value", "").type("test");
    cy.get("input#name").should("have.value", "test");

    cy.get("input#datetime").should("have.value", "").type("2030-10-10T10:10");
    cy.get("input#datetime").should("have.value", "2030-10-10T10:10");
  });

  it("Submitting empty form gives error on required fields title, location and date", () => {
    cy.visit("/create");

    cy.get("button:submit").click();

    cy.get("[data-cy='name-error']").contains(
      "Please enter a name for the meetup."
    );
    cy.get("[data-cy='location-error']").contains(
      "Please enter a location for the meetup."
    );
    cy.get("[data-cy='date-error']").contains(
      "Please enter a date that is in the future."
    );
  });

  it("Success message shows after a successful submit", () => {
    cy.visit("/create");

    cy.get("input#name").type("test");
    cy.get("input#location").type("Online");
    cy.get("input#datetime").type("2030-10-10T10:10");

    cy.get("button:submit").click();

    cy.contains("New meetup created successfully!");
  });

  it("Can't create a meetup if one with the same generated slug exists", () => {
    // Arrange. Seed the database with a meetup.
    cy.task("seed:events", [
      {
        id: 1,
        name: "Doesn't matter",
        slug: "typescript-meetup",
        description: "",
        location: "Online",
        dateTime: new Date("2030-10-10T10:10"),
      },
    ]);

    // Act. Go to the create a meetup page and interact with the form to submit a meetup with the same name as what you seeded the database with.
    cy.visit("/create");

    cy.get("input#name").type("TypeScript Meetup");
    cy.get("input#location").type("Online");
    cy.get("input#datetime").type("2030-10-10T10:10");

    cy.get("button:submit").click();

    // Assert. Check that the correct error message appears in the correct location after trying to submit the form.
    cy.get("[data-cy='name-error']").contains(
      "A meetup with this name already exists."
    );
  });

  it("A newly created meetup has a page", () => {
    cy.visit("/create");

    cy.get("input#name").type("TypeScript Meetup");
    cy.get("input#location").type("Online");
    cy.get("input#datetime").type("2030-10-10T10:10");

    cy.get("button:submit").click();

    cy.contains("New meetup created successfully!");

    cy.visit("/typescript-meetup");
    cy.get("[data-cy='title']").contains("TypeScript Meetup");
  });

  it("Submitting form with too long inputs gives error on fields title, description, and location", () => {
    cy.visit("/create");

    cy.get("input#name").type("a".repeat(65), { delay: 0 });
    cy.get("input#location").type("a".repeat(65), { delay: 0 });
    cy.get("textarea#description").type("a".repeat(1025), { delay: 0 });

    cy.get("button:submit").click();

    cy.get("[data-cy='name-error']").contains("Maximum length 64 characters.");
    cy.get("[data-cy='location-error']").contains(
      "Maximum length 64 characters."
    );
    cy.get("[data-cy='description-error']").contains(
      "Maximum length 1024 characters."
    );
  });
});

export {};

To create new meetups, users can navigate to the /create path or click the “create a new meetup” link on the header. The create page is a form containing fields for the meetup’s name, location, date and time, and description. When a user submits the form, a new meetup is created on the database with the provided data if all the validations pass.

Let‘s navigate to the pages/create.tsx file.

  • Lines 3–6: We import our validation schema and its type. It’s important to have the validation in a separate file because we use this same validation in our API routes and don’t want any circular imports or accidentally share back-end code with the frontend.

  • Line 12: We use a useMutation trpc hook to create a function that, when called, will call the create route and create a new meetup. The Trpc hook allows us to have typesafe communication with our Next.js API routes.

  • Lines 23–37: We define the function that handles ...