MWPW-143378 add unit tests

express/blocks/ax-marquee/ax-marquee.js

@@ -544,7 +544,7 @@ export default async function decorate(block) {
     await formatSalesPhoneNumber(phoneNumberTags);
   }
 
-  if (getConfig().locale.region === 'jp') {
+  if (getConfig().locale?.region === 'jp') {
     addHeaderSizing(block);
   }
   block.classList.add('appear');

express/scripts/widgets/free-plan.js

@@ -52,7 +52,7 @@ export async function buildFreePlanWidget(config) {
 }
 
 export async function addFreePlanWidget(elem) {
-  const freePlanMeta = getMetadata('show-free-plan').toLowerCase();
+  const freePlanMeta = getMetadata('show-free-plan')?.toLowerCase();
 
   if (!freePlanMeta || ['no', 'false', 'n', 'off'].includes(freePlanMeta)) return;
   let widget;

test/blocks/ax-marquee/ax-marquee.test.js

@@ -0,0 +1,149 @@
+import {
+  readFile,
+  emulateMedia,
+  setViewport,
+} from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+
+const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
+
+window.isTestEnv = true;
+
+const imports = await Promise.all([import('../../../express/scripts/utils.js'), import('../../../express/scripts/scripts.js'), import('../../../express/blocks/ax-marquee/ax-marquee.js')]);
+const { getLibs } = imports[0];
+const {
+  default: decorate,
+  handleMediaQuery,
+  transformToVideoLink,
+  decorateToggleContext,
+} = imports[2];
+await import(`${getLibs()}/utils/utils.js`).then((mod) => {
+  const conf = { locales };
+  mod.setConfig(conf);
+});
+
+async function prepBlock(filePath) {
+  document.body.innerHTML = await readFile({ path: filePath });
+  const marquee = document.querySelector('.ax-marquee');
+  await decorate(marquee);
+  return marquee;
+}
+
+describe('ax-marquee', () => {
+  describe('default version', () => {
+    it('has a video background', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const video = marquee.querySelector('video.marquee-background');
+      expect(video).to.exist;
+    });
+
+    it('has a content foreground', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const content = marquee.querySelector('.marquee-foreground .content-wrapper');
+      expect(content).to.exist;
+    });
+
+    it('has at least an H1', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const h1 = marquee.querySelector('.marquee-foreground .content-wrapper h1');
+      expect(h1).to.exist;
+    });
+
+    it('has reduce motion toggle', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const video = marquee.querySelector('video.marquee-background');
+      video.dispatchEvent(new Event('canplay'));
+      const reduceMotionToggle = marquee.querySelector('.reduce-motion-wrapper');
+      expect(reduceMotionToggle).to.exist;
+    });
+
+    it('reduce motion toggle on hover adds text', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const video = marquee.querySelector('video.marquee-background');
+      video.dispatchEvent(new Event('canplay'));
+      const reduceMotionToggle = marquee.querySelector('.reduce-motion-wrapper');
+      expect(reduceMotionToggle.children.length).equals(2);
+      await decorateToggleContext(reduceMotionToggle, {});
+      expect(reduceMotionToggle.children.length).equals(4);
+    });
+
+    it('system accessibility setting affects the page live', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');
+      handleMediaQuery(marquee, mediaQuery);
+      await emulateMedia({ reducedMotion: 'no-preference' });
+      mediaQuery.dispatchEvent(new Event('change'));
+      expect(mediaQuery.matches).to.be.false;
+      await emulateMedia({ reducedMotion: 'reduce' });
+      mediaQuery.dispatchEvent(new Event('change'));
+      expect(mediaQuery.matches).to.be.true;
+    });
+
+    it('window resize triggers video adjustment', async () => {
+      const marquee = await prepBlock('./mocks/default.html');
+      const video = marquee.querySelector('video.marquee-background');
+      video.src = 'foo';
+      await setViewport({ width: 360, height: 640 });
+      const newVideo = marquee.querySelector('video.marquee-background');
+
+      expect(newVideo.src).to.not.equal('foo');
+    });
+  });
+
+  describe('dark version with video', () => {
+    it('is dark', async () => {
+      const marquee = await prepBlock('./mocks/dark-video.html');
+      expect(marquee.classList.contains('dark')).to.be.true;
+    });
+
+    it('uses different set of SVG for reduce-motion toggle', async () => {
+      const marquee = await prepBlock('./mocks/dark-video.html');
+      const video = marquee.querySelector('video.marquee-background');
+      video.dispatchEvent(new Event('canplay'));
+      const lightPlayIcon = marquee.querySelector('.icon-play-video-light');
+      expect(lightPlayIcon).to.exist;
+    });
+  });
+
+  describe('supports static asset', () => {
+    it('renders an image background', async () => {
+      const marquee = await prepBlock('./mocks/dark-static.html');
+      const video = marquee.querySelector('.background-wrapper video');
+      expect(video.poster !== '' && !video.querySelector('source')).to.be.true;
+    });
+
+    it('does not load reduce motion toggle', async () => {
+      const marquee = await prepBlock('./mocks/dark-static.html');
+      const reduceMotionToggle = marquee.querySelector('.reduce-motion-wrapper');
+      expect(reduceMotionToggle).to.not.exist;
+    });
+  });
+
+  describe('supports options', () => {
+    it('renders an background color', async () => {
+      const marquee = await prepBlock('./mocks/shadow-background.html');
+      expect(marquee.getAttribute('style')).to.not.equal('');
+    });
+
+    it('renders a shadow', async () => {
+      const marquee = await prepBlock('./mocks/shadow-background.html');
+      const shadow = marquee.querySelector('.hero-shadow');
+      expect(shadow).to.exist;
+    });
+
+    it('video link click opens video overlay', async () => {
+      const marquee = await prepBlock('./mocks/shadow-background.html');
+      const videoLink = marquee.querySelector('a[href="./media_1ff62f7924e9f7cb39ebf245d1ac1be92eb868835.mp4"]');
+      if (videoLink) await transformToVideoLink(videoLink.closest('div'), videoLink);
+      videoLink.click();
+      expect(document.querySelector('.video-overlay')).to.exist;
+    });
+  });
+
+  describe('supports wide variant', () => {
+    it('renders an wide background', async () => {
+      const marquee = await prepBlock('./mocks/wide.html');
+      expect(marquee.classList.contains('wide')).to.be.true;
+    });
+  });
+});

