Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Document list test file to new format #3446

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Refactor Document list test file to new format #3446

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b3a2f64
refactored tests for document list
SriHV Dec 3, 2024
e01e266
removed quotes
SriHV Dec 3, 2024
8778bbe
Update src/components/document-list/_macro.spec.js
SriHV Dec 4, 2024
4d60001
Update src/components/document-list/_macro.spec.js
SriHV Dec 4, 2024
5fd828c
Update src/components/document-list/_macro.spec.js
SriHV Dec 4, 2024
3becbf4
Update src/components/document-list/_macro.spec.js
SriHV Dec 4, 2024
524b843
changes as per comments
SriHV Dec 4, 2024
19049c6
changes as per comments
SriHV Dec 4, 2024
67da27f
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Dec 4, 2024
cf285f9
changes as per comments
SriHV Dec 5, 2024
0dfb8eb
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Dec 5, 2024
43574d0
Merge branch 'enhancement/46/testing-refactor-document-list' of https…
SriHV Dec 5, 2024
10ce615
changes as per comments
SriHV Dec 9, 2024
d571d47
changes as per comments
SriHV Dec 16, 2024
777ff28
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Dec 16, 2024
4746030
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Jan 2, 2025
8953612
added few tests
SriHV Jan 2, 2025
08327dc
Update src/components/document-list/_macro.spec.js
SriHV Jan 9, 2025
ddda089
Update src/components/document-list/_macro.spec.js
SriHV Jan 9, 2025
e35c961
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Jan 10, 2025
79cf5bd
Merge branch 'main' into enhancement/46/testing-refactor-document-list
SriHV Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 40 additions & 104 deletions src/components/document-list/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
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();
Expand Down Expand Up @@ -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');
});
Expand All @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be called hiddenText? isn't it testing for text that is displayed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is testing displayed text not hidden text so should be named as such

expect(hiddenText).toBe('PDF, 499KB, 1 page');
});
Expand All @@ -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');
});
Expand All @@ -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');
});
Expand Down Expand Up @@ -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', () => {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
const $ = cheerio.load(
renderComponent('document-list', {
documents: [
Expand All @@ -391,34 +339,22 @@ describe('FOR: Macro: Document list', () => {

describe('GIVEN: Params: multiple', () => {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
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 () => {
SriHV marked this conversation as resolved.
Show resolved Hide resolved
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);
});
});
Expand Down