Skip to content

Commit

Permalink
Merge branch 'main' into enhancement/133/testing-refactor-address-output
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV authored Sep 30, 2024
2 parents 5c5b3bf + 2ed65e3 commit eb0f189
Show file tree
Hide file tree
Showing 8 changed files with 350 additions and 265 deletions.
251 changes: 161 additions & 90 deletions src/components/accordion/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,82 @@ import * as cheerio from 'cheerio';

import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
id: 'accordion-identifier',
itemsList: [
{
title: 'Title for item 1',
content: 'Content for item 1',
},
{
title: 'Title for item 2',
content: 'Content for item 2',
},
],
};

const EXAMPLE_ACCORDION = {
...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
allButton: {
open: 'Open label',
close: 'Close label',
},
};

describe('macro: accordion', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));

const results = await axe($.html());
expect(results).toHaveNoViolations();
import { EXAMPLE_ACCORDION } from './_test_examples';

describe('FOR: Macro: Accordion', () => {
describe('GIVEN: Params: required', () => {
describe('WHEN: all required params are provided', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
test('THEN: jest-axe checks pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
});
});

it('has the provided `id` attribute', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));

expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
describe('GIVEN: Params: required and allButton', () => {
describe('WHEN: required and allButton params are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
allButton: {
open: 'Open label',
close: 'Close label',
},
}),
);
test('THEN: jest-axe checks pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
});
});

it('has additionally provided style classes', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
classes: 'extra-class another-extra-class',
}),
);

expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
describe('GIVEN: Params: id', () => {
describe('WHEN: id is provided', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
test('THEN: renders with provided id', () => {
expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
});
});
});

describe('item', () => {
it('has provided title text', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));

const titleText = $('.ons-details__title').first().text().trim();
expect(titleText).toBe('Title for item 1');
describe('GIVEN: Params: classes', () => {
describe('WHEN: additional style classes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
classes: 'extra-class another-extra-class',
}),
);
test('THEN: renders with provided classes', () => {
expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
});
});

it('has title with provided tag override', () => {
});
describe('GIVEN: Params: itemsList: AccordionItem', () => {
describe('WHEN: title is provided', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
test('THEN: renders title with provided text', () => {
const titleText = $('.ons-details__title').first().text().trim();
expect(titleText).toBe('Title for item 1');
});
});
describe('WHEN: titleTag is not provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
{
title: 'Title for item 1',
content: 'Content for item 1',
},
],
}),
);
test('THEN: item title renders with default heading tag', () => {
const titleTag = $('.ons-details__title')[0].tagName;
expect(titleTag).toBe('h2');
});
});
describe('WHEN: titleTag is provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
Expand All @@ -73,19 +91,19 @@ describe('macro: accordion', () => {
],
}),
);

const titleTag = $('.ons-details__title')[0].tagName;
expect(titleTag).toBe('h5');
test('THEN: item title renders with provided heading tag', () => {
const titleTag = $('.ons-details__title')[0].tagName;
expect(titleTag).toBe('h5');
});
});

it('has provided content text', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));

const titleText = $('.ons-details__content').first().text().trim();
expect(titleText).toBe('Content for item 1');
describe('WHEN: content is provided', () => {
const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
test('THEN: item content renders with provided text', () => {
const titleText = $('.ons-details__content').first().text().trim();
expect(titleText).toBe('Content for item 1');
});
});

it('has additionally provided `attributes`', () => {
describe('WHEN: attributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
Expand All @@ -99,12 +117,12 @@ describe('macro: accordion', () => {
],
}),
);

expect($('.ons-details').attr('a')).toBe('123');
expect($('.ons-details').attr('b')).toBe('456');
test('THEN: item renders with provided HTML attributes', () => {
expect($('.ons-details').attr('a')).toBe('123');
expect($('.ons-details').attr('b')).toBe('456');
});
});

it('has additionally provided `headingAttributes`', () => {
describe('WHEN: headingAttributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
Expand All @@ -118,12 +136,12 @@ describe('macro: accordion', () => {
],
}),
);

expect($('.ons-details__heading').attr('a')).toBe('123');
expect($('.ons-details__heading').attr('b')).toBe('456');
test('THEN: item header renders with provided HTML attributes', () => {
expect($('.ons-details__heading').attr('a')).toBe('123');
expect($('.ons-details__heading').attr('b')).toBe('456');
});
});

