diff --git a/src/components/accordion/_macro.spec.js b/src/components/accordion/_macro.spec.js index b9629a4ca2..5d10cc1887 100644 --- a/src/components/accordion/_macro.spec.js +++ b/src/components/accordion/_macro.spec.js @@ -4,64 +4,82 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; - -const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = { - id: 'accordion-identifier', - itemsList: [ - { - title: 'Title for item 1', - content: 'Content for item 1', - }, - { - title: 'Title for item 2', - content: 'Content for item 2', - }, - ], -}; - -const EXAMPLE_ACCORDION = { - ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS, - allButton: { - open: 'Open label', - close: 'Close label', - }, -}; - -describe('macro: accordion', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); +import { EXAMPLE_ACCORDION } from './_test_examples'; + +describe('FOR: Macro: Accordion', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: all required params are provided', () => { + const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION)); + 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('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS)); - - expect($('.ons-accordion').attr('id')).toBe('accordion-identifier'); + describe('GIVEN: Params: required and allButton', () => { + describe('WHEN: required and allButton params are provided', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + allButton: { + open: 'Open label', + close: 'Close label', + }, + }), + ); + test('THEN: jest-axe checks pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - - it('has additionally provided style classes', () => { - const $ = cheerio.load( - renderComponent('accordion', { - ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS, - classes: 'extra-class another-extra-class', - }), - ); - - expect($('.ons-accordion').hasClass('extra-class')).toBe(true); - expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true); + describe('GIVEN: Params: id', () => { + describe('WHEN: id is provided', () => { + const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION)); + test('THEN: renders with provided id', () => { + expect($('.ons-accordion').attr('id')).toBe('accordion-identifier'); + }); + }); }); - - describe('item', () => { - it('has provided title text', () => { - const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS)); - - const titleText = $('.ons-details__title').first().text().trim(); - expect(titleText).toBe('Title for item 1'); + describe('GIVEN: Params: classes', () => { + describe('WHEN: additional style classes are provided', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + classes: 'extra-class another-extra-class', + }), + ); + test('THEN: renders with provided classes', () => { + expect($('.ons-accordion').hasClass('extra-class')).toBe(true); + expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true); + }); }); - - it('has title with provided tag override', () => { + }); + describe('GIVEN: Params: itemsList: AccordionItem', () => { + describe('WHEN: title is provided', () => { + const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION)); + test('THEN: renders title with provided text', () => { + const titleText = $('.ons-details__title').first().text().trim(); + expect(titleText).toBe('Title for item 1'); + }); + }); + describe('WHEN: titleTag is not provided', () => { + const $ = cheerio.load( + renderComponent('accordion', { + itemsList: [ + { + title: 'Title for item 1', + content: 'Content for item 1', + }, + ], + }), + ); + test('THEN: item title renders with default heading tag', () => { + const titleTag = $('.ons-details__title')[0].tagName; + expect(titleTag).toBe('h2'); + }); + }); + describe('WHEN: titleTag is provided', () => { const $ = cheerio.load( renderComponent('accordion', { itemsList: [ @@ -73,19 +91,19 @@ describe('macro: accordion', () => { ], }), ); - - const titleTag = $('.ons-details__title')[0].tagName; - expect(titleTag).toBe('h5'); + test('THEN: item title renders with provided heading tag', () => { + const titleTag = $('.ons-details__title')[0].tagName; + expect(titleTag).toBe('h5'); + }); }); - - it('has provided content text', () => { - const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS)); - - const titleText = $('.ons-details__content').first().text().trim(); - expect(titleText).toBe('Content for item 1'); + describe('WHEN: content is provided', () => { + const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION)); + test('THEN: item content renders with provided text', () => { + const titleText = $('.ons-details__content').first().text().trim(); + expect(titleText).toBe('Content for item 1'); + }); }); - - it('has additionally provided `attributes`', () => { + describe('WHEN: attributes are provided', () => { const $ = cheerio.load( renderComponent('accordion', { itemsList: [ @@ -99,12 +117,12 @@ describe('macro: accordion', () => { ], }), ); - - expect($('.ons-details').attr('a')).toBe('123'); - expect($('.ons-details').attr('b')).toBe('456'); + test('THEN: item renders with provided HTML attributes', () => { + expect($('.ons-details').attr('a')).toBe('123'); + expect($('.ons-details').attr('b')).toBe('456'); + }); }); - - it('has additionally provided `headingAttributes`', () => { + describe('WHEN: headingAttributes are provided', () => { const $ = cheerio.load( renderComponent('accordion', { itemsList: [ @@ -118,12 +136,12 @@ describe('macro: accordion', () => { ], }), ); - - expect($('.ons-details__heading').attr('a')).toBe('123'); - expect($('.ons-details__heading').attr('b')).toBe('456'); + test('THEN: item header renders with provided HTML attributes', () => { + expect($('.ons-details__heading').attr('a')).toBe('123'); + expect($('.ons-details__heading').attr('b')).toBe('456'); + }); }); - - it('has additionally provided `contentAttributes`', () => { + describe('WHEN: contentAttributes are provided', () => { const $ = cheerio.load( renderComponent('accordion', { itemsList: [ @@ -138,31 +156,37 @@ describe('macro: accordion', () => { ], }), ); - - expect($('.ons-details__content').attr('a')).toBe('123'); - expect($('.ons-details__content').attr('b')).toBe('456'); + test('THEN: item content renders with provided HTML attributes', () => { + expect($('.ons-details__content').attr('a')).toBe('123'); + expect($('.ons-details__content').attr('b')).toBe('456'); + }); }); }); - - describe('toggle all button', () => { - it('outputs a button with the expected class', () => { + describe('GIVEN: Params: allButton: AccordionButton', () => { + describe('WHEN: required open/close params are provided', () => { const $ = cheerio.load( renderComponent('accordion', { - ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS, + ...EXAMPLE_ACCORDION, allButton: { open: 'Open label', close: 'Close label', }, }), ); - - expect($('button.ons-accordion__toggle-all').length).toBe(1); + test('THEN: renders button with expected class', () => { + expect($('button.ons-accordion__toggle-all').length).toBe(1); + }); + test('THEN: renders button with provided open text', () => { + expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label'); + }); + test('THEN: renders button with provided close text', () => { + expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label'); + }); }); - - it('has additionally provided `attributes`', () => { + describe('WHEN: attributes are provided', () => { const $ = cheerio.load( renderComponent('accordion', { - ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS, + ...EXAMPLE_ACCORDION, allButton: { open: 'Open label', close: 'Close label', @@ -173,9 +197,56 @@ describe('macro: accordion', () => { }, }), ); - - expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123'); - expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456'); + test('THEN: renders button with additional attributes provided', () => { + expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123'); + expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456'); + }); + }); + }); + describe('GIVEN: Params: saveState', () => { + describe('WHEN: saveState param is not provided', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + }), + ); + test('THEN: renders without saveState attribute', () => { + expect($('.ons-details--accordion').attr('saveState')).toBe(undefined); + }); + }); + describe('WHEN: saveState param is set to true', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + saveState: true, + }), + ); + test('THEN: renders with saveState attribute', () => { + expect($('.ons-details--accordion').attr('saveState')); + }); + }); + }); + describe('GIVEN: Params: open', () => { + describe('WHEN: open param is not provided', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + }), + ); + test('THEN: renders with accordion items closed on page load', () => { + expect($('.ons-details--accordion').attr('open')).toBe(undefined); + }); + }); + describe('WHEN: open param is set to true', () => { + const $ = cheerio.load( + renderComponent('accordion', { + ...EXAMPLE_ACCORDION, + open: true, + }), + ); + test('THEN: renders with accordion items open on page load', () => { + expect($('.ons-details--accordion').attr('open')); + }); }); }); }); diff --git a/src/components/accordion/_test_examples.js b/src/components/accordion/_test_examples.js new file mode 100644 index 0000000000..6482a1e431 --- /dev/null +++ b/src/components/accordion/_test_examples.js @@ -0,0 +1,13 @@ +export const EXAMPLE_ACCORDION = { + id: 'accordion-identifier', + itemsList: [ + { + title: 'Title for item 1', + content: 'Content for item 1', + }, + { + title: 'Title for item 2', + content: 'Content for item 2', + }, + ], +};