Merge pull request #793 from adobecom/mwpw-147553-table-block-integra…

…tion-test implemented integration test for table block
adobecom · Sep 11, 2024 · c9db7d4 · c9db7d4
2 parents 59f7ed8 + 4d21814
commit c9db7d4
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 0 deletions.
diff --git a/test/integration/table/mocks/body.html b/test/integration/table/mocks/body.html
@@ -0,0 +1,87 @@
+<main>
+  <div>
+    <div class="table">
+      <div>
+        <div data-valign="middle"></div>
+        <div data-valign="middle">
+          <p><strong>Free membership</strong></p>
+          <p>
+            <picture>
+              <source type="image/webp" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
+              <source type="image/webp" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=750&#x26;format=webply&#x26;optimize=medium">
+              <source type="image/png" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=2000&#x26;format=png&#x26;optimize=medium" media="(min-width: 600px)">
+              <img loading="lazy" alt="" src="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=750&#x26;format=png&#x26;optimize=medium" width="468" height="15">
+            </picture>
+          </p>
+          <p>Free web tools you can access anywhere to comment on and share PDFs.</p>
+          <p><em><a href="https://auth.services.adobe.com/en_US/index.html?callback=https%3A%2F%2Fims-na1.adobelogin.com%2Fims%2Fadobeid%2FDocumentCloud1%2FAdobeID%2Ftoken%3Fredirect_uri%3Dhttps%253A%252F%252Fcloud.acrobat.com%26state%3D%257B%2522ac%2522%253A%2522%2522%252C%2522jslibver%2522%253A%2522v2-v0.32.0-1-gea1608c%2522%252C%2522nonce%2522%253A%25221039632031482160%2522%257D%26code_challenge_method%3Dplain%26use_ms_for_expiry%3Dtrue&#x26;client_id=DocumentCloud1&#x26;scope=AdobeID%2Copenid%2Ccreative_cloud%2Cgnav%2Csao.cce_private%2Cadditional_info.roles%2Cread_organizations&#x26;denied_callback=https%3A%2F%2Fims-na1.adobelogin.com%2Fims%2Fdenied%2FDocumentCloud1%3Fredirect_uri%3Dhttps%253A%252F%252Fcloud.acrobat.com%26response_type%3Dtoken%26state%3D%257B%2522ac%2522%253A%2522%2522%252C%2522jslibver%2522%253A%2522v2-v0.32.0-1-gea1608c%2522%252C%2522nonce%2522%253A%25221039632031482160%2522%257D&#x26;state=%7B%22ac%22%3A%22%22%2C%22jslibver%22%3A%22v2-v0.32.0-1-gea1608c%22%2C%22nonce%22%3A%221039632031482160%22%7D&#x26;relay=47a4e100-4959-462e-ac0a-eb5afd82561e&#x26;locale=en_US&#x26;flow_type=token&#x26;dctx_id=adobe_document_cloud&#x26;idp_flow_type=login&#x26;s_p=apple%2Cfacebook%2Cgoogle#/signup">Get started</a></em></p>
+        </div>
+        <div data-valign="middle">
+          <p><strong>Acrobat Pro</strong></p>
+          <p>
+            <picture>
+              <source type="image/webp" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
+              <source type="image/webp" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=750&#x26;format=webply&#x26;optimize=medium">
+              <source type="image/png" srcset="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=2000&#x26;format=png&#x26;optimize=medium" media="(min-width: 600px)">
+              <img loading="lazy" alt="" src="https://www.adobe.com/media_10754b067ab38991633fc5d0c9b17e47ed53a4030.png?width=750&#x26;format=png&#x26;optimize=medium" width="468" height="15">
+            </picture>
+          </p>
+          <p>The all-in-one PDF and e-signature solution with secure, advanced tools.</p>
+          <p><strong><a href="https://www.adobe.com/acrobat/free-trial-download.html">Start free trial</a></strong></p>
+        </div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <hr>
+        </div>
+        <div data-valign="middle"></div>
+        <div data-valign="middle"></div>
+      </div>
+      <div>
+        <div data-valign="middle"><strong>Features</strong></div>
+        <div data-valign="middle"></div>
+        <div data-valign="middle"></div>
+      </div>
+      <div>
+        <div data-valign="middle">Add text, highlights, and drawings to PDFs</div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+      <div>
+        <div data-valign="middle">Convert almost any file to a PDF, and back</div>
+        <div data-valign="middle">Limited usage</div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+      <div>
+        <div data-valign="middle">Edit text and images in a PDF</div>
+        <div data-valign="middle"></div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+      <div>
+        <div data-valign="middle">Share PDFs for review and comments</div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+      <div>
+        <div data-valign="middle">Share files for e-signing and track responses</div>
+        <div data-valign="middle">Limited usage</div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+      <div>
+        <div data-valign="middle">Get access to 20+ advanced PDF and E-sign tools</div>
+        <div data-valign="middle"></div>
+        <div data-valign="middle"><span class="icon icon-checkmark"></span></div>
+      </div>
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div data-valign="middle">background</div>
+        <div data-valign="middle">#ffffff</div>
+      </div>
+      <div>
+        <div data-valign="middle">style</div>
+        <div data-valign="middle"><strong>xxl spacing</strong></div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/test/integration/table/table_desktop.int.js b/test/integration/table/table_desktop.int.js
@@ -0,0 +1,33 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/table/screenshots';
+
+describe('table_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: 1200, height: 1200 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.table'), 5000, 1000);
+  });
+
+  beforeEach(function () {
+    testName = this.currentTest.title;
+    screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.png`;
+  });
+
+  it('table_desktop', async () => {
+    await delay(2000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});
diff --git a/test/integration/table/table_mobile.int.js b/test/integration/table/table_mobile.int.js
@@ -0,0 +1,33 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/table/screenshots';
+
+describe('table_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: 500, height: 600 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.table'), 5000, 1000);
+  });
+
+  beforeEach(function () {
+    testName = this.currentTest.title;
+    screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.png`;
+  });
+
+  it('table_mobile', async () => {
+    await delay(2000);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});