added tests for tasks and form navigation

cypress/e2e/process_instances.cy.js

@@ -9,17 +9,6 @@ const filterByDate = (fromDate) => {
   cy.contains('Filter').click();
 };
 
-const assertAtLeastOneItemInPaginatedResults = () => {
-  cy.getBySel('total-paginated-items')
-    .invoke('text')
-    .then(parseFloat)
-    .should('be.gt', 0);
-};
-
-const assertNoItemInPaginatedResults = () => {
-  cy.getBySel('total-paginated-items').contains('0');
-};
-
 const updateDmnText = (oldText, newText, elementId = 'wonderful_process') => {
   // this will break if there are more elements added to the drd
   cy.get(`g[data-element-id=${elementId}]`).click().should('exist');
@@ -67,12 +56,10 @@ const updateBpmnPythonScriptWithMonaco = (
 describe('process-instances', () => {
   beforeEach(() => {
     cy.signInToAdmin();
-    cy.contains('acceptance-tests-group-one').click();
-    cy.contains('Process Group: acceptance-tests-group-one');
-    // https://stackoverflow.com/q/51254946/6090676
-    cy.getBySel('process-model-show-link')
-      .contains('acceptance-tests-model-1')
-      .click();
+    cy.navigateToProcessModel(
+      'acceptance-tests-group-one',
+      'acceptance-tests-model-1'
+    );
   });
 
   it('can create a new instance and can modify', () => {
@@ -152,7 +139,7 @@ describe('process-instances', () => {
 
   it('can filter', () => {
     cy.getBySel('process-instance-list-link').click();
-    assertAtLeastOneItemInPaginatedResults();
+    cy.assertAtLeastOneItemInPaginatedResults();
 
     PROCESS_STATUSES.forEach((processStatus) => {
       if (processStatus !== 'all') {
@@ -162,7 +149,7 @@ describe('process-instances', () => {
           .contains(new RegExp(`^${processStatus}$`))
           .click();
         cy.contains('Filter').click();
-        assertAtLeastOneItemInPaginatedResults();
+        cy.assertAtLeastOneItemInPaginatedResults();
         cy.getBySel(`process-instance-status-${processStatus}`).contains(
           processStatus
         );
@@ -177,10 +164,10 @@ describe('process-instances', () => {
     const date = new Date();
     date.setHours(date.getHours() - 1);
     filterByDate(date);
-    assertAtLeastOneItemInPaginatedResults();
+    cy.assertAtLeastOneItemInPaginatedResults();
 
     date.setHours(date.getHours() + 2);
     filterByDate(date);
-    assertNoItemInPaginatedResults();
+    cy.assertNoItemInPaginatedResults();
   });
 });

cypress/e2e/tasks.cy.js

@@ -0,0 +1,107 @@
+const submitInputIntoFormField = (formName, fieldKey, fieldValue) => {
+  cy.contains(`Task: ${formName}`);
+  cy.get(fieldKey).clear().type(fieldValue);
+  cy.contains('Submit').click();
+};
+
+const checkFormFieldIsReadOnly = (formName, fieldKey) => {
+  cy.contains(`Task: ${formName}`);
+  cy.get(fieldKey).invoke('attr', 'readonly').should('exist');
+};
+
+const checkTaskHasClass = (taskName, className) => {
+  cy.get(`g[data-element-id=${taskName}]`).should('have.class', className);
+};
+
+describe('process-models', () => {
+  beforeEach(() => {
+    cy.signInToAdmin();
+  });
+
+  it('can complete and navigate a form', () => {
+    const groupId = 'acceptance-tests-group-one';
+    const modelId = `acceptance-tests-model-2`;
+    const completedTaskClassName = 'completed-task-highlight';
+    const activeTaskClassName = 'active-task-highlight';
+
+    cy.navigateToProcessModel(groupId, modelId);
+
+    // create a bunch to test pagination as well
+    cy.runPrimaryBpmnFile('validate_only');
+    cy.navigateToTasks();
+    cy.url().should('include', '/tasks');
+
+    // FIXME: this will probably need a better way to link to the proper form that we want
+    cy.contains('Complete form1').click();
+    submitInputIntoFormField('form1', '#root_user_generated_number_1', 2);
+    submitInputIntoFormField('form2', '#root_user_generated_number_2', 3);
+
+    cy.contains('Task: form3');
+    cy.getBySel('form-nav-form2').click();
+    checkFormFieldIsReadOnly('form2', '#root_user_generated_number_2');
+    cy.getBySel('form-nav-form1').click();
+    checkFormFieldIsReadOnly('form1', '#root_user_generated_number_1');
+
+    cy.getBySel('form-nav-form3').should('have.text', 'form3 - Current');
+    cy.getBySel('form-nav-form3').click();
+    submitInputIntoFormField('form3', '#root_user_generated_number_3', 4);
+
+    cy.contains('Task: form4');
+    cy.navigateToProcessModel(groupId, modelId);
+    cy.getBySel('process-instance-list-link').click();
+    cy.assertAtLeastOneItemInPaginatedResults();
+
+    // This should get the first one which should be the one we just completed
+    cy.getBySel('process-instance-show-link').first().click();
+    cy.contains('Process Instance Id: ');
+    cy.contains('"user_generated_number_1": 2');
+    cy.contains('"user_generated_number_2": 3');
+    cy.contains('"user_generated_number_3": 4');
+    cy.contains('"user_generated_number_4": 5').should('not.exist');
+    checkTaskHasClass('form1', completedTaskClassName);
+    checkTaskHasClass('form2', completedTaskClassName);
+    checkTaskHasClass('form3', completedTaskClassName);
+    checkTaskHasClass('form4', activeTaskClassName);
+
+    cy.navigateToTasks();
+    cy.url().should('include', '/tasks');
+
+    // FIXME: this will probably need a better way to link to the proper form that we want
+    cy.contains('Complete form4').click();
+    submitInputIntoFormField('form4', '#root_user_generated_number_4', 5);
+    cy.url().should('include', '/tasks');
+
+    cy.navigateToProcessModel(groupId, modelId);
+    cy.getBySel('process-instance-list-link').click();
+    cy.assertAtLeastOneItemInPaginatedResults();
+
+    // This should get the first one which should be the one we just completed
+    cy.getBySel('process-instance-show-link').first().click();
+    cy.contains('Process Instance Id: ');
+    cy.contains('"user_generated_number_1": 2');
+    cy.contains('"user_generated_number_2": 3');
+    cy.contains('"user_generated_number_3": 4');
+    cy.contains('"user_generated_number_4": 5');
+    checkTaskHasClass('form1', completedTaskClassName);
+    checkTaskHasClass('form2', completedTaskClassName);
+    checkTaskHasClass('form3', completedTaskClassName);
+    checkTaskHasClass('form4', completedTaskClassName);
+  });
+
+  it('can paginate items', () => {
+    cy.navigateToProcessModel(
+      'acceptance-tests-group-one',
+      'acceptance-tests-model-2'
+    );
+
+    // make sure we have some tasks
+    cy.runPrimaryBpmnFile('validate_only');
+    cy.runPrimaryBpmnFile('validate_only');
+    cy.runPrimaryBpmnFile('validate_only');
+    cy.runPrimaryBpmnFile('validate_only');
+    cy.runPrimaryBpmnFile('validate_only');
+
+    cy.navigateToTasks();
+    cy.basicPaginationTest();
+  });
+});

cypress/support/commands.js

@@ -1,3 +1,4 @@
+import { string } from 'prop-types';
 import { AUTH_WITH_KEYCLOAK } from '../../src/config';
 
 // ***********************************************
@@ -26,6 +27,18 @@ import { AUTH_WITH_KEYCLOAK } from '../../src/config';
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-qa=${selector}]`, ...args);
+});
+
+Cypress.Commands.add('navigateToTasks', () => {
+  cy.getBySel('nav-item-tasks').click();
+});
+
+Cypress.Commands.add('navigateToAdmin', () => {
+  cy.getBySel('nav-item-admin').click();
+});
+
 Cypress.Commands.add('signInToAdmin', (selector, ...args) => {
   cy.visit('/admin');
   if (AUTH_WITH_KEYCLOAK) {
@@ -35,10 +48,6 @@ Cypress.Commands.add('signInToAdmin', (selector, ...args) => {
   }
 });
 
-Cypress.Commands.add('getBySel', (selector, ...args) => {
-  return cy.get(`[data-qa=${selector}]`, ...args);
-});
-
 Cypress.Commands.add('createGroup', (groupId, groupDisplayName) => {
   cy.contains(groupId).should('not.exist');
   cy.contains('Add a process group').click();
@@ -71,6 +80,16 @@ Cypress.Commands.add('runPrimaryBpmnFile', (expectedText) => {
   cy.contains(expectedText).should('not.exist');
 });
 
+Cypress.Commands.add('navigateToProcessModel', (groupId, modelId) => {
+  cy.navigateToAdmin();
+  cy.contains(groupId).click();
+  cy.contains(`Process Group: ${groupId}`);
+  // https://stackoverflow.com/q/51254946/6090676
+  cy.getBySel('process-model-show-link').contains(modelId).click();
+  cy.url().should('include', `process-models/${groupId}/${modelId}`);
+  cy.contains(`Process Model: ${modelId}`);
+});
+
 Cypress.Commands.add('basicPaginationTest', () => {
   cy.get('#pagination-page-dropdown')
     .type('typing_to_open_dropdown_box....FIXME')
@@ -85,3 +104,14 @@ Cypress.Commands.add('basicPaginationTest', () => {
   cy.getBySel('pagination-previous-button').click();
   cy.contains(/^1-2 of \d+$/);
 });
+
+Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {
+  cy.getBySel('total-paginated-items')
+    .invoke('text')
+    .then(parseFloat)
+    .should('be.gt', 0);
+});
+
+Cypress.Commands.add('assertNoItemInPaginatedResults', () => {
+  cy.getBySel('total-paginated-items').contains('0');
+});

src/components/NavigationBar.tsx

@@ -17,9 +17,14 @@ export default function NavigationBar() {
     if (window.location.pathname.startsWith(navItem)) {
       className = 'active';
     }
-    const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
+    const navItemWithoutSlash = navItem.replace(/\/*/, '');
+    const title = capitalizeFirstLetter(navItemWithoutSlash);
     return (
-      <Nav.Link href={navItem} className={className}>
+      <Nav.Link
+        href={navItem}
+        className={className}
+        data-qa={`nav-item-${navItemWithoutSlash}`}
+      >
         {title}
       </Nav.Link>
     );

src/routes/ProcessInstanceShow.tsx

@@ -95,7 +95,7 @@ export default function ProcessInstanceShow() {
     );
   };
 
-  if (processInstance) {
+  if (processInstance && tasks) {
     const processInstanceToUse = processInstance as any;
     const taskData = getTaskData();
     const taskIds = getTaskIds();

src/routes/TaskShow.tsx

@@ -56,13 +56,21 @@ export default function TaskShow() {
           return <span>{userTask.name}</span>;
         }
         if (userTask.state === 'COMPLETED') {
-          return <Link to={taskUrl}>{userTask.name}</Link>;
+          return (
+            <Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
+              {userTask.name}
+            </Link>
+          );
         }
         if (userTask.state === 'FUTURE') {
           return <span style={{ color: 'red' }}>{userTask.name}</span>;
         }
         if (userTask.state === 'READY') {
-          return <Link to={taskUrl}>{userTask.name} - Current</Link>;
+          return (
+            <Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
+              {userTask.name} - Current
+            </Link>
+          );
         }
         return null;
       });