From 92cb05c112d815bb0e347d802b930418b5012804 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 3 Sep 2024 15:57:06 +0100 Subject: [PATCH 01/36] refactore autosuggest test --- src/components/autosuggest/_macro.spec.js | 355 +++++----- .../autosuggest/autosuggest.helpers.spec.js | 128 ++-- .../autosuggest/autosuggest.spec.js | 657 +++++++++--------- 3 files changed, 594 insertions(+), 546 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index efac0908e7..fd226dc849 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -33,102 +33,174 @@ const EXAMPLE_AUTOSUGGEST = { }; describe('macro: autosuggest', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('GIVEN: Params: none', () => { + describe('WHEN: All params are at default state', () => { + const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); + test('THEN: it passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it('has expected id on container element', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it has expected id on container element', () => { + expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container'); + }); - expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container'); - }); + test('THEN: it has a special class that indicates the component should initialise itself', () => { + const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - it('has the provided data attributes', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - const $element = $('.ons-autosuggest'); - expect($element.attr('data-allow-multiple')).toBeUndefined(); - expect($element.attr('data-min-chars')).toBe('2'); - expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); - expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); - expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); - expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.'); - expect($element.attr('data-aria-you-have-selected')).toBe('You have selected'); - expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); - expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.'); - expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions'); - expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); - expect($element.attr('data-results-title')).toBe('Suggestions'); - expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); - }); + expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); + }); - it('has the `data-allow-multiple` attribute when `allowMultiple` is `true`', () => { - const $ = cheerio.load( - renderComponent('autosuggest', { - ...EXAMPLE_AUTOSUGGEST, - allowMultiple: true, - }), - ); + test('THEN: it has the provided data attributes', () => { + const $element = $('.ons-autosuggest'); + expect($element.attr('data-allow-multiple')).toBeUndefined(); + expect($element.attr('data-min-chars')).toBe('2'); + expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); + expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); + expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); + expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.'); + expect($element.attr('data-aria-you-have-selected')).toBe('You have selected'); + expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); + expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.'); + expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions'); + expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); + expect($element.attr('data-results-title')).toBe('Suggestions'); + expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); + }); + + test('THEN: it renders div with the provided title identifier', () => { + expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); + }); + + test('THEN: it renders div with the provided title text', () => { + expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions'); + }); + + test('THEN: it renders list with a generated identifier', () => { + expect($('.ons-autosuggest__listbox').attr('id')).toBe('country-of-birth-listbox'); + }); + + test('THEN: it renders an accessible list', () => { + expect($('.ons-autosuggest__listbox').attr('title')).toBe('Suggestions'); + }); + + test('THEN: it renders instructions with a generated identifier', () => { + expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions'); + }); + + test('THEN: it adds aria-atomic=true value to status container', () => { + expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); + }); - expect($('.ons-autosuggest').attr('data-allow-multiple')).toBe('true'); + test('THEN: it enders instructions text', () => { + expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.'); + }); + }); }); - it('has a special class that indicates the component should initialise itself', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('GIVEN: Params: allowMultiple', () => { + describe('WHEN: `allowMultiple` is `true`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + allowMultiple: true, + }), + ); + test('THEN: it has the `data-allow-multiple` attribute', () => { + expect($('.ons-autosuggest').attr('data-allow-multiple')).toBe('true'); + }); + }); - expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); + describe('WHEN: `allowMultiple` is `false`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + allowMultiple: false, + }), + ); + test('THEN: it doen not have the `data-allow-multiple` attribute', () => { + expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); + }); + }); }); - it('does not have a special class when the component has an external initialiser', () => { - const $ = cheerio.load( - renderComponent('autosuggest', { - ...EXAMPLE_AUTOSUGGEST, - externalInitialiser: true, - }), - ); + describe('GIVEN: Params: externalInitialiser', () => { + describe('WHEN: `externalInitialiser` is `true`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + externalInitialiser: true, + }), + ); + + test('THEN: it does not have a special class', () => { + expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(false); + }); + }); - expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(false); + describe('WHEN: `externalInitialiser` is `false`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + externalInitialiser: false, + }), + ); + + test('THEN: it has a special class', () => { + expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); + }); + }); }); - it('has special class to indicate that component is not editable', () => { - const $ = cheerio.load( - renderComponent('autosuggest', { - ...EXAMPLE_AUTOSUGGEST, - isEditable: false, - }), - ); + describe('GIVEN: Params: isEditable', () => { + describe('WHEN: `isEditable` is `false`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + isEditable: false, + }), + ); - expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(true); + test('THEN: it has special class to indicate that component is not editable', () => { + expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(true); + }); + }); }); - it('has special class to indicate that component input is mandatory', () => { - const $ = cheerio.load( - renderComponent('autosuggest', { - ...EXAMPLE_AUTOSUGGEST, - mandatory: true, - }), - ); + describe('GIVEN: Params: mandatory', () => { + describe('WHEN: `mandatory` is `true`', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + mandatory: true, + }), + ); - expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(true); + test('THEN: it has special class to indicate that component input is mandatory', () => { + expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(true); + }); + }); }); - it('has additionally provided container style classes', () => { - const $ = cheerio.load( - renderComponent('autosuggest', { - ...EXAMPLE_AUTOSUGGEST, - containerClasses: 'extra-class another-extra-class', - }), - ); + describe('GIVEN: Params: containerClasses', () => { + describe('WHEN: `containerClasses` is provided', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + containerClasses: 'extra-class another-extra-class', + }), + ); - expect($('.ons-autosuggest').hasClass('extra-class')).toBe(true); - expect($('.ons-autosuggest').hasClass('another-extra-class')).toBe(true); + test('THEN: it has additionally provided container style classes', () => { + expect($('.ons-autosuggest').hasClass('extra-class')).toBe(true); + expect($('.ons-autosuggest').hasClass('another-extra-class')).toBe(true); + }); + }); }); - describe('input', () => { - it('uses the `input` component with the expected parameters', () => { + describe('GIVEN: Params: input', () => { + describe('WHEN: input is provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input'); @@ -190,57 +262,60 @@ describe('macro: autosuggest', () => { }, }, }); - - expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); - expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); - expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); - expect(inputSpy.occurrences[0]).toHaveProperty('width', '7'); - expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country'); - expect(inputSpy.occurrences[0]).toHaveProperty('label.description', 'Enter your own answer or select from suggestions'); - expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label'); - expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class'); - expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off'); - expect(inputSpy.occurrences[0]).toHaveProperty('legend', 'this is a legend'); - expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class'); - expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc'); - expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42); - expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id'); - expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.'); - expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null); - expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true); - expect(inputSpy.occurrences[0]).toHaveProperty('name', 'test-params'); - expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string'); - expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1); - expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10); - expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds'); - expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£'); - expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix'); - expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total'); - expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%'); - expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix'); - expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test'); - expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test'); - expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true); - expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200); - expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining'); - expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining'); - expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many'); - expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many'); - expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search'); - expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text'); - expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk'); - expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }"); + test('THEN: it uses the `input` component with the expected parameters', () => { + expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); + expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); + expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); + expect(inputSpy.occurrences[0]).toHaveProperty('width', '7'); + expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country'); + expect(inputSpy.occurrences[0]).toHaveProperty('label.description', 'Enter your own answer or select from suggestions'); + expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label'); + expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class'); + expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off'); + expect(inputSpy.occurrences[0]).toHaveProperty('legend', 'this is a legend'); + expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class'); + expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc'); + expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42); + expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id'); + expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.'); + expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null); + expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true); + expect(inputSpy.occurrences[0]).toHaveProperty('name', 'test-params'); + expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string'); + expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1); + expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds'); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£'); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix'); + expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test'); + expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test'); + expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many'); + expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search'); + expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text'); + expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk'); + expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }"); + }); }); }); - describe('autosuggest results', () => { - it('is rendered `mutallyExclusive` parameter is not defined', () => { + describe('GIVEN: autosuggest results', () => { + describe('WHEN:`mutallyExclusive` parameter is not defined', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - expect($('.ons-autosuggest__results').length).toBe(1); + test('THEN: autosuggest results is rendered', () => { + expect($('.ons-autosuggest__results').length).toBe(1); + }); }); - it('is not rendered when `mutallyExclusive` parameter is defined', () => { + describe('WHEN:`mutallyExclusive` parameter is defined', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -248,49 +323,9 @@ describe('macro: autosuggest', () => { }), ); - expect($('.ons-autosuggest__results').length).toBe(0); - }); - - it('renders div with the provided title identifier', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); - }); - - it('renders div with the provided title text', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions'); - }); - - it('renders list with a generated identifier', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__listbox').attr('id')).toBe('country-of-birth-listbox'); - }); - - it('renders an accessible list', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__listbox').attr('title')).toBe('Suggestions'); - }); - - it('renders instructions with a generated identifier', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions'); - }); - - it('adds aria-atomic=true value to status container', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); - }); - - it('renders instructions text', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.'); + test('THEN: autosuggest results is not rendered', () => { + expect($('.ons-autosuggest__results').length).toBe(0); + }); }); }); }); diff --git a/src/components/autosuggest/autosuggest.helpers.spec.js b/src/components/autosuggest/autosuggest.helpers.spec.js index 949e0f76f6..d0d6b3e4ac 100644 --- a/src/components/autosuggest/autosuggest.helpers.spec.js +++ b/src/components/autosuggest/autosuggest.helpers.spec.js @@ -1,85 +1,89 @@ import { sanitiseAutosuggestText } from './autosuggest.helpers'; describe('module: autosuggest.helpers', () => { - describe('function: sanitiseAutosuggestText', () => { - it.each([ - ['ABC', 'abc'], - ['ABCdEF', 'abcdef'], - ['1ABC23', '1abc23'], - ])('transforms input characters into lower case (%s)', (input, expectedResult) => { - const result = sanitiseAutosuggestText(input); - expect(result).toBe(expectedResult); - }); + describe('GIVEN: function: sanitiseAutosuggestText', () => { + describe('WHEN: only input parameter is set', () => { + test.each([ + ['ABC', 'abc'], + ['ABCdEF', 'abcdef'], + ['1ABC23', '1abc23'], + ])('THEN: it transforms input characters into lower case (%s)', (input, expectedResult) => { + const result = sanitiseAutosuggestText(input); + expect(result).toBe(expectedResult); + }); - it.each([ - ['abccdefge', [], 'abccdefge'], - ['abccdefge', ['c'], 'abdefge'], - ['abccdefge', ['c', 'E'], 'abdfg'], - ])('removes unwanted characters (%s)', (input, removeChars, expectedResult) => { - const result = sanitiseAutosuggestText(input, removeChars); - expect(result).toBe(expectedResult); - }); + test.each([ + ['a b', 'a b'], + ['a b c', 'a b c'], + ['a \n\n\t b', 'a b'], + ])('THEN: it replaces blocks of whitespace with a single space character', (input, expectedResult) => { + const result = sanitiseAutosuggestText(input); + expect(result).toBe(expectedResult); + }); - it.each([ - ['a b', 'a b'], - ['a b c', 'a b c'], - ['a \n\n\t b', 'a b'], - ])('replaces blocks of whitespace with a single space character', (input, expectedResult) => { - const result = sanitiseAutosuggestText(input); - expect(result).toBe(expectedResult); - }); + test.each([ + ['a&b', 'a%26b'], + ['a&&b', 'a%26%26b'], + ['a&b&c', 'a%26b%26c'], + ])('THEN: it escapes the "&" character for use in a URL', (input, expectedResult) => { + const result = sanitiseAutosuggestText(input); + expect(result).toBe(expectedResult); + }); - it.each([ - ['a&b', 'a%26b'], - ['a&&b', 'a%26%26b'], - ['a&b&c', 'a%26b%26c'], - ])('escapes the "&" character for use in a URL', (input, expectedResult) => { - const result = sanitiseAutosuggestText(input); - expect(result).toBe(expectedResult); + test.each([ + ['abccdefge', [], 'abccdefge'], + ['abccdefge', ['c'], 'abdefge'], + ['abccdefge', ['c', 'E'], 'abdfg'], + ])('THEN: it removes unwanted characters (%s)', (input, removeChars, expectedResult) => { + const result = sanitiseAutosuggestText(input, removeChars); + expect(result).toBe(expectedResult); + }); }); - it.each([ - ['1a', '1a'], - ['1aa', '1aa'], - ['1aaa', '1aaa'], - ['1aaaa', '1aaaa'], - ['11aaaa', '11aaaa'], - ['11aaaa22bbb', '11aaaa22bbb'], - ['11aaaa2b33ccc', '11aaaa2b33ccc'], - ])( - 'does not a space after a digit that is followed by at least 3 letters when `sanitisedQuerySplitNumsChars` is false', - (input, expectedResult) => { + describe('WHEN: `sanitisedQuerySplitNumsChars` is false', () => { + test.each([ + ['1a', '1a'], + ['1aa', '1aa'], + ['1aaa', '1aaa'], + ['1aaaa', '1aaaa'], + ['11aaaa', '11aaaa'], + ['11aaaa22bbb', '11aaaa22bbb'], + ['11aaaa2b33ccc', '11aaaa2b33ccc'], + ])('THEN: it does not a space after a digit that is followed by at least 3 letters', (input, expectedResult) => { const result = sanitiseAutosuggestText(input, [], false); expect(result).toBe(expectedResult); - }, - ); + }); + }); - it.each([ - ['1a', '1a'], - ['1aa', '1aa'], - ['1aaa', '1 aaa'], - ['1aaaa', '1 aaaa'], - ['11aaaa', '11 aaaa'], - ['11aaaa22bbb', '11 aaaa22 bbb'], - ['11aaaa2b33ccc', '11 aaaa2b33 ccc'], - ])( - 'adds a space after a digit that is followed by at least 3 letters when `sanitisedQuerySplitNumsChars` is true', - (input, expectedResult) => { + describe('WHEN: `sanitisedQuerySplitNumsChars` is true', () => { + test.each([ + ['1a', '1a'], + ['1aa', '1aa'], + ['1aaa', '1 aaa'], + ['1aaaa', '1 aaaa'], + ['11aaaa', '11 aaaa'], + ['11aaaa22bbb', '11 aaaa22 bbb'], + ['11aaaa2b33ccc', '11 aaaa2b33 ccc'], + ])('THEN: it adds a space after a digit that is followed by at least 3 letters', (input, expectedResult) => { const result = sanitiseAutosuggestText(input, [], true); expect(result).toBe(expectedResult); - }, - ); + }); + }); - it('trims whitespace from start and end of input when `trimEnd` is true', () => { + describe('WHEN: `trimEnd` is true', () => { const result = sanitiseAutosuggestText(' 1a ', [], false, true); - expect(result).toBe('1a'); + test('THEN: it trims whitespace from start and end of input', () => { + expect(result).toBe('1a'); + }); }); - it('trims whitespace from only the start of input when `trimEnd` is false', () => { + describe('WHEN: `trimEnd` is false', () => { const result = sanitiseAutosuggestText(' 1a ', [], false, false); // The trailing space is consolidated into 1 whitespace due to a transformation that // this implementation applies. - expect(result).toBe('1a '); + test('THEN: it trims whitespace from only the start of input', () => { + expect(result).toBe('1a '); + }); }); }); }); diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index ff502c29e0..187cdf17de 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -75,419 +75,428 @@ describe('script: autosuggest', () => { await apiFaker.reset(); }); - describe('when the component initialises', () => { - it('the input should be given the correct aria attributes', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - - const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); - expect(attributes['aria-autocomplete']).toBe('list'); - expect(attributes['aria-controls']).toBe('country-of-birth-listbox'); - expect(attributes['aria-describedby']).toBe('country-of-birth-instructions'); - expect(attributes['aria-haspopup']).toBe('true'); - expect(attributes['aria-owns']).toBe('country-of-birth-listbox'); - expect(attributes['aria-expanded']).toBe('false'); - expect(attributes['role']).toBe('combobox'); - }); + describe('GIVEN: Params: None', () => { + describe('WHEN: the component initialises', () => { + test('THEN: the input should be given the correct aria attributes', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - it('the autocomplete attribute be set to be not set to on', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); + expect(attributes['aria-autocomplete']).toBe('list'); + expect(attributes['aria-controls']).toBe('country-of-birth-listbox'); + expect(attributes['aria-describedby']).toBe('country-of-birth-instructions'); + expect(attributes['aria-haspopup']).toBe('true'); + expect(attributes['aria-owns']).toBe('country-of-birth-listbox'); + expect(attributes['aria-expanded']).toBe('false'); + expect(attributes['role']).toBe('combobox'); + }); - const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); - expect(attributes['autocomplete']).not.toBe('on'); - }); + test('THEN: the autocomplete attribute be set to be not set to on', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - it('the instructions, listbox, and status should become visible', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); + expect(attributes['autocomplete']).not.toBe('on'); + }); + + test('THEN: the instructions, listbox, and status should become visible', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - const instructionsDisplayStyle = await page.$eval('.ons-js-autosuggest-instructions', (node) => getComputedStyle(node).display); - expect(instructionsDisplayStyle).toBe('block'); - const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', (node) => getComputedStyle(node).display); - expect(listboxDisplayStyle).toBe('block'); - const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', (node) => getComputedStyle(node).display); - expect(statusDisplayStyle).toBe('block'); + const instructionsDisplayStyle = await page.$eval( + '.ons-js-autosuggest-instructions', + (node) => getComputedStyle(node).display, + ); + expect(instructionsDisplayStyle).toBe('block'); + const listboxDisplayStyle = await page.$eval('.ons-js-autosuggest-listbox', (node) => getComputedStyle(node).display); + expect(listboxDisplayStyle).toBe('block'); + const statusDisplayStyle = await page.$eval('.ons-js-autosuggest-aria-status', (node) => getComputedStyle(node).display); + expect(statusDisplayStyle).toBe('block'); + }); }); - }); - describe('when the user presses the "Down" arrow key', () => { - it('navigates to the first suggestion initially', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user presses the "Down" arrow key', () => { + test('THEN: it navigates to the first suggestion initially', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States of America'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States of America'); + }); - it('navigates to the suggestion below the current suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it navigates to the suggestion below the current suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States Virgin Islands'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States Virgin Islands'); + }); - it('marks suggestion as being selected', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it marks suggestion as being selected', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); - const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected')); - expect(ariaSelectedValue).toBe('true'); + const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => + node.getAttribute('aria-selected'), + ); + expect(ariaSelectedValue).toBe('true'); - const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id')); - const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => - node.getAttribute('aria-activedescendant'), - ); - expect(ariaActiveDescendant).toBe(selectedOptionId); - }); + const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id')); + const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => + node.getAttribute('aria-activedescendant'), + ); + expect(ariaActiveDescendant).toBe(selectedOptionId); + }); - it('sets aria status to a message showing the selected result', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it sets aria status to a message showing the selected result', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); + await page.keyboard.press('ArrowDown'); - const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); - expect(statusMessage.trim()).toBe('England'); - }); + const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); + expect(statusMessage.trim()).toBe('England'); + }); - it('does not mark other suggestions as being selected', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it does not mark other suggestions as being selected', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); - const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length); - expect(selectedSuggestionCount).toBe(1); - }); + const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length); + expect(selectedSuggestionCount).toBe(1); + }); - it('does not affect suggestion selection when already on last item', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it does not affect suggestion selection when already on last item', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States Virgin Islands'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States Virgin Islands'); + }); - // The down arrow will typically move caret to the end of an input field. This should - // not occur when suggestions are presented. - it('does not interfere with text input', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + // The down arrow will typically move caret to the end of an input field. This should + // not occur when suggestions are presented. + test('THEN: it does not interfere with text input', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'nited', { delay: 20 }); - // Move to start of input to verify if the down arrow moves the caret to the end. - await page.keyboard.press('Home'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('U'); + await page.type('.ons-js-autosuggest-input', 'nited', { delay: 20 }); + // Move to start of input to verify if the down arrow moves the caret to the end. + await page.keyboard.press('Home'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('U'); - const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(inputValue).toBe('United'); + const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(inputValue).toBe('United'); + }); }); - }); - describe('when the user presses the "Up" arrow key', () => { - it('navigates to the first suggestion initially', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user presses the "Up" arrow key', () => { + test('THEN: it navigates to the first suggestion initially', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowUp'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowUp'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States of America'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States of America'); + }); - it('navigates to the suggestion above the current suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it navigates to the suggestion above the current suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowUp'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowUp'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States of America'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States of America'); + }); - it('marks suggestion as being selected', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it marks suggestion as being selected', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowUp'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowUp'); - const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('aria-selected')); - expect(ariaSelectedValue).toBe('true'); + const ariaSelectedValue = await page.$eval('.ons-autosuggest__option--focused', (node) => + node.getAttribute('aria-selected'), + ); + expect(ariaSelectedValue).toBe('true'); - const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id')); - const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => - node.getAttribute('aria-activedescendant'), - ); - expect(ariaActiveDescendant).toBe(selectedOptionId); - }); + const selectedOptionId = await page.$eval('.ons-autosuggest__option--focused', (node) => node.getAttribute('id')); + const ariaActiveDescendant = await page.$eval('.ons-js-autosuggest-input', (node) => + node.getAttribute('aria-activedescendant'), + ); + expect(ariaActiveDescendant).toBe(selectedOptionId); + }); - it('does not mark other suggestions as being selected', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it does not mark other suggestions as being selected', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowUp'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowUp'); - const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length); - expect(selectedSuggestionCount).toBe(1); - }); + const selectedSuggestionCount = await page.$$eval('.ons-autosuggest__option[aria-selected=true]', (nodes) => nodes.length); + expect(selectedSuggestionCount).toBe(1); + }); - it('does not affect suggestion selection when already on first item', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it does not affect suggestion selection when already on first item', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); - const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); - expect(selectedOption.trim()).toBe('United States of America'); - }); + const selectedOption = await page.$eval('.ons-autosuggest__option--focused', (node) => node.textContent); + expect(selectedOption.trim()).toBe('United States of America'); + }); - // The down arrow will typically move caret to the start of an input field. This - // should not occur when suggestions are presented. - it('does not interfere with text input', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + // The down arrow will typically move caret to the start of an input field. This + // should not occur when suggestions are presented. + test('THEN: it does not interfere with text input', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('d'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('d'); - const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(inputValue).toBe('United'); + const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(inputValue).toBe('United'); + }); }); - }); - describe('when the user presses the "Enter" key', () => { - it('accepts the selected suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user presses the "Enter" key', () => { + test('THEN: it accepts the selected suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('Enter'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('Enter'); - const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(inputValue).toBe('United States Virgin Islands'); + const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(inputValue).toBe('United States Virgin Islands'); + }); }); - }); - describe('when the user blurs the input', () => { - it('suggestions should remain visible for 300ms', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user blurs the input', () => { + test('THEN: suggestions should remain visible for 300ms', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('Tab'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('Tab'); - const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(suggestionCountSample1).toBe(2); + const suggestionCountSample1 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(suggestionCountSample1).toBe(2); - await page.waitForTimeout(200); - const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(suggestionCountSample2).toBe(2); + await page.waitForTimeout(200); + const suggestionCountSample2 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(suggestionCountSample2).toBe(2); - await page.waitForTimeout(320); - const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(suggestionCountSample3).toBe(0); - }); + await page.waitForTimeout(320); + const suggestionCountSample3 = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(suggestionCountSample3).toBe(0); + }); - it('clears innerHTML of listbox', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it clears innerHTML of listbox', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('Tab'); + await page.waitForTimeout(320); - const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML); - expect(listboxInnerHTML).toBe(''); - }); + const listboxInnerHTML = await page.$eval('.ons-js-autosuggest-listbox', (node) => node.innerHTML); + expect(listboxInnerHTML).toBe(''); + }); - it('clears `has-results` modifier of autosuggest component', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it clears `has-results` modifier of autosuggest component', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('Tab'); + await page.waitForTimeout(320); - const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results')); - expect(hasClass).toBe(false); - }); + const hasClass = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('ons-autosuggest--has-results')); + expect(hasClass).toBe(false); + }); - it('clears aria attributes of input element', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it clears aria attributes of input element', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('Tab'); - await page.waitForTimeout(320); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('Tab'); + await page.waitForTimeout(320); - const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); - expect(attributes['aria-activedescendant']).toBeUndefined(); - expect(attributes['aria-expanded']).toBe('false'); + const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input'); + expect(attributes['aria-activedescendant']).toBeUndefined(); + expect(attributes['aria-expanded']).toBe('false'); + }); }); - }); - describe('when the user clicks on a result', () => { - it('accepts the suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user clicks on a result', () => { + test('THEN: accepts the suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.click('.ons-autosuggest__option:nth-child(2)'); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.click('.ons-autosuggest__option:nth-child(2)'); - const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); - expect(inputValue).toBe('United States Virgin Islands'); + const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); + expect(inputValue).toBe('United States Virgin Islands'); + }); }); - }); - describe('when the user inputs text', () => { - it('does not show suggestions when input length < minimum characters', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the user inputs text', () => { + test('THEN: it does not show suggestions when input length < minimum characters', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'En', { delay: 20 }); - const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(suggestionCount).toBe(0); - }); + const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(suggestionCount).toBe(0); + }); - it('shows suggestions when input length >= minimum characters', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it shows suggestions when input length >= minimum characters', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); - const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(suggestionCount).toBe(1); - }); + const suggestionCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(suggestionCount).toBe(1); + }); - it('gets the language if set', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE)); + test('THEN: it gets the language if set', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE)); - await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 }); - const attributes = await getNodeAttributes(page, '.ons-js-autosuggest'); - expect(attributes['data-lang']).toBe('en-gb'); + const attributes = await getNodeAttributes(page, '.ons-js-autosuggest'); + expect(attributes['data-lang']).toBe('en-gb'); + }); }); - }); - describe('when the mouse moves over a result and a suggestion is focused', () => { - it('removes the focused class', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: the mouse moves over a result and a suggestion is focused', () => { + test('THEN: it removes the focused class', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.hover('.ons-autosuggest__option:nth-child(2)'); + await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.hover('.ons-autosuggest__option:nth-child(2)'); - const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); - expect(focusedClassCount).toBe(0); + const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); + expect(focusedClassCount).toBe(0); + }); }); - }); - describe('when the mouse moves off a result and a suggestion was focused', () => { - it('restores the focused class', async () => { - await setTestPage( - '/test', - ` - ${renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)} - Dummy - `, - ); - - await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.hover('.ons-autosuggest__option:nth-child(2)'); - await page.hover('#dummy'); - - const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); - expect(focusedClassCount).toBe(1); + describe('WHEN: the mouse moves off a result and a suggestion was focused', () => { + test('THEN: it restores the focused class', async () => { + await setTestPage( + '/test', + ` + ${renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)} + Dummy + `, + ); + + await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.hover('.ons-autosuggest__option:nth-child(2)'); + await page.hover('#dummy'); + + const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); + expect(focusedClassCount).toBe(1); + }); }); - }); - describe('when there are results', () => { - it('un-highlights a previously highlighted suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + describe('WHEN: there are results', () => { + test('THEN: it un-highlights a previously highlighted suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - await page.keyboard.press('ArrowDown'); - await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.keyboard.press('ArrowDown'); + await page.type('.ons-js-autosuggest-input', 'd', { delay: 20 }); - const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); - expect(focusedNodeCount).toBe(0); - }); + const focusedNodeCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length); + expect(focusedNodeCount).toBe(0); + }); - it('decorates input element with `aria-expanded` attribute', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it decorates input element with `aria-expanded` attribute', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded')); - expect(ariaExpandedValue).toBe('true'); - }); + const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.getAttribute('aria-expanded')); + expect(ariaExpandedValue).toBe('true'); + }); - it('emboldens matched suggestion text', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it emboldens matched suggestion text', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Unite', { delay: 20 }); - const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent)); - expect(emboldened).toEqual(['Unite', 'Unite']); - }); + const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent)); + expect(emboldened).toEqual(['Unite', 'Unite']); + }); - it('does not embolden anything when suggestion does not contain query text', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it does not embolden anything when suggestion does not contain query text', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'tland', { delay: 20 }); - const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); - expect(matchCount).toBe(2); - const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent)); - expect(emboldened).toEqual(['tland']); - }); + const matchCount = await page.$$eval('.ons-autosuggest__option', (nodes) => nodes.length); + expect(matchCount).toBe(2); + const emboldened = await page.$$eval('.ons-autosuggest__option strong', (nodes) => nodes.map((node) => node.textContent)); + expect(emboldened).toEqual(['tland']); + }); - it('sets aria status to a message asking for more characters to be input', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it sets aria status to a message asking for more characters to be input', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'st', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'st', { delay: 20 }); - const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); - expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.'); - }); + const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); + expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.'); + }); - it('sets aria status to a message indicating a count of one suggestion', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it sets aria status to a message indicating a count of one suggestion', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'Engla', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'Engla', { delay: 20 }); - const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); - expect(statusMessage.trim()).toBe('There is one suggestion available.'); - }); + const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); + expect(statusMessage.trim()).toBe('There is one suggestion available.'); + }); - it('sets aria status to a message indicating the count of suggestions', async () => { - await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + test('THEN: it sets aria status to a message indicating the count of suggestions', async () => { + await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - await page.type('.ons-js-autosuggest-input', 'sta', { delay: 20 }); + await page.type('.ons-js-autosuggest-input', 'sta', { delay: 20 }); - const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); - expect(statusMessage.trim()).toBe('There are 2 suggestions available.'); + const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); + expect(statusMessage.trim()).toBe('There are 2 suggestions available.'); + }); }); }); - describe('when there are no results', () => { - describe('where `noResults` content is provided', () => { - it('outputs `noResults` content', async () => { + describe('GIVEN: there are no results', () => { + describe('WHEN: `noResults` content is provided', () => { + test('THEN: it outputs `noResults` content', async () => { await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 }); @@ -496,7 +505,7 @@ describe('script: autosuggest', () => { expect(noResultsContent).toBe('No suggestions found.'); }); - it('decorates input element with `aria-expanded` attribute', async () => { + test('THEN: it decorates input element with `aria-expanded` attribute', async () => { await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 }); @@ -505,7 +514,7 @@ describe('script: autosuggest', () => { expect(ariaExpandedValue).toBe('true'); }); - it('sets aria status to a message indicating that query is too short for suggestions', async () => { + test('THEN: it sets aria status to a message indicating that query is too short for suggestions', async () => { await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); await page.type('.ons-js-autosuggest-input', 'ab', { delay: 20 }); @@ -514,7 +523,7 @@ describe('script: autosuggest', () => { expect(statusMessage.trim()).toBe('Enter 3 or more characters for suggestions.'); }); - it('sets aria status to a message indicating the zero count of suggestions', async () => { + test('THEN: it sets aria status to a message indicating the zero count of suggestions', async () => { await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 }); @@ -524,8 +533,8 @@ describe('script: autosuggest', () => { }); }); - describe('where `noResults` content is not provided', () => { - it('has an empty listbox', async () => { + describe('WHEN: `noResults` content is not provided', () => { + test('THEN: it has an empty listbox', async () => { await setTestPage( '/test', renderComponent('autosuggest', { @@ -540,7 +549,7 @@ describe('script: autosuggest', () => { expect(matchCount).toBe(0); }); - it('decorates input element with `aria-expanded` attribute', async () => { + test('THEN: it decorates input element with `aria-expanded` attribute', async () => { await setTestPage( '/test', renderComponent('autosuggest', { @@ -557,8 +566,8 @@ describe('script: autosuggest', () => { }); }); - describe('when there are no results due to an error', () => { - describe('when the status code is 400', () => { + describe('GIVEN: there are no results due to an error', () => { + describe('WHEN: the status code is 400', () => { beforeEach(async () => { apiFaker.setTemporaryOverride('/countries', { status: 400, @@ -571,7 +580,7 @@ describe('script: autosuggest', () => { await page.type('.ons-js-autosuggest-input', 'tes', { delay: 20 }); }); - it('shows the type more message', async () => { + test('THEN: it shows the type more message', async () => { const listItemCount = await page.$$eval('.ons-js-autosuggest-listbox > *', (nodes) => nodes.length); expect(listItemCount).toBe(1); const noResultsText = await page.$eval('.ons-autosuggest__option--no-results', (node) => node.innerText); @@ -580,8 +589,8 @@ describe('script: autosuggest', () => { }); describe.each([ - ['when the status code is greater than 400', {}, 401], - ['when there is no status code', null, undefined], + ['WHEN: the status code is greater than 400', {}, 401], + ['WHEN: there is no status code', null, undefined], ])('%s', (_, fakeAutosuggestData, fakeStatusCode) => { beforeEach(async () => { apiFaker.setTemporaryOverride('/countries', { @@ -602,14 +611,14 @@ describe('script: autosuggest', () => { await page.type('.ons-js-autosuggest-input', 'tes', { delay: 20 }); }); - it('shows the API error message', async () => { + test('THEN: it shows the API error message', async () => { const resultsItemCount = await page.$$eval('.ons-js-autosuggest-results > *', (nodes) => nodes.length); expect(resultsItemCount).toBe(1); const warningText = await page.$eval('.ons-autosuggest__warning', (node) => node.textContent); expect(warningText.trim()).toBe('!Sorry, there is a problem.'); }); - it('the list and results element should be removed from the page', async () => { + test('THEN: the list and results element should be removed from the page', async () => { const hasListBox = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-js-autosuggest-listbox')); const hasResultsTitle = await page.$eval('.ons-autosuggest', (node) => node.classList.contains('.ons-autosuggest__results-title'), @@ -619,31 +628,31 @@ describe('script: autosuggest', () => { expect(hasResultsTitle).toBe(false); }); - it('the input should be disabled', async () => { + test('THEN: the input should be disabled', async () => { const hasDisabledAttribute = await page.$eval('.ons-js-autosuggest-input', (node) => node.hasAttribute('disabled')); expect(hasDisabledAttribute).toBe(true); }); - it('the input value should be empty', async () => { + test('THEN: the input value should be empty', async () => { const inputValue = await page.$eval('.ons-js-autosuggest-input', (node) => node.value); expect(inputValue).toBe(''); }); - it('the label class should be added', async () => { + test('THEN: the label class should be added', async () => { const hasClass = await page.$eval('.ons-label', (node) => node.classList.contains('ons-u-lighter')); expect(hasClass).toBe(true); }); - it('the aria status should be set', async () => { + test('THEN: the aria status should be set', async () => { const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', (node) => node.textContent); expect(statusMessage.trim()).toBe('Sorry, there is a problem.'); }); }); }); - describe('when the component initialises with the allowMultiple parameter', () => { - describe('when a result is selected', () => { - it('the input value should contain a comma when focused', async () => { + describe('GIVEN: the component initialises with the allowMultiple parameter', () => { + describe('WHEN: a result is selected', () => { + test('THEN: the input value should contain a comma when focused', async () => { await setTestPage( '/test', renderComponent('autosuggest', { @@ -664,8 +673,8 @@ describe('script: autosuggest', () => { }); }); - describe('when the user blurs the input', () => { - it('the input value should not contain a comma', async () => { + describe('WHEN: the user blurs the input', () => { + test('THEN: the input value should not contain a comma', async () => { await setTestPage( '/test', renderComponent('autosuggest', { From b58139a8e6b35417bde5dde33b8c9171ef08730c Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 4 Sep 2024 12:52:44 +0100 Subject: [PATCH 02/36] move test examples --- src/components/autosuggest/_macro.spec.js | 33 ++---------- src/components/autosuggest/_test-examples.js | 52 +++++++++++++++++++ .../autosuggest/autosuggest.spec.js | 52 +------------------ 3 files changed, 57 insertions(+), 80 deletions(-) create mode 100644 src/components/autosuggest/_test-examples.js diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index fd226dc849..472d43890d 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -5,32 +5,7 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; -const EXAMPLE_AUTOSUGGEST = { - id: 'country-of-birth', - input: { - label: { - text: 'Current name of country', - description: 'Enter your own answer or select from suggestions', - id: 'country-of-birth-label', - classes: 'extra-label-class', - }, - autocomplete: 'off', - }, - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 2, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - autosuggestData: '/examples/data/country-of-birth.json', - noResults: 'No suggestions found. You can enter your own answer', - typeMore: 'Continue entering to get suggestions', -}; +import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('macro: autosuggest', () => { describe('GIVEN: Params: none', () => { @@ -55,16 +30,16 @@ describe('macro: autosuggest', () => { test('THEN: it has the provided data attributes', () => { const $element = $('.ons-autosuggest'); expect($element.attr('data-allow-multiple')).toBeUndefined(); - expect($element.attr('data-min-chars')).toBe('2'); + expect($element.attr('data-min-chars')).toBe('3'); expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.'); expect($element.attr('data-aria-you-have-selected')).toBe('You have selected'); - expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); + expect($element.attr('data-autosuggest-data')).toBe('/test/fake/api/countries'); expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.'); expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions'); - expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); + expect($element.attr('data-no-results')).toBe('No suggestions found.'); expect($element.attr('data-results-title')).toBe('Suggestions'); expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); }); diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js new file mode 100644 index 0000000000..24e60c3152 --- /dev/null +++ b/src/components/autosuggest/_test-examples.js @@ -0,0 +1,52 @@ +export const EXAMPLE_AUTOSUGGEST = { + id: 'country-of-birth', + input: { + label: { + text: 'Current name of country', + description: 'Enter your own answer or select from suggestions', + id: 'country-of-birth-label', + classes: 'extra-label-class', + }, + autocomplete: 'off', + }, + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + typeMore: 'Continue entering to get suggestions', + autosuggestData: '/test/fake/api/countries', +}; + +export const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = { + id: 'country-of-birth', + label: { + text: 'Current name of country', + description: 'Enter your own answer or select from suggestions', + id: 'country-of-birth-label', + classes: 'extra-label-class', + }, + autocomplete: 'off', + instructions: 'Use up and down keys to navigate.', + ariaYouHaveSelected: 'You have selected', + ariaMinChars: 'Enter 3 or more characters for suggestions.', + minChars: 3, + ariaResultsLabel: 'Country suggestions', + ariaOneResult: 'There is one suggestion available.', + ariaNResults: 'There are {n} suggestions available.', + ariaLimitedResults: 'Type more characters to improve your search', + moreResults: 'Continue entering to improve suggestions', + resultsTitle: 'Suggestions', + resultsTitleId: 'country-of-birth-suggestions', + noResults: 'No suggestions found.', + typeMore: 'Continue entering to get suggestions', + autosuggestData: '/test/fake/api/countries', + language: 'en-gb', +}; diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 187cdf17de..17917eb22f 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -1,57 +1,7 @@ import { getNodeAttributes, PuppeteerEndpointFaker } from '../../tests/helpers/puppeteer'; import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; -const EXAMPLE_AUTOSUGGEST = { - id: 'country-of-birth', - input: { - label: { - text: 'Current name of country', - description: 'Enter your own answer or select from suggestions', - id: 'country-of-birth-label', - classes: 'extra-label-class', - }, - autocomplete: 'off', - }, - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - typeMore: 'Continue entering to get suggestions', - autosuggestData: '/test/fake/api/countries', -}; -const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = { - id: 'country-of-birth', - label: { - text: 'Current name of country', - description: 'Enter your own answer or select from suggestions', - id: 'country-of-birth-label', - classes: 'extra-label-class', - }, - autocomplete: 'off', - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - typeMore: 'Continue entering to get suggestions', - autosuggestData: '/test/fake/api/countries', - language: 'en-gb', -}; +import { EXAMPLE_AUTOSUGGEST, EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE } from './_test-examples'; describe('script: autosuggest', () => { const apiFaker = new PuppeteerEndpointFaker('/test/fake/api'); From 490f50389c5ecb70128e6753317795f198a81489 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 6 Sep 2024 08:02:03 +0100 Subject: [PATCH 03/36] update --- src/components/autosuggest/_macro.spec.js | 2 +- src/components/autosuggest/autosuggest.helpers.spec.js | 2 +- src/components/autosuggest/autosuggest.spec.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 472d43890d..0919181bfb 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -7,7 +7,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; -describe('macro: autosuggest', () => { +describe('FOR: macro: autosuggest', () => { describe('GIVEN: Params: none', () => { describe('WHEN: All params are at default state', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); diff --git a/src/components/autosuggest/autosuggest.helpers.spec.js b/src/components/autosuggest/autosuggest.helpers.spec.js index d0d6b3e4ac..4289e23981 100644 --- a/src/components/autosuggest/autosuggest.helpers.spec.js +++ b/src/components/autosuggest/autosuggest.helpers.spec.js @@ -1,6 +1,6 @@ import { sanitiseAutosuggestText } from './autosuggest.helpers'; -describe('module: autosuggest.helpers', () => { +describe('FOR: module: autosuggest.helpers', () => { describe('GIVEN: function: sanitiseAutosuggestText', () => { describe('WHEN: only input parameter is set', () => { test.each([ diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 17917eb22f..5eb974eea3 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -3,7 +3,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST, EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE } from './_test-examples'; -describe('script: autosuggest', () => { +describe('FOR: script: autosuggest', () => { const apiFaker = new PuppeteerEndpointFaker('/test/fake/api'); apiFaker.setOverride('/countries', { From b685fdd40288147e8082d98d0462e84c8490cce5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 6 Sep 2024 08:59:16 +0100 Subject: [PATCH 04/36] update --- src/components/autosuggest/_macro.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 0919181bfb..bdfa0f127e 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -282,7 +282,7 @@ describe('FOR: macro: autosuggest', () => { }); describe('GIVEN: autosuggest results', () => { - describe('WHEN:`mutallyExclusive` parameter is not defined', () => { + describe('WHEN: mutallyExclusive parameter is not defined', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: autosuggest results is rendered', () => { @@ -290,7 +290,7 @@ describe('FOR: macro: autosuggest', () => { }); }); - describe('WHEN:`mutallyExclusive` parameter is defined', () => { + describe('WHEN: mutallyExclusive parameter is defined', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, From 23c07f17f3c37c6a6bab50574da86f1ea8d52a55 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 12 Sep 2024 13:12:07 +0100 Subject: [PATCH 05/36] revert changes to test --- src/components/autosuggest/_macro.spec.js | 6 ++-- src/components/autosuggest/_test-examples.js | 32 ++------------------ 2 files changed, 6 insertions(+), 32 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index bdfa0f127e..8f774a530c 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -30,16 +30,16 @@ describe('FOR: macro: autosuggest', () => { test('THEN: it has the provided data attributes', () => { const $element = $('.ons-autosuggest'); expect($element.attr('data-allow-multiple')).toBeUndefined(); - expect($element.attr('data-min-chars')).toBe('3'); + expect($element.attr('data-min-chars')).toBe('2'); expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.'); expect($element.attr('data-aria-you-have-selected')).toBe('You have selected'); - expect($element.attr('data-autosuggest-data')).toBe('/test/fake/api/countries'); + expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.'); expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions'); - expect($element.attr('data-no-results')).toBe('No suggestions found.'); + expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); expect($element.attr('data-results-title')).toBe('Suggestions'); expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); }); diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js index 24e60c3152..56e1f6279b 100644 --- a/src/components/autosuggest/_test-examples.js +++ b/src/components/autosuggest/_test-examples.js @@ -12,7 +12,7 @@ export const EXAMPLE_AUTOSUGGEST = { instructions: 'Use up and down keys to navigate.', ariaYouHaveSelected: 'You have selected', ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, + minChars: 2, ariaResultsLabel: 'Country suggestions', ariaOneResult: 'There is one suggestion available.', ariaNResults: 'There are {n} suggestions available.', @@ -20,33 +20,7 @@ export const EXAMPLE_AUTOSUGGEST = { moreResults: 'Continue entering to improve suggestions', resultsTitle: 'Suggestions', resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', + autosuggestData: '/examples/data/country-of-birth.json', + noResults: 'No suggestions found. You can enter your own answer', typeMore: 'Continue entering to get suggestions', - autosuggestData: '/test/fake/api/countries', -}; - -export const EXAMPLE_AUTOSUGGEST_WITH_LANGUAGE = { - id: 'country-of-birth', - label: { - text: 'Current name of country', - description: 'Enter your own answer or select from suggestions', - id: 'country-of-birth-label', - classes: 'extra-label-class', - }, - autocomplete: 'off', - instructions: 'Use up and down keys to navigate.', - ariaYouHaveSelected: 'You have selected', - ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 3, - ariaResultsLabel: 'Country suggestions', - ariaOneResult: 'There is one suggestion available.', - ariaNResults: 'There are {n} suggestions available.', - ariaLimitedResults: 'Type more characters to improve your search', - moreResults: 'Continue entering to improve suggestions', - resultsTitle: 'Suggestions', - resultsTitleId: 'country-of-birth-suggestions', - noResults: 'No suggestions found.', - typeMore: 'Continue entering to get suggestions', - autosuggestData: '/test/fake/api/countries', - language: 'en-gb', }; From 79544d282d3e63682d491d3c96d1c49f8cb9817b Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 12 Sep 2024 13:13:08 +0100 Subject: [PATCH 06/36] update for keyword --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 8f774a530c..57b0d0b1ef 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -7,7 +7,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; -describe('FOR: macro: autosuggest', () => { +describe('FOR: autosuggest', () => { describe('GIVEN: Params: none', () => { describe('WHEN: All params are at default state', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); From 98b443492730928ad26a72209c365759e04aff1f Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 13 Sep 2024 11:45:35 +0100 Subject: [PATCH 07/36] remove quotes from test --- src/components/autosuggest/_macro.spec.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 57b0d0b1ef..0afaa23dd5 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -75,33 +75,33 @@ describe('FOR: autosuggest', () => { }); describe('GIVEN: Params: allowMultiple', () => { - describe('WHEN: `allowMultiple` is `true`', () => { + describe('WHEN: allowMultiple is true', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, allowMultiple: true, }), ); - test('THEN: it has the `data-allow-multiple` attribute', () => { + test('THEN: it has the data-allow-multiple attribute', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBe('true'); }); }); - describe('WHEN: `allowMultiple` is `false`', () => { + describe('WHEN: allowMultiple is false', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, allowMultiple: false, }), ); - test('THEN: it doen not have the `data-allow-multiple` attribute', () => { + test('THEN: it doen not have the data-allow-multiple attribute', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); }); }); }); describe('GIVEN: Params: externalInitialiser', () => { - describe('WHEN: `externalInitialiser` is `true`', () => { + describe('WHEN: externalInitialiser is true', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -114,7 +114,7 @@ describe('FOR: autosuggest', () => { }); }); - describe('WHEN: `externalInitialiser` is `false`', () => { + describe('WHEN: externalInitialiser is false', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -129,7 +129,7 @@ describe('FOR: autosuggest', () => { }); describe('GIVEN: Params: isEditable', () => { - describe('WHEN: `isEditable` is `false`', () => { + describe('WHEN: isEditable is false', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -144,7 +144,7 @@ describe('FOR: autosuggest', () => { }); describe('GIVEN: Params: mandatory', () => { - describe('WHEN: `mandatory` is `true`', () => { + describe('WHEN: mandatory is true', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -159,7 +159,7 @@ describe('FOR: autosuggest', () => { }); describe('GIVEN: Params: containerClasses', () => { - describe('WHEN: `containerClasses` is provided', () => { + describe('WHEN: containerClasses is provided', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, @@ -237,7 +237,7 @@ describe('FOR: autosuggest', () => { }, }, }); - test('THEN: it uses the `input` component with the expected parameters', () => { + test('THEN: it uses the input component with the expected parameters', () => { expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); From 592a469f40dc64bd7071b64020ae34caf7a13e6f Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:57:21 +0100 Subject: [PATCH 08/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 0afaa23dd5..79d7f81988 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -94,7 +94,7 @@ describe('FOR: autosuggest', () => { allowMultiple: false, }), ); - test('THEN: it doen not have the data-allow-multiple attribute', () => { + test('THEN: it does not have the data-allow-multiple attribute', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); }); }); From 97127d535f7621b2febb8740c9a45b28a7c9c6dd Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Sep 2024 11:06:18 +0100 Subject: [PATCH 09/36] update test --- src/components/autosuggest/_macro.spec.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 79d7f81988..74c5c50611 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -109,7 +109,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it does not have a special class', () => { + test('THEN: it does not have a special class that indicates the component should initialise itself', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(false); }); }); @@ -122,7 +122,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it has a special class', () => { + test('THEN: it has a special class that indicates the component should initialise itself', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); }); }); @@ -175,7 +175,7 @@ describe('FOR: autosuggest', () => { }); describe('GIVEN: Params: input', () => { - describe('WHEN: input is provided', () => { + describe('WHEN: input param is provided', () => { const faker = templateFaker(); const inputSpy = faker.spy('input'); @@ -237,7 +237,7 @@ describe('FOR: autosuggest', () => { }, }, }); - test('THEN: it uses the input component with the expected parameters', () => { + test('THEN: it renders the input component with the expected parameters', () => { expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); @@ -285,7 +285,7 @@ describe('FOR: autosuggest', () => { describe('WHEN: mutallyExclusive parameter is not defined', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - test('THEN: autosuggest results is rendered', () => { + test('THEN: autosuggest results are rendered', () => { expect($('.ons-autosuggest__results').length).toBe(1); }); }); @@ -298,7 +298,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: autosuggest results is not rendered', () => { + test('THEN: autosuggest results are not rendered', () => { expect($('.ons-autosuggest__results').length).toBe(0); }); }); From 395b809e67e636740809270e2fa04b601cb41d9f Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:10 +0100 Subject: [PATCH 10/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 74c5c50611..4cb26fac54 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -44,7 +44,7 @@ describe('FOR: autosuggest', () => { expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); }); - test('THEN: it renders div with the provided title identifier', () => { + test('THEN: it has the expected id on the results title element', () => { expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); }); From 32e6cef8b2f2c1f09f9655c6b5ec16dd3d13fc12 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:24 +0100 Subject: [PATCH 11/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 4cb26fac54..3541de3fc8 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -52,7 +52,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions'); }); - test('THEN: it renders list with a generated identifier', () => { + test('THEN: it has the expected id on the results list element', () => { expect($('.ons-autosuggest__listbox').attr('id')).toBe('country-of-birth-listbox'); }); From eb4ed2f61d191f5dca6df7d1a985f945f09852c1 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:36 +0100 Subject: [PATCH 12/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 3541de3fc8..7c9852e847 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -48,7 +48,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); }); - test('THEN: it renders div with the provided title text', () => { + test('THEN: it renders the results title div with the provided title text', () => { expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions'); }); From 0e35c83df9a527006faba2dfb8c8a5becca78aae Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:43 +0100 Subject: [PATCH 13/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 7c9852e847..a9048f9a6e 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -56,7 +56,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__listbox').attr('id')).toBe('country-of-birth-listbox'); }); - test('THEN: it renders an accessible list', () => { + test('THEN: it renders the results list element with the title attribute set to the provided title text', () => { expect($('.ons-autosuggest__listbox').attr('title')).toBe('Suggestions'); }); From 206445c8c09f77a7efa35c3f96381c6daebd0e98 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:53 +0100 Subject: [PATCH 14/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index a9048f9a6e..ea170038c9 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -60,7 +60,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__listbox').attr('title')).toBe('Suggestions'); }); - test('THEN: it renders instructions with a generated identifier', () => { + test('THEN: it renders instructions with the expected id', () => { expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions'); }); From 7b881e9e2f91e248bc487877e15862658fd01601 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:57:59 +0100 Subject: [PATCH 15/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index ea170038c9..f2e40c8bb2 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -109,7 +109,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it does not have a special class that indicates the component should initialise itself', () => { + test('THEN: it does not have the ons-js-autosuggest class that indicates the component should initialise itself', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(false); }); }); From e29e98e6fa7c5cb288677b8040f28ec1ba9eb77e Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:05 +0100 Subject: [PATCH 16/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index f2e40c8bb2..eeac32d350 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -122,7 +122,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it has a special class that indicates the component should initialise itself', () => { + test('THEN: it has the ons-js-autosuggest class that indicates the component should initialise itself', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); }); }); From f7b14b9bf0f2c24ef5b3279b79191fd0fb801397 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:12 +0100 Subject: [PATCH 17/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index eeac32d350..e108c72332 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -137,7 +137,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it has special class to indicate that component is not editable', () => { + test('THEN: it has the ons-js-address-not-editable class to indicate that component is not editable', () => { expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(true); }); }); From 7a43eeaee79c685213e7656a1c4e814b219505bf Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:18 +0100 Subject: [PATCH 18/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index e108c72332..5b0c005617 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -152,7 +152,7 @@ describe('FOR: autosuggest', () => { }), ); - test('THEN: it has special class to indicate that component input is mandatory', () => { + test('THEN: it has the ons-js-address-mandatory class to indicate that component input is mandatory', () => { expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(true); }); }); From 056a7fef4b73cc07f679eea561728b2cfb7201c5 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:34 +0100 Subject: [PATCH 19/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 5b0c005617..dd3662d94d 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -64,7 +64,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions'); }); - test('THEN: it adds aria-atomic=true value to status container', () => { + test('THEN: the aria-atomic attribute is set to true on the status container', () => { expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); }); From 5bddd77ce64ce0376fd17c90345106515c4c6e49 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:43 +0100 Subject: [PATCH 20/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index dd3662d94d..2091405ae7 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -68,7 +68,7 @@ describe('FOR: autosuggest', () => { expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); }); - test('THEN: it enders instructions text', () => { + test('THEN: it renders the instructions with the provided instructions text', () => { expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.'); }); }); From a9697893f8237c2e54e06a0e30dbd114e856b39e Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:58:54 +0100 Subject: [PATCH 21/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 2091405ae7..574ac29c67 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -82,7 +82,7 @@ describe('FOR: autosuggest', () => { allowMultiple: true, }), ); - test('THEN: it has the data-allow-multiple attribute', () => { + test('THEN: it has the data-allow-multiple attribute set to true on the container element', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBe('true'); }); }); From c5578b298cb45e949c1092a4c6e0c62fbb139e87 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Tue, 17 Sep 2024 10:59:05 +0100 Subject: [PATCH 22/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 574ac29c67..1f0299d10f 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -94,7 +94,7 @@ describe('FOR: autosuggest', () => { allowMultiple: false, }), ); - test('THEN: it does not have the data-allow-multiple attribute', () => { + test('THEN: it does not have the data-allow-multiple attribute on the container element', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); }); }); From 630808acd1e846b431f40e3e1f85cb29599443d6 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 17 Sep 2024 11:08:07 +0100 Subject: [PATCH 23/36] update test --- src/components/autosuggest/_macro.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 1f0299d10f..52b3cae8c9 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -8,8 +8,8 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: autosuggest', () => { - describe('GIVEN: Params: none', () => { - describe('WHEN: All params are at default state', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: All required params are provided', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: it passes jest-axe checks', async () => { @@ -281,7 +281,7 @@ describe('FOR: autosuggest', () => { }); }); - describe('GIVEN: autosuggest results', () => { + describe('GIVEN: Params: mutuallyExclusive', () => { describe('WHEN: mutallyExclusive parameter is not defined', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); From 75e92a3adfee6f427f2c409e04ae85517a3315d0 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 19 Sep 2024 11:06:57 +0100 Subject: [PATCH 24/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 52b3cae8c9..014bb5eba6 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -7,7 +7,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; -describe('FOR: autosuggest', () => { +describe('FOR: Macro: Autosuggest', () => { describe('GIVEN: Params: required', () => { describe('WHEN: All required params are provided', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); From ff66a526e0f03e751262df5a3d5126906e11bf76 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 7 Nov 2024 17:48:14 +0000 Subject: [PATCH 25/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 014bb5eba6..b63a429088 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -9,7 +9,7 @@ import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: Macro: Autosuggest', () => { describe('GIVEN: Params: required', () => { - describe('WHEN: All required params are provided', () => { + describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: it passes jest-axe checks', async () => { From 4cddab8a9bd0afe78a4edef2be26fffb540fd8c4 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 7 Nov 2024 23:38:52 +0000 Subject: [PATCH 26/36] fix failing test and address comment --- src/components/autosuggest/_macro.spec.js | 76 ++++++++++++++------ src/components/autosuggest/_test-examples.js | 5 ++ 2 files changed, 61 insertions(+), 20 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index c0297bc357..be11b41e69 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -10,7 +10,7 @@ import { EXAMPLE_AUTOSUGGEST, EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD } from describe('FOR: Macro: Autosuggest', () => { describe('GIVEN: Params: required', () => { describe('WHEN: required params are provided', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD)); test('THEN: it passes jest-axe checks', async () => { const results = await axe($.html()); @@ -22,27 +22,63 @@ describe('FOR: Macro: Autosuggest', () => { }); test('THEN: it has a special class that indicates the component should initialise itself', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD)); - expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); }); - test('THEN: it has the provided data attributes', () => { - const $element = $('.ons-autosuggest'); - expect($element.attr('data-allow-multiple')).toBeUndefined(); - expect($element.attr('data-min-chars')).toBe('2'); - expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); - expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); - expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); - expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.'); - expect($element.attr('data-aria-you-have-selected')).toBe('You have selected'); - expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); - expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.'); - expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions'); - expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); - expect($element.attr('data-results-title')).toBe('Suggestions'); - expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions'); - expect($element.attr('data-result-threshold')).toBe('0.5'); + test('THEN: it does not have the data-allow-multiple attribute', () => { + expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); + }); + + test('THEN: it has data-min-chars set to "2"', () => { + expect($('.ons-autosuggest').attr('data-min-chars')).toBe('2'); + }); + + test('THEN: it has data-aria-limited-results with expected message', () => { + expect($('.ons-autosuggest').attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); + }); + + test('THEN: it has data-aria-min-chars with expected message', () => { + expect($('.ons-autosuggest').attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.'); + }); + + test('THEN: it has data-aria-n-results with expected message', () => { + expect($('.ons-autosuggest').attr('data-aria-n-results')).toBe('There are {n} suggestions available.'); + }); + + test('THEN: it has data-aria-one-result with expected message', () => { + expect($('.ons-autosuggest').attr('data-aria-one-result')).toBe('There is one suggestion available.'); + }); + + test('THEN: it has data-aria-you-have-selected with expected message', () => { + expect($('.ons-autosuggest').attr('data-aria-you-have-selected')).toBe('You have selected'); + }); + + test('THEN: it has data-autosuggest-data pointing to correct URL', () => { + expect($('.ons-autosuggest').attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json'); + }); + + test('THEN: it has data-instructions with expected instructions', () => { + expect($('.ons-autosuggest').attr('data-instructions')).toBe('Use up and down keys to navigate.'); + }); + + test('THEN: it has data-more-results with expected message', () => { + expect($('.ons-autosuggest').attr('data-more-results')).toBe('Continue entering to improve suggestions'); + }); + + test('THEN: it has data-no-results with expected message', () => { + expect($('.ons-autosuggest').attr('data-no-results')).toBe('No suggestions found. You can enter your own answer'); + }); + + test('THEN: it has data-results-title with expected title', () => { + expect($('.ons-autosuggest').attr('data-results-title')).toBe('Suggestions'); + }); + + test('THEN: it has data-type-more with expected message', () => { + expect($('.ons-autosuggest').attr('data-type-more')).toBe('Continue entering to get suggestions'); + }); + + test('THEN: it has data-result-threshold set to "0.5"', () => { + expect($('.ons-autosuggest').attr('data-result-threshold')).toBe('0.5'); }); test('THEN: it has the expected id on the results title element', () => { @@ -238,7 +274,7 @@ describe('FOR: Macro: Autosuggest', () => { }, }, }); - test('THEN: it renders the input component with the expected parameters', () => { + test('THEN: the provided attributes are passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js index 56e1f6279b..b684e5d9b4 100644 --- a/src/components/autosuggest/_test-examples.js +++ b/src/components/autosuggest/_test-examples.js @@ -24,3 +24,8 @@ export const EXAMPLE_AUTOSUGGEST = { noResults: 'No suggestions found. You can enter your own answer', typeMore: 'Continue entering to get suggestions', }; + +export const EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD = { + ...EXAMPLE_AUTOSUGGEST, + resultsThreshold: 0.5, +}; From a2933fc8a5cb0a3854251e83e0736199909ec57c Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 8 Nov 2024 11:26:15 +0000 Subject: [PATCH 27/36] address comment --- src/components/autosuggest/_macro.spec.js | 72 ++++++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index be11b41e69..acb06d8cf5 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -274,45 +274,115 @@ describe('FOR: Macro: Autosuggest', () => { }, }, }); - test('THEN: the provided attributes are passed through to the input component', () => { + + test('THEN: id is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth'); + }); + + test('THEN: type is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text'); + }); + + test('THEN: classes are passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class'); + }); + + test('THEN: width is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('width', '7'); + }); + + test('THEN: label is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country'); expect(inputSpy.occurrences[0]).toHaveProperty('label.description', 'Enter your own answer or select from suggestions'); expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label'); expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class'); + }); + + test('THEN: autocomplete is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off'); + }); + + test('THEN: legend is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('legend', 'this is a legend'); expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class'); + }); + + test('THEN: value is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc'); + }); + + test('THEN: custom attribute "a" is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42); + }); + + test('THEN: error is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id'); expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.'); + }); + + test('THEN: mutuallyExclusive is passed as null to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null); + }); + + test('THEN: accessiblePlaceholder is passed as true to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true); + }); + + test('THEN: name is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('name', 'test-params'); + }); + + test('THEN: autosuggestResults type is string', () => { expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string'); + }); + + test('THEN: minLength is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1); + }); + + test('THEN: maxLength is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10); + }); + + test('THEN: prefix is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds'); expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£'); expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix'); + }); + + test('THEN: suffix is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total'); expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%'); expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix'); + }); + + test('THEN: field is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test'); expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test'); + }); + + test('THEN: dontWrap is passed as true to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true); + }); + + test('THEN: charCheckLimit is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200); expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining'); expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining'); expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many'); expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many'); + }); + + test('THEN: searchButton text is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search'); + }); + + test('THEN: postTextboxLinkText is passed through to the input component', () => { expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text'); expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk'); + }); + + test('THEN: click listener is correctly assigned', () => { expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }"); }); }); From 1d56aadcf06cad0b73b6358733bf2dbd51cddc24 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 11 Nov 2024 09:07:39 +0000 Subject: [PATCH 28/36] add test for language --- src/components/autosuggest/_macro.spec.js | 4 ++++ src/components/autosuggest/_test-examples.js | 1 + 2 files changed, 5 insertions(+) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index acb06d8cf5..4308d5f2d7 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -81,6 +81,10 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').attr('data-result-threshold')).toBe('0.5'); }); + test('THEN: it has language set to "en-gb"', () => { + expect($('.ons-autosuggest').attr('data-lang')).toBe('en-gb'); + }); + test('THEN: it has the expected id on the results title element', () => { expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); }); diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js index b684e5d9b4..9b235ca915 100644 --- a/src/components/autosuggest/_test-examples.js +++ b/src/components/autosuggest/_test-examples.js @@ -23,6 +23,7 @@ export const EXAMPLE_AUTOSUGGEST = { autosuggestData: '/examples/data/country-of-birth.json', noResults: 'No suggestions found. You can enter your own answer', typeMore: 'Continue entering to get suggestions', + language: 'en-gb', }; export const EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD = { From 224789e713bab2392d17cffe1b37e072c6589642 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 11 Nov 2024 12:13:42 +0000 Subject: [PATCH 29/36] update --- src/components/autosuggest/_macro.spec.js | 42 +++++++++++++++----- src/components/autosuggest/_test-examples.js | 6 --- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 4308d5f2d7..9b1d9f862f 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -5,12 +5,12 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; -import { EXAMPLE_AUTOSUGGEST, EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD } from './_test-examples'; +import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: Macro: Autosuggest', () => { describe('GIVEN: Params: required', () => { describe('WHEN: required params are provided', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD)); + const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: it passes jest-axe checks', async () => { const results = await axe($.html()); @@ -77,14 +77,6 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').attr('data-type-more')).toBe('Continue entering to get suggestions'); }); - test('THEN: it has data-result-threshold set to "0.5"', () => { - expect($('.ons-autosuggest').attr('data-result-threshold')).toBe('0.5'); - }); - - test('THEN: it has language set to "en-gb"', () => { - expect($('.ons-autosuggest').attr('data-lang')).toBe('en-gb'); - }); - test('THEN: it has the expected id on the results title element', () => { expect($('.ons-autosuggest__results-title').attr('id')).toBe('country-of-birth-suggestions'); }); @@ -215,6 +207,36 @@ describe('FOR: Macro: Autosuggest', () => { }); }); + describe('GIVEN: Params: resultsThreshold', () => { + describe('WHEN: resultsThreshold is provided', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + resultsThreshold: 0.5, + }), + ); + + test('THEN: it has data-result-threshold set to "0.5"', () => { + expect($('.ons-autosuggest').attr('data-result-threshold')).toBe('0.5'); + }); + }); + }); + + describe('GIVEN: Params: language', () => { + describe('WHEN: language is provided', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + language: 'en-gb', + }), + ); + + test('THEN: it has language set to "en-gb"', () => { + expect($('.ons-autosuggest').attr('data-lang')).toBe('en-gb'); + }); + }); + }); + describe('GIVEN: Params: input', () => { describe('WHEN: input param is provided', () => { const faker = templateFaker(); diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js index 9b235ca915..56e1f6279b 100644 --- a/src/components/autosuggest/_test-examples.js +++ b/src/components/autosuggest/_test-examples.js @@ -23,10 +23,4 @@ export const EXAMPLE_AUTOSUGGEST = { autosuggestData: '/examples/data/country-of-birth.json', noResults: 'No suggestions found. You can enter your own answer', typeMore: 'Continue entering to get suggestions', - language: 'en-gb', -}; - -export const EXAMPLE_AUTOSUGGEST_WITH_RESULTS_THRESHOLD = { - ...EXAMPLE_AUTOSUGGEST, - resultsThreshold: 0.5, }; From 9915198e85a6d97b99ce2bb0bf06f9e3dca1f35e Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 13 Nov 2024 15:38:29 +0000 Subject: [PATCH 30/36] modify test --- src/components/autosuggest/_macro.spec.js | 33 +++++++++++++++-------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 9b1d9f862f..0a928396f8 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -9,7 +9,7 @@ import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: Macro: Autosuggest', () => { describe('GIVEN: Params: required', () => { - describe('WHEN: required params are provided', () => { + describe('WHEN: component is initialised', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: it passes jest-axe checks', async () => { @@ -17,16 +17,20 @@ describe('FOR: Macro: Autosuggest', () => { expect(results).toHaveNoViolations(); }); - test('THEN: it has expected id on container element', () => { - expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container'); - }); - test('THEN: it has a special class that indicates the component should initialise itself', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); }); - test('THEN: it does not have the data-allow-multiple attribute', () => { - expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); + test('THEN: the aria-atomic attribute is set to true on the status container', () => { + expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); + }); + }); + + describe('WHEN: required params are provided', () => { + const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); + + test('THEN: it has expected id on container element', () => { + expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container'); }); test('THEN: it has data-min-chars set to "2"', () => { @@ -97,10 +101,6 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest__instructions').attr('id')).toBe('country-of-birth-instructions'); }); - test('THEN: the aria-atomic attribute is set to true on the status container', () => { - expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); - }); - test('THEN: it renders the instructions with the provided instructions text', () => { expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.'); }); @@ -131,6 +131,17 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); }); }); + + describe('WHEN: allowMultiple is not set', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + }), + ); + test('THEN: it does not have the data-allow-multiple attribute', () => { + expect($('.ons-autosuggest').attr('data-allow-multiple')).toBeUndefined(); + }); + }); }); describe('GIVEN: Params: externalInitialiser', () => { From 65eaf574be6bedd62418738c9e90b0749ea3d839 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 13 Nov 2024 15:50:33 +0000 Subject: [PATCH 31/36] More update to test --- src/components/autosuggest/_macro.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 0a928396f8..d6b957e2c2 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: Macro: Autosuggest', () => { - describe('GIVEN: Params: required', () => { + describe('GIVEN: Params: None', () => { describe('WHEN: component is initialised', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); @@ -25,7 +25,8 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); }); }); - + }); + describe('GIVEN: Params: Required', () => { describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); @@ -106,7 +107,6 @@ describe('FOR: Macro: Autosuggest', () => { }); }); }); - describe('GIVEN: Params: allowMultiple', () => { describe('WHEN: allowMultiple is true', () => { const $ = cheerio.load( From 1f43ccc460108e32750ac6ebb012dc24349790ec Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 18 Nov 2024 12:36:31 +0000 Subject: [PATCH 32/36] update required params --- src/components/autosuggest/_macro-options.md | 2 +- src/components/autosuggest/_macro.spec.js | 37 ++++++++++++-------- src/components/autosuggest/_test-examples.js | 2 -- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/components/autosuggest/_macro-options.md b/src/components/autosuggest/_macro-options.md index 90f8b166ab..52c6e5ea51 100644 --- a/src/components/autosuggest/_macro-options.md +++ b/src/components/autosuggest/_macro-options.md @@ -18,4 +18,4 @@ | input | `Input` [_(ref)_](/components/input) | true | Configuration object for the input | | language | string | false | The ISO 639-1 Code will override the default language in page. Please note that only 'en', 'cy' and 'ni' is currently supported | | resultsThreshold | float | false | Option to adjust the search threshold and fuzziness. Accepts a range from 0 to 1, where 0 provides the closest match and 1 allows for more distant matches. Defaults to 0.2. | -| id | string | false | The `id` of the input | +| id | string | true | The `id` of the input | diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index d6b957e2c2..fd9a87cb7e 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -8,8 +8,8 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; import { EXAMPLE_AUTOSUGGEST } from './_test-examples'; describe('FOR: Macro: Autosuggest', () => { - describe('GIVEN: Params: None', () => { - describe('WHEN: component is initialised', () => { + describe('GIVEN: Params: Required', () => { + describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: it passes jest-axe checks', async () => { @@ -21,23 +21,10 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').hasClass('ons-js-autosuggest')).toBe(true); }); - test('THEN: the aria-atomic attribute is set to true on the status container', () => { - expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); - }); - }); - }); - describe('GIVEN: Params: Required', () => { - describe('WHEN: required params are provided', () => { - const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); - test('THEN: it has expected id on container element', () => { expect($('.ons-autosuggest').attr('id')).toBe('country-of-birth-container'); }); - test('THEN: it has data-min-chars set to "2"', () => { - expect($('.ons-autosuggest').attr('data-min-chars')).toBe('2'); - }); - test('THEN: it has data-aria-limited-results with expected message', () => { expect($('.ons-autosuggest').attr('data-aria-limited-results')).toBe('Type more characters to improve your search'); }); @@ -105,8 +92,28 @@ describe('FOR: Macro: Autosuggest', () => { test('THEN: it renders the instructions with the provided instructions text', () => { expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.'); }); + + test('THEN: the aria-atomic attribute is set to true on the status container', () => { + expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); + }); + }); + }); + + describe('GIVEN: Params: minChars', () => { + describe('WHEN: minChars is provided', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + minChars: 2, + }), + ); + + test('THEN: it has data-min-chars set to "2"', () => { + expect($('.ons-autosuggest').attr('data-min-chars')).toBe('2'); + }); }); }); + describe('GIVEN: Params: allowMultiple', () => { describe('WHEN: allowMultiple is true', () => { const $ = cheerio.load( diff --git a/src/components/autosuggest/_test-examples.js b/src/components/autosuggest/_test-examples.js index 56e1f6279b..7ea376d617 100644 --- a/src/components/autosuggest/_test-examples.js +++ b/src/components/autosuggest/_test-examples.js @@ -12,8 +12,6 @@ export const EXAMPLE_AUTOSUGGEST = { instructions: 'Use up and down keys to navigate.', ariaYouHaveSelected: 'You have selected', ariaMinChars: 'Enter 3 or more characters for suggestions.', - minChars: 2, - ariaResultsLabel: 'Country suggestions', ariaOneResult: 'There is one suggestion available.', ariaNResults: 'There are {n} suggestions available.', ariaLimitedResults: 'Type more characters to improve your search', From 5a66702506f4c80218c6357e5071ffc485696e20 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 19 Nov 2024 16:04:52 +0000 Subject: [PATCH 33/36] update test --- src/components/autosuggest/_macro.spec.js | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index fd9a87cb7e..0172fd207f 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -192,6 +192,19 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(true); }); }); + + describe('WHEN: isEditable is true', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + isEditable: true, + }), + ); + + test('THEN: it has the ons-js-address-not-editable class to indicate that component is not editable', () => { + expect($('.ons-autosuggest').hasClass('ons-js-address-not-editable')).toBe(false); + }); + }); }); describe('GIVEN: Params: mandatory', () => { @@ -207,6 +220,19 @@ describe('FOR: Macro: Autosuggest', () => { expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(true); }); }); + + describe('WHEN: mandatory is false', () => { + const $ = cheerio.load( + renderComponent('autosuggest', { + ...EXAMPLE_AUTOSUGGEST, + mandatory: false, + }), + ); + + test('THEN: it has the ons-js-address-mandatory class to indicate that component input is mandatory', () => { + expect($('.ons-autosuggest').hasClass('ons-js-address-mandatory')).toBe(false); + }); + }); }); describe('GIVEN: Params: containerClasses', () => { From 7dda13ca2bac7646d891f17c4290c5c41156ba86 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Tue, 19 Nov 2024 16:17:12 +0000 Subject: [PATCH 34/36] more test update --- src/components/autosuggest/_macro.spec.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 0172fd207f..c69bdca91f 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -96,6 +96,14 @@ describe('FOR: Macro: Autosuggest', () => { test('THEN: the aria-atomic attribute is set to true on the status container', () => { expect($('.ons-autosuggest__status').attr('aria-atomic')).toBe('true'); }); + + test('THEN: it has no value set for data-min-chars', () => { + expect($('.ons-autosuggest').attr('data-min-chars')).toBe(''); + }); + + test('THEN: it has no value set for data-result-threshold"', () => { + expect($('.ons-autosuggest').attr('data-result-threshold')).toBeUndefined(); + }); }); }); From ed6df228af29243a568f6c44260685ce2d706496 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Wed, 20 Nov 2024 14:57:38 +0000 Subject: [PATCH 35/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index c69bdca91f..6b348d3dc4 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -467,7 +467,7 @@ describe('FOR: Macro: Autosuggest', () => { }); describe('GIVEN: Params: mutuallyExclusive', () => { - describe('WHEN: mutallyExclusive parameter is not defined', () => { + describe('WHEN: mutuallyExclusive parameter is not defined', () => { const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST)); test('THEN: autosuggest results are rendered', () => { From a7baa87e9fc3564c1e784030adf0a8dc53cab6b3 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Wed, 20 Nov 2024 14:57:58 +0000 Subject: [PATCH 36/36] Update src/components/autosuggest/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/autosuggest/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index 6b348d3dc4..d85d19607a 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -475,7 +475,7 @@ describe('FOR: Macro: Autosuggest', () => { }); }); - describe('WHEN: mutallyExclusive parameter is defined', () => { + describe('WHEN: mutuallyExclusive parameter is defined', () => { const $ = cheerio.load( renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST,