fix: flaky e2e tests (#6576)

refinedev · Dec 12, 2024 · cf43713 · cf43713
1 parent 3f926c7
commit cf43713
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 22 deletions.
diff --git a/cypress/e2e/table-material-ui-data-grid-pro/all.cy.ts b/cypress/e2e/table-material-ui-data-grid-pro/all.cy.ts
@@ -4,11 +4,13 @@
 describe("table-material-ui-data-grid-pro", () => {
   beforeEach(() => {
     cy.interceptGETPosts();
+    cy.interceptGETCategories();
     cy.visit("/");
   });
 
   it("should work with sorter", () => {
     cy.wait("@getPosts");
+    cy.wait("@getCategories");
     cy.getMaterialUILoadingCircular().should("not.exist");
 
     // sort by title
@@ -49,16 +51,19 @@ describe("table-material-ui-data-grid-pro", () => {
   });
 
   it("should work with multiple filter", () => {
-    // wait for loading
+    // wait for requests
     cy.wait("@getPosts");
+    cy.wait("@getCategories");
+    // wait for loadings
     cy.getMaterialUILoadingCircular().should("not.exist");
+    cy.get("[data-field='category.id']").should("not.contain", "Loading...");
 
     // open the column menu of title
     cy.getMaterialUIColumnHeader(2).within(() =>
       cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
     );
     // click the filter menu item
-    cy.contains("Filter").click();
+    cy.contains("Filter").click({ force: true });
     // type the filter value
     cy.get("[placeholder='Filter value']").type("lorem");
     // url should contain the filter

diff --git a/cypress/e2e/table-material-ui-use-data-grid/all.cy.ts b/cypress/e2e/table-material-ui-use-data-grid/all.cy.ts
@@ -51,34 +51,38 @@ describe("table-material-ui-use-data-grid", () => {
   });
 
   it("should work with filter", () => {
+    // wait for requests
+    cy.wait("@getPosts");
+    cy.wait("@getCategories");
+    // wait for loadings
     cy.getMaterialUILoadingCircular().should("not.exist");
+    cy.get("[data-field='category.id']").should("have.length", 16);
+    cy.get("[data-field='category.id']").should("not.contain", "Loading...");
 
+    // find the filter button
     cy.getMaterialUIColumnHeader(2).within(() =>
       cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
     );
-
-    cy.get(".MuiDataGrid-menu > div > .MuiList-root").children().eq(3).click();
-
-    cy.intercept(
-      {
-        url: "/posts*",
-        query: {
-          title_like: "lorem",
-        },
-      },
-      {
-        fixture: "posts.json",
-      },
-    ).as("getFilteredPosts");
-
+    // find the filter option
+    cy.get(".MuiDataGrid-menu > div > .MuiList-root").children().eq(3).click({
+      force: true,
+    });
+    // wait for the request again because initial filter is removed and MUI is refreshing the data.
+    cy.wait("@getPosts");
+    // type the filter value
     cy.get("[placeholder='Filter value']").type("lorem");
 
+    // url should contain the filter
     cy.url().should(
       "include",
       "filters[0][field]=title&filters[0][value]=lorem&filters[0][operator]=contains",
     );
-
-    cy.wait("@getFilteredPosts");
+    // check the request for the filter
+    cy.wait("@getPosts").then((interception) => {
+      const request = interception.request;
+      const query = request.query;
+      expect(query.title_like).to.eq("lorem");
+    });
   });
 
   it("should work with pagination", () => {
@@ -147,17 +151,21 @@ describe("table-material-ui-use-data-grid", () => {
       cy.get(".MuiDataGrid-menuIcon > button").click({ force: true }),
     );
 
-    cy.get(".MuiDataGrid-menu > div > .MuiList-root").children().eq(3).click();
+    cy.get(".MuiDataGrid-menu > div > .MuiList-root")
+      .children()
+      .eq(3)
+      .click({ force: true });
 
     cy.get("[placeholder='Filter value']").type("lorem");
 
     cy.url().should("include", "current=1");
   });
 
   it("should update a cell", () => {
+    cy.wait("@getPosts");
     cy.getMaterialUILoadingCircular().should("not.exist");
 
-    cy.intercept("/posts/*").as("patchRequest");
+    cy.interceptPATCHPost();
 
     cy.getMaterialUIColumnHeader(1).click();
 
@@ -168,9 +176,14 @@ describe("table-material-ui-use-data-grid", () => {
     )
       .clear()
       .type("Lorem ipsum refine!")
+      .focus()
       .type("{enter}");
 
-    cy.wait("@patchRequest");
+    cy.wait("@patchPost").then((interception) => {
+      const request = interception.request;
+      const body = request.body;
+      expect(body.title).to.eq("Lorem ipsum refine!");
+    });
 
     cy.get(".MuiDataGrid-cell").eq(1).should("contain", "Lorem ipsum refine!");
   });