test(e2e): change PDF approach to work with headless browsers

Author: Betree

.github/workflows/e2e.yml

@@ -255,12 +255,26 @@ jobs:
         env:
           CYPRESS_TEST_FILES: ${{ matrix.files }}
 
+      - name: Archive logs
+        uses: actions/upload-artifact@v3
+        with:
+          name: logs
+          path: logs
+        if: ${{ failure() }}
+
       - name: Archive test screenshots
         uses: actions/upload-artifact@v3
         with:
           name: screenshots
           path: test/cypress/screenshots
         if: ${{ failure() }}
 
+      - name: Archive download folder
+        uses: actions/upload-artifact@v3
+        with:
+          name: downloads
+          path: test/cypress/downloads
+        if: ${{ failure() }}
+
       - name: Report Coverage
         run: npm run test:coverage

.gitignore

@@ -5,6 +5,7 @@ node_modules
 npm-debug.log.*
 ./report.*.json
 *.log
+logs
 yarn.lock
 .DS_Store
 build

components/CreateGiftCardsSuccess.js

@@ -68,7 +68,7 @@ export default class CreateGiftCardsSuccess extends React.Component {
   };
 
   renderManualSuccess() {
-    const filename = `${this.props.collectiveSlug}-giftcards-${Date.now()}.pdf`;
+    const filename = `${this.props.collectiveSlug}-giftcards.pdf`;
     const downloadUrl = giftCardsDownloadUrl(filename);
 
     return (

components/transactions/TransactionDetails.js

@@ -271,6 +271,7 @@ const TransactionDetails = ({ displayActions, transaction, onMutationSuccess })
             {showDownloadInvoiceButton && (
               <StyledButton
                 buttonSize="small"
+                data-loading={loadingInvoice}
                 loading={loadingInvoice}
                 onClick={downloadInvoiceWith({
                   transactionUuid: uuid,

cypress.config.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line node/no-unpublished-require
 const { defineConfig } = require('cypress');
-const { readPdf } = require('./test/cypress/scripts/read-pdf.ts');
-const { listFiles } = require('./test/cypress/scripts/list-files.ts');
+const { getTextFromPdfContent } = require('./test/cypress/scripts/get-text-from-pdf-content.ts');
 
 module.exports = defineConfig({
   experimentalMemoryManagement: true,
@@ -41,8 +40,7 @@ module.exports = defineConfig({
           console.log(...message); // eslint-disable-line no-console
           return null;
         },
-        readPdf,
-        listFiles,
+        getTextFromPdfContent,
       });
 
       config.baseUrl = process.env.WEBSITE_URL || 'http://localhost:3000';

package-lock.json

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+mkdir -p logs
+
 echo "> Starting maildev server"
 npx maildev@2.0.5 &
 MAILDEV_PID=$!
@@ -35,7 +37,7 @@ if [ -z "$IMAGES_FOLDER" ]; then
 else
   cd $IMAGES_FOLDER
 fi
-npm start &
+npm start >logs/images-service.txt 2>&1 &
 IMAGES_PID=$!
 cd -
 
@@ -45,7 +47,7 @@ if [ -z "$PDF_FOLDER" ]; then
 else
   cd $PDF_FOLDER
 fi
-PORT=3002 npm start &
+PORT=3002 npm start >logs/pdf-service.txt 2>&1 &
 PDF_PID=$!
 cd -
 
@@ -92,6 +94,10 @@ npx cypress@12.7.0 run ${CYPRESS_RECORD} --env OC_ENV=$OC_ENV --spec "test/cypre
 RETURN_CODE=$?
 if [ $RETURN_CODE -ne 0 ]; then
   echo "Error with cypress e2e tests, exiting"
+  pwd
+  ls
+  ls test/cypress
+  ls test/cypress/downloads
   exit 1
 fi
 echo ""

scripts/run_e2e_tests.sh

@@ -21,15 +21,16 @@ describe('collective.transactions', () => {
     cy.login({ redirect: '/brusselstogether/transactions' });
     cy.contains('button[data-cy=transaction-details]', 'View Details').first().click();
     cy.getByDataCy('download-transaction-receipt-btn').first().click();
-    cy.waitForDownload('brusselstogether_2017-12-04_b961becd-cb85-6c70-6ec5-075151203084.pdf').then(file => {
-      cy.task('readPdf', file)
-        .should('contain', 'BrusselsTogether	ASBL') // Bill from
-        .should('contain', 'Frederik') // Bill to
-        .should('contain', 'brusselstogetherasbl_b961becd-cb85-6c70-6ec5-075151203084')
-        .should('contain', `Contribution	#1037`)
-        .should('contain', '2017-12-04')
-        .should('contain', 'monthly	recurring	subscription')
-        .should('contain', '$10.00');
-    });
+    cy.getByDataCy('download-transaction-receipt-btn').first().should('have.attr', 'data-loading', 'true'); // Downloading
+    cy.getByDataCy('download-transaction-receipt-btn').first().should('have.attr', 'data-loading', 'false'); // Downloaded
+    const filename = 'brusselstogether_2017-12-04_b961becd-cb85-6c70-6ec5-075151203084.pdf';
+    cy.getDownloadedPDFContent(filename)
+      .should('contain', 'BrusselsTogether	ASBL') // Bill from
+      .should('contain', 'Frederik') // Bill to
+      .should('contain', 'brusselstogetherasbl_b961becd-cb85-6c70-6ec5-075151203084')
+      .should('contain', `Contribution	#1037`)
+      .should('contain', '2017-12-04')
+      .should('contain', 'monthly	recurring	subscription')
+      .should('contain', '$10.00');
   });
 });

test/cypress/integration/02-collective.transactions.test.js

@@ -38,11 +38,10 @@ describe('Gift cards admin', () => {
     });
 
     // Download the PDF
+    // Mock date to make sure we have the same filename
     cy.getByDataCy('download-gift-cards-btn').click();
-    const fileRegex = new RegExp(`${collectiveSlug}-giftcards-\\d+\\.pdf$`);
-    cy.waitForDownload(fileRegex).then(file => {
-      cy.task('readPdf', file).should('contain', '$542.00	Gift	Card	from	TestOrg');
-    });
+    const filename = `${collectiveSlug}-giftcards.pdf`;
+    cy.getDownloadedPDFContent(filename).should('contain', '$542.00	Gift	Card	from	TestOrg');
 
     // Links should also be added to gift cards list
     cy.contains('a[href$="/admin/gift-cards"]', 'Back to Gift Cards list').click();

test/cypress/integration/09-giftcards-admin.test.js

@@ -561,13 +561,12 @@ describe('New expense flow', () => {
     it('Downloads PDF', () => {
       cy.visit(expenseUrl);
       cy.getByDataCy('download-expense-invoice-btn').click();
-      const fileRegex = new RegExp(`Expense-${expense.legacyId}-.*.pdf`);
-      cy.waitForDownload(fileRegex).then(file => {
-        cy.task('readPdf', file)
-          .should('contain', `Expense	#${expense.legacyId}:	Expense	for	E2E	tests`)
-          .should('contain', 'Collective:	Test	Collective')
-          .should('contain', '$10.00');
-      });
+      const date = new Date(expense.createdAt).toISOString().split('T')[0];
+      const filename = `Expense-${expense.legacyId}-${collective.slug}-invoice-${date}.pdf`;
+      cy.getDownloadedPDFContent(filename)
+        .should('contain', `Expense	#${expense.legacyId}:	Expense	for	E2E	tests`)
+        .should('contain', 'Collective:	Test	Collective')
+        .should('contain', '$10.00');
     });
 
     it('Approve, unapprove, reject and pay actions on expense', () => {