process group cypress tests are passing w/ burnettk

cypress.config.js

@@ -10,4 +10,9 @@ module.exports = defineConfig({
       // implement node event listeners here
     },
   },
+
+  // this scrolls away from the elements for some reason with carbon when set to top
+  // https://github.com/cypress-io/cypress/issues/2353
+  // https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Scrolling
+  scrollBehavior: "center",
 });

cypress/e2e/process_groups.cy.js

@@ -30,9 +30,9 @@ describe('process-groups', () => {
       newGroupDisplayName
     );
 
-    cy.contains('Delete').click();
+    cy.contains('Delete Process Group').click();
     cy.contains('Are you sure');
-    cy.contains('OK').click();
+    cy.getBySel('modal-confirmation-dialog').get('.cds--btn--danger').click();
     cy.url().should('include', `process-groups`);
     cy.contains(groupId).should('not.exist');
   });

cypress/support/commands.js

@@ -101,18 +101,15 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add('basicPaginationTest', () => {
-  cy.get('#pagination-page-dropdown')
+  cy.getBySel('pagination-options').scrollIntoView();
-    .type('typing_to_open_dropdown_box....FIXME')
+  cy.get('.cds--select__item-count').find('.cds--select-input').select('2');
-    .find('.dropdown-item')
-    .contains(/^2$/)
-    .click();
 
-  cy.contains(/^1-2 of \d+$/);
+  // NOTE: this is a em dash instead of en dash
-  cy.getBySel('pagination-previous-button-inactive');
+  cy.contains(/\b1–2 of \d+/);
-  cy.getBySel('pagination-next-button').click();
+  cy.get('.cds--pagination__button--forward').click();
-  cy.contains(/^3-4 of \d+$/);
+  cy.contains(/\b3–4 of \d+/);
-  cy.getBySel('pagination-previous-button').click();
+  cy.get('.cds--pagination__button--backward').click();
-  cy.contains(/^1-2 of \d+$/);
+  cy.contains(/\b1–2 of \d+/);
 });
 
 Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {

package-lock.json

@@ -9193,9 +9193,9 @@
       "integrity": "sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A=="
     },
     "node_modules/cypress": {
-      "version": "10.8.0",
+      "version": "10.11.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
-      "integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
+      "integrity": "sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -36484,9 +36484,9 @@
       "integrity": "sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A=="
     },
     "cypress": {
-      "version": "10.8.0",
+      "version": "10.11.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
-      "integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
+      "integrity": "sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA==",
       "dev": true,
       "requires": {
         "@cypress/request": "^2.88.10",

src/components/ButtonWithConfirmation.tsx

@@ -26,13 +26,6 @@ export default function ButtonWithConfirmation({
     setShowConfirmationPrompt(false);
   };
 
-  const modalBodyElement = () => {
-    if (description) {
-      return <Modal.Body>{description}</Modal.Body>;
-    }
-    return null;
-  };
-
   const handleConfirmation = () => {
     onConfirmation();
     setShowConfirmationPrompt(false);
@@ -43,6 +36,7 @@ export default function ButtonWithConfirmation({
       <Modal
         open={showConfirmationPrompt}
         danger
+        data-qa="modal-confirmation-dialog"
         modalHeading={description}
         modalLabel={title}
         primaryButtonText={confirmButtonLabel}

src/components/NavigationBar.tsx

@@ -56,14 +56,22 @@ export default function NavigationBar() {
       return (
         <>
           <HeaderGlobalAction>{UserService.getUsername()}</HeaderGlobalAction>
-          <HeaderGlobalAction aria-label="Logout" onClick={handleLogout}>
+          <HeaderGlobalAction
+            aria-label="Logout"
+            onClick={handleLogout}
+            data-qa="logout-button"
+          >
             <Logout />
           </HeaderGlobalAction>
         </>
       );
     }
     return (
-      <HeaderGlobalAction aria-label="Login" onClick={handleLogin}>
+      <HeaderGlobalAction
+        data-qa="login-button"
+        aria-label="Login"
+        onClick={handleLogin}
+      >
         <Login />
       </HeaderGlobalAction>
     );

src/components/PaginationForTable.tsx

@@ -35,20 +35,24 @@ export default function PaginationForTable({
     navigate(`${path}?page=${newPage}&per_page=${pageSize}${queryParamString}`);
   };
 
-  return (
+  if (pagination) {
-    <>
+    return (
-      {tableToDisplay}
+      <>
-      <Pagination
+        {tableToDisplay}
-        backwardText="Previous page"
+        <Pagination
-        forwardText="Next page"
+          data-qa="pagination-options"
-        itemsPerPageText="Items per page:"
+          backwardText="Previous page"
-        page={page}
+          forwardText="Next page"
-        pageNumberText="Page Number"
+          itemsPerPageText="Items per page:"
-        pageSize={perPage}
+          page={page}
-        pageSizes={perPageOptions || PER_PAGE_OPTIONS}
+          pageNumberText="Page Number"
-        totalItems={(pagination as any).total}
+          pageSize={perPage}
-        onChange={updateRows}
+          pageSizes={perPageOptions || PER_PAGE_OPTIONS}
-      />
+          totalItems={pagination.total}
-    </>
+          onChange={updateRows}
-  );
+        />
+      </>
+    );
+  }
+  return null;
 }

src/components/ProcessGroupForm.tsx

@@ -105,6 +105,7 @@ export default function ProcessGroupForm({
     const textInputs = [
       <TextInput
         id="process-group-display-name"
+        name="display_name"
         invalidText="Display Name is required."
         invalid={displayNameInvalid}
         labelText="Display Name*"
@@ -118,6 +119,7 @@ export default function ProcessGroupForm({
       textInputs.push(
         <TextInput
           id="process-group-identifier"
+          name="id"
           invalidText="Identifier is required and must be all lowercase characters and hyphens."
           invalid={identifierInvalid}
           labelText="Identifier*"
@@ -137,6 +139,7 @@ export default function ProcessGroupForm({
     textInputs.push(
       <TextInput
         id="process-group-description"
+        name="description"
         labelText="Description"
         value={processGroup.description}
         onChange={(event: any) =>
@@ -159,7 +162,7 @@ export default function ProcessGroupForm({
         <ButtonWithConfirmation
           description={`Delete Process Group ${processGroup.id}?`}
           onConfirmation={deleteProcessGroup}
-          buttonLabel="Delete"
+          buttonLabel="Delete Process Group"
           confirmButtonLabel="Delete"
         />
       );

src/routes/ProcessGroupList.tsx

@@ -3,11 +3,11 @@ import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Button,
   Table,
-  ExpandableTile,
+  // ExpandableTile,
-  TileAboveTheFoldContent,
+  // TileAboveTheFoldContent,
-  TileBelowTheFoldContent,
+  // TileBelowTheFoldContent,
-  TextInput,
+  // TextInput,
-  ClickableTile,
+  // ClickableTile,
   // @ts-ignore
 } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';