From 2956142129bb3086878d33c7668fd6f17dc3c1fe Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Mon, 20 Jan 2025 11:49:42 +0000 Subject: [PATCH] Refactor Document list test file to new format (#3446) Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 645 ++++++++---------- .../document-list/_test-examples.js | 74 ++ 2 files changed, 372 insertions(+), 347 deletions(-) create mode 100644 src/components/document-list/_test-examples.js 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', + }, + }, +};