Skip to content

Commit

Permalink
Refactor field component test file to new format (#3434)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar authored Nov 26, 2024
1 parent 7aa61dc commit d8f4555
Showing 1 changed file with 106 additions and 69 deletions.
175 changes: 106 additions & 69 deletions src/components/field/_macro.spec.js
View file
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...'));
});
});
});
});

0 comments on commit d8f4555

Please sign in to comment.