test: Add PDF service in E2E

Author: Betree

.github/workflows/e2e.yml

@@ -25,6 +25,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 }}
@@ -137,6 +138,12 @@ jobs:
           repository: opencollective/opencollective-images
           path: opencollective-images
 
+      - name: Checkout (PDF)
+        uses: actions/checkout@v3
+        with:
+          repository: opencollective/opencollective-pdf
+          path: opencollective-pdf
+
       # Prepare API
 
       - name: Restore node_modules (api)
@@ -173,6 +180,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)
@@ -218,9 +243,13 @@ 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:

.gitignore

@@ -12,6 +12,7 @@ coverage
 .nyc_output
 test/cypress/screenshots
 test/cypress/videos
+test/cypress/downloads
 dist
 stage
 *.swp

components/CreateGiftCardsSuccess.js

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

@@ -32,6 +32,7 @@ const ExpenseAttachedFiles = ({ files, onRemove, showInvoice, collective, expens
                 size={88}
                 showFileName
                 fileName={intl.formatMessage({ defaultMessage: 'Download expense' })}
+                data-cy="download-expense-invoice-btn"
               />
             )}
           </ExpenseInvoiceDownloadHelper>

components/transactions/TransactionDetails.js

@@ -272,13 +272,18 @@ const TransactionDetails = ({ displayActions, transaction, onMutationSuccess })
               <StyledButton
                 buttonSize="small"
                 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,5 +1,7 @@
 // eslint-disable-next-line node/no-unpublished-require
 const { defineConfig } = require('cypress');
+const { readPdf } = require('./test/cypress/scripts/read-pdf.ts');
+const { listDownloads } = require('./test/cypress/scripts/list-downloads.ts');
 
 module.exports = defineConfig({
   experimentalMemoryManagement: true,
@@ -21,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
@@ -38,6 +41,8 @@ module.exports = defineConfig({
           console.log(...message); // eslint-disable-line no-console
           return null;
         },
+        readPdf,
+        listDownloads,
       });
 
       config.baseUrl = process.env.WEBSITE_URL || 'http://localhost:3000';