test/blocks/ax-marquee/mocks/dark-static.html

@@ -0,0 +1,35 @@
+<main>
+  <div class="ax-marquee dark">
+    <div>
+      <div>Mobile</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+      <div></div>
+    </div>
+    <div>
+      <div>Desktop</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h2 id="adobe-express-1">Adobe Express</h2>
+        <h1 id="free-all-in-one-content-creation-app-1">Free all-in-one content creation app.</h1>
+        <p>Quickly and easily make on-brand social content, marketing materials, and more. Gather creative inspiration from thousands of high-quality templates and AI-powered recommendations for you. <a href="https://helpx.adobe.com/express/kb/express-beta-faq.html">Learn more.</a></p>
+        <p><a href="https://adobesparkpost.app.link/arCdwGikflb">Get Adobe Express free</a></p>
+      </div>
+    </div>
+  </div>
+</main>

test/blocks/ax-marquee/mocks/dark-video.html

@@ -0,0 +1,20 @@
+<main>
+  <div class="ax-marquee dark">
+    <div>
+      <div>Mobile</div>
+      <div><a href="./media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4">https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4</a></div>
+    </div>
+    <div>
+      <div>Desktop</div>
+      <div><a href="./media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4">https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4</a></div>
+    </div>
+    <div>
+      <div>
+        <h2 id="adobe-express">Adobe Express</h2>
+        <h1 id="free-all-in-one-content-creation-app">Free all-in-one content creation app.</h1>
+        <p>Quickly and easily make on-brand social content, marketing materials, and more. Gather creative inspiration from thousands of high-quality templates and AI-powered recommendations for you. <a href="https://helpx.adobe.com/express/kb/express-beta-faq.html">Learn more.</a></p>
+        <p><a href="https://adobesparkpost.app.link/arCdwGikflb">Get Adobe Express free</a></p>
+      </div>
+    </div>
+  </div>
+</main>

