Solution: Test Form Inputs with Cypress
Learn the answers to challenges regarding testing form inputs with Cypress.
We'll cover the following...
Solution: Task 1
In this test, we aim to ensure that the meetup create page prevents the creation of a new meetup with a name that already exists in the database. To accomplish this, we will seed the database with a meetup, fill out the form with the same name, and verify that an error message appears indicating a meetup with the same name already exists. This test is essential for maintaining data integrity and preventing confusion for the user.
describe("Meetup create page", () => {
beforeEach(() => {
cy.task("reset");
});
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."
);
});
});
export {};
Solution to the duplicate meetup test challenge
Explanation
Lines 8–17: We first set up the initial state of the application by seeding the database with a meetup that has a
typescript-meetupslug. The other values are not relevant to this test. ...
Ask