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 field component test file to new format #3434

Merged
merged 2 commits into from
Nov 26, 2024
Merged

Refactor field component test file to new format #3434

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
286fa47
refactor field component test file
rmccar Nov 21, 2024
836de28
Merge branch 'main' into refactor-field-component-test-file
rmccar Nov 26, 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
175 changes: 106 additions & 69 deletions src/components/field/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,91 +5,128 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';

const EXAMPLE_FIELD_BASIC = {
id: 'example-field',
};

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

const results = await axe($.html());
expect(results).toHaveNoViolations();
describe('FOR: Macro: Field', () => {
describe('GIVEN: Params: none', () => {
describe('WHEN: no params are provided', () => {
const $ = cheerio.load(renderComponent('field'));
test('THEN: passes jest-axe checks', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});
});
});

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

expect($('.ons-field').attr('id')).toBe('example-field');
describe('GIVEN: Params: id', () => {
describe('WHEN: id is provided', () => {
const $ = cheerio.load(
renderComponent('field', {
id: 'example-field',
}),
);
test('THEN: renders with the provided id', () => {
expect($('.ons-field').attr('id')).toBe('example-field');
});
});
});

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

expect($('.ons-field').hasClass('extra-class')).toBe(true);
expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
describe('GIVEN: Params: classes', () => {
describe('WHEN: additional style classes are provided', () => {
const $ = cheerio.load(
renderComponent('field', {
classes: 'extra-class another-extra-class',
}),
);
test('THEN: renders with provided classes', () => {
expect($('.ons-field').hasClass('extra-class')).toBe(true);
expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
});
});
});

it('has correct class when `inline` is provided', () => {
const $ = cheerio.load(
renderComponent('field', {
...EXAMPLE_FIELD_BASIC,
inline: true,
}),
);

expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
describe('GIVEN: Params: inline', () => {
describe('WHEN: inline is provided', () => {
const $ = cheerio.load(
renderComponent('field', {
inline: true,
}),
);
test('THEN: renders with the inline class', () => {
expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
});
});
});

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

expect($('.ons-field').attr('a')).toBe('123');
expect($('.ons-field').attr('b')).toBe('456');
describe('GIVEN: Params: attributes', () => {
describe('WHEN: custom attributes are provided', () => {
const $ = cheerio.load(
renderComponent('field', {
attributes: {
a: 123,
b: 456,
},
}),
);
test('THEN: renders with additionally provided attributes', () => {
expect($('.ons-field').attr('a')).toBe('123');
expect($('.ons-field').attr('b')).toBe('456');
});
});
});

it('has the correct element with `dontWrap`', () => {
const $ = cheerio.load(
renderComponent('field', {
...EXAMPLE_FIELD_BASIC,
dontWrap: true,
}),
);

expect($('.ons-field').length).toBe(0);
});
describe('GIVEN: Params: dontWrap', () => {
describe('WHEN: dontWrap is set to true', () => {
const $ = cheerio.load(
renderComponent('field', {
dontWrap: true,
}),
);
test('THEN: renders the content without being wrapped in a field div', () => {
expect($('.ons-field').length).toBe(0);
});
});

it('calls with content', () => {
const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
describe('WHEN: dontWrap is set to false', () => {
const $ = cheerio.load(
renderComponent('field', {
dontWrap: false,
}),
);
test('THEN: renders the content wrapped in a field div', () => {
expect($('.ons-field').length).toBe(1);
});
});

const content = $('.ons-field').html().trim();
expect(content).toEqual(expect.stringContaining('Example content...'));
describe('WHEN: dontWrap is not provided', () => {
const $ = cheerio.load(renderComponent('field', {}));
test('THEN: renders the content wrapped in a field div', () => {
expect($('.ons-field').length).toBe(1);
});
});
});

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

faker.renderComponent('field', {
...EXAMPLE_FIELD_BASIC,
error: { text: 'There is an error' },
describe('GIVEN: Params: error', () => {
describe('WHEN: error is provided', () => {
const faker = templateFaker();
const errorSpy = faker.spy('error');

faker.renderComponent('field', {
error: { text: 'There is an error' },
});
test('THEN" calls the error component', () => {
expect(errorSpy.occurrences[0]).toEqual({
text: 'There is an error',
});
});
});
});

expect(errorSpy.occurrences[0]).toEqual({
text: 'There is an error',
describe('GIVEN: Content', () => {
describe('WHEN: field is called with content provided', () => {
const $ = cheerio.load(renderComponent('field', {}, 'Example content...'));
const content = $('.ons-field').html().trim();
test('THEN: renders the field with the provided content', () => {
expect(content).toEqual(expect.stringContaining('Example content...'));
});
});
});
});