From b3a2f64e1dcd326b6e8640a4d4926356d7682b7f Mon Sep 17 00:00:00 2001 From: SriHV Date: Tue, 3 Dec 2024 12:34:10 +0000 Subject: [PATCH 01/14] refactored tests for document list --- src/components/document-list/_macro.spec.js | 797 ++++++++---------- .../document-list/_test-examples.js | 74 ++ 2 files changed, 448 insertions(+), 423 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..1fade4323b 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -4,472 +4,423 @@ 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 () => { - 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(); - }); - - 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); - }); - - 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); - }); - - 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], - }), - ); - - expect($('.ons-document-list__item').length).toBe(3); - }); - - it('has the correct container if `fullWidth`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], - }), - ); - - expect($('.ons-container').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 }], - }), - ); - - expect($('.ons-container--wide').length).toBe(1); - }); - - it('has the correct container class if `featured`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], - }), - ); - - expect($('.ons-document-list__item--featured').length).toBe(1); - }); - - it('has the correct class for `showMetadataFirst`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, showMetadataFirst: true }], - }), - ); - - expect($('.ons-document-list__item-header--reverse').length).toBe(1); - }); - - it('overrides the heading title tag when `headingLevel` is 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 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'); - }); - - 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'); - }); - - 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'); +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: basic', () => { + describe('WHEN: basic parameters are provided within a document', () => { + test('passes jest-axe checks', async () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], + }), + ); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('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], + }), + ); + + expect($('.ons-document-list__item').length).toBe(3); + }); + test('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('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('mode: with thumbnail', () => { - it('passes jest-axe checks', async () => { - 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'); - }); - - it('has expected `src` attribute', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); - - 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('GIVEN: Params: id', () => { + describe('WHEN: id is provied', () => { + test('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('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', () => { - 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'); + describe('GIVEN: Params: custom-class', () => { + describe('WHEN: custom class is provided', () => { + test('applies the right custom classes', () => { + 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); + }); }); + }); - it('has `file` information displayed', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], - }), - ); + describe('GIVEN: Params: featured', () => { + describe('WHEN: featured is set for a document', () => { + test('has the correct container class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], + }), + ); - const hiddenText = $('.ons-document-list__item-attribute').text().trim(); - expect(hiddenText).toBe('PDF, 499KB, 1 page'); + expect($('.ons-document-list__item--featured').length).toBe(1); + }); }); }); - describe('mode: with metadata `object` configuration', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], - }), - ); + describe('GIVEN: Params: fullWidth', () => { + describe('WHEN: fullWidth is set for a document with basic parameters', () => { + test('does not apply container class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }], + }), + ); - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + expect($('.ons-container').length).toBe(0); + }); }); - it('has the provided `url`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], - }), - ); + describe('WHEN: fullWidth is set for a featured document', () => { + test('has the correct containers class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], + }), + ); - const url = $('.ons-document-list__attribute-link').attr('href'); - expect(url).toBe('#0'); + expect($('.ons-container').length).toBe(1); + }); }); + }); - 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:'); + describe('GIVEN: Params: wide', () => { + describe('WHEN: wide is set for a document with basic parameters', () => { + test('does not apply container class ', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, wide: true }], + }), + ); + + expect($('.ons-container--wide').length).toBe(0); + }); + }); + describe('WHEN: wide is set for a featured document with fullWidth', () => { + test('has the correct container class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], + }), + ); + + expect($('.ons-container--wide').length).toBe(1); + }); }); + }); - 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'); + describe('GIVEN: Params: showMetadataFirst', () => { + describe('WHEN: showMetadataFirst is set for a document', () => { + test('has the correct class', () => { + 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 metadata `date` configuration', () => { - it('passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + describe('GIVEN: Params: headingLevel', () => { + describe('WHEN: headingLevel is provided', () => { + test('overrides the heading title tag', () => { + 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 default `prefix` text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); - - const text = $('.ons-document-list__item-attribute > span').text().trim(); - expect(text).toBe('Published:'); + describe('GIVEN: Params: thumbnail', () => { + describe('WHEN: thumbnail is provided for a document', () => { + test('passes jest-axe checks', async () => { + const $ = cheerio.load( + renderComponent('document-list', { + id: 'some-id', + documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL], + }), + ); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('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('has expected src attribute', () => { + const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); + + const src = $('.ons-document-list__image-link img').attr('src'); + expect(src).toBe('/example-small.png'); + }); + + test('has the right 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); + }); }); + }); - 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); + describe('GIVEN: Params: file', () => { + describe('WHEN: file configuration is provided within a document metadata', () => { + test('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(); + }); + + test('has visually hidden file information after the title', () => { + 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('has file information displayed', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], + }), + ); + + const hiddenText = $('.ons-document-list__item-attribute').text().trim(); + expect(hiddenText).toBe('PDF, 499KB, 1 page'); + }); }); + }); - 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', - }, - }, - }, - ], - }), - ); - - const text = $('.ons-document-list__item-attribute > span').text().trim(); - expect(text).toBe('Released:'); + describe('GIVEN: Params: object', () => { + describe('WHEN: object configuration is provided within a document metadata', () => { + test('passes jest-axe checks', async () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], + }), + ); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('has the provided url', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], + }), + ); + + const url = $('.ons-document-list__attribute-link').attr('href'); + expect(url).toBe('#0'); + }); + + test('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('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'); + }); }); + }); - it('has the correct class for `showPrefix`', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - showPrefix: true, - iso: '2022-01-01', - short: '1 January 2022', - }, - }, - }, - ], - }), - ); - - expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-fw-b')).toBe(true); + describe('GIVEN: Params: date', () => { + describe('WHEN: date configuration is provided within a document metadata', () => { + test('passes jest-axe checks', async () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('has the default prefix text', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Published:'); + }); + + test('has the visually hidden class for prefix text', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(true); + }); + + test('has the correct datetime attribute value', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + expect($('time').attr('datetime')).toBe('2022-01-01'); + }); + + test('has the correct time value', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + + const time = $('.ons-document-list__item-attribute time').text().trim(); + expect(time).toBe('1 January 2022'); + }); }); + }); - 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', + describe('GIVEN: Params: prefix', () => { + describe('WHEN: prefix is provided in the date metadata configuration for a document', () => { + test('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', + }, }, }, - }, - ], - }), - ); - expect($('time').attr('datetime')).toBe('2022-01-01'); + ], + }), + ); + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Released:'); + }); }); + }); - 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', + describe('GIVEN: Params: showprefix', () => { + describe('WHEN: showprefix is set in the date metadata configuration for a document', () => { + test('has the correct class', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [ + { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + date: { + showPrefix: true, + iso: '2022-01-01', + short: '1 January 2022', + }, }, }, - }, - ], - }), - ); + ], + }), + ); - const time = $('.ons-document-list__item-attribute time').text().trim(); - expect(time).toBe('1 January 2022'); + expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-fw-b')).toBe(true); + }); }); }); - 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 () => { - 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); - }); - - it('has the correct document list class', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], - }), - ); - - expect($('.ons-document-list__item-attribute').hasClass('ons-u-mr-no')).toBe(true); + describe('GIVEN: Params: multiple', () => { + describe('WHEN: when multiple configurations are provided in the document metadata', () => { + test('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(); + }); + + test('has the correct document thumbnail class', async () => { + 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('has the correct document list class', async () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], + }), + ); + + 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', + }, + }, +}; From e01e2669cfb31c97cd007c379f7d116e7a335ac7 Mon Sep 17 00:00:00 2001 From: SriHV Date: Tue, 3 Dec 2024 12:42:06 +0000 Subject: [PATCH 02/14] removed quotes --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 1fade4323b..5929c10850 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -51,7 +51,7 @@ describe('FOR: Macro: document list', () => { describe('GIVEN: Params: id', () => { describe('WHEN: id is provied', () => { - test('has the provided `id` attribute', () => { + test('has the provided id attribute', () => { const $ = cheerio.load( renderComponent('document-list', { id: 'some-id', From 8778bbe3b3fa86835bb026eb046578c11d60d0f8 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:11:35 +0000 Subject: [PATCH 03/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 5929c10850..3e117ffb4a 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -13,7 +13,7 @@ import { EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE, } from './_test-examples'; -describe('FOR: Macro: document list', () => { +describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: basic', () => { describe('WHEN: basic parameters are provided within a document', () => { test('passes jest-axe checks', async () => { From 4d6000135eda5078cbeda2f0ed8da3d76be988c0 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:11:44 +0000 Subject: [PATCH 04/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 3e117ffb4a..72c36f427f 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -105,7 +105,7 @@ describe('FOR: Macro: Document list', () => { }); describe('WHEN: fullWidth is set for a featured document', () => { - test('has the correct containers class', () => { + test('THEN: renders with the container class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], From 5fd828c1e8d4778a92a39e29d5610de40a32c50b Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:11:53 +0000 Subject: [PATCH 05/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 72c36f427f..a108391984 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -119,7 +119,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: wide', () => { describe('WHEN: wide is set for a document with basic parameters', () => { - test('does not apply container class ', () => { + test('THEN: does not render with the wide container class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, wide: true }], From 3becbf4ed9f1879b0373a961d21fc2517a81cd94 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 4 Dec 2024 15:12:04 +0000 Subject: [PATCH 06/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index a108391984..ac01cad534 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -130,7 +130,7 @@ describe('FOR: Macro: Document list', () => { }); }); describe('WHEN: wide is set for a featured document with fullWidth', () => { - test('has the correct container class', () => { + test('THEN: renders with the wide container class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], From 524b843b53323f4bed150f9a5ec899e8b8bfab2c Mon Sep 17 00:00:00 2001 From: SriHV Date: Wed, 4 Dec 2024 15:35:48 +0000 Subject: [PATCH 07/14] changes as per comments --- src/components/document-list/_macro.spec.js | 66 ++++++++++----------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index ac01cad534..1bc7e17ce8 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -14,9 +14,9 @@ import { } from './_test-examples'; describe('FOR: Macro: Document list', () => { - describe('GIVEN: Params: basic', () => { - describe('WHEN: basic parameters are provided within a document', () => { - test('passes jest-axe checks', async () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: required parameters are provided within a document', () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], @@ -27,7 +27,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('outputs the correct number of document items', () => { + test('THEN: outputs three document items', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], @@ -36,12 +36,12 @@ describe('FOR: Macro: Document list', () => { expect($('.ons-document-list__item').length).toBe(3); }); - test('has expected url for the title', () => { + test('THEN: 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('has expected description', () => { + 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'); @@ -51,7 +51,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: id', () => { describe('WHEN: id is provied', () => { - test('has the provided id attribute', () => { + test('THEN: has the provided id attribute', () => { const $ = cheerio.load( renderComponent('document-list', { id: 'some-id', @@ -65,7 +65,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: custom-class', () => { describe('WHEN: custom class is provided', () => { - test('applies the right custom classes', () => { + test('THEN: applies the right custom classes', () => { const $ = cheerio.load( renderComponent('document-list', { classes: 'custom-class', @@ -79,7 +79,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: featured', () => { describe('WHEN: featured is set for a document', () => { - test('has the correct container class', () => { + test('THEN: has the ons-document-list__item--featured class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], @@ -93,7 +93,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: fullWidth', () => { describe('WHEN: fullWidth is set for a document with basic parameters', () => { - test('does not apply container class', () => { + test('THEN: does not apply container class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }], @@ -144,7 +144,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: showMetadataFirst', () => { describe('WHEN: showMetadataFirst is set for a document', () => { - test('has the correct class', () => { + test('THEN: has the document-list__item-header--reverse class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, showMetadataFirst: true }], @@ -157,7 +157,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: headingLevel', () => { describe('WHEN: headingLevel is provided', () => { - test('overrides the heading title tag', () => { + test('THEN: overrides the heading title tag', () => { const $ = cheerio.load( renderComponent('document-list', { headingLevel: 1, @@ -172,7 +172,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: thumbnail', () => { describe('WHEN: thumbnail is provided for a document', () => { - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { id: 'some-id', @@ -184,21 +184,21 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('has expected srcset attribute', () => { + test('THEN: 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('has expected src attribute', () => { + test('THEN: has expected src attribute', () => { const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); const src = $('.ons-document-list__image-link img').attr('src'); expect(src).toBe('/example-small.png'); }); - test('has the right placeholder class', () => { + test('THEN: has the right placeholder class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }], @@ -211,7 +211,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: file', () => { describe('WHEN: file configuration is provided within a document metadata', () => { - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], @@ -222,7 +222,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('has visually hidden file information after the title', () => { + test('THEN: has visually hidden file information after the title', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], @@ -233,7 +233,7 @@ describe('FOR: Macro: Document list', () => { expect(hiddenText).toBe(', PDF document download, 499KB, 1 page'); }); - test('has file information displayed', () => { + test('THEN: has file information displayed', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], @@ -248,7 +248,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: object', () => { describe('WHEN: object configuration is provided within a document metadata', () => { - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], @@ -259,7 +259,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('has the provided url', () => { + test('THEN: has the provided url', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], @@ -270,13 +270,13 @@ describe('FOR: Macro: Document list', () => { expect(url).toBe('#0'); }); - test('has expected text', () => { + test('THEN: 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('has expected ref', () => { + test('THEN: 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'); @@ -286,7 +286,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: date', () => { describe('WHEN: date configuration is provided within a document metadata', () => { - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], @@ -297,7 +297,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('has the default prefix text', () => { + test('THEN: has the default prefix text', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], @@ -308,7 +308,7 @@ describe('FOR: Macro: Document list', () => { expect(text).toBe('Published:'); }); - test('has the visually hidden class for prefix text', () => { + test('THEN: has the visually hidden class for prefix text', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], @@ -317,7 +317,7 @@ describe('FOR: Macro: Document list', () => { expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(true); }); - test('has the correct datetime attribute value', () => { + test('THEN: has the correct datetime attribute value', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], @@ -326,7 +326,7 @@ describe('FOR: Macro: Document list', () => { expect($('time').attr('datetime')).toBe('2022-01-01'); }); - test('has the correct time value', () => { + test('THEN: has the correct time value', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], @@ -341,7 +341,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: prefix', () => { describe('WHEN: prefix is provided in the date metadata configuration for a document', () => { - test('has the provided prefix text', () => { + test('THEN: has the provided prefix text', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [ @@ -366,7 +366,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: showprefix', () => { describe('WHEN: showprefix is set in the date metadata configuration for a document', () => { - test('has the correct class', () => { + test('THEN: has the correct class', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [ @@ -391,7 +391,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: multiple', () => { describe('WHEN: when multiple configurations are provided in the document metadata', () => { - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], @@ -402,7 +402,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('has the correct document thumbnail class', async () => { + test('THEN: has the correct document thumbnail class', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], @@ -412,7 +412,7 @@ describe('FOR: Macro: Document list', () => { expect($('.ons-document-list__item-image').hasClass('ons-document-list__item-image--file')).toBe(true); }); - test('has the correct document list class', async () => { + test('THEN: has the correct document list class', async () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], From 19049c6e475388e85c65c1f9dec95e9bb52da61c Mon Sep 17 00:00:00 2001 From: SriHV Date: Wed, 4 Dec 2024 15:41:43 +0000 Subject: [PATCH 08/14] changes as per comments --- src/components/document-list/_macro.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 1bc7e17ce8..b7cbe1e2ef 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -79,7 +79,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: featured', () => { describe('WHEN: featured is set for a document', () => { - test('THEN: has the ons-document-list__item--featured class', () => { + test('THEN: applies the featured class to the document item', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true }], @@ -144,7 +144,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: showMetadataFirst', () => { describe('WHEN: showMetadataFirst is set for a document', () => { - test('THEN: has the document-list__item-header--reverse class', () => { + test('THEN: applies the reverse class to document header', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, showMetadataFirst: true }], From cf285f9812e583f469f2c361456f7a29ca70b049 Mon Sep 17 00:00:00 2001 From: SriHV Date: Thu, 5 Dec 2024 13:58:05 +0000 Subject: [PATCH 09/14] changes as per comments --- src/components/document-list/_macro.spec.js | 144 ++++++-------------- 1 file changed, 40 insertions(+), 104 deletions(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index b7cbe1e2ef..6df20d98c6 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -16,31 +16,26 @@ import { describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: required', () => { describe('WHEN: required parameters are provided within a document', () => { + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], + }), + ); test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], - }), - ); - const results = await axe($.html()); expect(results).toHaveNoViolations(); }); test('THEN: outputs three document items', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC, EXAMPLE_DOCUMENT_LIST_BASIC], - }), - ); - expect($('.ons-document-list__item').length).toBe(3); }); test('THEN: 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'); }); - + }); + }); + 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(); @@ -172,28 +167,23 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: thumbnail', () => { describe('WHEN: thumbnail is provided for a document', () => { - test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - id: 'some-id', - documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL], + }), + ); + test('THEN: passes jest-axe checks', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); test('THEN: 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: has expected src attribute', () => { - const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_THUMBNAIL] })); - const src = $('.ons-document-list__image-link img').attr('src'); expect(src).toBe('/example-small.png'); }); @@ -211,35 +201,23 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: file', () => { describe('WHEN: file configuration is provided within a document metadata', () => { - test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], + }), + ); + test('THEN: passes jest-axe checks', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); test('THEN: has visually hidden file information after the title', () => { - 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: has file information displayed', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE], - }), - ); - const hiddenText = $('.ons-document-list__item-attribute').text().trim(); expect(hiddenText).toBe('PDF, 499KB, 1 page'); }); @@ -248,36 +226,28 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: object', () => { describe('WHEN: object configuration is provided within a document metadata', () => { - test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], - }), - ); + 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(); }); test('THEN: has the provided url', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT], - }), - ); - const url = $('.ons-document-list__attribute-link').attr('href'); expect(url).toBe('#0'); }); test('THEN: 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 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'); }); @@ -286,53 +256,31 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: date', () => { describe('WHEN: date configuration is provided within a document metadata', () => { - test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], + }), + ); + test('THEN: passes jest-axe checks', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); test('THEN: has the default prefix text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], - }), - ); - const text = $('.ons-document-list__item-attribute > span').text().trim(); expect(text).toBe('Published:'); }); test('THEN: has the visually hidden class for prefix text', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], - }), - ); expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-vh')).toBe(true); }); test('THEN: has the correct datetime attribute value', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], - }), - ); expect($('time').attr('datetime')).toBe('2022-01-01'); }); test('THEN: has the correct time value', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_DATE], - }), - ); - const time = $('.ons-document-list__item-attribute time').text().trim(); expect(time).toBe('1 January 2022'); }); @@ -366,7 +314,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: showprefix', () => { describe('WHEN: showprefix is set in the date metadata configuration for a document', () => { - test('THEN: has the correct class', () => { + test('THEN: applies the prefix class to the document item', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [ @@ -391,34 +339,22 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: multiple', () => { describe('WHEN: when multiple configurations are provided in the document metadata', () => { - test('THEN: passes jest-axe checks', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], + }), + ); + test('THEN: passes jest-axe checks', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); test('THEN: has the correct document thumbnail class', async () => { - 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: has the correct document list class', async () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], - }), - ); - expect($('.ons-document-list__item-attribute').hasClass('ons-u-mr-no')).toBe(true); }); }); From 10ce615ad5824a4743964618737d755a30197523 Mon Sep 17 00:00:00 2001 From: SriHV Date: Mon, 9 Dec 2024 11:47:28 +0000 Subject: [PATCH 10/14] changes as per comments --- src/components/document-list/_macro.spec.js | 101 ++++++++++++-------- 1 file changed, 59 insertions(+), 42 deletions(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 6df20d98c6..7b87d05ed9 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -26,7 +26,7 @@ describe('FOR: Macro: Document list', () => { expect(results).toHaveNoViolations(); }); - test('THEN: outputs three document items', () => { + 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', () => { @@ -58,9 +58,9 @@ describe('FOR: Macro: Document list', () => { }); }); - describe('GIVEN: Params: custom-class', () => { - describe('WHEN: custom class is provided', () => { - test('THEN: applies the right custom classes', () => { + 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', @@ -87,33 +87,36 @@ describe('FOR: Macro: Document list', () => { }); describe('GIVEN: Params: fullWidth', () => { - describe('WHEN: fullWidth is set for a document with basic parameters', () => { - test('THEN: does not apply container class', () => { + 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').length).toBe(0); + expect($('.ons-document-list__item > .ons-container').length).toBe(0); }); }); describe('WHEN: fullWidth is set for a featured document', () => { - test('THEN: renders with the container class', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + 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-container').length).toBe(1); + test('THEN: document item has the container class', () => { + expect($('.ons-document-list__item > .ons-container').length).toBe(1); }); }); }); describe('GIVEN: Params: wide', () => { - describe('WHEN: wide is set for a document with basic parameters', () => { + describe('WHEN: wide is set for a document', () => { test('THEN: does not render with the wide container class', () => { const $ = cheerio.load( renderComponent('document-list', { @@ -125,21 +128,24 @@ describe('FOR: Macro: Document list', () => { }); }); describe('WHEN: wide is set for a featured document with fullWidth', () => { - test('THEN: renders with the wide container class', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], - }), - ); + const $ = cheerio.load( + renderComponent('document-list', { + documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }], + }), + ); + test('THEN: applies the wide class to the container', () => { + expect($('.ons-container').hasClass('ons-container--wide')).toBe(true); + }); - expect($('.ons-container--wide').length).toBe(1); + test('THEN: document item has container--wide class', () => { + expect($('.ons-document-list__item > .ons-container--wide').length).toBe(1); }); }); }); describe('GIVEN: Params: showMetadataFirst', () => { describe('WHEN: showMetadataFirst is set for a document', () => { - test('THEN: applies the reverse class to document header', () => { + 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 }], @@ -152,7 +158,7 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: headingLevel', () => { describe('WHEN: headingLevel is provided', () => { - test('THEN: overrides the heading title tag', () => { + test('THEN: the heading tag is set to the level provided', () => { const $ = cheerio.load( renderComponent('document-list', { headingLevel: 1, @@ -187,8 +193,10 @@ describe('FOR: Macro: Document list', () => { const src = $('.ons-document-list__image-link img').attr('src'); expect(src).toBe('/example-small.png'); }); + }); - test('THEN: has the right placeholder class', () => { + 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 }], @@ -217,7 +225,7 @@ describe('FOR: Macro: Document list', () => { expect(hiddenText).toBe(', PDF document download, 499KB, 1 page'); }); - test('THEN: has file information displayed', () => { + test('THEN: has hidden text', () => { const hiddenText = $('.ons-document-list__item-attribute').text().trim(); expect(hiddenText).toBe('PDF, 499KB, 1 page'); }); @@ -314,30 +322,39 @@ describe('FOR: Macro: Document list', () => { describe('GIVEN: Params: showprefix', () => { describe('WHEN: showprefix is set in the date metadata configuration for a document', () => { - test('THEN: applies the prefix class to the document item', () => { - const $ = cheerio.load( - renderComponent('document-list', { - documents: [ - { - ...EXAMPLE_DOCUMENT_LIST_BASIC, - metadata: { - date: { - showPrefix: true, - iso: '2022-01-01', - short: '1 January 2022', - }, + const $ = cheerio.load( + renderComponent('document-list', { + documents: [ + { + ...EXAMPLE_DOCUMENT_LIST_BASIC, + metadata: { + date: { + showPrefix: true, + iso: '2022-01-01', + short: '1 January 2022', }, }, - ], - }), - ); + }, + ], + }), + ); + test('THEN: applies bold font class to the prefix text', () => { expect($('.ons-document-list__item-attribute > span').hasClass('ons-u-fw-b')).toBe(true); }); + + 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); + }); + + test('THEN: has the default prefix text', () => { + const text = $('.ons-document-list__item-attribute > span').text().trim(); + expect(text).toBe('Published:'); + }); }); }); - describe('GIVEN: Params: multiple', () => { + describe('GIVEN: Params: metadata', () => { describe('WHEN: when multiple configurations are provided in the document metadata', () => { const $ = cheerio.load( renderComponent('document-list', { From d571d4759bde028e731ebad1be10188bc845d048 Mon Sep 17 00:00:00 2001 From: SriHV Date: Mon, 16 Dec 2024 15:22:19 +0000 Subject: [PATCH 11/14] changes as per comments --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 7b87d05ed9..363c0c70b6 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -355,7 +355,7 @@ describe('FOR: Macro: Document list', () => { }); describe('GIVEN: Params: metadata', () => { - describe('WHEN: when multiple configurations are provided in the document metadata', () => { + describe('WHEN: when document has metadata with all available configurations', () => { const $ = cheerio.load( renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE], From 8953612f007aba336400bdb68224cc7fde0014c9 Mon Sep 17 00:00:00 2001 From: SriHV Date: Thu, 2 Jan 2025 19:46:24 +0000 Subject: [PATCH 12/14] added few tests --- src/components/document-list/_macro.spec.js | 77 +++++++++++++++++---- 1 file changed, 62 insertions(+), 15 deletions(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 363c0c70b6..54b0687433 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -34,6 +34,7 @@ describe('FOR: Macro: Document list', () => { }); }); }); + describe('GIVEN: Params: description', () => { describe('WHEN: description is provided', () => { test('THEN: has expected description', () => { @@ -70,6 +71,67 @@ describe('FOR: Macro: Document list', () => { 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'); + }); + }); + }); + + 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'); + }); + }); }); describe('GIVEN: Params: featured', () => { @@ -156,21 +218,6 @@ describe('FOR: Macro: Document list', () => { }); }); - 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'); - }); - }); - }); - describe('GIVEN: Params: thumbnail', () => { describe('WHEN: thumbnail is provided for a document', () => { const $ = cheerio.load( From 08327dcb8b15f0da78b49733d959aaaea0f780aa Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Thu, 9 Jan 2025 18:10:07 +0000 Subject: [PATCH 13/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index 54b0687433..c1e859c8a0 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -418,7 +418,7 @@ describe('FOR: Macro: Document list', () => { expect($('.ons-document-list__item-image').hasClass('ons-document-list__item-image--file')).toBe(true); }); - test('THEN: has the correct document list class', async () => { + 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); }); }); From ddda08916a56f6d60cdc2220a1e62a0b72748bdb Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Thu, 9 Jan 2025 18:10:14 +0000 Subject: [PATCH 14/14] Update src/components/document-list/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/document-list/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/document-list/_macro.spec.js b/src/components/document-list/_macro.spec.js index c1e859c8a0..78347c72a1 100644 --- a/src/components/document-list/_macro.spec.js +++ b/src/components/document-list/_macro.spec.js @@ -46,7 +46,7 @@ describe('FOR: Macro: Document list', () => { }); describe('GIVEN: Params: id', () => { - describe('WHEN: id is provied', () => { + describe('WHEN: id is provided', () => { test('THEN: has the provided id attribute', () => { const $ = cheerio.load( renderComponent('document-list', {