Merge pull request #691 from adobecom/mwpw-147556

Add test for Merch Card Product fragment

test/integration/merch-card-product/merch-card-product_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-product/screenshots';
+
+describe('merch_cards_product_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: 300 });
+    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 });
+  });
+});

test/integration/merch-card-product/merch-card-product_mobile.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-product/screenshots';
+
+describe('merch_cards_product_mobile', 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: 600, height: 940 });
+    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 });
+  });
+});

test/integration/merch-card-product/mocks/body.html

@@ -0,0 +1,53 @@
+<main>
+<div>
+  <div class="merch-card product">
+    <div>
+      <div data-valign="middle">
+        <h3 id="acrobat-reader">Acrobat Reader</h3>
+        <h3 id="free">Free</h3>
+        <p>The free global standard for reliably viewing, printing, and sharing PDFs.</p>
+        <p><em><a href="https://www.adobe.com/acrobat/pdf-reader.html">Free download</a></em></p>
+      </div>
+    </div>
+  </div>
+  <div class="merch-card product secure">
+    <div>
+      <div data-valign="middle">
+        <h3 id="acrobat-standard">Acrobat Standard</h3>
+        <h3 id="price---abm---acrobat-standard"><a href="https://milo.adobe.com/tools/ost?osi=QgYu51CVY2wKyFEqMuvec4N1tc1OaCypeKJjT5n2-Fc&#x26;type=price&#x26;term=true&#x26;seat=false&#x26;tax=false&#x26;old=false&#x26;exclusive=false">PRICE - ABM - Acrobat Standard</a></h3>
+        <p><strong>Save over 30% with an annual plan.*</strong></p>
+        <p><em>Annual subscription, cancel within 14 days for a full refund.</em></p>
+        <p>Simple PDF tools for editing and converting documents.</p>
+        <p><strong><a href="https://milo.adobe.com/tools/ost?osi=QgYu51CVY2wKyFEqMuvec4N1tc1OaCypeKJjT5n2-Fc&#x26;type=checkoutUrl&#x26;text=buy-now">CTA {{buy-now}}</a></strong></p>
+      </div>
+    </div>
+  </div>
+  <div class="merch-card product secure">
+    <div>
+      <div data-valign="middle">#EDCC2D, #000000</div>
+      <div data-valign="middle">Best value</div>
+    </div>
+    <div>
+      <div data-valign="middle">
+        <h3 id="acrobat-pro">Acrobat Pro</h3>
+        <h3 id="price---abm---adobe-acrobat-pro"><a href="https://milo.adobe.com/tools/ost?osi=vQmS1H18A6_kPd0tYBgKnp-TQIF0GbT6p8SH8rWcLMs&#x26;type=price&#x26;term=true&#x26;seat=false&#x26;tax=false&#x26;old=false&#x26;exclusive=false">PRICE - ABM - Adobe Acrobat Pro</a></h3>
+        <p><strong>Save over 30% with an annual plan.*</strong></p>
+        <p><em>Annual subscription, cancel within 14 days for a full refund.</em></p>
+        <p>The all-in-one PDF &#x26; e-signature solution with advanced tools to edit, convert, protect, and sign documents.</p>
+        <p><em><a href="https://milo.adobe.com/tools/ost?osi=-lYm-YaTSZoUgv1gzqCgybgFotLqRsLwf8CgYdvdnsQ&#x26;type=checkoutUrl&#x26;text=free-trial">CTA {{free-trial}}</a></em> <strong><a href="https://milo.adobe.com/tools/ost?osi=vQmS1H18A6_kPd0tYBgKnp-TQIF0GbT6p8SH8rWcLMs&#x26;type=checkoutUrl&#x26;text=buy-now">CTA {{buy-now}}</a></strong></p>
+      </div>
+    </div>
+  </div>
+  <div class="section-metadata">
+    <div>
+      <div data-valign="middle">style</div>
+      <div data-valign="middle"><strong>three merch cards</strong></div>
+    </div>
+    <div>
+      <div data-valign="middle">background</div>
+      <div data-valign="middle"><strong>#000b1e</strong></div>
+    </div>
+  </div>
+</div>
+<div></div>
+</main>

test/integration/merch-card-product/mocks/body_ost.html

@@ -0,0 +1,7 @@
+<main>
+    <div>
+        <div>
+            <p><a href="https://milo.adobe.com/tools/ost?osi=sGuhzGARPVTnzdnxJoJtBSqD0LRP-UC3dQsLP_bCnc8&#x26;offerId=97F188FD9FB6837C883AA6ED8C3EE69D&#x26;type=checkoutUrl&#x26;text=buy-now">Start free 7-day trial</a></p>
+        </div>
+    </div>
+</main>

test/integration/merch-card-product/ost.int.js

@@ -0,0 +1,45 @@
+/* eslint-disable func-names */
+import {
+  readFile,
+  setViewport,
+  executeServerCommand,
+} from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { waitFor, delay } from '../../helpers/waitfor.js';
+
+const screenshotFolder = 'test/integration/merch-card-product/screenshots';
+
+describe('ost', 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_ost.html' });
+    await setViewport({ width: 200, height: 50 });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitFor(() => document.querySelector('.placeholder-resolved'), 10000, 1000);
+    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`;
+    console.info('screenshotPath');
+    console.info(screenshotPath);
+  });
+
+  it('buy', async () => {
+    const button = document.querySelector('.placeholder-resolved');
+    const href = button.getAttribute('href');
+    expect(href).to.match(/^https:\/\/commerce\.adobe\.com/);
+    await executeServerCommand('diff-screenshot', { path: screenshotPath });
+  });
+});