loadPage test with Jest

.eslintrc.js → .eslintrc.cjs

@@ -3,6 +3,7 @@ module.exports = {
   extends: 'airbnb-base',
   env: {
     browser: true,
+    'jest/globals': true,
   },
   parser: '@babel/eslint-parser',
   parserOptions: {
@@ -19,4 +20,5 @@ module.exports = {
     }],
     'function-paren-newline': 'off',
   },
+  plugins: ['jest'],
 };

.gitignore

@@ -10,4 +10,4 @@ helix-importer-ui
 
 .vscode/
 .htmlvalidate.json
-.htmlvalidateignore
+.htmlvalidateignore

package.json

@@ -7,7 +7,8 @@
     "lint:js": "eslint .",
     "lint:css": "stylelint blocks/**/*.css styles/*.css",
     "lint": "npm run lint:js && npm run lint:css",
-    "semantic-release": "semantic-release --debug"
+    "semantic-release": "semantic-release --debug",
+    "test": "node --no-warnings --experimental-vm-modules node_modules/jest/bin/jest.js --config ./tests/jest.config.js"
   },
   "repository": {
     "type": "git",
@@ -20,21 +21,27 @@
   },
   "homepage": "https://github.com/adobe/aem-boilerplate#readme",
   "devDependencies": {
+    "@babel/core": "7.21.0",
+    "@babel/eslint-parser": "7.19.1",
+    "@esm-bundle/chai": "4.3.4-fix.0",
+    "@jest/globals": "^29.7.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "semantic-release": "21.0.5",
-    "@babel/core": "7.21.0",
-    "@babel/eslint-parser": "7.19.1",
+    "@web/test-runner": "0.15.1",
+    "@web/test-runner-commands": "0.6.5",
     "chai": "4.3.7",
     "eslint": "8.35.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-plugin-import": "2.27.5",
-    "@esm-bundle/chai": "4.3.4-fix.0",
-    "@web/test-runner": "0.15.1",
-    "@web/test-runner-commands": "0.6.5",
+    "eslint-plugin-jest": "^27.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
+    "semantic-release": "21.0.5",
     "sinon": "15.0.1",
     "stylelint": "15.2.0",
     "stylelint-config-standard": "30.0.1"
-  }
+  },
+  "type": "module"
 }

scripts/aem.js

@@ -676,7 +676,9 @@ async function waitForLCP(lcpBlocks) {
   });
 }
 
-init();
+if (!import.meta.url.startsWith('file://')) {
+  init();
+}
 
 export {
   buildBlock,

scripts/scripts.js

@@ -314,4 +314,6 @@ export async function loadPage() {
   loadDelayed();
 }
 
-loadPage();
+if (!import.meta.url.startsWith('file://')) {
+  loadPage();
+}

tests/jest.config.js

@@ -0,0 +1,43 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  // All imported modules in your tests should be mocked automatically
+  automock: false,
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: 'v8',
+
+  // The paths to modules that run some code to configure or set up the testing
+  //  environment before each test
+  // setupFiles: [],
+  setupFiles: ['./setupJest.js'],
+
+  // A list of paths to modules that run some code to configure or set up the
+  //  testing framework before each test
+  setupFilesAfterEnv: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: 'jsdom',
+
+  // Indicates whether each individual test should be reported during the run
+  verbose: true,
+
+  // An array of regexp patterns that are matched against all source file
+  //  paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+  injectGlobals: true,
+  transform: {},
+};
+
+// module.exports = config;
+export default config;

