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

.github/workflows/ci.yml

@@ -16,6 +16,7 @@ env:
   NODE_ENV: test
   WEBSITE_URL: http://localhost:3000
   API_URL: http://localhost:3060
+  PDF_SERVICE_URL: http://localhost:3002
   API_KEY: dvl-1510egmf4a23d80342403fb599qd
   CI: true
 

.github/workflows/e2e.yml

@@ -8,14 +8,15 @@ env:
   OC_ENV: ci
   NODE_ENV: test
   WEBSITE_URL: http://localhost:3000
+  IMAGES_URL: http://localhost:3001
+  PDF_SERVICE_URL: http://localhost:3002
   API_URL: http://localhost:3060
   API_KEY: dvl-1510egmf4a23d80342403fb599qd
   CI: true
 
   E2E_TEST: 1
   PGHOST: localhost
   PGUSER: postgres
-  IMAGES_URL: http://localhost:3001
   CYPRESS_RECORD: false
   CYPRESS_VIDEO: false
   CYPRESS_VIDEO_UPLOAD_ON_PASSES: false
@@ -255,12 +256,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';

lib/transactions.js

@@ -12,7 +12,7 @@ import { formatCurrency } from './currency-utils';
 import { toIsoDateStr } from './date-utils';
 import { createError, ERROR } from './errors';
 import { getFromLocalStorage, LOCAL_STORAGE_KEYS } from './local-storage';
-import { collectiveInvoiceURL, invoiceServiceURL, transactionInvoiceURL } from './url-helpers';
+import { collectiveInvoiceURL, PDF_SERVICE_URL, transactionInvoiceURL } from './url-helpers';
 
 const messages = defineMessages({
   hostFee: {
@@ -210,7 +210,7 @@ export const saveInvoice = async ({
     dateTo,
     createdAt,
   });
-  const getParams = { format: 'blob', allowExternal: invoiceServiceURL };
+  const getParams = { format: 'blob', allowExternal: PDF_SERVICE_URL };
   const accessToken = getFromLocalStorage(LOCAL_STORAGE_KEYS.ACCESS_TOKEN);
   if (accessToken) {
     getParams.headers = { Authorization: `Bearer ${accessToken}` };

lib/url-helpers.js

@@ -4,7 +4,7 @@ import { CollectiveType } from './constants/collectives';
 import { TransactionTypes } from './constants/transactions';
 import { getWebsiteUrl } from './utils';
 
-export const invoiceServiceURL = process.env.PDF_SERVICE_URL;
+export const PDF_SERVICE_URL = process.env.PDF_SERVICE_URL;
 
 // ---- Utils ----
 
@@ -37,15 +37,15 @@ export const objectToQueryString = options => {
 // ---- Routes to other Open Collective services ----
 
 export const collectiveInvoiceURL = (collectiveSlug, hostSlug, startDate, endDate, format) => {
-  return `${invoiceServiceURL}/receipts/collectives/${collectiveSlug}/${hostSlug}/${startDate}/${endDate}/receipt.${format}`;
+  return `${PDF_SERVICE_URL}/receipts/collectives/${collectiveSlug}/${hostSlug}/${startDate}/${endDate}/receipt.${format}`;
 };
 
 export const transactionInvoiceURL = transactionUUID => {
-  return `${invoiceServiceURL}/receipts/transactions/${transactionUUID}/receipt.pdf`;
+  return `${PDF_SERVICE_URL}/receipts/transactions/${transactionUUID}/receipt.pdf`;
 };
 
 export const expenseInvoiceUrl = expenseId => {
-  return `${invoiceServiceURL}/expense/${expenseId}/invoice.pdf`;
+  return `${PDF_SERVICE_URL}/expense/${expenseId}/invoice.pdf`;
 };
 
 /**
@@ -54,7 +54,7 @@ export const expenseInvoiceUrl = expenseId => {
  * @param {string} filename - filename **with** extension
  */
 export const giftCardsDownloadUrl = filename => {
-  return `${invoiceServiceURL}/giftcards/from-data/${filename}`;
+  return `${PDF_SERVICE_URL}/giftcards/from-data/${filename}`;
 };
 
 // ---- Routes to external services ----

scripts/run_e2e_tests.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+mkdir -p logs
+
 echo "> Starting maildev server"
 npx [email protected] &
 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 -
 

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

@@ -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/09-giftcards-admin.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();