Merge pull request #514 from adobecom/MWPW-138749

MWPW 138749 Visual tests for merch cards

.github/workflows/integration-test.yml

@@ -0,0 +1,46 @@
+name: Integration Tests
+
+on:
+  workflow_dispatch:
+    inputs:
+      testCodeBranch:
+        description: 'Test Code Branch'
+        required: true
+        default: 'stage'
+        type: string
+
+jobs:
+  run-integration-tests:     
+    name: Integration Tests
+    runs-on: macos-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.testCodeBranch }}
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}-${{ runner.os }}
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci --ignore-scripts
+
+      - name: Install browsers
+        run: npx playwright install
+
+      - name: Run the tests
+        run: npm run int3
+
+      - name: Save test logs
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots
+          path: |
+            test/integration/*/screenshots/**/*.test.png
+            test/integration/*/screenshots/**/*.diff.png

.github/workflows/test-milo.yml

@@ -74,4 +74,39 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: reports
-          path: reports/         
+          path: reports/
+
+  run-integration-tests:     
+    name: Integration Tests
+    runs-on: macos-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.testCodeBranch }}
+
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}-${{ runner.os }}
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci --ignore-scripts
+
+      - name: Install browsers
+        run: npx playwright install
+
+      - name: Run the tests
+        run: npm run int
+
+      - name: Save test logs
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots
+          path: |
+            test/integration/*/screenshots/**/*.test.png
+            test/integration/*/screenshots/**/*.diff.png

test/integration/accordian/mocks/body.html

@@ -1,12 +1,6 @@
 <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>

test/integration/merch-card/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/ost.int.js

@@ -0,0 +1,43 @@
+/* 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/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`;
+  });
+
+  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 });
+  });
+});

test/integration/reviews/reviews.int.js

@@ -1,10 +1,13 @@
+/* eslint-disable import/no-unresolved */
 /* eslint-disable func-names */
 import {
   readFile,
   setViewport,
   sendMouse,
+  sendKeys,
   executeServerCommand,
 } from '@web/test-runner-commands';
+import { getConfig, setConfig, loadArea } from 'https://main--milo--adobecom.hlx.page/libs/utils/utils.js';
 import { waitForElement, waitFor, delay } from '../../helpers/waitfor.js';
 
 function getMiddleOfElement(element) {
@@ -16,6 +19,18 @@ function getMiddleOfElement(element) {
   };
 }
 
+async function click(element) {
+  const { x, y } = getMiddleOfElement(element);
+  await sendMouse({ type: 'move', position: [x, y] });
+  await sendMouse({ type: 'click', position: [x, y] });
+}
+
+async function type(element, text) {
+  const { x, y } = getMiddleOfElement(element);
+  await sendMouse({ type: 'click', position: [x, y] });
+  await sendKeys({ type: text });
+}
+
 const screenshotFolder = 'test/integration/reviews/screenshots';
 
 describe('reviews', function () {
@@ -27,9 +42,13 @@ describe('reviews', function () {
     await executeServerCommand('page-route', { url: 'https://**/*.json' });
 
     document.head.innerHTML = await readFile({ path: '../mocks/head.html' });
-    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
     await setViewport({ width: 600, height: 1200 });
     await import('../../../acrobat/scripts/scripts.js');
+    await delay(1000);
+    const conf = getConfig();
+    setConfig({ ...conf, env: { name: 'prod' } });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await loadArea();
     await waitFor(() => document.querySelector('.hlx-ReviewStats-total'), 10000, 1000);
     const total = await waitForElement('.hlx-ReviewStats-total');
     console.log(total.textContent);
@@ -45,12 +64,16 @@ describe('reviews', function () {
     screenshotPath = `${screenshotFolder}/${suiteName}/$browser/${testName}.test.png`;
   });
 
-  it('click 2 stars', async () => {
-    const button = document.querySelectorAll('input[type="radio"]')[1];
-    const { x, y } = getMiddleOfElement(button);
-    await sendMouse({ type: 'move', position: [x, y] });
-    await sendMouse({ type: 'click', position: [x, y] });
+  it('click 3 stars', async () => {
+    const buttonStar = document.querySelectorAll('input[type="radio"]')[2];
+    click(buttonStar);
     await waitForElement('#rating-comments');
+    const commentArea = document.querySelector('#rating-comments');
+    await type(commentArea, 'test');
+    const buttonFive = document.querySelectorAll('input[type="radio"]')[4];
+    click(buttonFive);
     await executeServerCommand('take-screenshot', { path: screenshotPath });
+    const buttonSend = document.querySelector('.hlx-Review-commentFields input[type="submit"]');
+    click(buttonSend);
   });
 });

wtr-int-browsers.config.mjs

@@ -1,5 +1,5 @@
 /* eslint-disable import/extensions */
-import { defaultReporter } from '@web/test-runner';
+import { defaultReporter, summaryReporter } from '@web/test-runner';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { takeScreenshotPlugin } from './wtr/screenshot-plugin.mjs';
 import { pageRoutePlugin } from './wtr/page-route-plugin.mjs';
@@ -30,6 +30,7 @@ export default {
   },
   reporters: [
     defaultReporter({ reportTestResults: true, reportTestProgress: true }),
+    summaryReporter(),
   ],
   plugins: [pageRoutePlugin(), takeScreenshotPlugin()],
   testFramework: { config: { timeout: '10000' } },

wtr-integration.config.mjs

@@ -1,5 +1,5 @@
 /* eslint-disable import/extensions */
-import { defaultReporter } from '@web/test-runner';
+import { defaultReporter, summaryReporter } from '@web/test-runner';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { takeScreenshotPlugin } from './wtr/screenshot-plugin.mjs';
 import { pageRoutePlugin } from './wtr/page-route-plugin.mjs';
@@ -17,6 +17,7 @@ export default {
   },
   reporters: [
     defaultReporter({ reportTestResults: true, reportTestProgress: true }),
+    summaryReporter(),
   ],
   plugins: [pageRoutePlugin(), takeScreenshotPlugin()],
   testFramework: { config: { timeout: '10000' } },