tests/scripts/scripts.test.js

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment jsdom
+ * @jest-environment-options {"runScripts": "dangerously"}
+ */
+
+import fs from 'fs';
+import fetchMock from 'jest-fetch-mock';
+import { loadHTML, getPath } from '../utils.js';
+import { loadPage } from '../../scripts/scripts.js';
+
+beforeAll(() => {
+  fetchMock.mockIf(/^.*$/, (req) => {
+    switch (true) {
+      case req.url.endsWith('/3-ways-enhance-digital-experiences-html'):
+        // http://localhost/blogs/2023/demo/3-ways-enhance-digital-experiences-html
+        return Promise.resolve(`
+        <html lang="en">
+          <head>
+            <title>Quickly Get Started with Generative AI</title>
+            <meta name="topic" content="AI and Automation">
+          </head>
+          <body>
+            <header></header>
+            <main>
+              <div>
+                <h1 id="ways-to-enhance-digital-experiences-and-productivity">3 ways to enhance digital experiences and productivity</h1>
+                <p>
+                  <picture>
+                    <source type="image/webp" srcset="./media_1823f5acf4bff690ee74728ab2e7ccc741a17800f.jpeg?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
+                    <img loading="lazy" alt="Get started with generative AI: group of workers in discussion around a conference table" src="./media_1823f5acf4bff690ee74728ab2e7ccc741a17800f.jpeg?width=750&#x26;format=jpeg&#x26;optimize=medium" width="788" height="443">
+                  </picture>
+                </p>
+              </div>
+            </main>
+          </body>
+        </html>
+        `);
+      case req.url.endsWith('/sidebar-fragment.plain.html'):
+        // fetch /blogs/fragments/sidebar-fragment.plain.html
+        return Promise.resolve(`<div>
+            <h3 id="featured">Featured</h3>
+            <div class="cards sidebar">
+              <div>
+                <div><a href="/blogs/2023/demo/3-ways-enhance-digital-experiences-html">https://main--servicenow--hlxsites.hlx.live/blogs/2023/demo/3-ways-enhance-digital-experiences-html</a></div>
+              </div>
+            </div>
+          </div>
+        `);
+      case req.url.endsWith('/nav.plain.html'):
+        // fetch /nav.plain.html
+        return Promise.resolve('<div>hello nav</div>');
+      case req.url.endsWith('/footer.plain.html'):
+        // fetch /nav.plain.html
+        return Promise.resolve('<div>hello footer</div>');
+      default:
+        return Promise.resolve({
+          status: 200,
+          body: '<div>hello world</div>',
+        });
+    }
+  });
+});
+
+describe('aem test demo', () => {
+  test('simple aem test', async () => {
+    const document = await loadHTML(getPath(import.meta.url, './testdata/article.html'));
+    await loadPage(document);
+    fs.writeFileSync(getPath(import.meta.url, '../tmp/article-output.html'), document.documentElement.outerHTML);
+    const fragmentCss = document.head.querySelector('link[rel="stylesheet"][href="../blocks/fragment/fragment.css"]');
+    expect(fragmentCss).not.toBeNull();
+    const featuredH3 = document.querySelector('h3#featured');
+    expect(featuredH3).not.toBeNull();
+  });
+});

tests/scripts/testdata/article.html

