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 Char check limit test file to new format #3468

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor Char check limit test file to new format #3468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
102 changes: 54 additions & 48 deletions src/components/char-check-limit/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,65 +5,71 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

const EXAMPLE_CHAR_CHECK_LIMIT = {
id: 'example-char-check-limit',
charCountSingular: 'You have {x} character remaining',
charCountPlural: 'You have {x} characters remaining',
charCountOverLimitSingular: '{x} character too many',
charCountOverLimitPlural: '{x} characters too many',
};
import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples';

describe('macro: char-check-limit', () => {
it('passes jest-axe checks without check', async () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
describe('FOR: Macro: Char check limit', () => {
describe('GIVEN: Params: Required', () => {
describe('WHEN: required params are provided', () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));

const results = await axe($.html());
expect(results).toHaveNoViolations();
});

it('passes jest-axe checks with check', async () => {
const $ = cheerio.load(
renderComponent(
'char-check-limit',
{
...EXAMPLE_CHAR_CHECK_LIMIT,
variant: 'check',
},
['<p>Test content.</p>'],
),
);
test('passes jest-axe checks', async () => {
const results = await axe($.html());

const results = await axe($.html());
expect(results).toHaveNoViolations();
expect(results).toHaveNoViolations();
});
test('has the provided id attribute', () => {
expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
});
test('has the data attribute which defines charCountPlural', () => {
expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
});
test('has the data attribute which defines charCountSingular', () => {
expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
});
});
});

it('has the provided `id` attribute', () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
describe('GIVEN: Params: charCountOverLimitSingular', () => {
describe('WHEN: chatCountOverLimitSingular is provided', () => {
test('has the data attribute which defines charCountOverLimitSingular', () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));

expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
});
});
});

it('has the provided data attributes', () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
describe('GIVEN: Params: charCountOverLimitPlural', () => {
describe('WHEN: chatCountOverLimitPlural is provided', () => {
test('has the data attribute which defines charCountOverLimitPlural', () => {
const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));

expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
});
});
});

it('has expected nested content', () => {
const $ = cheerio.load(
renderComponent(
'char-check-limit',
{
...EXAMPLE_CHAR_CHECK_LIMIT,
variant: 'check',
},
['<p>Test content.</p>'],
),
);
describe('GIVEN: Params: variant', () => {
describe('WHEN: variant is provided', () => {
const $ = cheerio.load(
renderComponent(
'char-check-limit',
{
...EXAMPLE_CHAR_CHECK_LIMIT,
variant: 'check',
},
['<p>Test content.</p>'],
),
);

test('passes jest-axe checks with check', async () => {
const results = await axe($.html());
expect(results).toHaveNoViolations();
});

expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
test('renders the passed content ', () => {
expect($('.ons-js-char-check-input').text()).toBe('Test content.');
});
});
});
});
7 changes: 7 additions & 0 deletions src/components/char-check-limit/_test-examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const EXAMPLE_CHAR_CHECK_LIMIT = {
id: 'example-char-check-limit',
charCountSingular: 'You have {x} character remaining',
charCountPlural: 'You have {x} characters remaining',
charCountOverLimitSingular: '{x} character too many',
charCountOverLimitPlural: '{x} characters too many',
};
Loading