Merge pull request #22 from bcgov/EMSEDT_180_Admin_Page_Cypress

EMSEDT-180: Admin Privileges - Cypress Tests
bcgov · Aug 13, 2024 · 9ead791 · 9ead791
2 parents 6d6a363 + e665570
commit 9ead791
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 5 deletions.
diff --git a/frontend/cypress/downloads/downloads.htm b/frontend/cypress/downloads/downloads.htm
diff --git a/frontend/cypress/e2e/admin-page.cy.ts b/frontend/cypress/e2e/admin-page.cy.ts
@@ -0,0 +1,134 @@
+/// <reference types="cypress" />
+
+describe('File Upload page functionality', () => {
+  beforeEach(function () {
+    cy.viewport('macbook-16')
+    cy.kcLogout().kcLogin()
+    cy.get('[href="/admin"]').click()
+  })
+
+  it('should be on the admin page', () => {
+    cy.get('#pageTitle').should('have.text', 'Electronic Data Transfer - Admin')
+  })
+
+  it('should have basic admin page elements', () => {
+    cy.get('#tableTabs').should('exist')
+    cy.get('#usersTab')
+      .should('exist')
+      .should('have.text', 'Users')
+      .should('have.class', 'Mui-selected')
+    cy.get('#companyTab').should('exist').should('have.text', 'Company')
+
+    cy.get('.MuiDataGrid-root').should('exist')
+    cy.get('#addUserButton').should('exist').should('have.text', 'Add User')
+  })
+
+  it('should render users tab content', () => {
+    cy.get('#usersTab').click()
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 6)
+
+    cy.get('[data-field="name"]').children().first().should('have.text', 'Name')
+    cy.get('[data-field="username"]')
+      .children()
+      .first()
+      .should('have.text', 'User Name')
+    cy.get('[data-field="email"]')
+      .children()
+      .first()
+      .should('have.text', 'Email')
+    cy.get('[data-field="company"]')
+      .children()
+      .first()
+      .should('have.text', 'Company/Agency')
+    cy.get('[data-field="role"]')
+      .children()
+      .first()
+      .should('have.text', 'User Role')
+    cy.get('[data-field="revoke"]').children().first().should('have.text', '')
+
+    cy.wait(3000)
+
+    cy.get('.MuiDataGrid-row').should('have.length.gt', 0) // should have > 0 rows when page loads
+    cy.get('.MuiDataGrid-row').each(($row) => {
+      cy.wrap($row).find('[data-field="revoke"]').should('have.text', 'Edit')
+      cy.wrap($row).find('[data-field="revoke"]').children().first().click()
+
+      /*
+            Write tests for the edit modal
+        */
+      cy.get('#simple-modal-title').should('have.text', 'Edit Roles')
+      cy.get('#searchFirstName-label').should('have.text', 'First Name')
+      cy.get('#searchFirstName').should('not.have.value', '')
+
+      cy.get('#searchLastName-label').should('have.text', 'Last Name')
+      cy.get('#searchLastName').should('not.have.value', '')
+
+      cy.get('#searchUsername-label').should('have.text', 'Username')
+      cy.get('#searchUsername').should('not.have.value', '')
+
+      cy.get('#ENMODS_USER')
+        .children()
+        .last()
+        .should('have.text', 'Enmods User')
+      cy.get('#ENMODS_ADMIN')
+        .children()
+        .last()
+        .should('have.text', 'Enmods Admin')
+
+      cy.get('#cancelButton').click()
+    })
+  })
+
+  it('should render the company tab content', () => {
+    cy.get('#companyTab').click()
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 4)
+
+    cy.get('[data-field="id"]')
+      .children()
+      .first()
+      .should('have.text', 'Company/Agency ID')
+    cy.get('[data-field="name"]')
+      .children()
+      .first()
+      .should('have.text', 'Company/Agency Name')
+    cy.get('[data-field="email"]')
+      .children()
+      .first()
+      .should('have.text', 'Email')
+    cy.get('[data-field="edit"]').children().first().should('have.text', '')
+
+    cy.get('.MuiDataGrid-row').should('have.length.gt', 0) // should have > 0 rows when page loads
+
+    cy.get('.MuiDataGrid-row').each(($row) => {
+      cy.wrap($row).find('[data-field="edit"]').should('have.text', 'Edit')
+      cy.wrap($row).find('[data-field="edit"]').children().first().click()
+
+      /*
+      TODO:
+        - Write tests for the edit modal
+        - Need to update this once the logic for the edit modal has been be decided for the company tab
+      */
+      cy.get('#cancelButton').click()
+    })
+  })
+
+  it('should show the add modal content', () => {
+    cy.get('#addUserButton').click()
+    cy.get('#simple-modal-title').should('have.text', 'Grant Roles')
+    cy.get('#searchEmail-label').should('have.text', 'Email')
+    cy.get('#searchEmail').should('have.value', '')
+
+    cy.get('#searchFirstName-label').should('have.text', 'First Name')
+    cy.get('#searchFirstName').should('have.value', '')
+
+    cy.get('#searchLastName-label').should('have.text', 'Last Name')
+    cy.get('#searchLastName').should('have.value', '')
+
+    cy.get('#searchUsername-label').should('have.text', 'Username')
+    cy.get('#searchUsername').should('have.value', '')
+
+    cy.get('#ENMODS_USER').children().first().children().first().should('have.attr', 'disabled')
+    cy.get('#ENMODS_ADMIN').children().first().children().first().should('have.attr', 'disabled')
+
+  })
+})
diff --git a/frontend/src/components/modal/admin/AddRoles.tsx b/frontend/src/components/modal/admin/AddRoles.tsx
@@ -187,7 +187,7 @@ const AddRoles = ({
             Roles
           </FormLabel>
           <FormGroup>
-            <FormControlLabel
+            <FormControlLabel id='ENMODS_USER'
               control={
                 <Checkbox
                   checked={rolesToAdd.includes(Roles.ENMODS_USER)}
@@ -199,7 +199,7 @@ const AddRoles = ({
               }
               label={Roles.ENMODS_USER}
             />
-            <FormControlLabel
+            <FormControlLabel id='ENMODS_ADMIN'
               control={
                 <Checkbox
                   checked={rolesToAdd.includes(Roles.ENMODS_ADMIN)}

diff --git a/frontend/src/components/modal/admin/EditRoles.tsx b/frontend/src/components/modal/admin/EditRoles.tsx
@@ -142,6 +142,7 @@ const EditRoles = ({
           </FormLabel>
           <FormGroup>
             <FormControlLabel
+              id="ENMODS_USER"
               control={
                 <Checkbox
                   checked={updatedRoles.includes(Roles.ENMODS_USER)}
@@ -154,6 +155,7 @@ const EditRoles = ({
               label={Roles.ENMODS_USER}
             />
             <FormControlLabel
+              id="ENMODS_ADMIN"
               control={
                 <Checkbox
                   checked={updatedRoles.includes(Roles.ENMODS_ADMIN)}
@@ -176,7 +178,12 @@ const EditRoles = ({
             marginTop: 'auto',
           }}
         >
-          <Button onClick={onHide} color="secondary" sx={{ marginRight: 1 }}>
+          <Button
+            id="cancelButton"
+            onClick={onHide}
+            color="secondary"
+            sx={{ marginRight: 1 }}
+          >
             Cancel
           </Button>
           <Button

diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -1,5 +1,13 @@
 import type { GridRenderCellParams } from '@mui/x-data-grid'
-import { Link, Button, Tabs, Tab, Select, MenuItem } from '@mui/material'
+import {
+  Link,
+  Button,
+  Tabs,
+  Tab,
+  Select,
+  MenuItem,
+  Typography,
+} from '@mui/material'
 import { DataGrid, GridToolbar } from '@mui/x-data-grid'
 import { useEffect, useState } from 'react'
 import { Box } from '@mui/system'
@@ -189,18 +197,26 @@ export default function AdminPage() {
         marginLeft: '4em',
       }}
     >
+      <Box sx={{ paddingBottom: '30px' }}>
+        <Typography id="pageTitle" variant="h4">
+          Electronic Data Transfer - Admin
+        </Typography>
+      </Box>
       <Tabs
+        id="tableTabs"
         value={selectedTab}
         onChange={handleTabChange}
         aria-label="admin tabs"
       >
         <Tab
+          id="usersTab"
           label="Users"
           style={{
             color: selectedTab === 0 ? 'black' : 'lightgray',
           }}
         />
         <Tab
+          id="companyTab"
           label="Company"
           style={{
             color: selectedTab === 1 ? 'black' : 'lightgray',
@@ -269,6 +285,7 @@ export default function AdminPage() {
         }}
       >
         <Button
+          id="addUserButton"
           variant="contained"
           color="primary"
           onClick={() => setShowAddRoles(true)}

diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
@@ -7,7 +7,7 @@ const theme = createTheme({
       main: '#0B5394',
     },
     secondary: {
-      main: '#6c757d',
+      main: '#385a8a',
     },
     error: {
       main: '#712024',