Experimenting with Cypress-Testing-Library

Cypress-Testing-Library.js

/// <reference types="cypress" />

import starterTravelAttractions from "../../fixtures/starterTravelAttractions.json";

context("Travel Attractions Index", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000/travel-attractions");
  });

  it("has a header", () => {
    // cy.get("h1").should("have.text", "Our List of Attractions to see!");
    cy.findByText("Our List of Attractions to see!").should("exist");
  });

  it("lists all travel attractions", () => {
    // cy.get(".travel-attractions")
    //   .find("li")
    //   .first()
    //   .should("have.text", `${starterTravelAttractions.travelAttractions[0].name} - ${starterTravelAttractions.travelAttractions[0].location}`);

    // cy.get(".travel-attractions")
    //   .find("li")
    //   .eq(1)
    //   .should("have.text", `${starterTravelAttractions.travelAttractions[1].name} - ${starterTravelAttractions.travelAttractions[1].location}`);
    cy.findByText(`${starterTravelAttractions.travelAttractions[0].name} - ${starterTravelAttractions.travelAttractions[0].location}`).should("exist");
    cy.findByText(`${starterTravelAttractions.travelAttractions[1].name} - ${starterTravelAttractions.travelAttractions[1].location}`).should("exist");
  });

  it("has a link to go to the new travel attraction form", () => {
    // cy.get("a")
    //   .should("have.text", "Add a new Travel Attraction")
    //   .and("have.attr", "href", "/travel-attractions/new");
    cy.findByText("Add a new Travel Attraction").click()
    cy.findByText("New Attraction")
  });
});


////////////////////////////////////////////////////////////////////

/// <reference types="cypress" />

import newTravelAttraction from "../../fixtures/newTravelAttraction.json";
import starterTravelAttractions from "../../fixtures/starterTravelAttractions.json";
const travelAttractionsFilePath = "travelAttractions.json";

context("Travel Attractions New", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000/travel-attractions/new");
  });

  it("adds a travel attraction to the list upon submitting the form", () => {
    // cy.get("#name")
    //   .type(newTravelAttraction.name)
    //   .should("have.value", newTravelAttraction.name);
    cy.findByLabelText("Name of attraction:")
      .click()
      .type(newTravelAttraction.name)
    cy.findByDisplayValue(newTravelAttraction.name).should("exist")

    // cy.get("#location")
    //   .type(newTravelAttraction.location)
    //   .should("have.value", newTravelAttraction.location);
    cy.findByLabelText("Location:")
      .click()
      .type(newTravelAttraction.location)
    cy.findByDisplayValue(newTravelAttraction.location).should("exist")

    // cy.get(".button").should("have.value", "Save this Attraction!");
    cy.findByText("Save this Attraction!").should("exist")

    cy.get(".new-travel-attraction-form").submit();

    cy.url().should("eq", "http://localhost:3000/travel-attractions");

    cy.get(".travel-attractions")
      .find("li")
      .last()
      .should(
        "have.text",
        `${newTravelAttraction.name} - ${newTravelAttraction.location}`
      );
  });

  afterEach(() => {
    cy.writeFile(
      travelAttractionsFilePath,
      JSON.stringify(starterTravelAttractions)
    );
  });
});