delete videos on success and address race condition in cypress test

spiffworkflow-frontend/cypress.config.js

@@ -1,12 +1,41 @@
 /* eslint-disable */
 const { defineConfig } = require('cypress');
+const { rm } = require('fs/promises')
+
+// yes use video compression in CI, where we will set the env var so we upload to cypress dashboard
+const useVideoCompression = !!process.env.CYPRESS_RECORD_KEY
+
+// https://github.com/cypress-io/cypress/issues/2522
+const deleteVideosOnSuccess = (on) => {
+  const filesToDelete = []
+  on('after:spec', (_spec, results) => {
+    if (results.stats.failures === 0 && results.video) {
+      filesToDelete.push(results.video)
+    }
+  })
+  on('after:run', async () => {
+    if (filesToDelete.length) {
+      console.log(
+        'after:run hook: Deleting %d video(s) from successful specs',
+        filesToDelete.length
+      )
+      await Promise.all(filesToDelete.map((videoFile) => rm(videoFile)))
+    }
+  })
+}
 
 module.exports = defineConfig({
   projectId: 'crax1q',
+
+  // since it's slow
+  videoCompression: useVideoCompression,
+
+  videoUploadOnPasses: false,
   chromeWebSecurity: false,
   e2e: {
     baseUrl: 'http://localhost:7001',
-    setupNodeEvents(_on, config) {
+    setupNodeEvents(on, config) {
+      deleteVideosOnSuccess(on)
       require('@cypress/grep/src/plugin')(config);
       return config;
     },

spiffworkflow-frontend/cypress/support/commands.js

@@ -121,10 +121,23 @@ Cypress.Commands.add('basicPaginationTest', () => {
 
   // NOTE: this is a em dash instead of en dash
   cy.contains(/\b1–2 of \d+/);
-  cy.get('.cds--pagination__button--forward').click();
+
-  cy.contains(/\b3–4 of \d+/);
+  // ok, trying to ensure that we have everything loaded before we leave this
-  cy.get('.cds--pagination__button--backward').click();
+  // function and try to sign out. Just showing results 1-2 of blah is not good enough,
-  cy.contains(/\b1–2 of \d+/);
+  // since the ajax request may not have finished yet.
+  // to be sure it's finished, grab the log id from page 1. remember it.
+  // then use the magical contains command that waits for the element to exist AND
+  // for that element to contain the text we're looking for.
+  cy.getBySel('process-instance-log-id')
+    .first()
+    .then(($element) => {
+      const oldId = $element.text().trim();
+      cy.get('.cds--pagination__button--forward').click();
+      cy.contains(/\b3–4 of \d+/);
+      cy.get('.cds--pagination__button--backward').click();
+      cy.contains(/\b1–2 of \d+/);
+      cy.contains('[data-qa=process-instance-log-id]', oldId);
+    });
 });
 
 Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -45,7 +45,7 @@ export default function ProcessInstanceLogList() {
       const rowToUse = row as any;
       return (
         <tr key={rowToUse.id}>
-          <td>{rowToUse.id}</td>
+          <td data-qa="process-instance-log-id">{rowToUse.id}</td>
           <td>{rowToUse.message}</td>
           <td>{rowToUse.bpmn_task_name}</td>
           {isDetailedView && (