diff --git a/src/components/fieldset/_macro.spec.js b/src/components/fieldset/_macro.spec.js index b22ca5e694..7f163e5c3e 100644 --- a/src/components/fieldset/_macro.spec.js +++ b/src/components/fieldset/_macro.spec.js @@ -1,189 +1,273 @@ /** @jest-environment jsdom */ import * as cheerio from 'cheerio'; - import axe from '../../tests/helpers/axe'; import { renderComponent, templateFaker } from '../../tests/helpers/rendering'; +import { EXAMPLE_FIELDSET, EXAMPLE_FIELDSET_NO_LEGEND } from './_test_examples'; -const EXAMPLE_FIELDSET_BASIC = { - id: 'example-fieldset', - legend: 'Fieldset legend', - description: 'A fieldset description', -}; - -describe('macro: fieldset', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); +describe('FOR: Macro: Fieldset', () => { + describe('GIVEN: Params: accessibility', () => { + describe('WHEN: all necessary params are provided', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET)); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + test('THEN: jest-axe checks pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - it('has the provided `id` attribute', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + describe('GIVEN: Params: id', () => { + describe('WHEN: id is provided', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET)); - expect($('.ons-fieldset').attr('id')).toBe('example-fieldset'); - }); + test('THEN: renders fieldset with provided id', () => { + expect($('.ons-fieldset').attr('id')).toBe('example-fieldset'); + }); + }); + + describe('WHEN: id is not provided', () => { + const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET, id: undefined })); - it('has the `legend` text', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + test('THEN: description has default id', () => { + const id = $('.ons-fieldset__description').attr('id'); + expect(id).toBe('legend-description'); + }); - const title = $('.ons-fieldset__legend-title').text(); - expect(title).toBe('Fieldset legend'); + test('THEN: legend has correct aria-describedby attribute', () => { + const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby'); + expect(ariaDescByVal).toBe('legend-description'); + }); + }); }); - it('has the correct `aria-decribedby` value', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + describe('GIVEN: Params: legend', () => { + describe('WHEN: legend is provided', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET)); - const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby'); - expect(ariaDescByVal).toBe('example-fieldset-legend-description'); - }); + test('THEN: renders legend with provided text', () => { + const title = $('.ons-fieldset__legend-title').text().trim(); + expect(title).toBe('Fieldset legend'); + }); - it('has the `description` text', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + test('THEN: legend has correct aria-describedby attribute', () => { + const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby'); + expect(ariaDescByVal).toBe('example-fieldset-legend-description'); + }); - const title = $('.ons-fieldset__description').html().trim(); - expect(title).toBe('A fieldset description'); - }); + test('THEN: legend has class "ons-fieldset__legend--with-description"', () => { + expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true); + }); + }); - it('has the correct `description` `id` when no `fieldset `id` is provided', () => { - const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined })); + describe('WHEN: legend is not provided and legendIsQuestionTitle is not set', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_NO_LEGEND)); - const id = $('.ons-fieldset__description').attr('id'); - expect(id).toBe('legend-description'); + test('THEN: does not render fieldset or legend', () => { + expect($('.ons-fieldset').length).toBe(0); + expect($('.ons-fieldset__legend').length).toBe(0); + }); + }); }); - it('has the correct `description` `id` when `fieldset `id` is provided', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + describe('GIVEN: Params: classes', () => { + describe('WHEN: classes are provided', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + classes: 'extra-class another-extra-class', + }), + ); - const id = $('.ons-fieldset__description').attr('id'); - expect(id).toBe('example-fieldset-legend-description'); + test('THEN: renders fieldset with provided classes', () => { + expect($('.ons-fieldset').hasClass('extra-class')).toBe(true); + expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true); + }); + }); }); - it('has the correct `legend` class when `description` is provided', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC)); + describe('GIVEN: Params: legendClasses', () => { + describe('WHEN: legendClasses are provided', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + legendClasses: 'extra-class another-extra-class', + }), + ); - expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true); + test('THEN: renders legend with provided classes', () => { + expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true); + expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true); + }); + }); }); - it('has additionally provided style classes', () => { - const $ = cheerio.load( - renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - classes: 'extra-class another-extra-class', - }), - ); + describe('GIVEN: Params: attributes', () => { + describe('WHEN: attributes are provided', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + attributes: { + a: 123, + b: 456, + }, + }), + ); - expect($('.ons-fieldset').hasClass('extra-class')).toBe(true); - expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true); + test('THEN: renders fieldset with provided attributes', () => { + expect($('.ons-fieldset').attr('a')).toBe('123'); + expect($('.ons-fieldset').attr('b')).toBe('456'); + }); + }); }); - it('has additionally provided `legendClasses`', () => { - const $ = cheerio.load( - renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - legendClasses: 'extra-class another-extra-class', - }), - ); + describe('GIVEN: Params: dontWrap', () => { + describe('WHEN: dontWrap is set to true', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + dontWrap: true, + }), + ); - expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true); - expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true); - }); + test('THEN: renders without fieldset wrapper', () => { + expect($('.ons-fieldset').length).toBe(0); + expect($('.ons-input-items').length).toBe(1); + }); - it('has additionally provided `attributes`', () => { - const $ = cheerio.load( - renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - attributes: { - a: 123, - b: 456, - }, - }), - ); - - expect($('.ons-fieldset').attr('a')).toBe('123'); - expect($('.ons-fieldset').attr('b')).toBe('456'); - }); + test('THEN: renders content inside ons-input-items div', () => { + expect($('.ons-input-items').html().trim()).toBe(''); + }); + }); - it('has the correct element with `dontWrap`', () => { - const $ = cheerio.load( - renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - dontWrap: true, - }), - ); + describe('WHEN: dontWrap is set to true and legend is not provided', () => { + const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_NO_LEGEND, dontWrap: true })); - expect($('.ons-input-items').length).toBe(1); - expect($('.ons-fieldset').length).toBe(0); + test('THEN: renders ons-input-items div without fieldset or legend', () => { + expect($('.ons-fieldset').length).toBe(0); + expect($('.ons-fieldset__legend').length).toBe(0); + expect($('.ons-input-items').length).toBe(1); + }); + }); }); - it('calls with content', () => { - const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...')); + describe('GIVEN: Content', () => { + describe('WHEN: content is provided', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET, 'Example content...')); - const content = $('.ons-fieldset').html().trim(); - expect(content).toEqual(expect.stringContaining('Example content...')); + test('THEN: renders fieldset with provided content', () => { + const content = $('.ons-fieldset').html(); + expect(content).toContain('Example content...'); + }); + }); }); - it('calls the error component when `error` is provided', () => { - const faker = templateFaker(); - const errorSpy = faker.spy('error'); + describe('GIVEN: Params: error', () => { + describe('WHEN: error is provided', () => { + const faker = templateFaker(); + const errorSpy = faker.spy('error'); - faker.renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - error: { text: 'There is an error' }, - }); + faker.renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + error: { text: 'Error message' }, + }); - expect(errorSpy.occurrences[0]).toEqual({ - text: 'There is an error', + test('THEN: wraps fieldset with error component', () => { + expect(errorSpy.occurrences.length).toBe(1); + expect(errorSpy.occurrences[0]).toEqual({ text: 'Error message' }); + }); }); }); - describe('with `legendIsQuestionTitle`', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true })); + describe('GIVEN: Params: legendIsQuestionTitle', () => { + describe('WHEN: legendIsQuestionTitle is set to true and legend is provided', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + legendIsQuestionTitle: true, + }), + ); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + test('THEN: jest-axe checks pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('THEN: renders legend as H1 with provided text', () => { + const titleTag = $('.ons-fieldset__legend-title')[0].tagName; + expect(titleTag).toBe('h1'); + const titleText = $('.ons-fieldset__legend-title').text().trim(); + expect(titleText).toBe('Fieldset legend'); + }); + + test('THEN: description has correct classes', () => { + expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true); + expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true); + }); }); - it('renders the legend in a H1', () => { - const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true })); - const titleTag = $('.ons-fieldset__legend-title')[0].tagName; + describe('WHEN: legendIsQuestionTitle is not set and legend is provided', () => { + const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET)); - expect(titleTag).toBe('h1'); + test('THEN: renders legend title in a span', () => { + const titleTag = $('.ons-fieldset__legend-title')[0].tagName; + expect(titleTag).toBe('span'); + }); }); + }); - it('has additionally provided `legendTitleClasses`', () => { + describe('GIVEN: Params: legendTitleClasses', () => { + describe('WHEN: legendTitleClasses are provided with legendIsQuestionTitle set to true', () => { const $ = cheerio.load( renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, - legendTitleClasses: 'extra-class another-extra-class', + ...EXAMPLE_FIELDSET, legendIsQuestionTitle: true, + legendTitleClasses: 'extra-class another-extra-class', }), ); - expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true); - expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true); + test('THEN: renders legend title with provided classes', () => { + expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true); + expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true); + }); }); - it('has the `legend` text', () => { + describe('WHEN: legendTitleClasses are provided without legendIsQuestionTitle', () => { const $ = cheerio.load( renderComponent('fieldset', { - ...EXAMPLE_FIELDSET_BASIC, + ...EXAMPLE_FIELDSET, legendTitleClasses: 'extra-class another-extra-class', - legendIsQuestionTitle: true, }), ); - const title = $('.ons-fieldset__legend-title').html().trim(); - expect(title).toBe('Fieldset legend'); + test('THEN: legend title does not have additional classes', () => { + expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(false); + expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(false); + }); }); + }); + + describe('GIVEN: Params: description', () => { + describe('WHEN: description is not provided', () => { + const $ = cheerio.load( + renderComponent('fieldset', { + ...EXAMPLE_FIELDSET, + description: undefined, + }), + ); + + test('THEN: fieldset renders without description', () => { + expect($('.ons-fieldset__description').length).toBe(0); + }); - it('has the correct `description` classes', () => { - const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true })); + test('THEN: legend does not have aria-describedby attribute', () => { + const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby'); + expect(ariaDescByVal).toBeUndefined(); + }); - expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true); - expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true); + test('THEN: legend does not have ons-fieldset__legend--with-description class', () => { + expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(false); + }); }); }); }); diff --git a/src/components/fieldset/_test_examples.js b/src/components/fieldset/_test_examples.js new file mode 100644 index 0000000000..eb4717f88d --- /dev/null +++ b/src/components/fieldset/_test_examples.js @@ -0,0 +1,10 @@ +export const EXAMPLE_FIELDSET = { + id: 'example-fieldset', + legend: 'Fieldset legend', + description: 'A fieldset description', +}; + +export const EXAMPLE_FIELDSET_NO_LEGEND = { + id: 'example-fieldset', + description: 'A fieldset description', +};