From 2725066ee4defce6ac57a32e5a392aa413de7a8c Mon Sep 17 00:00:00 2001 From: Mira Date: Tue, 27 Feb 2024 13:10:58 +0100 Subject: [PATCH] saving current state before rewriting all again :) --- libs/utils/utils.js | 2 +- .../personalization/delayedModal.test.js | 100 ------------------ .../personalization/personalization.test.js | 58 ++++++++-- test/utils/utils.test.js | 17 ++- 4 files changed, 56 insertions(+), 121 deletions(-) delete mode 100644 test/features/personalization/delayedModal.test.js diff --git a/libs/utils/utils.js b/libs/utils/utils.js index 4a4e0d96b2..4363122f8a 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -1016,7 +1016,7 @@ export function showModal({ delay, display, details, getModal }) { setTimeout(() => { getModal(details); sendAnalytics(modalOpenEvent); - window.sessionStorage.setItem(`shown:${id}`, true); + window.sessionStorage.setItem(`shown:${id}`, 'true'); }, delay); } } diff --git a/test/features/personalization/delayedModal.test.js b/test/features/personalization/delayedModal.test.js deleted file mode 100644 index b7da86cfb6..0000000000 --- a/test/features/personalization/delayedModal.test.js +++ /dev/null @@ -1,100 +0,0 @@ -// @TODO: write new tests, place them in proper files and remove this file -// import { expect } from '@esm-bundle/chai'; -// import { parseUrl } from '../../../libs/features/personalization/personalization.js'; -// import { defineHashParams, showModal, setEventBasedModalListener, DISPLAY_MODE } from '../../../libs/utils/utils.js'; -// import { delay, waitForElement } from '../../helpers/waitfor.js'; - -// const hash = '#dm'; - -// it('parses URL properly', () => { -// expect(parseUrl()).to.deep.equal({}); -// expect(parseUrl('https://www.adobe.com/')).to.deep.equal({ -// hash: '', -// href: '/', -// pathname: '/', -// search: '', -// }); -// expect(parseUrl('/fragments/testpage')).to.deep.equal({ href: '/fragments/testpage' }); -// expect(parseUrl('https://www.adobe.com/testpage/?delay=1&display=pageload#dm')).to.deep.equal({ -// hash, -// href: '/testpage/?delay=1&display=pageload#dm', -// pathname: '/testpage/', -// search: '?delay=1&display=pageload', -// }); -// }); - -// it('takes the delayed modal parameters from the URL', () => { -// expect(defineDelayedModalParams()).to.deep.equal({}); -// expect(defineDelayedModalParams('?delay=invalid&display=invalid')).to.deep.equal({}); -// expect(defineDelayedModalParams('?delay=-1&display=pageload')).to.deep.equal({ displayMode: DISPLAY_MODE.oncePerPageLoad }); -// expect(defineDelayedModalParams('?delay=1&display=pageload')).to.deep.equal({ -// delay: 1000, -// displayMode: DISPLAY_MODE.oncePerPageLoad, -// }); -// }); - -// it('add proper attributes and class names to the link', () => { -// const a = document.createElement('a'); -// decorateDelayedModalAnchor({ -// a, -// hash, -// pathname: '/testpage/', -// }); -// expect(a.getAttribute('href')).to.equal(hash); -// expect(a.getAttribute('data-modal-hash')).to.equal(hash); -// expect(a.getAttribute('data-modal-path')).to.equal('/testpage/'); -// expect(a.getAttribute('style')).to.equal('display: none'); -// expect(a.classList.contains('modal')).to.be.true; -// expect(a.classList.contains('link-block')).to.be.true; -// a.remove(); -// }); - -// it('creates and opens the delayed modal', async () => { -// const a = document.createElement('a'); -// decorateDelayedModalAnchor({ -// a, -// hash, -// pathname: '/testpage', -// }); -// document.body.appendChild(a); -// showModalWithDelay({ -// delay: '1', -// displayMode: DISPLAY_MODE.oncePerPageLoad, -// hash, -// }); -// const delayedModal = await waitForElement(hash); -// expect(delayedModal).to.exist; -// delayedModal.remove(); -// a.remove(); -// window.location.hash = ''; -// }); - -// it('does not open a delayed modal if it should be displayed once per session and was already displayed', async () => { -// const a = document.createElement('a'); -// window.sessionStorage.removeItem('wasDelayedModalShown'); -// decorateDelayedModalAnchor({ -// a, -// hash, -// pathname: '/testpage', -// }); -// document.body.appendChild(a); -// showModalWithDelay({ -// delay: '1', -// displayMode: DISPLAY_MODE.oncePerSession, -// hash, -// }); -// const delayedModal = await waitForElement(hash); -// expect(delayedModal).to.exist; -// expect(window.sessionStorage.getItem('wasDelayedModalShown')).to.equal('true'); -// delayedModal.remove(); - -// showModalWithDelay({ -// delay: '1', -// displayMode: DISPLAY_MODE.oncePerSession, -// hash, -// }); -// await delay(900); -// expect(document.querySelector(hash)).to.not.exist; -// a.remove(); -// window.sessionStorage.removeItem('wasDelayedModalShown'); -// }); diff --git a/test/features/personalization/personalization.test.js b/test/features/personalization/personalization.test.js index d72ae688ea..9dec82b2f8 100644 --- a/test/features/personalization/personalization.test.js +++ b/test/features/personalization/personalization.test.js @@ -4,7 +4,13 @@ import { stub } from 'sinon'; import { getConfig, setConfig, loadBlock } from '../../../libs/utils/utils.js'; import initFragments from '../../../libs/blocks/fragment/fragment.js'; import { waitForElement } from '../../helpers/waitfor.js'; -import { applyPers, createFrag, normalizePath } from '../../../libs/features/personalization/personalization.js'; +import { + applyPers, + createFrag, + normalizePath, + decorateDelayedModalAnchor, + parseUrl, +} from '../../../libs/features/personalization/personalization.js'; document.head.innerHTML = await readFile({ path: './mocks/metadata.html' }); document.body.innerHTML = await readFile({ path: './mocks/personalization.html' }); @@ -32,22 +38,23 @@ describe('Functional Test', () => { }; }); - it('should create a fragment, and show a modal with delay', async () => { + it('should create a delayed modal anchor', async () => { const hash = '#testhash'; - const url = 'https://adobe.com/testpage/?delay=1&display=pageload#testhash'; + const url = 'https://adobe.com/testpage/#testhash:delay=1:display=pageload'; const manifestId = 'testManifestId'; const parentElement = document.createElement('div'); const el = document.createElement('div'); parentElement.appendChild(el); document.body.appendChild(parentElement); const frag = createFrag(el, url, manifestId); - expect(frag.nodeName).to.equal('A'); - expect(frag.getAttribute('href')).to.equal(hash); - expect(frag.getAttribute('data-modal-hash')).to.equal(hash); - expect(frag.getAttribute('data-modal-path')).to.equal('/testpage/'); - expect(frag.getAttribute('style')).to.equal('display: none'); - expect(frag.classList.contains('modal')).to.be.true; - expect(frag.classList.contains('link-block')).to.be.true; + expect(frag.nodeName).to.equal('P'); + const link = frag.querySelector('a'); + expect(link.getAttribute('href')).to.equal(hash); + expect(link.getAttribute('data-modal-hash')).to.equal(hash); + expect(link.getAttribute('data-modal-path')).to.equal('/testpage/'); + expect(link.getAttribute('style')).to.equal('display: none'); + expect(link.classList.contains('modal')).to.be.true; + expect(link.classList.contains('link-block')).to.be.true; el.appendChild(frag); const delayedModal = await waitForElement(hash); expect(delayedModal).to.exist; @@ -320,4 +327,35 @@ describe('normalizePath function', () => { const path = await normalizePath('https://main--milo--adobecom.hlx.page/path/to/fragment.plain.html'); expect(path).to.equal('/de/path/to/fragment.plain.html'); }); + + it('sets proper attributes on the delayed modal anchor link', () => { + const a = document.createElement('a'); + const hash = '#dm'; + decorateDelayedModalAnchor({ a, hash, pathname: 'path/to/page' }); + expect(a.getAttribute('href')).to.equal(hash); + expect(a.getAttribute('data-modal-hash')).to.equal(hash); + expect(a.getAttribute('data-modal-path')).to.equal('path/to/page'); + expect(a.getAttribute('style')).to.equal('display: none'); + expect(a.classList.contains('modal')).to.be.true; + expect(a.classList.contains('link-block')).to.be.true; + a.remove(); + }); + + it('parses URL properly', () => { + const hash = '#dm'; + expect(parseUrl()).to.deep.equal({}); + expect(parseUrl('https://www.adobe.com/')).to.deep.equal({ + hash: '', + href: '/', + pathname: '/', + }); + expect(parseUrl('/fragments/testpage')).to.deep.equal({ href: '/fragments/testpage' }); + expect(parseUrl('https://www.adobe.com/testpage/#dm:delay=1:display=pageload')).to.deep.equal({ + hash, + href: '/testpage/#dm', + pathname: '/testpage/', + delay: 1000, + display: 'pageload', + }); + }); }); diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index f6c883e925..b6f2e9d949 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -1,7 +1,7 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; import sinon from 'sinon'; -import { waitFor, waitForElement, delay } from '../helpers/waitfor.js'; +import { waitFor, waitForElement } from '../helpers/waitfor.js'; import { mockFetch } from '../helpers/generalHelpers.js'; import { createTag, @@ -9,6 +9,7 @@ import { sendAnalytics, showModal, } from '../../libs/utils/utils.js'; +import { getModal } from '../../libs/blocks/modal/modal.js'; const utils = {}; @@ -682,10 +683,8 @@ describe('Utils', () => { }); describe('showModal', () => { - it('shows modal with delay', async () => { - showModal({ delay: '1', display: 'pageload', details: { id: 'delayed' }, getModal: () => {} }); - expect(document.querySelector('#dmpageload')).to.not.exist; - await delay(1000); + it('shows modal with delay', () => { + showModal({ delay: '1', display: 'pageload', details: { id: 'delayed' }, getModal }); const modal = waitForElement('#dmpageload'); expect(modal).to.exist; }); @@ -693,10 +692,9 @@ describe('Utils', () => { it('shows modal with delay and remembers it in session storage', async () => { const id = 'dmsession'; window.sessionStorage.removeItem(`shown:${id}`); - showModal({ delay: '1', display: 'session', details: { id }, getModal: () => {} }); + showModal({ delay: '1', display: 'session', details: { id }, getModal }); expect(document.querySelector(`#${id}`)).to.not.exist; - await delay(1000); - const modal = waitForElement(`#${id}`); + const modal = await waitForElement(`#${id}`); expect(modal).to.exist; expect(window.sessionStorage.getItem(`shown:${id}`)).to.equal('true'); }); @@ -716,8 +714,7 @@ describe('Utils', () => { }, }); window.dispatchEvent(event); - await delay(1000); - const modal = waitForElement('#test-modal'); + const modal = await waitForElement('#test-modal'); expect(modal).to.exist; // eslint-disable-next-line no-underscore-dangle window._satellite.track = originalTrackFunction;