Merge pull request #496 from adobecom/MWPW-138943

MWPW-138943  POC Integration test

package.json

@@ -7,6 +7,10 @@
     "test": "npm run wtr && npm run jest",
     "wtr": "wtr \"./test/**/*.test.(js|html)\" --node-resolve --port=2000 --coverage --concurrent-browsers 4",
     "wtr:watch": "npm run wtr -- --watch",
+    "int": "wtr \"./test/integration/**/*.int.(js|html)\" --node-resolve --port=2000 --concurrent-browsers 3 --config wtr-integration.config.mjs",
+    "int:watch": "npm run int -- --watch",
+    "int3": "wtr \"./test/integration/**/*.int.(js|html)\" --node-resolve --port=2000 --concurrent-browsers 3 --config wtr-int-browsers.config.mjs",
+    "int3:watch": "npm run int3 -- --watch",    
     "jest": "jest --coverage --coverageDirectory=coverage/jest",
     "jest:watch": "npm run jest -- --watchAll",
     "lcov": "lcov -a coverage/jest/lcov.info -a coverage/wtr/lcov.info -o coverage/lcov.info",
@@ -33,8 +37,6 @@
     "@babel/register": "7.22.15",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@web/dev-server-import-maps": "^0.0.6",
-    "@web/test-runner": "0.13.27",
-    "@web/test-runner-commands": "0.6.1",
     "chai": "4.3.6",
     "eslint": "8.11.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -52,7 +54,10 @@
     "stylelint-config-standard": "25.0.0"
   },
   "dependencies": {
-    "bowser": "^2.11.0"
+    "bowser": "^2.11.0",
+    "@web/test-runner": "0.13.27",
+    "@web/test-runner-commands": "0.6.1",
+    "@web/test-runner-playwright": "0.11.0"  
   },
   "jest": {
     "testRegex": "\\.jest\\.(js|jsx)$",

test/helpers/waitfor.js

@@ -7,103 +7,124 @@ export const waitForElement = (
     },
     rootEl = document.body,
     textContent = '',
-  } = {}
-) =>
-  new Promise((resolve) => {
-    const el = document.querySelector(selector);
+  } = {},
+) => new Promise((resolve) => {
+  const el = document.querySelector(selector);
 
-    if (el) {
-      resolve(el);
-      return;
-    }
+  if (el) {
+    resolve(el);
+    return;
+  }
+
+  const observer = new MutationObserver((mutations, obsv) => {
+    mutations.forEach((mutation) => {
+      const nodes = [...mutation.addedNodes];
+      nodes.some((node) => {
+        if (node.matches && node.matches(selector)) {
+          if (textContent && node.textContent !== textContent) return false;
 
-    const observer = new MutationObserver((mutations, obsv) => {
-      mutations.forEach((mutation) => {
-        const nodes = [...mutation.addedNodes];
-        nodes.some((node) => {
-          if (node.matches && node.matches(selector)) {
-            if (textContent && node.textContent !== textContent) return false;
+          obsv.disconnect();
+          resolve(node);
+          return true;
+        }
 
+        // check for child in added node
+        const treeWalker = document.createTreeWalker(node);
+        let { currentNode } = treeWalker;
+        while (currentNode) {
+          if (currentNode.matches && currentNode.matches(selector)) {
             obsv.disconnect();
-            resolve(node);
+            resolve(currentNode);
             return true;
           }
-
-          // check for child in added node
-          const treeWalker = document.createTreeWalker(node);
-          let { currentNode } = treeWalker;
-          while (currentNode) {
-            if (currentNode.matches && currentNode.matches(selector)) {
-              obsv.disconnect();
-              resolve(currentNode);
-              return true;
-            }
-            currentNode = treeWalker.nextNode();
-          }
-          return false;
-        });
+          currentNode = treeWalker.nextNode();
+        }
+        return false;
       });
     });
-
-    observer.observe(rootEl, options);
   });
 
+  observer.observe(rootEl, options);
+});
+
 export const waitForUpdate = (
   el,
   options = {
     childList: true,
     subtree: true,
-  }
-) =>
-  new Promise((resolve) => {
-    const observer = new MutationObserver((mutations, obsv) => {
-      obsv.disconnect();
-      resolve();
-    });
-    observer.observe(el, options);
+  },
+) => new Promise((resolve) => {
+  const observer = new MutationObserver((mutations, obsv) => {
+    obsv.disconnect();
+    resolve();
   });
+  observer.observe(el, options);
+});
 
 export const waitForRemoval = (
   selector,
   options = {
     childList: true,
     subtree: false,
-  }
-) =>
-  new Promise((resolve) => {
-    const el = document.querySelector(selector);
+  },
+) => new Promise((resolve) => {
+  const el = document.querySelector(selector);
 
-    if (!el) {
-      resolve();
-      return;
-    }
+  if (!el) {
+    resolve();
+    return;
+  }
 
-    const observer = new MutationObserver((mutations, obsv) => {
-      mutations.forEach((mutation) => {
-        const nodes = [...mutation.removedNodes];
-        nodes.some((node) => {
-          if (node.matches(selector)) {
-            obsv.disconnect();
-            resolve();
-            return true;
-          }
-          return false;
-        });
+  const observer = new MutationObserver((mutations, obsv) => {
+    mutations.forEach((mutation) => {
+      const nodes = [...mutation.removedNodes];
+      nodes.some((node) => {
+        if (node.matches(selector)) {
+          obsv.disconnect();
+          resolve();
+          return true;
+        }
+        return false;
       });
     });
-
-    observer.observe(el.parentElement, options);
   });
 
+  observer.observe(el.parentElement, options);
+});
+
 /**
  * Promise based setTimeout that can be await'd
  * @param {int} timeOut time out in milliseconds
  * @param {*} cb Callback function to call when time elapses
  * @returns
  */
-export const delay = (timeOut, cb) =>
-  new Promise((resolve) => {
+export const delay = (timeOut, cb) => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve((cb && cb()) || null);
+  }, timeOut);
+});
+
+/**
+ * Waits for predicate function to be true or times out.
+ * @param {function} predicate Callback that returns boolean
+ * @param {number} timeout Timeout in milliseconds
+ * @param {number} interval Interval delay in milliseconds
+ * @returns {Promise}
+ */
+export function waitFor(predicate, timeout = 1000, interval = 100) {
+  return new Promise((resolve, reject) => {
+    if (predicate()) resolve();
+
+    const intervalId = setInterval(() => {
+      if (predicate()) {
+        clearInterval(intervalId);
+        resolve();
+      }
+    }, interval);
+
     setTimeout(() => {
-      resolve((cb && cb()) || null);
-    }, timeOut);
+      clearInterval(intervalId);
+      reject(new Error('Timed out waiting for predicate to be true'));
+    }, timeout);
   });
+}

test/integration/accordian/accordian_desktop.int.js

@@ -0,0 +1,39 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/accordian/screenshots';
+
+describe('accordian-desktop', function () {
+  const suiteName = this.title;
+  let testName;
+  let screenshotPath;
+
+  before(async () => {
+    document.head.innerHTML = await readFile({ path: '../mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await setViewport({ width: 1000, height: 600 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.accordion-container'), 5000, 1000);
+  });
+
+  beforeEach(function () {
+    testName = this.currentTest.title;
+    screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.png`;
+  });
+
+  it('collapsed', async () => {
+    await delay(1000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+
+  it('expanded', async () => {
+    document.querySelectorAll('.accordion-trigger')[0].click();
+    await delay(1000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});

test/integration/accordian/accordian_mobile.int.js

@@ -0,0 +1,39 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/accordian/screenshots';
+
+describe('accordian-mobile', function () {
+  const suiteName = this.title;
+  let testName;
+  let screenshotPath;
+
+  before(async () => {
+    document.head.innerHTML = await readFile({ path: '../mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await setViewport({ width: 600, height: 1024 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.accordion-container'), 5000, 1000);
+  });
+
+  beforeEach(function () {
+    testName = this.currentTest.title;
+    screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.png`;
+  });
+
+  it('collapsed', async () => {
+    await delay(1000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+
+  it('expanded', async () => {
+    document.querySelectorAll('.accordion-trigger')[0].click();
+    await delay(1000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});

test/integration/accordian/mocks/body.html

@@ -0,0 +1,30 @@
+<main>
+  <div>
+    <div class="accordion">
+        <div>
+        <div><strong>How do I convert a Word file to PDF without losing the formatting?</strong></div>
+        </div>
+        <div>
+        <div>As the inventor of the PDF file format, Adobe makes sure our online Word to PDF conversion tool preserves your document formatting. When you convert DOC and DOCX files with the online tool, your fonts, images, and alignment will look as expected on Mac or Windows. You can also try <a href="https://www.adobe.com/acrobat/free-trial-download.html">Adobe Acrobat Pro</a> for free for seven days to create PDFs, convert PDF files back to Word, convert to Excel or PowerPoint, convert HTML to PDF, edit PDFs, <a href="/acrobat/online/merge-pdf">merge PDFs</a>, edits scans with OCR, split PDFs, <a href="/acrobat/online/compress-pdf">reduce file size</a>, and more. The seven-day free trial lets you convert PNGs, GIFs, and other image formats too. You can use Acrobat on any operating system, including Mac, Windows, iOS, Android, or Linux.</div>
+        </div>
+        <div>
+        <div><strong>What types of document file formats can I convert to PDF?</strong></div>
+        </div>
+        <div>
+        <div>The Acrobat Word to PDF online tool lets you convert DOCX, DOC, RTF, and TXT files to PDF using a web browser on any operating system. Just drag and drop a file to convert it and save as PDF.</div>
+        </div>
+        <div>
+        <div><strong>What’s the difference between the DOC and DOCX file format?</strong></div>
+        </div>
+        <div>
+        <div>The DOC and DOCX file formats are file extensions used by Microsoft Word. The DOC file format is an older format used by Microsoft Word 2003 and earlier. With the release of Microsoft Word 2007, Microsoft introduced the new DOCX file format based on the Open XML (Extensible Markup Language) standard. If you have Microsoft Word 2003 or earlier, you’ll need to download the free Microsoft Office Compatibility Pack to open, edit, and save DOCX files.</div>
+        </div>
+        <div>
+        <div><strong>Are my documents and personal data safe?</strong></div>
+        </div>
+        <div>
+        <div>Privacy is paramount to Adobe. If you don’t sign in or save your file, it will be deleted from our servers. To learn more about the privacy practices of Adobe applications and websites, please visit our  <a href="https://www.adobe.com/privacy.html">Privacy Center</a>.</div>
+        </div>
+    </div>
+  </div>
+</main>

test/integration/merch-card/merch-card_desktop.int.js

@@ -0,0 +1,41 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { waitForElement, waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/merch-card/screenshots';
+
+describe('merch_cards_desktop', function () {
+  const suiteName = this.title;
+  let testName;
+  let screenshotPath;
+
+  before(async () => {
+    await executeServerCommand('page-route', { url: 'https://wcs.adobe.com/**/*' });
+
+    document.head.innerHTML = await readFile({ path: '../mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await setViewport({ width: 1200, height: 600 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.placeholder-resolved'), 10000, 1000);
+    const price = await waitForElement('.placeholder-resolved');
+    console.log(price.textContent);
+    await delay(1000);
+  });
+
+  after(async () => {
+    await executeServerCommand('page-unroute', { url: 'https://wcs.adobe.com/**/*' });
+  });
+
+  beforeEach(function () {
+    testName = this.currentTest.title;
+    screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.png`;
+  });
+
+  it('price', async () => {
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});