test/blocks/ax-marquee/mocks/default.html

@@ -0,0 +1,21 @@
+<main>
+  <div class="ax-marquee">
+    <div>
+      <div>Mobile</div>
+      <div><a href="https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4">https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4</a></div>
+    </div>
+    <div>
+      <div>Desktop</div>
+      <div><a href="https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4">https://main--express-website--adobe.hlx.page/media_1f893fd93d08e72420b24249bbbe87d4b3b9e4b33.mp4</a></div>
+    </div>
+    <div>
+      <div>
+        <h2 id="adobe-express-2">Adobe Express</h2>
+        <h1 id="free-all-in-one-content-creation-app-2">Free all-in-one content creation app.</h1>
+        <p>Quickly and easily make on-brand social content, marketing materials, and more. Gather creative inspiration from thousands of high-quality templates and AI-powered recommendations for you. <a href="https://helpx.adobe.com/express/kb/express-beta-faq.html">Learn more.</a></p>
+        <p><a href="https://adobesparkpost.app.link/arCdwGikflb">Get Adobe Express free</a></p>
+        <p><a href="./media_1ff62f7924e9f7cb39ebf245d1ac1be92eb868835.mp4">Watch the video</a></p>
+      </div>
+    </div>
+  </div>
+</main>

test/blocks/ax-marquee/mocks/shadow-background.html

@@ -0,0 +1,50 @@
+<main>
+  <div class="ax-marquee">
+    <div>
+      <div>Mobile</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>Desktop</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>shadow</div>
+      <div>yes</div>
+    </div>
+    <div>
+      <div>background</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h2 id="adobe-express-6">Adobe Express</h2>
+        <h1 id="free-all-in-one-content-creation-app-6">Free all-in-one content creation app.</h1>
+        <p>Quickly and easily make on-brand social content, marketing materials, and more. Gather creative inspiration from thousands of high-quality templates and AI-powered recommendations for you. <a href="https://helpx.adobe.com/express/kb/express-beta-faq.html">Learn more.</a></p>
+        <p><a href="https://adobesparkpost.app.link/arCdwGikflb">Get Adobe Express free</a></p>
+        <p><a href="./media_1ff62f7924e9f7cb39ebf245d1ac1be92eb868835.mp4">Watch the video</a></p>
+      </div>
+    </div>
+  </div>
+</main>

test/blocks/ax-marquee/mocks/wide.html

@@ -0,0 +1,35 @@
+<main>
+  <div class="ax-marquee wide">
+    <div>
+      <div>Mobile</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>Desktop</div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+          <source type="image/webp" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=webply&amp;optimize=medium">
+          <source type="image/png" srcset="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="./media_11e1d0a3c5a905d779eb25a77be7f06f98ae264b2.png?width=750&amp;format=png&amp;optimize=medium" width="1372" height="430">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h2 id="adobe-express-5">Adobe Express</h2>
+        <h1 id="free-all-in-one-content-creation-app-5">Free all-in-one content creation app.</h1>
+        <p>Quickly and easily make on-brand social content, marketing materials, and more. Gather creative inspiration from thousands of high-quality templates and AI-powered recommendations for you. <a href="https://helpx.adobe.com/express/kb/express-beta-faq.html">Learn more.</a></p>
+        <p><a href="https://adobesparkpost.app.link/arCdwGikflb">Get Adobe Express free</a></p>
+        <p><a href="./media_1ff62f7924e9f7cb39ebf245d1ac1be92eb868835.mp4">Watch the video</a></p>
+      </div>
+    </div>
+  </div>
+</main>