it('has additionally provided `contentAttributes`', () => {
describe('WHEN: contentAttributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
Expand All @@ -138,31 +156,37 @@ describe('macro: accordion', () => {
],
}),
);

expect($('.ons-details__content').attr('a')).toBe('123');
expect($('.ons-details__content').attr('b')).toBe('456');
test('THEN: item content renders with provided HTML attributes', () => {
expect($('.ons-details__content').attr('a')).toBe('123');
expect($('.ons-details__content').attr('b')).toBe('456');
});
});
});

describe('toggle all button', () => {
it('outputs a button with the expected class', () => {
describe('GIVEN: Params: allButton: AccordionButton', () => {
describe('WHEN: required open/close params are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
...EXAMPLE_ACCORDION,
allButton: {
open: 'Open label',
close: 'Close label',
},
}),
);

expect($('button.ons-accordion__toggle-all').length).toBe(1);
test('THEN: renders button with expected class', () => {
expect($('button.ons-accordion__toggle-all').length).toBe(1);
});
test('THEN: renders button with provided open text', () => {
expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label');
});
test('THEN: renders button with provided close text', () => {
expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label');
});
});

it('has additionally provided `attributes`', () => {
describe('WHEN: attributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
...EXAMPLE_ACCORDION,
allButton: {
open: 'Open label',
close: 'Close label',
Expand All @@ -173,9 +197,56 @@ describe('macro: accordion', () => {
},
}),
);

expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
test('THEN: renders button with additional attributes provided', () => {
expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
});
});
});
describe('GIVEN: Params: saveState', () => {
describe('WHEN: saveState param is not provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
}),
);
test('THEN: renders without saveState attribute', () => {
expect($('.ons-details--accordion').attr('saveState')).toBe(undefined);
});
});
describe('WHEN: saveState param is set to true', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
saveState: true,
}),
);
test('THEN: renders with saveState attribute', () => {
expect($('.ons-details--accordion').attr('saveState'));
});
});
});
describe('GIVEN: Params: open', () => {
describe('WHEN: open param is not provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
}),
);
test('THEN: renders with accordion items closed on page load', () => {
expect($('.ons-details--accordion').attr('open')).toBe(undefined);
});
});
describe('WHEN: open param is set to true', () => {
const $ = cheerio.load(
renderComponent('accordion', {
...EXAMPLE_ACCORDION,
open: true,
}),
);
test('THEN: renders with accordion items open on page load', () => {
expect($('.ons-details--accordion').attr('open'));
});
});
});
});
13 changes: 13 additions & 0 deletions src/components/accordion/_test_examples.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export const EXAMPLE_ACCORDION = {
id: 'accordion-identifier',
itemsList: [
{
title: 'Title for item 1',
content: 'Content for item 1',
},
{
title: 'Title for item 2',
content: 'Content for item 2',
},
],
};
2 changes: 1 addition & 1 deletion src/components/button/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
{% else %}
type="{{ buttonType }}"
{% endif %}
class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
{% if params.id %}id="{{ params.id }}"{% endif %}
{% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
{% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
Expand Down
2 changes: 1 addition & 1 deletion src/components/text-indent/example-text-indent.njk
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% from "components/text-indent/_macro.njk" import onsTextIndent %}
{{-
onsTextIndent({
text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
"text": '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
})
-}}
12 changes: 6 additions & 6 deletions src/tests/helpers/cheerio.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import * as cheerio from 'cheerio';
import * as helper from '../../tests/helpers/cheerio';

const EXAMPLE_HTML = `
<div>
<div id="a">First</div>
<div id="b" class="second">Second</div>
<div id="c" class="third">Third</div>
</div>
`;
<div>
<div id="a">First</div>
<div id="b" class="second">Second</div>
<div id="c" class="third">Third</div>
</div>
`;

describe('mapAll(cheerioNodes, selector)', () => {
it('gets mapped values`', () => {
Expand Down
Loading

0 comments on commit eb0f189

Please sign in to comment.