pankod/refine

View on GitHub
cypress/e2e/inferencer-antd/all.cy.ts

Summary

Maintainability
D
1 day
Test Coverage
/// <reference types="cypress" />
/// <reference types="../../cypress/support" />

Cypress.on("uncaught:exception", () => {
  return false;
});

describe("inferencer-antd", () => {
  const login = () => {
    cy.fixture("demo-auth-credentials").then((auth) => {
      cy.get("#email").clear();
      cy.get("#email").type(auth.email);
      cy.get("#password").clear();
      cy.get("#password").type(auth.password);
    });

    cy.get("button[type=submit]").click();
  };

  beforeEach(() => {
    cy.clearAllCookies();
    cy.clearAllLocalStorage();
    cy.clearAllSessionStorage();

    cy.interceptGETCategory();
    cy.interceptGETCategories();
    cy.interceptGETBlogPosts();
    cy.visit("/");

    login();
  });

  it("should list resource", () => {
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");

    cy.url().should("include", "/blog-posts");
    cy.getPageHeaderTitle().should("contain", "Blog Posts");

    cy.assertDocumentTitle("Blog Posts", "list");
  });

  it("should show resource", () => {
    cy.interceptGETBlogPost();

    cy.wait("@getBlogPosts");
    cy.wait("@getCategories");
    cy.getAntdLoadingOverlay().should("not.exist");

    cy.getShowButton().first().click();

    cy.assertDocumentTitle("Blog Post", "show");

    cy.wait("@getBlogPost").then((interception) => {
      const response = interception?.response;

      const id = response?.body?.id;
      cy.location("pathname").should("include", `/blog-posts/show/${id}`);

      // should be visible id,title,content
      ["Id", "Title", "Content"].forEach((field) => {
        cy.get("body").should("contain", field);
      });
      // should be visible id,title,content values
      const title = response?.body?.title;
      const content = response?.body?.content;
      [id, title, content].forEach((value) => {
        cy.get("body").should("contain", value);
      });
    });

    cy.wait("@getCategory").then((interception) => {
      const response = interception?.response;

      const category = response?.body;
      cy.get("body").should("contain", category?.title);
    });
  });

  it("should delete resource", () => {
    cy.interceptGETBlogPost();
    cy.interceptDELETEBlogPost();

    cy.wait("@getBlogPosts");
    cy.wait("@getCategories");
    cy.getAntdLoadingOverlay().should("not.exist");

    cy.getEditButton().first().click();

    cy.wait("@getBlogPost");
    cy.getAntdLoadingOverlay().should("not.exist");
    cy.getSaveButton().should("not.be.disabled");

    cy.getDeleteButton().first().click();
    cy.getAntdPopoverDeleteButton().click({ force: true });

    cy.wait("@deleteBlogPost").then((interception) => {
      const response = interception?.response;

      expect(response?.statusCode).to.eq(200);
      cy.getAntdNotification().should("contain", "Success");
      cy.location().should((loc) => {
        expect(loc.pathname).to.eq("/blog-posts");
      });
    });
  });

  it("should create resource", () => {
    cy.interceptPOSTBlogPost();

    cy.getCreateButton().click();
    cy.location("pathname").should("contain", "/blog-posts/create");
    cy.assertDocumentTitle("Blog Post", "create");
    cy.wait("@getCategories");

    cy.fixture("mock-post").then((mockPost) => {
      cy.get("#title").clear();
      cy.get("#title").type(mockPost.title);
      cy.get("#content").clear();
      cy.get("#content").type(mockPost.content);
      cy.get("#status").clear();
      cy.get("#status").type("status");
      cy.setAntdDropdown({ id: "category_id", selectIndex: 0 });
      cy.setAntdRangeDatePickerToToday({ id: "createdAt" });

      cy.getSaveButton().click();

      cy.wait("@postBlogPost").then((interception) => {
        const response = interception?.response;
        const body = response?.body;

        expect(body?.title).to.eq(mockPost.title);
        expect(body?.content).to.eq(mockPost.content);
        expect(body?.status).to.eq("status");

        const createdAt = new Date(body.createdAt);
        const today = new Date();
        expect(createdAt.getDay()).to.eq(today.getDay());
        expect(createdAt.getFullYear()).to.eq(today.getFullYear());
        cy.getAntdNotification().should("contain", "Success");
        cy.location("pathname").should("eq", "/blog-posts");
      });
    });
  });

  it("should edit resource", () => {
    cy.interceptPATCHBlogPost();
    cy.interceptGETBlogPost();

    cy.wait("@getCategories");
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");

    cy.getEditButton().first().click();
    cy.location("pathname").should("contain", "/blog-posts/edit");
    cy.assertDocumentTitle("Blog Post", "edit");
    cy.wait("@getCategories");

    cy.wait("@getBlogPost").then((interception) => {
      const response = interception?.response;
      const body = response?.body;

      // wait loading state and render to be finished
      cy.getAntdLoadingOverlay().should("not.exist");
      cy.getSaveButton().should("not.be.disabled");
      cy.location("pathname").should("include", "/blog-posts/edit");

      // assert form values have been set
      cy.get("#title").should("have.value", body?.title);
      cy.get("#content").should("have.value", body?.content);
      cy.get("#status").should("have.value", body?.status);
      cy.fixture("categories").then((categories) => {
        const category = categories.find(
          (category) => category.id === body?.category?.id,
        );
        cy.get(`.ant-select-selection-item[title="${category?.title}"]`).should(
          "exist",
        );
      });
      cy.get("#createdAt").should(($createdAt) => {
        const inputDateValue = new Date($createdAt.val() as string);
        const createdAt = new Date(body?.createdAt);
        expect(inputDateValue.getDay()).to.eq(createdAt.getDay());
      });
    });

    // fill form
    cy.fixture("mock-post").then((mockPost) => {
      cy.get("#title").clear();
      cy.get("#title").type(mockPost.title);
      cy.get("#content").clear();
      cy.get("#content").type(mockPost.content);
      cy.get("#status").clear();
      cy.get("#status").type("status");
      cy.setAntdDropdown({ id: "category_id", selectIndex: 0 });
      cy.get("#createdAt")
        .click({ force: true })
        .get(".ant-picker-now-btn")
        .eq(0)
        .click({ force: true })
        .click({ force: true });

      cy.getSaveButton().click();

      cy.wait("@patchBlogPost").then((interception) => {
        const response = interception?.response;
        const body = response?.body;

        expect(body?.title).to.eq(mockPost.title);
        expect(body?.content).to.eq(mockPost.content);
        expect(body?.status).to.eq("status");
        expect(body?.category?.id).to.eq(1);
        expect(new Date(body?.createdAt).getDay()).to.eq(new Date().getDay());
      });
    });
  });

  it("should change language", () => {
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");

    // find the dropdown trigger and click it
    cy.get(".ant-layout-header").within(() => {
      cy.get(".ant-dropdown-trigger").click();
    });
    // find the dropdown item and click it
    cy.get(".ant-dropdown-menu-title-content").contains("German").click();
    // assert the dropdown value has changed
    cy.get(".ant-layout-header").within(() => {
      cy.get(".ant-dropdown-trigger").contains("German");
    });
    // assert localStoage has changed
    cy.getAllLocalStorage().then((ls) => {
      expect(ls[Cypress.config("baseUrl")!]["i18nextLng"]).to.eq("de");
    });

    // reload the page and assert the language is persisted
    cy.reload();
    cy.wait("@getCategories");
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");
    // assert the dropdown value has changed
    cy.get(".ant-layout-header").within(() => {
      cy.get(".ant-dropdown-trigger").contains("German");
    });
  });

  it("should change theme", () => {
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");

    // find initial  theme from localStorage
    cy.getAllLocalStorage().then((ls) => {
      const initialTheme =
        ls[Cypress.config("baseUrl")!]["colorMode"]?.toString();

      // find the theme swtich
      cy.get(".ant-layout-header").within(() => {
        // assert default theme is working
        if (initialTheme === "dark") {
          expect(cy.get(".ant-switch-checked").should("exist"));
        } else {
          expect(cy.get(".ant-switch-checked").should("not.exist"));
        }

        // click the theme switch
        cy.get(".ant-switch").click();
        cy.getAllLocalStorage().then((ls) => {
          if (initialTheme === "dark") {
            expect(cy.get(".ant-switch-checked").should("not.exist"));
            expect(ls[Cypress.config("baseUrl")!]["colorMode"]).to.eq("light");
          } else {
            expect(cy.get(".ant-switch-checked").should("exist"));
            expect(ls[Cypress.config("baseUrl")!]["colorMode"]).to.eq("dark");
          }
        });
      });

      // reload the page and assert the theme is persisted
      cy.reload();
      cy.wait("@getCategories");
      cy.wait("@getBlogPosts");
      cy.getAntdLoadingOverlay().should("not.exist");
      // should be reversed from initial theme
      cy.get(".ant-layout-header").within(() => {
        if (initialTheme === "dark") {
          expect(cy.get(".ant-switch-checked").should("not.exist"));
        } else {
          expect(cy.get(".ant-switch-checked").should("exist"));
        }
      });
    });
  });

  it("should work with pagination", () => {
    cy.wait("@getCategories");
    cy.wait("@getBlogPosts");
    cy.getAntdLoadingOverlay().should("not.exist");

    cy.intercept(
      {
        url: "/blog_posts*",
        query: {
          _start: "10",
          _end: "20",
        },
      },
      {
        fixture: "blog-posts.json",
      },
    ).as("getSecondPagePosts");

    cy.getAntdPaginationItem(2).click();

    cy.url().should("include", "current=2");

    cy.wait("@getSecondPagePosts");

    cy.intercept(
      {
        url: "/blog_posts*",
        query: {
          _start: "0",
          _end: "10",
        },
      },
      {
        fixture: "blog-posts.json",
      },
    ).as("getFirstPagePosts");

    cy.get(".ant-pagination-prev").first().click();

    cy.url().should("include", "current=1");

    cy.wait("@getFirstPagePosts");
  });
});