[Release] Sync main from stage 17/4/2024 adobecom#270

Merging following PRs to main - MWPW-144519 | Increasing unit test coverage adobecom#269 MWPW-142972 | Integrating review comments adobecom#267 Test URLs: Before: https://main--cc--adobecom.hlx.live/careers?martech=off After: https://stage--cc--adobecom.hlx.live/careers?martech=off
suhjainadobe · Apr 18, 2024 · b6f187f · b6f187f
2 parents e402af0 + 0eaa0c6
commit b6f187f
Show file tree

Hide file tree

Showing 17 changed files with 418 additions and 54 deletions.
diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.js b/creativecloud/blocks/interactive-metadata/interactive-metadata.js
@@ -149,7 +149,7 @@ async function handleLayerDisplay(stepInfo) {
   await handleImageTransition(stepInfo);
   await loadAllImgs(currLayer.querySelectorAll('img[src*="media_"]'));
   await decorateDefaultLinkAnalytics(currLayer);
-  if (prevStepIndex) stepInfo.target.classList.remove(`step-${stepInfo.stepList[prevStepIndex]}`);
+  if (prevStepIndex !== stepInfo.stepIndex) stepInfo.target.classList.remove(`step-${stepInfo.stepList[prevStepIndex]}`);
   if (clsLayer) clsLayer.remove();
   stepInfo.target.classList.add(`step-${stepInfo.stepName}`);
   currLayer.classList.add('show-layer');

diff --git a/creativecloud/features/interactive-components/start-over/start-over.js b/creativecloud/features/interactive-components/start-over/start-over.js
@@ -5,7 +5,7 @@ function btnLoadDelay(layer, button, delay, once = true) {
     entries.forEach(async (entry) => {
       if (entry.isIntersecting) {
         if (once) observer.unobserve(entry.target);
-        setTimeout(() => { button.style.display = 'flex'; }, parseInt(delay, 10));
+        setTimeout(() => { button.style.display = 'flex'; }, delay);
       }
     });
   });
@@ -37,8 +37,11 @@ export default async function stepInit(data) {
       data.el.dispatchEvent(new CustomEvent(data.nextStepEvent));
     });
   }
-  if (delay) btnLoadDelay(layer, startOverCTA, delay);
-  else startOverCTA.style.display = 'flex';
+  if (delay) {
+    const dInt = parseInt(delay, 10);
+    const normDelay = dInt > 99 ? dInt : (dInt * 1000);
+    btnLoadDelay(layer, startOverCTA, normDelay);
+  } else startOverCTA.style.display = 'flex';
   layer.append(startOverCTA);
   return layer;
 }
diff --git a/test/blocks/changeBg/changeBg.test.js b/test/blocks/changeBg/changeBg.test.js
diff --git a/test/blocks/interactive-marquee/interactive-marquee.test.js b/test/blocks/interactive-marquee/interactive-marquee.test.js
@@ -1,7 +1,7 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 
-document.body.innerHTML = await readFile({ path: './mocks/container.html' });
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { setLibs } = await import('../../../creativecloud/scripts/utils.js');
 const { default: init } = await import('../../../creativecloud/blocks/interactive-marquee/interactive-marquee.js');
 
@@ -11,6 +11,7 @@ describe('interactive marquee', () => {
     setLibs('https://milo.adobe.com/libs');
     await init(im);
   });
