From 0234a96975f94156f8e1e5fd61bed1b3123327bd Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Mon, 21 Oct 2024 17:08:33 -0700 Subject: [PATCH] cr - variables and remove try catch --- libs/blocks/marketo/marketo.js | 51 ++++++++++--------- test/blocks/marketo/marketo.test.js | 48 ++++++++++------- test/blocks/marketo/mocks/one-page-error.html | 51 +++++++++++++++++++ 3 files changed, 109 insertions(+), 41 deletions(-) create mode 100644 test/blocks/marketo/mocks/one-page-error.html diff --git a/libs/blocks/marketo/marketo.js b/libs/blocks/marketo/marketo.js index c1c6220a39..6afc593105 100644 --- a/libs/blocks/marketo/marketo.js +++ b/libs/blocks/marketo/marketo.js @@ -93,32 +93,35 @@ export const setPreferences = (formData) => { }; const showSuccessSection = (formData, scroll = true) => { - try { - const show = (el) => { - el.classList.remove('hide-block'); - if (scroll) el.scrollIntoView({ behavior: 'smooth' }); - }; - const section = formData[SUCCESS_SECTION].toLowerCase().replaceAll(' ', '-'); - const success = document.querySelector(`.section.${section}`); - if (success) { - show(success); - return; - } - // For Marquee use case - let count = 0; - const interval = setInterval(() => { - const el = document.querySelector(`.section.${section}`); - if (el) { - clearInterval(interval); - show(el); - } - count += 1; - if (count > 6) clearInterval(interval); - }, 500); - } catch (e) { - /* c8 ignore next 2 */ + const show = (el) => { + el.classList.remove('hide-block'); + if (scroll) el.scrollIntoView({ behavior: 'smooth' }); + }; + const successClass = formData[SUCCESS_SECTION]?.toLowerCase().replaceAll(' ', '-'); + if (!successClass) { window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' }); + return; } + const section = document.querySelector(`.section.${successClass}`); + if (section) { + show(section); + return; + } + // For Marquee use case + const maxIntervals = 6; + let count = 0; + const interval = setInterval(() => { + const el = document.querySelector(`.section.${successClass}`); + if (el) { + clearInterval(interval); + show(el); + } + count += 1; + if (count > maxIntervals) { + clearInterval(interval); + window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' }); + } + }, 500); }; export const formSuccess = (formEl, formData) => { diff --git a/test/blocks/marketo/marketo.test.js b/test/blocks/marketo/marketo.test.js index 6ac6b71e0f..1d10fb5d69 100644 --- a/test/blocks/marketo/marketo.test.js +++ b/test/blocks/marketo/marketo.test.js @@ -1,11 +1,12 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; -import sinon from 'sinon'; +import sinon, { stub } from 'sinon'; import { delay } from '../../helpers/waitfor.js'; import { setConfig } from '../../../libs/utils/utils.js'; import init, { setPreferences, decorateURL, FORM_PARAM } from '../../../libs/blocks/marketo/marketo.js'; const innerHTML = await readFile({ path: './mocks/body.html' }); +window.lana = { log: stub() }; describe('marketo', () => { beforeEach(() => { @@ -108,38 +109,51 @@ describe('marketo decorateURL', () => { const onePage = await readFile({ path: './mocks/one-page-experience.html' }); -describe('Marketo one page experience', () => { +describe('Marketo ungated one page experience', () => { + let url; + let clock; + beforeEach(() => { + url = new URL(window.location); + url.searchParams.set(FORM_PARAM, 'off'); + window.history.pushState({}, '', url); document.body.innerHTML = onePage; + clock = sinon.useFakeTimers(); }); - it('shows success section if ungated', () => { - const url = new URL(window.location); - url.searchParams.set(FORM_PARAM, 'off'); + afterEach(() => { + url.searchParams.delete(FORM_PARAM); window.history.pushState({}, '', url); + clock.restore(); + }); + it('shows success section', () => { init(document.querySelector('.marketo')); expect(document.querySelector('.section.form-success').classList.contains('hide-block')).to.be.false; - - url.searchParams.delete(FORM_PARAM); - window.history.pushState({}, '', url); }); - it('shows success section that appears after marketo if ungated', () => { - const url = new URL(window.location); - url.searchParams.set(FORM_PARAM, 'off'); - window.history.pushState({}, '', url); + it('shows success section that appears after marketo', () => { document.querySelector('#success-section').classList.remove('form-success'); - const clock = sinon.useFakeTimers(); - init(document.querySelector('.marketo')); expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.true; document.querySelector('#success-section').classList.add('form-success'); clock.tick(500); expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.false; + }); - url.searchParams.delete(FORM_PARAM); - window.history.pushState({}, '', url); - clock.restore(); + it('logs error if success section is not provided', async () => { + document.body.innerHTML = await readFile({ path: './mocks/one-page-error.html' }); + + init(document.querySelector('.marketo')); + expect(window.lana.log.args[0][0]).to.equal('Error showing Marketo success section'); + }); + + it('logs error if success section does not appear after maximum intervals', async () => { + document.querySelector('#success-section').classList.remove('form-success'); + + init(document.querySelector('.marketo')); + expect(document.querySelector('#success-section').classList.contains('hide-block')).to.be.true; + clock.runAll(); + expect(window.lana.log.args[0][0]).to.equal('Error showing Marketo success section'); }); }); diff --git a/test/blocks/marketo/mocks/one-page-error.html b/test/blocks/marketo/mocks/one-page-error.html new file mode 100644 index 0000000000..27d3a933be --- /dev/null +++ b/test/blocks/marketo/mocks/one-page-error.html @@ -0,0 +1,51 @@ +
+

Form Success

+
+
+
style
+
hide block, form success
+
+
+
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus mi id tincidunt pretium. Praesent a porta ex. + Etiam eu metus urna. Etiam vulputate nibh nisi, sed gravida diam dictum id. Cras et justo metus. Morbi consectetur + diam eu mi ultricies, molestie efficitur quam posuere. Integer iaculis euismod pulvinar.

+
+
+
+
+
+
+ Marketo + Configurator +
+
+
+
Title
+
New Title
+
+
+
Description
+
New Description
+
+
+
Destination Type
+
section
+
+
+
Success Content
+
Thank you
+
+
+
+
+
style
+
container, xxl spacing, two-up, resource-form
+
+
+