fix: Cypress e2e, with explicit ID while looking for HTML elements. (#…

…1922) Signed-off-by: OMPRAKASH MISHRA <omprakashmishra3978@gmail.com>
bcgov · Apr 18, 2024 · 38c9084 · 38c9084
1 parent d776c7f
commit 38c9084
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 45 deletions.
diff --git a/frontend/cypress/e2e/user-table.cy.ts b/frontend/cypress/e2e/user-table.cy.ts
@@ -9,15 +9,15 @@ describe("User Table", () => {
       // access the native DOM element
       expect($div.get(0).innerText).exist
     });
-    cy.get("div.MuiDataGrid-columnHeader:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)").should("exist").should(($div) => {
+    cy.get("#id").should("exist").should(($div) => {
       // access the native DOM element
       expect($div.get(0).innerText).to.eq('Employee ID');
     });
-    cy.get("div.MuiDataGrid-columnHeader:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)").should("exist").should(($div) => {
+    cy.get("#name").should("exist").should(($div) => {
       // access the native DOM element
       expect($div.get(0).innerText).to.eq('Employee Name');
     });
-    cy.get("div.MuiDataGrid-columnHeader:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)").should("exist").should(($div) => {
+    cy.get("#email").should("exist").should(($div) => {
       // access the native DOM element
       expect($div.get(0).innerText).to.eq('Employee Email');
     });

diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
@@ -1,90 +1,106 @@
-import apiService from '@/service/api-service'
-import Button from '@mui/material/Button'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogTitle from '@mui/material/DialogTitle'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableRow from '@mui/material/TableRow'
-import { DataGrid, GridToolbar } from '@mui/x-data-grid'
-import { useEffect, useState } from 'react'
-import type { AxiosResponse } from '~/axios'
+import apiService from "@/service/api-service";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import { useEffect, useState } from "react";
+import type { AxiosResponse } from "~/axios";
 
 const columns = [
   {
-    field: 'id',
-    headerName: 'Employee ID',
+    field: "id",
+    headerName: "Employee ID",
     sortable: true,
     filterable: true,
     flex: 1,
+    renderHeader: (params: any) => (
+      <div id={`${params.field}`}>
+        Employee ID
+      </div>
+    )
   },
   {
-    field: 'name',
-    headerName: 'Employee Name',
+    field: "name",
+    headerName: "Employee Name",
     sortable: true,
     filterable: true,
     flex: 1,
+    renderHeader: (params: any) => (
+      <div id={`${params.field}`}>
+        Employee Name
+      </div>
+    )
   },
   {
-    field: 'email',
-    headerName: 'Employee Email',
+    field: "email",
+    headerName: "Employee Email",
     sortable: true,
     filterable: true,
     flex: 1,
-  },
-]
+    renderHeader: (params: any) => (
+      <div id={`${params.field}`}>
+        Employee Email
+      </div>
+    )
+  }
+];
 export default function Dashboard() {
-  const [data, setData] = useState<any>([])
+  const [data, setData] = useState<any>([]);
 
   useEffect(() => {
     apiService
       .getAxiosInstance()
-      .get('/v1/users')
+      .get("/v1/users")
       .then((response: AxiosResponse) => {
-        const users = []
+        const users = [];
         for (const user of response.data) {
           const userDto = {
             id: user.id,
             name: user.name,
-            email: user.email,
-          }
-          users.push(userDto)
+            email: user.email
+          };
+          users.push(userDto);
         }
-        setData(users)
+        setData(users);
       })
       .catch((error) => {
-        console.error(error)
-      })
-  }, [])
-  const [selectedRow, setSelectedRow] = useState(null)
+        console.error(error);
+      });
+  }, []);
+  const [selectedRow, setSelectedRow] = useState(null);
 
   const handleClose = () => {
-    setSelectedRow(null)
-  }
+    setSelectedRow(null);
+  };
   return (
     <div
       style={{
-        minHeight: '45em',
-        maxHeight: '45em',
-        width: '100%',
-        marginLeft: '4em',
+        minHeight: "45em",
+        maxHeight: "45em",
+        width: "100%",
+        marginLeft: "4em"
       }}
     >
       <DataGrid
+
         slots={{ toolbar: GridToolbar }}
         slotProps={{
           toolbar: {
-            showQuickFilter: true,
-          },
+            showQuickFilter: true
+          }
         }}
         experimentalFeatures={{ ariaV7: true }}
         checkboxSelection={false}
         rows={data}
         columns={columns}
         pageSizeOptions={[5, 10, 20, 50, 100]}
-        getRowId={(row) => row['id']}
+        getRowId={(row) => row["id"]}
         onRowClick={(params) => setSelectedRow(params.row)}
       />
       <Dialog open={!!selectedRow} onClose={handleClose}>
@@ -109,5 +125,5 @@ export default function Dashboard() {
         </DialogActions>
       </Dialog>
     </div>
-  )
+  );
 }