diff --git a/src/forms-opportunities/oppty-handlers/accessibility-handler.js b/src/forms-opportunities/oppty-handlers/accessibility-handler.js index 1a5078b05..f3c83b4ff 100644 --- a/src/forms-opportunities/oppty-handlers/accessibility-handler.js +++ b/src/forms-opportunities/oppty-handlers/accessibility-handler.js @@ -60,7 +60,7 @@ export default async function handler(message, context) { })); return { form: a11yOpty.form, - formSource: a11yOpty.formSource, + formSources: a11yOpty.formSources, a11yIssues, }; }); diff --git a/src/forms-opportunities/utils.js b/src/forms-opportunities/utils.js index 772e8c892..4e3d86d2a 100644 --- a/src/forms-opportunities/utils.js +++ b/src/forms-opportunities/utils.js @@ -347,7 +347,7 @@ export function getUrlsDataForAccessibilityAudit(scrapedData, context) { const addedFormSources = new Set(); if (isNonEmptyArray(scrapedData.formData)) { for (const form of scrapedData.formData) { - const formSources = []; + const formSources = { formSource: [] }; const validForms = form.scrapeResult.filter((sr) => !shouldExcludeForm(sr)); if (form.finalUrl.includes('search') || validForms.length === 0) { // eslint-disable-next-line no-continue @@ -356,13 +356,13 @@ export function getUrlsDataForAccessibilityAudit(scrapedData, context) { // 1. get formSources from scraped data if available let isFormSourceAlreadyAdded = false; validForms.forEach((sr) => { - if (!sr.formSource) { + if (!sr.formSources) { return; } - if (!addedFormSources.has(sr.formSource)) { - formSources.push(sr.formSource); - if (!['dialog form', 'form'].includes(sr.formSource)) { - addedFormSources.add(sr.formSource); + if (!addedFormSources.has(sr.formSources)) { + formSources.push(sr.formSources); + if (!['dialog form', 'form'].includes(sr.formSources.formSource)) { + addedFormSources.add(sr.formSources.formSource); } } else { isFormSourceAlreadyAdded = true; @@ -370,26 +370,26 @@ export function getUrlsDataForAccessibilityAudit(scrapedData, context) { }); // eslint-disable-next-line max-len // 2. If no unique formSource found in current page, then use id or classList to identify the form - if (formSources.length === 0) { + if (formSources.formSource.length === 0) { log.debug(`[Form Opportunity] No formSource found in scraped data for form: ${form.finalUrl}`); validForms.forEach((sr) => { - if (sr.formSource) { + if (sr.formSources) { return; } if (sr.id) { - formSources.push(`form#${sr.id}`); + formSources.formSource.push(`form#${sr.id}`); } else if (sr.classList) { - formSources.push(`form.${sr.classList.split(' ').join('.')}`); + formSources.formSource.push(`form.${sr.classList.split(' ').join('.')}`); } }); } // 3. Fallback to "form" element. If any formSource of current page is already added // in previous pages, then don't add "form" element. - if (!isFormSourceAlreadyAdded && formSources.length === 0) { - formSources.push('form'); + if (!isFormSourceAlreadyAdded && formSources.formSource.length === 0) { + formSources.formSource.push('form'); } - log.debug(`[Form Opportunity] Form sources for page: ${form.finalUrl} are ${formSources.join(', ')}`); - if (formSources.length > 0) { + log.debug(`[Form Opportunity] Form sources for page: ${form.finalUrl} are ${formSources.formSource.join(', ')}`); + if (formSources.formSource.length > 0) { urlsData.push({ url: form.finalUrl, formSources, diff --git a/test/audits/forms/accessibility-handler.test.js b/test/audits/forms/accessibility-handler.test.js index ae350c591..a3b3a23a6 100644 --- a/test/audits/forms/accessibility-handler.test.js +++ b/test/audits/forms/accessibility-handler.test.js @@ -32,7 +32,7 @@ describe('a11y-handler', () => { a11yData: [ { form: '/test-form', - formSource: '#test-form', + formSources: { formSource: '#test-form', formCTAWithinPage: ['#cb-contactform-link .btn'] }, a11yIssues: [ { successCriterias: [ @@ -168,7 +168,7 @@ describe('a11y-handler', () => { expect(createArgs.origin).to.equal('AUTOMATION'); expect(createArgs.data.accessibility).to.have.lengthOf(1); expect(createArgs.data.accessibility[0].form).to.equal('/test-form'); - expect(createArgs.data.accessibility[0].formSource).to.equal('#test-form'); + expect(createArgs.data.accessibility[0].formSources.formSource).to.equal('#test-form'); expect(createArgs.data.accessibility[0].a11yIssues).to.have.lengthOf(1); // Check that success criteria are processed @@ -198,8 +198,10 @@ describe('a11y-handler', () => { data: { a11yData: [ { - form: '/test-form', - formSource: '#test-form', + // form: '/test-form', + // formSource: '#test-form', + form: 'https://careers.coldwellbanker.com/content/cb-careers/en/careers.html', + formSources: { formSource: 'dialog form#contact-form', formCTAWithinPage: ['#cb-contactform-link .btn'] }, a11yIssues: [ { successCriterias: [ diff --git a/test/audits/forms/utils.test.js b/test/audits/forms/utils.test.js index e226911c3..5b0c0ab31 100644 --- a/test/audits/forms/utils.test.js +++ b/test/audits/forms/utils.test.js @@ -133,7 +133,12 @@ describe('isSearchForm', () => { }); describe('getUrlsDataForAccessibilityAudit', () => { - const context = { log: { debug: () => {} } }; + const context = { + log: { + debug: () => { + }, + }, + }; it('should return urls for accessibility audit', () => { const scrapedData = { formData: [ @@ -164,13 +169,15 @@ describe('getUrlsDataForAccessibilityAudit', () => { scrapeResult: [ { classList: 'cmp-mortgage-options', - formSource: '#container-1 form#newsletter', + formSources: { formSource: '#container-1 form#newsletter', formCTAWithinPage: ['#subscribe-button'] }, }, ], }, { finalUrl: 'https://www.business.adobe.com/subscribe', - scrapeResult: [{ formSource: '#container-1 form#newsletter' }], + scrapeResult: [ + { formSources: { formSource: '#container-1 form#subscribe', formCTAWithinPage: ['#subscribe-button'] } }, + ], }, ], }; @@ -178,38 +185,55 @@ describe('getUrlsDataForAccessibilityAudit', () => { expect(urlsData).to.deep.equal([ { url: 'https://www.business.adobe.com/newsletter', - formSources: ['#container-1 form#newsletter'], + formSources: [ + { formSource: '#container-1 form#newsletter', formCTAWithinPage: ['#subscribe-button'] }, + ], + }, + { + url: 'https://www.business.adobe.com/subscribe', + formSources: [ + { formSource: '#container-1 form#subscribe', formCTAWithinPage: ['#subscribe-button'] }, + ], }, ]); }); it('should return formSource as id/classList if no element found in scraper', () => { const scrapedData = { - formData: [{ - finalUrl: 'https://www.business.adobe.com/a', - scrapeResult: [{ - id: 'test-id', - classList: 'test-class', - }, { - id: '', - classList: 'test-class-2 test-class-3', - }], - }, { - finalUrl: 'https://www.business.adobe.com/b', - scrapeResult: [{ - id: '', - classList: '', - }], - }], + formData: [ + { + finalUrl: 'https://www.business.adobe.com/a', + scrapeResult: [ + { + id: 'test-id', + classList: 'test-class', + }, + { + id: '', + classList: 'test-class-2 test-class-3', + }, + ], + }, + { + finalUrl: 'https://www.business.adobe.com/b', + scrapeResult: [ + { + id: '', + classList: '', + }, + ], + }, + ], }; const urlsData = getUrlsDataForAccessibilityAudit(scrapedData, context); expect(urlsData).to.deep.equal([ { url: 'https://www.business.adobe.com/a', - formSources: ['form#test-id', 'form.test-class-2.test-class-3'], - }, { + formSources: { formSource: ['form#test-id', 'form.test-class-2.test-class-3'] }, + }, + { url: 'https://www.business.adobe.com/b', - formSources: ['form'], + formSources: { formSource: ['form'] }, }, ]); });