+
   it('interactive marquee light variant should exist', () => {
     const light = im.classList.contains('light');
     expect(light).to.true;

diff --git a/test/blocks/interactive-marquee/mocks/body.html b/test/blocks/interactive-marquee/mocks/body.html
@@ -0,0 +1,173 @@
+<div class="interactive-marquee light">
+  <div>
+    <div data-valign="middle">
+      <picture>
+        <img loading="lazy" alt="" src="" width="1600" height="750">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div data-valign="middle">
+      <p>
+        <picture>
+          <img loading="lazy" alt="" src="" width="154" height="150">
+        </picture>Photoshop
+      </p>
+      <h2 id="edit-photos-online-with-adobe-photoshop">Edit photos online with Adobe Photoshop</h2>
+      <p>Add, remove, or expand content in images right in your browser with Photoshop on the web. Included in every Photoshop plan.</p>
+      <p><strong><a href="https://www.adobe.com/">Free Trial</a></strong> <em><a href="http://www.adobe.com/">Explore Photoshop online</a></em></p>
+    </div>
+    <div data-valign="middle">
+      <picture>
+        <img loading="lazy" alt="Jungle" data-title="JungleD" src="" width="1000" height="1000">
+      </picture>
+    </div>
+  </div>
+</div>
+<div class="interactive-marquee changebg" daa-lh="b1|interactive-marquee|default|default">
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div data-align="right">
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Try It-1|">Try It</a></div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Cursor-2|">Cursor</a></div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Remove Background-3|">Remove Background</a></div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Change photo-4|">Change photo</a></div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Change Color-5|">Change Color</a></div>
+  </div>
+  <div>
+    <div>#31A8FF</div>
+    <div>#7F66E6</div>
+    <div>#31F7FF,#31A8FF,#31A8FF</div>
+  </div>
+  <div>
+    <div><a href="" daa-ll="Change Pattern-6|">Change Pattern</a></div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <picture>
+        <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+      </picture>
+      <img loading="eager" alt="Inserting image..." src="" width="599" height="591" fetchpriority="high">
+    </picture>
+    </div>
+  </div>
+</div>
diff --git a/test/blocks/interactive-marquee/mocks/container.html b/test/blocks/interactive-marquee/mocks/container.html
diff --git a/test/features/changeBg/changeBg.test.js b/test/features/changeBg/changeBg.test.js
@@ -0,0 +1,19 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { setLibs } from '../../../creativecloud/scripts/utils.js';
+
+setLibs('/libs');
+const { default: init } = await import('../../../creativecloud/blocks/interactive-marquee/interactive-marquee.js');
+
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+describe('Change Background Marquee', async () => {
+  const cmq = document.querySelector('.changebg');
+  before(async () => {
+    await init(cmq);
+  });
+
+  it('Change background should be decorated', () => {
+    const changebackgroundmarquee = document.querySelector('ft-changebackgroundmarquee');
+    expect(changebackgroundmarquee).to.exist;
+  });
+});
diff --git a/test/blocks/changeBg/mocks/index.html → test/features/changeBg/mocks/body.html b/test/blocks/changeBg/mocks/index.html → test/features/changeBg/mocks/body.html
@@ -220,4 +220,4 @@
         </picture>
       </div>
     </div>
-  </div>
+  </div>
diff --git a/test/features/firefly/firefly-interactive.test.js b/test/features/firefly/firefly-interactive.test.js
@@ -4,7 +4,6 @@ import { setLibs } from '../../../creativecloud/scripts/utils.js';
 import waitForElement from '../../helpers/waitForElement.js';
 
 setLibs('/libs');
-
 const { default: init } = await import('../../../creativecloud/blocks/interactive-marquee/interactive-marquee.js');
 
 describe('firefly-marquee', () => {
@@ -63,6 +62,21 @@ describe('firefly-marquee', () => {
     const texteffectPrompt = await waitForElement('.promptbar');
     expect(texteffectPrompt).to.exist;
   });
+
+  it('Clicking on text to image option in interactive selector should diplay text to image detail', async () => {
+    const selector = await waitForElement('.selector-tray');
+    const button = selector.querySelectorAll('.options')[0];
+    button.click();
+    const textToImg = await waitForElement('.promptbar');
+    expect(textToImg).to.exist;
+  });
+
+  it('Dispatching key codes to prompt input', async () => {
+    const promptinput = document.querySelector('#promptinput');
+    promptinput.click();
+    const eventSpace = new KeyboardEvent('keydown', { key: 'Space', code: 'Space', which: 32, keyCode: 32 });
+    promptinput.dispatchEvent(eventSpace);
+  });
 });
 
 describe('firefly-text-effect-marquee', () => {
@@ -93,6 +107,7 @@ describe('firefly-text-to-image-marquee', () => {
   before(async () => {
     document.body.innerHTML = await readFile({ path: './mocks/body.html' });
     await init(document.querySelector('.ff-text-to-image'));
+    await init(document.querySelector('.firefly.first-genfill'));
   });
 
   it('Prompt should exist', async () => {
@@ -112,3 +127,22 @@ describe('firefly-text-to-image-marquee', () => {
     expect(enticementArrow).to.exist;
   });
 });
+
+describe('firefly-genfill', () => {
+  before(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await init(document.querySelector('.firefly.first-genfill'));
+  });
+
+  it('Enticement should exist', async () => {
+    const enticementText = await waitForElement('.enticement-text');
+    const enticementArrow = await waitForElement('.enticement-arrow');
+    expect(enticementText).to.exist;
+    expect(enticementArrow).to.exist;
+  });
+
+  it('Clicking on genfill redirects to susi', () => {
+    const ffmq = document.querySelector('.firefly.first-genfill');
+    ffmq.querySelector('#genfill').click();
+  });
+});