Test content.
'], - ), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the provided `id` attribute', () => { - const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); - - expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit'); - }); - - it('has the provided data attributes', () => { - const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); - - expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining'); - expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining'); - expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many'); - expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many'); +import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples'; + +describe('FOR: Macro: CharCheckLimit', () => { + describe('GIVEN: Params: Required', () => { + describe('WHEN: required params are provided', () => { + const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); + + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + + expect(results).toHaveNoViolations(); + }); + test('THEN: has the provided id attribute', () => { + expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit'); + }); + test('THEN: has the data attribute which defines charCountPlural', () => { + expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining'); + }); + test('THEN: has the data attribute which defines charCountSingular', () => { + expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining'); + }); + test('THEN: has the data attribute which defines charCountOverLimitSingular', () => { + expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many'); + }); + test('THEN: has the data attribute which defines charCountOverLimitPlural', () => { + expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many'); + }); + }); }); - it('has expected nested content', () => { - const $ = cheerio.load( - renderComponent( - 'char-check-limit', - { - ...EXAMPLE_CHAR_CHECK_LIMIT, - variant: 'check', - }, - ['Test content.
'], - ), - ); - - expect($('.ons-js-char-check-input').html().trim()).toBe('Test content.
'); + describe('GIVEN: Params: variant', () => { + describe('WHEN: variant is provided', () => { + const $ = cheerio.load( + renderComponent( + 'char-check-limit', + { + ...EXAMPLE_CHAR_CHECK_LIMIT, + variant: 'check', + }, + ['Test content.
'], + ), + ); + + test('THEN: passes jest-axe checks with variant set to check', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('THEN: renders the passed content', () => { + expect($('.ons-js-char-check-input').text()).toBe('Test content.'); + }); + }); }); }); diff --git a/src/components/char-check-limit/_test-examples.js b/src/components/char-check-limit/_test-examples.js new file mode 100644 index 0000000000..6a700b1cbb --- /dev/null +++ b/src/components/char-check-limit/_test-examples.js @@ -0,0 +1,7 @@ +export const EXAMPLE_CHAR_CHECK_LIMIT = { + id: 'example-char-check-limit', + charCountSingular: 'You have {x} character remaining', + charCountPlural: 'You have {x} characters remaining', + charCountOverLimitSingular: '{x} character too many', + charCountOverLimitPlural: '{x} characters too many', +}; diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index 324f027775..3a64f09971 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -21,3 +21,4 @@ | ----------- | ------ | -------- | ----------------------------------------------------- | | id | string | false | The HTML `id` for the description of the related term | | description | string | true | The value of the description of the related term | +| url | string | false | The url of the description of the related term | diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 329491b2c9..92e9890a1f 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -21,7 +21,13 @@ {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %} class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}" > - {{- descriptionItem.description -}} + {%- if descriptionItem.url -%} + + {{- descriptionItem.description -}} + + {%- else -%} + {{- descriptionItem.description -}} + {%- endif -%} {% endif %} {% endfor %} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index fa45111ceb..508a51cd6d 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -30,6 +30,7 @@ const EXAMPLE_DESCRIPTION_LIST_FULL = { { id: 'description-3', description: '49300005832', + url: '#', }, ], }, @@ -142,7 +143,9 @@ describe('macro: description-list', () => { expect($listElements[4].tagName).toBe('dd'); expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text()).toBe('49300005832'); + const $link = $($listElements[4]).find('a'); + expect($link.attr('href')).toBe('#'); + expect($link.text()).toBe('49300005832'); }); it.each([ diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk index e7114ffd1e..a43605286c 100644 --- a/src/components/description-list/example-inline-description-list.njk +++ b/src/components/description-list/example-inline-description-list.njk @@ -49,7 +49,8 @@ "description": "Jacky Turner" }, { - "description": "Louise Goodland" + "description": "Louise Goodland", + 'url': '#' } ] } diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 1af96d5c57..a345201bdc 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -4,381 +4,371 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; - -const EXAMPLE_DOCUMENT_LIST_BASIC = { - title: { - text: 'Crime and justice', - url: '#0', - }, - description: 'Some description', -}; - -const EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL = { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - thumbnail: { - smallSrc: '/example-small.png', - largeSrc: '/example-large.png', - }, -}; - -const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - file: { - fileType: 'PDF', - fileSize: '499KB', - filePages: '1 page', - }, - }, -}; - -const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - object: { - text: 'Poster', - url: '#0', - ref: 'some ref', - }, - }, -}; - -const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - id: 'some-id', - thumbnail: { - smallSrc: '/example-small.png', - largeSrc: '/example-large.png', - }, - metadata: { - object: { - text: 'Poster', - url: '#0', - ref: 'some ref', - }, - file: { - fileType: 'PDF', - fileSize: '499KB', - filePages: '1 page', - }, - date: { - iso: '2022-01-01', - short: '1 January 2022', - showPrefix: true, - prefix: 'Released', - }, - }, -}; - -describe('macro: document list', () => { - describe('global configuration', () => { - it('passes jest-axe checks', async () => { +import { + EXAMPLE_DOCUMENT_LIST_BASIC, + EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL, + EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE, + EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT, + EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE, + EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE, +} from './_test-examples'; + +describe('FOR: Macro: Document list', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: required parameters are provided within a document', () => { const $ = cheerio.load( renderComponent('document-list', { - id: 'some-id', documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], }), ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('THEN: renders the same number of documents items as the number passed in', () => { + expect($('.ons-document-list__item').length).toBe(3); + }); + test('THEN: has expected url for the title', () => { + expect($('.ons-document-list__item-title a').attr('href')).toBe('#0'); + }); }); + }); - it('has the provided `id` attribute', () => { - const $ = cheerio.load( - renderComponent('document-list', { - id: 'some-id', - documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], - }), - ); - - expect($('#some-id').length).toBe(1); + describe('GIVEN: Params: description', () => { + describe('WHEN: description is provided', () => { + test('THEN: has expected description', () => { + const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] })); + const title = $('.ons-document-list__item-description').html().trim(); + expect(title).toBe('Some description'); + }); }); + }); - it('has custom classes applied', () => { - const $ = cheerio.load( - renderComponent('document-list', { - classes: 'custom-class', - documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], - }), - ); - - expect($('.ons-document-list').hasClass('custom-class')).toBe(true); + describe('GIVEN: Params: id', () => { + describe('WHEN: id is provided', () => { + test('THEN: has the provided id attribute', () => { + const $ = cheerio.load( + renderComponent('document-list', { + id: 'some-id', + documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], + }), + ); + expect($('#some-id').length).toBe(1); + }); }); + }); - it('outputs the correct number of document items', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], - }), - ); + describe('GIVEN: Params: classes', () => { + describe('WHEN: additional style classes are provided', () => { + test('THEN: renders with additional classes provided', () => { + const $ = cheerio.load( + renderComponent('document-list', { + classes: 'custom-class', + documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], + }), + ); + expect($('.ons-document-list').hasClass('custom-class')).toBe(true); + }); + }); + describe('WHEN: addtional style classes are provided within document', () => { + test('THEN: renders with additional classes provided', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, classes: 'custom-class' }], + }), + ); + expect($('.ons-document-list__item').hasClass('custom-class')).toBe(true); + }); + }); + }); + describe('GIVEN: Params: attributes', () => { + describe('WHEN: attributes are provided', () => { + test('THEN: renders with provided HTML attributes', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_BASIC], + attributes: { + a: 123, + b: 456, + }, + }), + ); + expect($('.ons-document-list').attr('a')).toBe('123'); + expect($('.ons-document-list').attr('b')).toBe('456'); + }); + }); + describe('WHEN: attributes are provided within document', () => { + test('THEN: renders with provided HTML attributes', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [ + { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + attributes: { + a: 123, + b: 456, + }, + }, + ], + }), + ); + expect($('.ons-document-list__item').attr('a')).toBe('123'); + expect($('.ons-document-list__item').attr('b')).toBe('456'); + }); + }); + }); - expect($('.ons-document-list__item').length).toBe(3); + describe('GIVEN: Params: headingLevel', () => { + describe('WHEN: headingLevel is provided', () => { + test('THEN: the heading tag is set to the level provided', () => { + const $ = cheerio.load( + renderComponent('document-list', { + headingLevel: 1, + documents: [EXAMPLE_DOCUMENT_LIST_BASIC], + }), + ); + const headingLevel = $('.ons-document-list__item-title')[0].tagName; + expect(headingLevel).toBe('h1'); + }); }); + }); - it('has the correct container if `fullWidth`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], - }), - ); + describe('GIVEN: Params: featured', () => { + describe('WHEN: featured is set for a document', () => { + test('THEN: applies the featured class to the document item', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], + }), + ); - expect($('.ons-container').length).toBe(1); + expect($('.ons-document-list__item--featured').length).toBe(1); + }); }); + }); - it('has the correct container class if `fullWidth` and `wide`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], - }), - ); + describe('GIVEN: Params: fullWidth', () => { + describe('WHEN: fullWidth is set for a document', () => { + test('THEN: document item does not have the container class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }], + }), + ); - expect($('.ons-container--wide').length).toBe(1); + expect($('.ons-document-list__item > .ons-container').length).toBe(0); + }); }); - it('has the correct container class if `featured`', () => { + describe('WHEN: fullWidth is set for a featured document', () => { const $ = cheerio.load( renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], }), ); + test('THEN: applies full width class to document item', () => { + expect($('.ons-document-list__item--full-width').length).toBe(1); + }); - expect($('.ons-document-list__item--featured').length).toBe(1); + test('THEN: document item has the container class', () => { + expect($('.ons-document-list__item > .ons-container').length).toBe(1); + }); }); + }); - it('has the correct class for `showMetadataFirst`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, showMetadataFirst: true }], - }), - ); + describe('GIVEN: Params: wide', () => { + describe('WHEN: wide is set for a document', () => { + test('THEN: does not render with the wide container class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, wide: true }], + }), + ); - expect($('.ons-document-list__item-header--reverse').length).toBe(1); + expect($('.ons-container--wide').length).toBe(0); + }); }); - - it('overrides the heading title tag when `headingLevel` is provided', () => { + describe('WHEN: wide is set for a featured document with fullWidth', () => { const $ = cheerio.load( renderComponent('document-list', { - headingLevel: 1, - documents: [EXAMPLE_DOCUMENT_LIST_BASIC], + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], }), ); - const headingLevel = $('.ons-document-list__item-title')[0].tagName; - expect(headingLevel).toBe('h1'); - }); - - it('has expected `title`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] })); - const title = $('.ons-document-list__item-title a').html().trim(); - expect(title).toBe('Crime and justice'); - }); + test('THEN: applies the wide class to the container', () => { + expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); + }); - it('has expected `url` for the title', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] })); - expect($('.ons-document-list__item-title a').attr('href')).toBe('#0'); + test('THEN: document item has container--wide class', () => { + expect($('.ons-document-list__item > .ons-container--wide').length).toBe(1); + }); }); + }); - it('has expected `description`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] })); - const title = $('.ons-document-list__item-description').html().trim(); - expect(title).toBe('Some description'); + describe('GIVEN: Params: showMetadataFirst', () => { + describe('WHEN: showMetadataFirst is set for a document', () => { + test('THEN: applies the reverse class to document header to display the metadata before the title', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, showMetadataFirst: true }], + }), + ); + expect($('.ons-document-list__item-header--reverse').length).toBe(1); + }); }); }); - describe('mode: with thumbnail', () => { - it('passes jest-axe checks', async () => { + describe('GIVEN: Params: thumbnail', () => { + describe('WHEN: thumbnail is provided for a document', () => { const $ = cheerio.load( renderComponent('document-list', { - id: 'some-id', documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL], }), ); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has expected `srcset` attribute', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); - - const srcset = $('.ons-document-list__image-link img').attr('srcset'); - expect(srcset).toBe('/example-small.png 1x, /example-large.png 2x'); - }); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it('has expected `src` attribute', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); + test('THEN: has expected srcset attribute', () => { + const srcset = $('.ons-document-list__image-link img').attr('srcset'); + expect(srcset).toBe('/example-small.png 1x, /example-large.png 2x'); + }); - const src = $('.ons-document-list__image-link img').attr('src'); - expect(src).toBe('/example-small.png'); + test('THEN: has expected src attribute', () => { + const src = $('.ons-document-list__image-link img').attr('src'); + expect(src).toBe('/example-small.png'); + }); }); - it('has the placeholder class if `thumbnail` is true', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }], - }), - ); - - expect($('.ons-document-list__image-link').hasClass('ons-document-list__image-link--placeholder')).toBe(true); + describe('WHEN: thumbnail is not provided but is set to true', () => { + test('THEN: has a placeholder class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }], + }), + ); + expect($('.ons-document-list__image-link').hasClass('ons-document-list__image-link--placeholder')).toBe(true); + }); }); }); - describe('mode: with metadata `file` configuration', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], - }), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has visually hidden `file` information after the title', () => { + describe('GIVEN: Params: file', () => { + describe('WHEN: file configuration is provided within a document metadata', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], }), ); - const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim(); - expect(hiddenText).toBe(', PDF document download, 499KB, 1 page'); - }); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it('has `file` information displayed', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], - }), - ); + test('THEN: has visually hidden file information after the title', () => { + const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim(); + expect(hiddenText).toBe(', PDF document download, 499KB, 1 page'); + }); - const hiddenText = $('.ons-document-list__item-attribute').text().trim(); - expect(hiddenText).toBe('PDF, 499KB, 1 page'); + test('THEN: has file information', () => { + const fileInfo = $('.ons-document-list__item-attribute').text().trim(); + expect(fileInfo).toBe('PDF, 499KB, 1 page'); + }); }); }); - describe('mode: with metadata `object` configuration', () => { - it('passes jest-axe checks', async () => { + describe('GIVEN: Params: object', () => { + describe('WHEN: object configuration is provided within a document metadata', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], }), ); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the provided `url`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], - }), - ); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - const url = $('.ons-document-list__attribute-link').attr('href'); - expect(url).toBe('#0'); - }); + test('THEN: has the provided url', () => { + const url = $('.ons-document-list__attribute-link').attr('href'); + expect(url).toBe('#0'); + }); - it('has expected `text`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] })); - const text = $('.ons-document-list__attribute-link > span').text().trim(); - expect(text).toBe('Poster:'); - }); + test('THEN: has expected text', () => { + const text = $('.ons-document-list__attribute-link > span').text().trim(); + expect(text).toBe('Poster:'); + }); - it('has expected `ref`', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] })); - const text = $('.ons-document-list__attribute-link + span').text().trim(); - expect(text).toBe('some ref'); + test('THEN: has expected ref', () => { + const text = $('.ons-document-list__attribute-link + span').text().trim(); + expect(text).toBe('some ref'); + }); }); }); - describe('mode: with metadata `date` configuration', () => { - it('passes jest-axe checks', async () => { + describe('GIVEN: Params: date', () => { + describe('WHEN: date configuration is provided within a document metadata', () => { const $ = cheerio.load( renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], }), ); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it('has the default `prefix` text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); + test('THEN: has the default prefix text', () => { + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Published:'); + }); - const text = $('.ons-document-list__item-attribute > span').text().trim(); - expect(text).toBe('Published:'); - }); + test('THEN: has the visually hidden class for prefix text', () => { + expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(true); + }); - it('has the visually hidden class for `prefix` text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); - expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(true); + test('THEN: has the correct datetime attribute value', () => { + expect($('time').attr('datetime')).toBe('2022-01-01'); + }); + + test('THEN: has the correct time value', () => { + const time = $('.ons-document-list__item-attribute time').text().trim(); + expect(time).toBe('1 January 2022'); + }); }); + }); - it('has the provided `prefix` text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - prefix: 'Released', - iso: '2022-01-01', - short: '1 January 2022', + describe('GIVEN: Params: prefix', () => { + describe('WHEN: prefix is provided in the date metadata configuration for a document', () => { + test('THEN: has the provided prefix text', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [ + { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + date: { + prefix: 'Released', + iso: '2022-01-01', + short: '1 January 2022', + }, }, }, - }, - ], - }), - ); - - const text = $('.ons-document-list__item-attribute > span').text().trim(); - expect(text).toBe('Released:'); + ], + }), + ); + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Released:'); + }); }); + }); - it('has the correct class for `showPrefix`', () => { + describe('GIVEN: Params: showprefix', () => { + describe('WHEN: showprefix is set in the date metadata configuration for a document', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [ @@ -396,80 +386,41 @@ describe('macro: document list', () => { }), ); - expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-fw-b')).toBe(true); - }); - - it('has the correct datetime attribute value', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); - expect($('time').attr('datetime')).toBe('2022-01-01'); - }); + test('THEN: applies bold font class to the prefix text', () => { + expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-fw-b')).toBe(true); + }); - it('has the correct `time` value', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); + test('THEN: does not has the visually hidden class for prefix text', () => { + expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(false); + }); - const time = $('.ons-document-list__item-attribute time').text().trim(); - expect(time).toBe('1 January 2022'); + test('THEN: has the default prefix text', () => { + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Published:'); + }); }); }); - describe('mode: with all parameters', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], - }), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the correct document thumbnail class', async () => { + describe('GIVEN: Params: metadata', () => { + describe('WHEN: when document has metadata with all available configurations', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], }), ); - expect($('.ons-document-list__item-image').hasClass('ons-document-list__item-image--file')).toBe(true); - }); + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); - it('has the correct document list class', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], - }), - ); + test('THEN: has the correct document thumbnail class', async () => { + expect($('.ons-document-list__item-image').hasClass('ons-document-list__item-image--file')).toBe(true); + }); - expect($('.ons-document-list__item-attribute').hasClass('ons-u-mr-no')).toBe(true); + test('THEN: the document list object item has the utility class that removes the margin between the object and file list items', async () => { + expect($('.ons-document-list__item-attribute').hasClass('ons-u-mr-no')).toBe(true); + }); }); }); }); diff --git a/src/components/document-list/_test-examples.js b/src/components/document-list/_test-examples.js new file mode 100644 index 0000000000..b559d24731 --- /dev/null +++ b/src/components/document-list/_test-examples.js @@ -0,0 +1,74 @@ +export const EXAMPLE_DOCUMENT_LIST_BASIC = { + title: { + text: 'Crime and justice', + url: '#0', + }, + description: 'Some description', +}; + +export const EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL = { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + thumbnail: { + smallSrc: '/example-small.png', + largeSrc: '/example-large.png', + }, +}; + +export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + file: { + fileType: 'PDF', + fileSize: '499KB', + filePages: '1 page', + }, + }, +}; + +export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + object: { + text: 'Poster', + url: '#0', + ref: 'some ref', + }, + }, +}; + +export const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE = { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + date: { + iso: '2022-01-01', + short: '1 January 2022', + }, + }, +}; + +export const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + id: 'some-id', + thumbnail: { + smallSrc: '/example-small.png', + largeSrc: '/example-large.png', + }, + metadata: { + object: { + text: 'Poster', + url: '#0', + ref: 'some ref', + }, + file: { + fileType: 'PDF', + fileSize: '499KB', + filePages: '1 page', + }, + date: { + iso: '2022-01-01', + short: '1 January 2022', + showPrefix: true, + prefix: 'Released', + }, + }, +}; diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md index 76837cfafd..b1cf9c4c18 100644 --- a/src/components/header/_macro-options.md +++ b/src/components/header/_macro-options.md @@ -1,22 +1,22 @@ -| Name | Type | Required | Description | -| --------------------- | ------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| phase | `PhaseBanner` [_(ref)_](/components/phase-banner) | false | Settings to set the Phase banner component within the HTML `