Add tests using Playwright.

civiext/org.civicrm.sparkforms/README.md

@@ -49,3 +49,9 @@ The tests are not currently fully automated. They mostly aim to help with tech s
 npm install
 HEADLESS=false npm test -t 'spark'
 ```
+
+If running on Wayland:
+
+```
+MOZ_ENABLE_WAYLAND=1 HEADLESS=false npm test -t 'spark'
+```

civiext/org.civicrm.sparkforms/package.json

@@ -4,14 +4,15 @@
   "description": "CiviCRM Spark form customizations",
   "main": "index.js",
   "scripts": {
-    "test": "jest"
+    "test": "JEST_PLAYWRIGHT_CONFIG=tests/jest-playwright.config.js jest"
   },
   "jest": {
+    "preset": "jest-playwright-preset",
     "setupFiles": [
-      "./tests/puppeteer/utils/helpers.js"
+      "./tests/playwright/utils/helpers.js"
     ],
     "testMatch": [
-      "**/tests/puppeteer/*.spec.js"
+      "**/tests/playwright/*.spec.js"
     ]
   },
   "repository": {
@@ -21,9 +22,8 @@
   "author": "CiviCRM LLC",
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
-    "jest": "^24.9.0"
-  },
-  "dependencies": {
-    "puppeteer": "^3"
+    "jest": "^24.9.0",
+    "jest-playwright-preset": "^1.1.0",
+    "playwright": "^1.1.1"
   }
 }

civiext/org.civicrm.sparkforms/tests/jest-playwright.config.js

+module.exports = {
+    browsers: ["firefox"]
+}

civiext/org.civicrm.sparkforms/tests/puppeteer/form-contrib-spark.spec.js → civiext/org.civicrm.sparkforms/tests/playwright/form-contrib-spark.spec.js

-const puppeteer = require("puppeteer");
+const {firefox} = require("playwright");
 const headless = process.env.HEADLESS !== 'false' ? true : false;
-const timeout = headless ? 10000 : 350000;
+const timeout = headless ? 10000 : 600000;
 
 let browser, page;
 
@@ -18,18 +18,19 @@ describe("form-don", () => {
 
   // TODO: https://github.com/smooth-code/jest-puppeteer/issues/88#issuecomment-403603386
   beforeAll(async () => {
-    browser = await puppeteer.launch({
+    browser = await firefox.launch({
       headless: headless,
       args: [
-        '--no-sandbox',
-        '--disable-setuid-sandbox',
+        // '--no-sandbox',
+        // '--disable-setuid-sandbox',
         // Required for testing Stripe
         // https://github.com/GoogleChrome/puppeteer/issues/4989
-        '--disable-features=site-per-process'
+        // '--disable-features=site-per-process'
       ]
     });
 
-    page = await browser.newPage();
+    const context = await browser.newContext();
+    page = await context.newPage();
   });
 
   afterAll(async () => {
@@ -38,24 +39,24 @@ describe("form-don", () => {
 
   describe("Signup to CiviCRM Spark", () => {
     beforeEach(async () => {
-      await page.goto("https://civicrm.org/civicrm/contribute/transact?reset=1&id=123", {waitUntil: "networkidle2"});
+      await page.goto("https://civicrm.org/civicrm/contribute/transact?reset=1&id=123");
       await page.waitForSelector('.crm-contribution-page-id-123');
     });
 
     test("Base tests as individual", async() => {
-      await page.setViewport({ width: 1920, height: 1080 });
+      await page.setViewportSize({ width: 1920, height: 1080 });
 
       await page.waitForSelector('input[name=price_464]');
 
       // Make sure the discount field is hidden
       await page.waitForSelector('#discountcode', {
-        visible: false,
+        state: 'hidden',
         timeout: 1000
       });
 
       // Make sure the source field is hidden
       await page.waitForSelector('#custom_272', {
-        visible: false,
+        state: 'hidden',
         timeout: 1000
       });
 
@@ -65,18 +66,23 @@ describe("form-don", () => {
       // Personal info
       var rand = Math.floor(Math.random() * 1000);
 
+      await page.type('#email-5', 'mathieu+sparktest' + rand + '@civicrm.org');
       await page.type('#first_name', "Mathieu");
       await page.type('#last_name', 'Sparktest' + rand);
       await page.type('#street_address-Primary', '123 Example St.');
       await page.type('#city-Primary', 'Montréal');
-      await page.select('#state_province-Primary', '1110');
+      await page.selectOption('#state_province-Primary', '1110');
       await page.type('#postal_code-Primary', 'H0H 0H0');
-      await page.type('#email-5', 'mathieu+sparktest' + rand + '@symbiotic.coop');
-      await page.select('#country-Primary', '1039');
+      await page.selectOption('#country-Primary', '1039');
       await delay(1000);
-      await page.select('#state_province-Primary', '1110');
+      await page.selectOption('#state_province-Primary', '1110');
 
-      // fillStripeFields(page);
+      await fillCreditCardFields(page);
+
+      await page.type('input[name=custom_256]', 'Spark Test ' + rand);
+      await page.type('input[name=custom_257]', 'testspark' + rand);
+      await page.selectOption('select[name=custom_271]', '4');
+      await page.click('#custom_1_end_user');
 
       // Debugging help
       if (!headless) {

civiext/org.civicrm.sparkforms/tests/puppeteer/utils/helpers.js → civiext/org.civicrm.sparkforms/tests/playwright/utils/helpers.js

@@ -18,6 +18,16 @@ global.nextStepAndWaitFor = async (page, selector) => {
   }
 }
 
+/**
+ * Helper function to fill in Credit Card (ex: dummy) fields.
+ */
+global.fillCreditCardFields = async (page) => {
+  await page.type('#credit_card_number', "4111111111111111");
+  await page.type('#cvv2', "123");
+  await page.selectOption('#credit_card_exp_date_M', "1");
+  await page.selectOption('#credit_card_exp_date_Y', "2030");
+}
+
 /**
  * Helper function to fill in Stripe CC fields.
  */