From 6274f78cb5b4b5c3ae3ec44d190204af76c1e4d0 Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Fri, 20 Sep 2024 20:03:31 +0530 Subject: [PATCH] Add support for CDT in media block --- libs/blocks/media/media.js | 13 ++++++- test/blocks/hero-marquee/hero-marquee.test.js | 8 ++-- test/blocks/hero-marquee/mocks/body.html | 37 +------------------ test/blocks/marquee/marquee.test.js | 4 +- test/blocks/media/media.test.js | 5 +++ test/blocks/media/mocks/body.html | 2 +- test/blocks/media/mocks/placeholders.json | 24 ++++++++++++ 7 files changed, 47 insertions(+), 46 deletions(-) create mode 100644 test/blocks/media/mocks/placeholders.json diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index 2fcc018576..2f55f7a939 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -33,7 +33,7 @@ function decorateQr(el) { qrImage.classList.add('qr-code-img'); } -export default function init(el) { +export default async function init(el) { if (el.className.includes('rounded-corners')) { const { miloLibs, codeRoot } = getConfig(); const base = miloLibs || codeRoot; @@ -105,4 +105,15 @@ export default function init(el) { const mediaRowReversed = el.querySelector(':scope > .foreground > .media-row > div').classList.contains('text'); if (mediaRowReversed) el.classList.add('media-reverse-mobile'); decorateTextOverrides(el); + + if (el.classList.contains('countdown-timer')) { + const { default: initCDT } = await import('../../features/cdt/cdt.js'); + const classesToAdd = []; + if (el.classList.contains('dark')) { + classesToAdd.push('dark'); + } else { + classesToAdd.push('light'); + } + await initCDT(container, classesToAdd); + } } diff --git a/test/blocks/hero-marquee/hero-marquee.test.js b/test/blocks/hero-marquee/hero-marquee.test.js index be7041f33a..ffa9e72bc7 100644 --- a/test/blocks/hero-marquee/hero-marquee.test.js +++ b/test/blocks/hero-marquee/hero-marquee.test.js @@ -13,9 +13,7 @@ setConfig(conf); describe('Hero Marquee', () => { before(async () => { document.body.innerHTML = await readFile({ path: './mocks/body.html' }); - const meta = document.createElement('meta'); - meta.name = 'countdown-timer'; - meta.content = '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST'; + const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' }); document.head.appendChild(meta); const { default: init } = await import('../../../libs/blocks/hero-marquee/hero-marquee.js'); const marquees = document.querySelectorAll('.hero-marquee'); @@ -40,8 +38,8 @@ describe('Hero Marquee', () => { expect(hr).to.exist; }); - describe('Embedding countdown-timer inside hero-marquee', () => { - const marquee = document.getElementById('hero-all-cdt'); + it('Embedding countdown-timer inside hero-marquee', async () => { + const marquee = document.getElementById('hero-cdt'); expect(marquee.getElementsByClassName('timer-label')).to.exist; }); }); diff --git a/test/blocks/hero-marquee/mocks/body.html b/test/blocks/hero-marquee/mocks/body.html index 679c0c1c7a..7fca64dab7 100644 --- a/test/blocks/hero-marquee/mocks/body.html +++ b/test/blocks/hero-marquee/mocks/body.html @@ -118,27 +118,13 @@

Hero w/ Adobe.tv link

-
+
-
- - - -
-
- - - -
-
-
-
con-block-row-lockup (xl-icon-size)
-
XL Icon Size
@@ -163,19 +149,6 @@

This Hero has all row types

--- white
-
-
con-block-row-qrcode
- -
-
-
con-block-row-qrcode
- -
-
con-block-row-text (xs-body, m-button)
@@ -184,12 +157,4 @@

This Hero has all row types

con-block-row-text (body-m)
Text with no button class
-
-
con-block-row-bgcolor
-
#fafafa
-
-
-
con-block-row-supplemental
-
sup text
-
diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js index d5b3f1187d..1496ea95cf 100644 --- a/test/blocks/marquee/marquee.test.js +++ b/test/blocks/marquee/marquee.test.js @@ -16,9 +16,7 @@ const video = await readFile({ path: './mocks/video.html' }); const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' }); describe('marquee', () => { - const meta = document.createElement('meta'); - meta.name = 'countdown-timer'; - meta.content = '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST'; + const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' }); document.head.appendChild(meta); const marquees = document.querySelectorAll('.marquee'); marquees.forEach((marquee) => { diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js index 2a5ff0eaba..966b159b43 100644 --- a/test/blocks/media/media.test.js +++ b/test/blocks/media/media.test.js @@ -5,6 +5,8 @@ document.head.innerHTML = " { + const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' }); + document.head.appendChild(meta); const medias = document.querySelectorAll('.media'); medias.forEach((media) => { init(media); @@ -132,5 +134,8 @@ describe('media', () => { const detail = medias[8].querySelector('.detail-l'); expect(detail).to.exist; }); + it('has a cdt', () => { + expect(medias[8].getElementsByClassName('timer-label')).to.exist; + }); }); }); diff --git a/test/blocks/media/mocks/body.html b/test/blocks/media/mocks/body.html index 662303a823..78445c8a28 100644 --- a/test/blocks/media/mocks/body.html +++ b/test/blocks/media/mocks/body.html @@ -170,7 +170,7 @@

Heading XS 18/22 Media (merch

-
+
diff --git a/test/blocks/media/mocks/placeholders.json b/test/blocks/media/mocks/placeholders.json new file mode 100644 index 0000000000..3c7e61d0af --- /dev/null +++ b/test/blocks/media/mocks/placeholders.json @@ -0,0 +1,24 @@ +{ + "total": 21, + "offset": 0, + "limit": 21, + "data": [ + { + "key": "cdt-ends-in", + "value": "ENDS IN" + }, + { + "key": "cdt-days", + "value": "days" + }, + { + "key": "cdt-hours", + "value": "hours" + }, + { + "key": "cdt-mins", + "value": "mins" + } + ], + ":type": "sheet" +}