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 Fieldset component test file to new format #3435

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

Refactor Fieldset component test file to new format #3435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d51bf29
Update tests
adi-unni Nov 21, 2024
57a8b3a
Changes according to comments
adi-unni Nov 28, 2024
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
322 changes: 203 additions & 119 deletions src/components/fieldset/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,189 +1,273 @@
/** @jest-environment jsdom */

import * as cheerio from 'cheerio';

import axe from '../../tests/helpers/axe';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
import { EXAMPLE_FIELDSET, EXAMPLE_FIELDSET_NO_LEGEND } from './_test_examples';

const EXAMPLE_FIELDSET_BASIC = {
id: 'example-fieldset',
legend: 'Fieldset legend',
description: 'A fieldset description',
};

describe('macro: fieldset', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
describe('FOR: Macro: Fieldset', () => {
describe('GIVEN: Params: accessibility', () => {
describe('WHEN: all necessary params are provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));

const results = await axe($.html());
expect(results).toHaveNoViolations();
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('fieldset', EXAMPLE_FIELDSET_BASIC));
describe('GIVEN: Params: id', () => {
describe('WHEN: id is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));

expect($('.ons-fieldset').attr('id')).toBe('example-fieldset');
});
test('THEN: renders fieldset with provided id', () => {
expect($('.ons-fieldset').attr('id')).toBe('example-fieldset');
});
});

describe('WHEN: id is not provided', () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET, id: undefined }));

it('has the `legend` text', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
test('THEN: description has default id', () => {
const id = $('.ons-fieldset__description').attr('id');
expect(id).toBe('legend-description');
});

const title = $('.ons-fieldset__legend-title').text();
expect(title).toBe('Fieldset legend');
test('THEN: legend has correct aria-describedby attribute', () => {
const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
expect(ariaDescByVal).toBe('legend-description');
});
});
});

it('has the correct `aria-decribedby` value', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
describe('GIVEN: Params: legend', () => {
describe('WHEN: legend is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));

const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
expect(ariaDescByVal).toBe('example-fieldset-legend-description');
});
test('THEN: renders legend with provided text', () => {
const title = $('.ons-fieldset__legend-title').text().trim();
expect(title).toBe('Fieldset legend');
});

it('has the `description` text', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
test('THEN: legend has correct aria-describedby attribute', () => {
const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
expect(ariaDescByVal).toBe('example-fieldset-legend-description');
});

const title = $('.ons-fieldset__description').html().trim();
expect(title).toBe('A fieldset description');
});
test('THEN: legend has class "ons-fieldset__legend--with-description"', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
test('THEN: legend has class "ons-fieldset__legend--with-description"', () => {
test('THEN: legend has the legend with description class', () => {

expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
});
});

it('has the correct `description` `id` when no `fieldset `id` is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined }));
describe('WHEN: legend is not provided and legendIsQuestionTitle is not set', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_NO_LEGEND));

const id = $('.ons-fieldset__description').attr('id');
expect(id).toBe('legend-description');
test('THEN: does not render fieldset or legend', () => {
expect($('.ons-fieldset').length).toBe(0);
expect($('.ons-fieldset__legend').length).toBe(0);
});
});
});

it('has the correct `description` `id` when `fieldset `id` is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
describe('GIVEN: Params: classes', () => {
describe('WHEN: classes are provided', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
classes: 'extra-class another-extra-class',
}),
);

const id = $('.ons-fieldset__description').attr('id');
expect(id).toBe('example-fieldset-legend-description');
test('THEN: renders fieldset with provided classes', () => {
expect($('.ons-fieldset').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true);
});
});
});

it('has the correct `legend` class when `description` is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
describe('GIVEN: Params: legendClasses', () => {
describe('WHEN: legendClasses are provided', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
legendClasses: 'extra-class another-extra-class',
}),
);

expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
test('THEN: renders legend with provided classes', () => {
expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true);
});
});
});

it('has additionally provided style classes', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
classes: 'extra-class another-extra-class',
}),
);
describe('GIVEN: Params: attributes', () => {
describe('WHEN: attributes are provided', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
attributes: {
a: 123,
b: 456,
},
}),
);

expect($('.ons-fieldset').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true);
test('THEN: renders fieldset with provided attributes', () => {
expect($('.ons-fieldset').attr('a')).toBe('123');
expect($('.ons-fieldset').attr('b')).toBe('456');
});
});
});

it('has additionally provided `legendClasses`', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
legendClasses: 'extra-class another-extra-class',
}),
);
describe('GIVEN: Params: dontWrap', () => {
describe('WHEN: dontWrap is set to true', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
dontWrap: true,
}),
);

expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true);
});
test('THEN: renders without fieldset wrapper', () => {
expect($('.ons-fieldset').length).toBe(0);
expect($('.ons-input-items').length).toBe(1);
});

it('has additionally provided `attributes`', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
attributes: {
a: 123,
b: 456,
},
}),
);

expect($('.ons-fieldset').attr('a')).toBe('123');
expect($('.ons-fieldset').attr('b')).toBe('456');
});
test('THEN: renders content inside ons-input-items div', () => {
expect($('.ons-input-items').html().trim()).toBe('');
});
});

it('has the correct element with `dontWrap`', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
dontWrap: true,
}),
);
describe('WHEN: dontWrap is set to true and legend is not provided', () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_NO_LEGEND, dontWrap: true }));

expect($('.ons-input-items').length).toBe(1);
expect($('.ons-fieldset').length).toBe(0);
test('THEN: renders ons-input-items div without fieldset or legend', () => {
expect($('.ons-fieldset').length).toBe(0);
expect($('.ons-fieldset__legend').length).toBe(0);
expect($('.ons-input-items').length).toBe(1);
});
});
});

it('calls with content', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...'));
describe('GIVEN: Content', () => {
describe('WHEN: content is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET, 'Example content...'));

const content = $('.ons-fieldset').html().trim();
expect(content).toEqual(expect.stringContaining('Example content...'));
test('THEN: renders fieldset with provided content', () => {
const content = $('.ons-fieldset').html();
expect(content).toContain('Example content...');
});
});
});

it('calls the error component when `error` is provided', () => {
const faker = templateFaker();
const errorSpy = faker.spy('error');
describe('GIVEN: Params: error', () => {
describe('WHEN: error is provided', () => {
const faker = templateFaker();
const errorSpy = faker.spy('error');

faker.renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
error: { text: 'There is an error' },
});
faker.renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
error: { text: 'Error message' },
});

expect(errorSpy.occurrences[0]).toEqual({
text: 'There is an error',
test('THEN: wraps fieldset with error component', () => {
expect(errorSpy.occurrences.length).toBe(1);
expect(errorSpy.occurrences[0]).toEqual({ text: 'Error message' });
});
});
});

describe('with `legendIsQuestionTitle`', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
describe('GIVEN: Params: legendIsQuestionTitle', () => {
describe('WHEN: legendIsQuestionTitle is set to true and legend is provided', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
legendIsQuestionTitle: true,
}),
);

const results = await axe($.html());
expect(results).toHaveNoViolations();
test('THEN: jest-axe checks pass', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});

test('THEN: renders legend as H1 with provided text', () => {
const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
expect(titleTag).toBe('h1');
const titleText = $('.ons-fieldset__legend-title').text().trim();
expect(titleText).toBe('Fieldset legend');
});

test('THEN: description has correct classes', () => {
expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true);
});
});

it('renders the legend in a H1', () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
describe('WHEN: legendIsQuestionTitle is not set and legend is provided', () => {
const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));

expect(titleTag).toBe('h1');
test('THEN: renders legend title in a span', () => {
const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
expect(titleTag).toBe('span');
});
});
});

it('has additionally provided `legendTitleClasses`', () => {
describe('GIVEN: Params: legendTitleClasses', () => {
describe('WHEN: legendTitleClasses are provided with legendIsQuestionTitle set to true', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
legendTitleClasses: 'extra-class another-extra-class',
...EXAMPLE_FIELDSET,
legendIsQuestionTitle: true,
legendTitleClasses: 'extra-class another-extra-class',
}),
);

expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true);
test('THEN: renders legend title with provided classes', () => {
expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true);
expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true);
});
});

it('has the `legend` text', () => {
describe('WHEN: legendTitleClasses are provided without legendIsQuestionTitle', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET_BASIC,
...EXAMPLE_FIELDSET,
legendTitleClasses: 'extra-class another-extra-class',
legendIsQuestionTitle: true,
}),
);

const title = $('.ons-fieldset__legend-title').html().trim();
expect(title).toBe('Fieldset legend');
test('THEN: legend title does not have additional classes', () => {
expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(false);
expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(false);
});
});
});

describe('GIVEN: Params: description', () => {
describe('WHEN: description is not provided', () => {
const $ = cheerio.load(
renderComponent('fieldset', {
...EXAMPLE_FIELDSET,
description: undefined,
}),
);

test('THEN: fieldset renders without description', () => {
expect($('.ons-fieldset__description').length).toBe(0);
});

it('has the correct `description` classes', () => {
const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
test('THEN: legend does not have aria-describedby attribute', () => {
const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
expect(ariaDescByVal).toBeUndefined();
});

expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true);
test('THEN: legend does not have ons-fieldset__legend--with-description class', () => {
expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(false);
});
});
});
});
Loading