Add PDF service in E2E (#8909)

* test: Add PDF service in E2E

* 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
@@ -25,6 +26,7 @@ env:
   FRONTEND_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend
   API_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-api
   IMAGES_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-images
+  PDF_FOLDER: /home/runner/work/opencollective-frontend/opencollective-frontend/opencollective-pdf
   TERM: xterm
   CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   STRIPE_WEBHOOK_KEY: ${{ secrets.STRIPE_WEBHOOK_KEY }}
@@ -129,6 +131,12 @@ jobs:
           repository: opencollective/opencollective-images
           path: opencollective-images
 
+      - name: Checkout (PDF)
+        uses: actions/checkout@v4
+        with:
+          repository: opencollective/opencollective-pdf
+          path: opencollective-pdf
+
       # Prepare API
 
       - name: Restore node_modules (api)
@@ -165,6 +173,24 @@ jobs:
         working-directory: opencollective-images
         run: npm run build
 
+      # Prepare PDF
+
+      - name: Restore node_modules (pdf)
+        uses: actions/cache@v3
+        id: pdf-node-modules
+        with:
+          path: opencollective-pdf/node_modules
+          key: ${{ runner.os }}-pdf-node-modules-${{ hashFiles('opencollective-pdf/package-lock.json') }}
+
+      - name: Install dependencies (pdf)
+        working-directory: opencollective-pdf
+        if: steps.pdf-node-modules.outputs.cache-hit != 'true'
+        run: npm ci --prefer-offline --no-audit
+
+      - name: Build (pdf)
+        working-directory: opencollective-pdf
+        run: npm run build
+
       # Prepare Frontend
 
       - name: Restore node_modules (frontend)
@@ -210,13 +236,18 @@ jobs:
         if: steps.next-build.outputs.cache-hit != 'true'
         run: npm run build
 
+      # Seed DB
+
       - name: Setup DB
         run: ./scripts/setup_db.sh
 
+      # Run tests
+
       - name: Run E2E with Cypress
         run: ./scripts/run_e2e_tests.sh
         env:
           CYPRESS_TEST_FILES: ${{ matrix.files }}
+
       - name: Archive test recordings
         uses: actions/upload-artifact@v3
         with:
@@ -226,5 +257,12 @@ jobs:
             test/cypress/videos
         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,13 +5,15 @@ node_modules
 npm-debug.log.*
 ./report.*.json
 *.log
+logs
 yarn.lock
 .DS_Store
 build
 coverage
 .nyc_output
 test/cypress/screenshots
 test/cypress/videos
+test/cypress/downloads
 dist
 stage
 *.swp

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 (
@@ -105,7 +105,14 @@ export default class CreateGiftCardsSuccess extends React.Component {
                 })}
               >
                 {({ loading, downloadFile }) => (
-                  <StyledButton minWidth={270} m={2} buttonSize="large" loading={loading} onClick={downloadFile}>
+                  <StyledButton
+                    minWidth={270}
+                    m={2}
+                    buttonSize="large"
+                    loading={loading}
+                    onClick={downloadFile}
+                    data-cy="download-gift-cards-btn"
+                  >
                     <Printer size="1em" />
                     &nbsp;
                     <FormattedMessage id="CreateGiftCardsSuccess.Download" defaultMessage="Download cards" />

components/expenses/ExpenseAttachedFiles.js

@@ -25,6 +25,7 @@ const ExpenseAttachedFiles = ({ files, onRemove, openFileViewer }) => {
             fileSize={file.info?.size}
             showFileName
             openFileViewer={openFileViewer}
+            data-cy="download-expense-invoice-btn"
           />
         ) : (
           <LocalFilePreview size={88} file={file} />

components/expenses/ExpenseMoreActionsButton.js

@@ -212,6 +212,7 @@ const ExpenseMoreActionsButton = ({
                       loading={isLoading}
                       onClick={downloadInvoice}
                       disabled={processExpense.loading || isDisabled}
+                      data-cy="download-expense-invoice-btn"
                     >
                       <IconDownload size="16px" />
                       {isLoading ? (

components/transactions/TransactionDetails.js

@@ -320,14 +320,20 @@ const TransactionDetails = ({ displayActions, transaction, onMutationSuccess })
             {showDownloadInvoiceButton && (
               <StyledButton
                 buttonSize="small"
+                data-loading={loadingInvoice}
                 loading={loadingInvoice}
-                onClick={downloadInvoiceWith({ transactionUuid: uuid, toCollectiveSlug: toAccount.slug })}
+                onClick={downloadInvoiceWith({
+                  transactionUuid: uuid,
+                  toCollectiveSlug: toAccount.slug,
+                  createdAt: transaction.createdAt,
+                })}
                 minWidth={140}
                 background="transparent"
                 textTransform="capitalize"
                 ml={2}
                 mb={2}
                 px="unset"
+                data-cy="download-transaction-receipt-btn"
               >
                 {expense && <FormattedMessage id="DownloadInvoice" defaultMessage="Download invoice" />}
                 {order && <FormattedMessage id="DownloadReceipt" defaultMessage="Download receipt" />}

cypress.config.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line node/no-unpublished-require
 const { defineConfig } = require('cypress');
 const fs = require('fs');
+const { getTextFromPdfContent } = require('./test/cypress/scripts/get-text-from-pdf-content.ts');
 
 module.exports = defineConfig({
   experimentalMemoryManagement: true,
@@ -22,6 +23,7 @@ module.exports = defineConfig({
   fixturesFolder: 'test/cypress/fixtures',
   screenshotsFolder: 'test/cypress/screenshots',
   videosFolder: 'test/cypress/videos',
+  downloadsFolder: 'test/cypress/downloads',
   e2e: {
     setupNodeEvents(on, config) {
       // eslint-disable-next-line node/no-unpublished-require
@@ -39,6 +41,7 @@ module.exports = defineConfig({
           console.log(...message); // eslint-disable-line no-console
           return null;
         },
+        getTextFromPdfContent,
       });
 
       // Delete videos if the test succeeds

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 ----

package.json

@@ -278,6 +278,7 @@
     "node-polyfill-webpack-plugin": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
+    "pdf-parse": "^1.1.1",
     "postcss": "8.4.32",
     "prettier": "3.1.1",
     "prettier-plugin-tailwindcss": "0.5.9",

scripts/run_e2e_tests.sh

@@ -1,12 +1,14 @@
 #!/bin/bash
 
+mkdir -p logs
+
 echo "> Starting maildev server"
 npx [email protected] &
 MAILDEV_PID=$!
 
 echo "> Starting stripe webhook listener"
 export STRIPE_WEBHOOK_SIGNING_SECRET=$(stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe --print-secret)
-stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe > /dev/null &
+stripe --api-key $STRIPE_WEBHOOK_KEY listen --forward-connect-to localhost:3060/webhooks/stripe >/dev/null &
 STRIPE_WEBHOOK_PID=$!
 
 echo "> Starting api server"
@@ -35,10 +37,20 @@ if [ -z "$IMAGES_FOLDER" ]; then
 else
   cd $IMAGES_FOLDER
 fi
-npm start &
+npm start >../logs/images-service.txt 2>&1 &
 IMAGES_PID=$!
 cd -
 
+echo "> Starting PDF server"
+if [ -z "$PDF_FOLDER" ]; then
+  cd ~/pdf
+else
+  cd $PDF_FOLDER
+fi
+PORT=3002 npm start >../logs/pdf-service.txt 2>&1 &
+PDF_PID=$!
+cd -
+
 # Set `$CYPRESS_RECORD` to `true` in ENV to activate records
 if [ "$CYPRESS_RECORD" = "true" ]; then
   CYPRESS_RECORD="--record"
@@ -71,6 +83,8 @@ echo ""
 wait_for_service Frontend 127.0.0.1 3000
 echo ""
 wait_for_service IMAGES 127.0.0.1 3001
+echo ""
+wait_for_service PDF 127.0.0.1 3002
 
 echo ""
 echo "> Running cypress tests"
@@ -80,15 +94,16 @@ npm run cypress: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"
-  exit 1;
+  exit 1
 fi
 echo ""
 
 echo "Killing all node processes"
-kill $MAILDEV_PID;
+kill $MAILDEV_PID
 kill $STRIPE_WEBHOOK_PID
-kill $API_PID;
-kill $FRONTEND_PID;
-kill $IMAGES_PID;
+kill $API_PID
+kill $FRONTEND_PID
+kill $IMAGES_PID
+kill $PDF_PID
 echo "Exiting with code $RETURN_CODE"
 exit $RETURN_CODE