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 index 0b39fdf68930..68a607d57154 100644 --- 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 index 88fb505e2d0d..4edebb397996 100644 --- 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,7 +151,10 @@ 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"); @@ -155,9 +162,10 @@ describe("table-material-ui-use-data-grid", () => { }); 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!"); });