Vagr9K/gatsby-material-starter

View on GitHub
examples/material-demo/cypress/e2e/post.test.ts

Summary

Maintainability
A
2 hrs
Test Coverage
describe(`Post page`, () => {
  before(() => {
    cy.visit("/big-sample-test");
    cy.waitForRouteChange();
  });

  beforeEach(() => {});

  it("renders the post intro", () => {
    cy.findByText("Big Test", { selector: "h1" });

    cy.findByText(
      'NOTE: This "post" is based on Markdown Cheatsheet and is meant to test styling of Markdown generated documents. This is intended as a…'
    );

    cy.findByAltText("An image tagged as nature and water for the big test.");
    cy.findByText("An image tagged as nature and water for the big test.", {
      selector: "figcaption",
    });
  });

  it("renders the post info", () => {
    cy.get("span").contains("Aug 1, 2021");
    cy.get("span").contains("3 min read");

    cy.get("main").then((container) => {
      cy.findByRole("link", { name: "tech", container }).should(
        "have.attr",
        "href",
        "/category/tech"
      );

      cy.findByRole("link", { name: "programming", container }).should(
        "have.attr",
        "href",
        "/tag/programming"
      );

      cy.findByRole("link", { name: "test", container }).should(
        "have.attr",
        "href",
        "/tag/test"
      );
    });
  });

  it("renders the article", () => {
    cy.get("article > p").contains(
      /NOTE: This "post" is based on Markdown Cheatsheet and is meant to test styling of Markdown generated documents\./
    );
  });

  it("renders social links", () => {
    cy.findByRole("region", { name: "Share on social media" }).as(
      "shareSection"
    );

    cy.get("@shareSection").findByText("SHARE");

    // Make sure social media share buttons are rendered
    cy.get("@shareSection").get('button[aria-label="facebook"]');
    cy.get("@shareSection").get('button[aria-label="twitter"]');
    cy.get("@shareSection").get('button[aria-label="reddit"]');
    cy.get("@shareSection").get('button[aria-label="linkedin"]');
  });

  it("renders author segment", () => {
    // Get the author segment
    cy.get('aside[aria-label="About the author"]').then((container) => {
      // Make sure it contains information about the author
      cy.findByText("A full-stack web developer looking for a challenge!", {
        container,
      });

      cy.findByText("Material User", {
        container,
      });

      // Make sure it contains author's profile links
      cy.findByRole("link", { name: "Twitter Profile", container })
        .closest("a")
        .should("have.attr", "href", "https://twitter.com/Vagr9K");

      cy.findByRole("link", { name: "GitHub Profile", container })
        .closest("a")
        .should("have.attr", "href", "https://github.com/vagr9k");

      cy.findByRole("link", { name: "LinkedIn Profile", container })
        .closest("a")
        .should(
          "have.attr",
          "href",
          "https://www.linkedin.com/in/your-linkedin"
        );

      cy.findByRole("link", { name: "E-Mail", container })
        .closest("a")
        .should("have.attr", "href", "mailto:MaterialUser@example.com");
    });
  });

  it("renders related Posts", () => {
    cy.findByText("RELATED POSTS")
      .next()
      .children()
      .first()
      .children()
      .find('a[href="/storms-of-doors"]')
      .contains(/^Storms of Doors$/);

    cy.findByText("RELATED POSTS")
      .next()
      .children()
      .first()
      .children()
      .find('a[href="/the-darkest-something"]')
      .contains(/^The Darkest Something$/);
  });
});