PDF verification end-to-end test (#614)

* add package download fixture

* click next recursively in test

* refactor test

* verify form field value exists

* extract methods in test

* reorder imports

* update function signature

Author: ethangardner

e2e/package.json

@@ -10,7 +10,8 @@
   },
   "devDependencies": {
     "dotenv": "^16.4.7",
-    "path-to-regexp": "^8.2.0"
+    "path-to-regexp": "^8.2.0",
+    "pdf-lib": "^1.17.1"
   },
   "dependencies": {
     "@gsa-tts/forms-common": "workspace:*"

e2e/src/fixtures/add-download.fixture.ts

@@ -0,0 +1,42 @@
+import { test as base, expect } from './import-file.fixture';
+import { enLocale as message } from '@gsa-tts/forms-common';
+
+export type AddPackageDownloadFixture = {
+  formUrl: string;
+};
+
+const test = base.extend<AddPackageDownloadFixture>({
+  formUrl: async ({ page, formUrl }, use) => {
+    await page.goto(formUrl);
+
+    await page.getByRole('button', { name: message.controls.addElement.textContent, exact: true }).click();
+    await page
+      .getByRole('button', { name: 'Page', exact: true })
+      .click();
+    await page
+      .getByRole('link', { name: 'Untitled Page', exact: true })
+      .click();
+
+    await page.getByRole('button', { name: message.controls.addElement.textContent, exact: true }).click();
+
+    await page
+      .getByRole('button', { name: message.patterns.packageDownload.displayName })
+      .click();
+
+    await page
+      .getByRole('button', { name: 'Save and Close', exact: true })
+      .click();
+
+    await page.waitForResponse((response) =>
+      response.url().includes('/api/forms') && response.status() === 200,
+    );
+
+    await page
+      .getByRole('link', { name: 'Preview', exact: true })
+      .click();
+
+    await use(formUrl);
+  },
+});
+
+export { test, expect };

e2e/src/form-filler.spec.ts

@@ -1,6 +1,8 @@
-import { test, expect } from './fixtures/import-file.fixture.js';
-import { FormFillerPage } from './models/form-filler-page.js';
+import fs from 'fs/promises';
 import { match } from 'path-to-regexp';
+import { PDFDocument } from 'pdf-lib';
+import { test, expect } from './fixtures/add-download.fixture.js';
+import { FormFillerPage } from './models/form-filler-page.js';
 import { Create } from '../../packages/design/src/FormManager/routes';
 
 test.describe('Fill a form as an applicant', () => {
@@ -14,13 +16,13 @@ test.describe('Fill a form as an applicant', () => {
     }
 
     return matcher(pagePath);
-  }
+  };
 
   test('Next button navigation', async ({ page, formUrl }) => {
     const url = new URL(formUrl);
     const result = getFormParams(url);
 
-    if(result) {
+    if (result) {
       const { formId } = result.params;
       const formPage = new FormFillerPage(page);
       await formPage.navigateTo(`${url.protocol}//${url.host}/forms/${formId}`);
@@ -39,7 +41,7 @@ test.describe('Fill a form as an applicant', () => {
     params.append('page', '2');
     const result = getFormParams(url);
 
-    if(result) {
+    if (result) {
       const { formId } = result.params;
       const formPage = new FormFillerPage(page);
       await formPage.navigateTo(`${url.protocol}//${url.host}/forms/${formId}?${params.toString()}`);
@@ -51,4 +53,81 @@ test.describe('Fill a form as an applicant', () => {
       throw new Error('Invalid form URL');
     }
   });
+
+  test('Verify download', async ({ page, formUrl }) => {
+    const url = new URL(formUrl);
+    const result = getFormParams(url);
+    const fields = [
+      { label: 'First Name', value: 'John' },
+      { label: 'Middle Name', value: 'Michael' },
+      { label: 'Last Name', value: 'Doe' },
+    ];
+
+    const getPdfFormFromFile = async (downloadPath: string) => {
+      const pdfBuffer = await fs.readFile(downloadPath);
+      const pdfDoc = await PDFDocument.load(pdfBuffer);
+      return pdfDoc.getForm();
+    }
+
+    const isFieldValuePresent = (pdfForm: PDFForm, fieldNames: string[], value: string) => {
+      let fieldValueFound = false;
+      for (const fieldName of fieldNames) {
+        const pdfField = pdfForm.getField(fieldName);
+        if (pdfField.getText() === value) {
+          fieldValueFound = true;
+          break;
+        }
+      }
+      return fieldValueFound;
+    }
+
+    if (result) {
+      const { formId } = result.params;
+      const formPage = new FormFillerPage(page);
+      await formPage.navigateTo(`${url.protocol}//${url.host}/forms/${formId}`);
+
+      const isDownloadButtonVisible = async (): Promise<boolean> =>
+        await page.getByRole('button', { name: 'Download PDF', exact: true }).isVisible();
+
+      const waitForDownloadButton = async () => {
+        let isButtonVisible = await isDownloadButtonVisible();
+        while (!isButtonVisible) {
+          await formPage.clickNextButton();
+          await page.waitForTimeout(500);
+          isButtonVisible = await isDownloadButtonVisible();
+        }
+      };
+
+      for (const { label, value } of fields) {
+        await formPage.updateInputValue(label, value);
+      }
+
+      await waitForDownloadButton();
+
+      const downloadPromise = page.waitForEvent('download');
+      await page.getByRole('button', { name: 'Download PDF', exact: true }).click();
+      const download = await downloadPromise;
+      expect(download.suggestedFilename()).toBe(
+        'demo-application_for_certificate_of_pardon_for_simple_marijuana_possession.pdf',
+      );
+
+      const downloadPath = await download.path();
+      const pdfForm = await getPdfFormFromFile(downloadPath);
+      const pdfFieldNames = pdfForm.getFields().map((pdfFormField) => pdfFormField.getName());
+
+      let fieldValuesFound = [];
+      for (const { value } of fields) {
+        fieldValuesFound = [
+          ...fieldValuesFound,
+          isFieldValuePresent(pdfForm, pdfFieldNames, value)
+        ];
+      }
+
+      expect(fieldValuesFound.every(value => value === true)).toBe(true);
+      expect(fieldValuesFound.length).toBe(fields.length);
+
+    } else {
+      throw new Error('Invalid form URL');
+    }
+  });
 });

e2e/src/models/form-filler-page.ts

@@ -21,4 +21,8 @@ export class FormFillerPage {
     await backButton.click();
   }
 
+  async updateInputValue(label, value) {
+    await this.page.getByLabel(label).first().fill(value);
+  }
+
 }