MWPW-140345-Fix issues in media QR block variant (#1658)

* MWPW-140345 * MWPW-140345 * MWPW-140345 * Update media.js * Update media.css * Update unit test * Update qr block css * Update media.css * Update media.test.js * Update media.test.js
adobecom · Jan 5, 2024 · 66f6042 · 66f6042
1 parent 38723f9
commit 66f6042
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
@@ -170,6 +170,7 @@ div[class*="-up"] .media .foreground > .media-row {
   padding-bottom: 0;
   padding-top: 0;
   display: inline-flex;
+  margin-top: var(--spacing-xxs);
 }
 
 .media.qr-code .google-play {
@@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row {
 
   .media.qr-code img.qr-code-img {
     display: flex;
-    width: 150px;
-    height: 170px;
+    width: 140px;
+    height: 140px;
+    margin-top: var(--spacing-s);
   }
 
   .media.qr-code .qr-button-container {

diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
@@ -72,7 +72,7 @@ export default function init(el) {
 
     // qr code
     if (row.closest('.qr-code')) {
-      const imgQRCode = row.querySelector('.text > p.body-s > picture > img');
+      const imgQRCode = row.querySelector('.text img');
       if (imgQRCode) {
         imgQRCode.classList.add('qr-code-img');
       }

diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js
@@ -1,6 +1,7 @@
-import { readFile } from '@web/test-runner-commands';
+import { readFile, setViewport } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 
+document.head.innerHTML = "<link rel='stylesheet' href='../../../libs/blocks/media/media.css'>";
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/media/media.js');
 describe('media', () => {
@@ -67,6 +68,33 @@ describe('media', () => {
       const appStoreCta = medias[5].querySelector('a.app-store');
       expect(appStoreCta).to.exist;
     });
+    it('desktop view has visibile qr code image and no google-play and app-store CTA', async () => {
+      await setViewport({ width: 1200, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).to.equal('none');
+      });
+    });
+    it('mobile view has visibile google-play and app-store CTA and no qr code image', async () => {
+      await setViewport({ width: 600, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none');
+      });
+    });
+    it('tablet view has visibile google-play and app-store CTA and no qr code image', async () => {
+      await setViewport({ width: 1199, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none');
+      });
+    });
   });
   describe('with bio variant', () => {
     it('has a bio avatar and icon-stack area', () => {