@@ -200,7 +263,7 @@ class AppPrompt {
};
addEventListeners = () => {
- this.anchor?.addEventListener('click', this.close);
+ this.anchor?.addEventListener('click', () => this.close({ dismissalActions: false }));
document.addEventListener('keydown', this.handleKeyDown);
[this.elements.closeIcon, this.elements.cta]
@@ -211,9 +274,13 @@ class AppPrompt {
if (event.key === 'Escape') this.close();
};
+ static redirectTo(url) {
+ window.location.assign(url);
+ }
+
initRedirect = () => setTimeout(() => {
- this.close({ saveDismissal: false });
- window.location.assign(this.options['redirect-url']);
+ this.close({ saveDismissal: false, dismissalActions: false });
+ AppPrompt.redirectTo(this.options['redirect-url']);
}, this.options['loader-duration']);
isDismissedPrompt = () => AppPrompt.getDismissedPrompts().includes(this.id);
@@ -224,7 +291,7 @@ class AppPrompt {
document.cookie = `dismissedAppPrompts=${JSON.stringify([...dismissedPrompts])};path=/`;
};
- close = ({ saveDismissal = true } = {}) => {
+ close = ({ saveDismissal = true, dismissalActions = true } = {}) => {
const appPromptElem = document.querySelector(CONFIG.selectors.prompt);
appPromptElem?.remove();
clearTimeout(this.redirectFn);
@@ -232,6 +299,19 @@ class AppPrompt {
document.removeEventListener('keydown', this.handleKeyDown);
this.anchor?.focus();
this.anchor?.removeEventListener('click', this.close);
+
+ if (dismissalActions) {
+ playFocusAnimation(
+ this.anchor,
+ this.options['dismissal-animation-count'],
+ this.options['dismissal-animation-duration'],
+ );
+ showTooltip(
+ this.anchor,
+ this.options['dismissal-tooltip-message'],
+ this.options['dismissal-tooltip-duration'],
+ );
+ }
};
static getDismissedPrompts = () => {
@@ -246,7 +326,8 @@ class AppPrompt {
export default async function init(config) {
try {
- const appPrompt = await new AppPrompt(config);
+ const appPrompt = new AppPrompt(config);
+ if (!appPrompt.initializationQueued) await appPrompt.init();
return appPrompt;
} catch (e) {
lanaLog({ message: 'Could not initialize PEP', e, tags: 'errorType=error,module=pep' });
diff --git a/test/features/webapp-prompt/mocks/pep-prompt-content.js b/test/features/webapp-prompt/mocks/pep-prompt-content.js
index 9f32193ae4..165185e344 100644
--- a/test/features/webapp-prompt/mocks/pep-prompt-content.js
+++ b/test/features/webapp-prompt/mocks/pep-prompt-content.js
@@ -1,4 +1,13 @@
-export default ({ color, loaderDuration, redirectUrl, productName }) => `
+export default ({
+ color,
+ loaderDuration,
+ redirectUrl,
+ productName,
+ animationCount,
+ animationDuration,
+ tooltipMessage,
+ tooltipDuration,
+}) => `
@@ -27,5 +36,21 @@ export default ({ color, loaderDuration, redirectUrl, productName }) => `
product-name
${productName}
`}
+ ${animationCount && `
+
dismissal-animation-count
+
${animationCount}
+
+
dismissal-animation-duration
+
${animationDuration}
+
+
dismissal-tooltip-message
+
${tooltipMessage}
+
+
dismissal-tooltip-duration
+
${tooltipDuration}
+
`;
diff --git a/test/features/webapp-prompt/test-utilities.js b/test/features/webapp-prompt/test-utilities.js
index d74376db6c..8c134d6058 100644
--- a/test/features/webapp-prompt/test-utilities.js
+++ b/test/features/webapp-prompt/test-utilities.js
@@ -1,7 +1,7 @@
import { setViewport } from '@web/test-runner-commands';
-import sinon from 'sinon';
-import init from '../../../libs/features/webapp-prompt/webapp-prompt.js';
+import init, { DISMISSAL_CONFIG } from '../../../libs/features/webapp-prompt/webapp-prompt.js';
import { viewports, mockRes as importedMockRes } from '../../blocks/global-navigation/test-utilities.js';
+import { setUserProfile } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
import { getConfig, loadStyle, setConfig, updateConfig } from '../../../libs/utils/utils.js';
export const allSelectors = {
@@ -17,13 +17,16 @@ export const allSelectors = {
progressWrapper: '.appPrompt-progressWrapper',
progress: '.appPrompt-progress',
appSwitcher: '#unav-app-switcher',
+ indicatorRing: '.coach-indicator-ring',
+ tooltip: '[data-pep-dismissal-tooltip]',
};
export const defaultConfig = {
color: '#b30b00',
loaderDuration: 7500,
- redirectUrl: 'https://www.adobe.com/?pep=true',
+ redirectUrl: '#soup',
productName: 'photoshop',
+ ...DISMISSAL_CONFIG,
};
export const mockRes = importedMockRes;
@@ -38,6 +41,7 @@ export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = fa
await setViewport(viewports.desktop);
await loadStyle('../../../libs/features/webapp-prompt/webapp-prompt.css');
+ setUserProfile({});
const pep = await init({
promptPath: 'https://pep-mocks.test/pep-prompt-content.plain.html',
getAnchorState: getAnchorStateMock || (async () => ({ id: 'unav-app-switcher', isOpen: isAnchorOpen })),
@@ -45,6 +49,7 @@ export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = fa
parent: document.querySelector('div.feds-utilities'),
});
- sinon.stub(pep, 'initRedirect').callsFake(() => null);
+ // sinon.stub(window.location, 'assign').returns(null);
+
return pep;
};
diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js
index c3e6bf6c6c..c065acd726 100644
--- a/test/features/webapp-prompt/webapp-prompt.test.js
+++ b/test/features/webapp-prompt/webapp-prompt.test.js
@@ -3,17 +3,12 @@ import sinon, { stub } from 'sinon';
import pepPromptContent from './mocks/pep-prompt-content.js';
describe('PEP', () => {
- let clock;
let allSelectors;
let defaultConfig;
let mockRes;
let initPep;
beforeEach(async () => {
- clock = sinon.useFakeTimers({
- toFake: ['setTimeout'],
- shouldAdvanceTime: true,
- });
// We need to import the utilities after mocking setTimeout to ensure
// their setTimeout calls use Sinon's mocked implementation.
// Importing before mocking would lead to a 5s PEP timeout, exceeding the 2s test limit.
@@ -33,7 +28,6 @@ describe('PEP', () => {
afterEach(() => {
sinon.restore();
- clock.restore();
document.body.innerHTML = '';
document.cookie = `${document.cookie};expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
});
@@ -41,20 +35,17 @@ describe('PEP', () => {
describe('PEP rendering tests', () => {
it('should render PEP', async () => {
await initPep({});
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.exist;
});
it('should not render PEP when previously dismissed', async () => {
document.cookie = 'dismissedAppPrompts=["pep-prompt-content.plain.html"]';
await initPep({});
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should not render PEP when the entitlement does not match', async () => {
await initPep({ entName: 'not-matching-entitlement' });
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
@@ -71,7 +62,6 @@ describe('PEP', () => {
return null;
});
await initPep({});
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
@@ -82,27 +72,22 @@ describe('PEP', () => {
return null;
});
await initPep({});
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should not render PEP when the anchor element is open', async () => {
await initPep({ isAnchorOpen: true });
- await clock.runAllAsync();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should not render PEP when the GRM is open', async () => {
+ const clock = sinon.useFakeTimers();
document.body.insertAdjacentHTML('afterbegin', '
');
document.body.insertAdjacentHTML('afterbegin', '
');
await initPep({});
- try {
- clock.runAll();
- } catch (e) {
- expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
- }
+ expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
const event = new CustomEvent('milo:modal:closed');
window.dispatchEvent(event);
@@ -110,70 +95,138 @@ describe('PEP', () => {
document.querySelector('.locale-modal-v2')?.remove();
document.querySelector('.dialog-modal')?.remove();
- await clock.runAllAsync();
+ await clock.tickAsync(300);
+
expect(document.querySelector(allSelectors.pepWrapper)).to.exist;
+ clock.uninstall();
});
});
describe('PEP configuration tests', () => {
- it('should use config values when metadata loader color or duration are not provided', async () => {
+ it('should use config values when metadata loader color, duration, or dismissal options are not provided', async () => {
sinon.restore();
stub(window, 'fetch').callsFake(async (url) => {
- if (url.includes('pep-prompt-content.plain.html')) return mockRes({ payload: pepPromptContent({ ...defaultConfig, color: false, loaderDuration: false }) });
+ if (url.includes('pep-prompt-content.plain.html')) {
+ return mockRes({
+ payload: pepPromptContent({
+ ...defaultConfig,
+ color: false,
+ loaderDuration: false,
+ animationCount: false,
+ animationDuration: false,
+ tooltipMessage: false,
+ tooltipDuration: false,
+ }),
+ });
+ }
return null;
});
const pep = await initPep({});
- await clock.runAllAsync();
- const { 'loader-color': pepColor, 'loader-duration': pepDuration } = pep.options;
- expect(!!pepColor && !!pepDuration).to.equal(true);
+ const {
+ 'loader-color': pepColor,
+ 'loader-duration': pepDuration,
+ 'dismissal-animation-count': animCount,
+ 'dismissal-animation-duration': animDuration,
+ 'dismissal-tooltip-message': tooltipMessage,
+ 'dismissal-tooltip-duration': tooltipDuration,
+ } = pep.options;
+ const configPresent = [
+ pepColor,
+ pepDuration,
+ animCount,
+ animDuration,
+ tooltipMessage,
+ tooltipDuration,
+ ].reduce((acc, x) => acc && !!x, true);
+ expect(configPresent).to.equal(true);
});
});
describe('PEP interaction tests', () => {
it('should close PEP on Escape key', async () => {
await initPep({});
- await clock.runAllAsync();
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should close PEP on clicking the close icon', async () => {
await initPep({});
- await clock.runAllAsync();
document.querySelector(allSelectors.closeIcon).click();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should close PEP on clicking the CTA', async () => {
await initPep({});
- await clock.runAllAsync();
document.querySelector(allSelectors.cta).click();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
it('should close PEP on clicking the anchor element', async () => {
await initPep({});
- await clock.runAllAsync();
document.querySelector(allSelectors.appSwitcher).click();
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});
+
+ it('redirects when the PEP timer runs out', async () => {
+ const clock = sinon.useFakeTimers();
+ await initPep({});
+
+ expect(window.location.hash).to.not.equal('soup');
+
+ clock.tick(10000);
+
+ expect(window.location.hash).to.equal('#soup');
+
+ clock.uninstall();
+ });
});
describe('PEP focus tests', () => {
it('should focus on the close icon on initial render', async () => {
await initPep({});
- await clock.runAllAsync();
expect(document.activeElement).to.equal(document.querySelector(allSelectors.closeIcon));
});
it('should focus on the anchor element after closing', async () => {
await initPep({});
- await clock.runAllAsync();
document.querySelector(allSelectors.closeIcon).click();
expect(document.activeElement).to.equal(document.querySelector(allSelectors.appSwitcher));
});
});
+ describe('PEP dismissal tests', () => {
+ it('adds three rings to the app switcher and removes them after the required amount of time', async () => {
+ const clock = sinon.useFakeTimers();
+ await initPep({});
+
+ document.querySelector(allSelectors.closeIcon).click();
+ expect([...document.querySelectorAll(allSelectors.indicatorRing)].length).to.equal(3);
+ clock.tick(7500);
+ expect([...document.querySelectorAll(allSelectors.indicatorRing)].length).to.equal(0);
+ clock.uninstall();
+ });
+
+ it('adds a data attribute to the app switcher with the correct data and removes it after the allotted time', async () => {
+ const clock = sinon.useFakeTimers();
+ await initPep({});
+
+ document.querySelector(allSelectors.closeIcon).click();
+ expect(document.querySelector(allSelectors.tooltip)).to.exist;
+
+ clock.tick(5000);
+ expect(document.querySelector(allSelectors.tooltip)).to.not.exist;
+ clock.uninstall();
+ });
+
+ it('removes the dismissal animation and the tooltip upon clicking the anchor element', async () => {
+ await initPep({});
+ document.querySelector(allSelectors.closeIcon).click();
+ expect(document.querySelector(allSelectors.tooltip)).to.exist;
+ document.querySelector(allSelectors.appSwitcher).click();
+ expect(document.querySelector(allSelectors.tooltip)).to.not.exist;
+ });
+ });
+
describe('PEP logging tests', () => {
beforeEach(() => {
window.lana.log = sinon.spy();
@@ -185,7 +238,6 @@ describe('PEP', () => {
reject(new Error('Cannot get anchor state'));
}),
});
- await clock.runAllAsync();
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Error on getting anchor state'))).to.exist;
expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=pep'))).to.exist;
});
@@ -203,7 +255,6 @@ describe('PEP', () => {
return null;
});
await initPep({});
- await clock.runAllAsync();
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Error fetching content for prompt'))).to.exist;
expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=pep'))).to.exist;
});