@@ -0,0 +1,72 @@
+<!-- https://www.servicenow.com/blogs/2023/maximize-efficiency-hyperautomation.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Maximize Efficiency with Hyperautomation</title>
+    <link rel="canonical" href="https://localhost:3000/blogs/drafts/sardan/maximize-efficiency-hyperautomation">
+    <meta name="description" content="Automation Engine is part of a broader hyperautomation strategy that organizations need in order to maximize efficiency. Learn three ways it can help.">
+    <meta name="keywords" content="Will Carlson, 2023, AI and Automation, AI and Automation, Solutions">
+    <meta property="og:title" content="Maximize Efficiency with Hyperautomation">
+    <meta property="og:description" content="Automation Engine is part of a broader hyperautomation strategy that organizations need in order to maximize efficiency. Learn three ways it can help.">
+    <meta property="og:url" content="https://localhost:3000/blogs/drafts/sardan/maximize-efficiency-hyperautomation">
+    <meta property="og:image" content="https://localhost:3000/blogs/drafts/sardan/media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://localhost:3000/blogs/drafts/sardan/media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:alt" content="Maximize efficiency: 3 workers smiling at a computer monitor">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Maximize Efficiency with Hyperautomation">
+    <meta name="twitter:description" content="Automation Engine is part of a broader hyperautomation strategy that organizations need in order to maximize efficiency. Learn three ways it can help.">
+    <meta name="twitter:image" content="https://localhost:3000/blogs/drafts/sardan/media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="template" content="Blog Article">
+    <meta name="author" content="Will Carlson">
+    <meta name="author-link" content="https://www.servicenow.com/blogs/author/will-carlson.html">
+    <meta name="publication-date" content="10/10/2023">
+    <meta name="category" content="Product Insights">
+    <meta name="topic" content="AI and Automation">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts/aem.js" type="module"></script>
+    <script src="/scripts/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles/styles.css">
+  <script>window.LiveReloadOptions={port:3000,host:location.hostname,https:false};</script><script src="/__internal__/livereload.js"></script><meta property="hlx:proxyUrl" content="https://main--servicenow--hlxsites.hlx.page/blogs/drafts/sardan/maximize-efficiency-hyperautomation"></head>
+  <body>
+    <header></header>
+    <main>
+      <div>
+        <h1 id="ways-to-maximize-efficiency-with-hyperautomation">3 ways to maximize efficiency with hyperautomation</h1>
+        <p><br>
+          <picture>
+            <source type="image/webp" srcset="./media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
+            <source type="image/webp" srcset="./media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=750&#x26;format=webply&#x26;optimize=medium">
+            <source type="image/jpeg" srcset="./media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=2000&#x26;format=jpeg&#x26;optimize=medium" media="(min-width: 600px)">
+            <img loading="lazy" alt="Maximize efficiency: 3 workers smiling at a computer monitor" src="./media_14283d69bf5a078925c261d72abfbb2963c1dfb32.jpeg?width=750&#x26;format=jpeg&#x26;optimize=medium" width="788" height="443">
+          </picture>
+        </p>
+        <p>Efficiency is the bedrock of success for any organization. In the continuous pursuit of streamlined operations and increased productivity, ServiceNow <a href="https://www.servicenow.com/products/automation-engine.html">Automation Engine</a> serves as a valuable asset, enabling ServiceNow platform owners and automation leaders to quickly and cost-effectively connect or automate any system, document, or task with minimal code.</p>
+        <p>Automation Engine is part of a broader <a href="https://www.servicenow.com/blogs/2023/hyperautomation-strategy-workers.html">hyperautomation strategy</a> that organizations need in order to maximize efficiency in the current and future market landscape. <a href="https://www.servicenow.com/solutions/hyperautomation-and-lowcode/what-is-hyperautomation.html">Hyperautomation</a> is focused on automating the business as much as reasonably possible, evolving people’s work to enhance their experience and impact, and applying the right tool for each need—all on a single platform.</p>
+        <p>Let’s explore three ways Automation Engine can help drive a hyperautomation strategy.</p>
+        <h3 id="seamless-workflow-integration">1. Seamless workflow integration</h3>
+        <p>Companies are built on departments, which lead to siloed departmental systems, such as customer relationship management and enterprise resource planning. Departmental leaders then implement automation tools, such as <a href="https://www.servicenow.com/workflows/creator-workflows/what-is-robotic-process-automation.html">robotic process automation</a> (RPA), to automate processes.</p>
+        <p>These “islands of automation,” or siloed automation tools, automate at the departmental level only. Even if they're connected across departments by Centers of Excellence, they're not connected to other automation tools and technologies. Both siloed departmental systems and islands of automation act as barriers to hyperautomation.</p>
+        <p>Automation Engine connects siloed departmental systems and islands of automation to make hyperautomation possible. Work flows seamlessly across the enterprise through a complete set of integration capabilities, including API integration for modern systems and RPA for legacy systems.</p>
+        <p>Additionally, Automation Engine connects siloed automation tools from any vendor into a cohesive whole through <a href="https://www.servicenow.com/products/automation-center.html">Automation Center</a>, a centralized automation operational and analytics hub.</p>
+        <p>Discover how features of Automation Engine, including generative AI, can help connect workflows across the organization in our <a href="https://gateway.on24.com/wcc/eh/1237365/lp/4227223/master-your-hyperautomation-landscape-with-connected-tools-visibility-and-roi?partnerref=blog">hyperautomation landscape</a> webinar.</p>
+        <h3 id="rpa-excellence">2. RPA excellence</h3>
+        <p>Besides integrating ServiceNow with legacy systems, RPA automates the “last mile” of manual, repetitive tasks that may still be slowing down workflows. These tasks could be any repeatable sequence of actions that humans have to do in Windows apps, web browsers, or legacy system UIs as part of a larger business process.</p>
+        <h3 id="accessible-low-code-automation">3. Accessible low-code automation</h3>
+        <p>We live in an era where automation should be readily accessible to everyone. Through its low-code app development and automation capabilities, <a href="https://www.servicenow.com/products/now-platform-app-engine.html">App Engine</a> and Automation Engine together empower technical and business users to create new applications while upholding governance standards.</p>
+        <p>This empowerment fosters increased collaboration between lines of business and IT, further breaking down silos within organizations and removing barriers to process improvements.</p>
+        <p>For example, Hancock Whitney Bank successfully <a href="https://gateway.on24.com/wcc/eh/1237365/lp/4098230/supercharging-shared-services-with-hyperautomation-trends-and-success-stories?partnerref=blog">incorporated low-code as part of its hyperautomation strategy</a>. Find out how the bank achieved this and the valuable lessons learned in the process.</p>
+        <p>Gain deeper insights into <a href="https://gateway.on24.com/wcc/eh/1237365/category/80577/automation-engine?partnerref=blog">how Automation Engine can maximize efficiency</a>, enhance experiences, and empower your hyperautomation strategy.</p>
+        <p>© 2023 ServiceNow, Inc. All rights reserved. ServiceNow, the ServiceNow logo, Now, and other ServiceNow marks are trademarks and/or registered trademarks of ServiceNow, Inc. in the United States and/or other countries. Other company names, product names, and logos may be trademarks of the respective companies with which they are associated.</p>
+      </div>
+      <div>
+        <div class="section-metadata">
+          <div>
+            <div>Style</div>
+            <div>Sidebar</div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer></footer>
+  </body>
+</html>