diff --git a/src/components/char-check-limit/_macro.spec.js b/src/components/char-check-limit/_macro.spec.js index 6eba91e262..1229d77bb4 100644 --- a/src/components/char-check-limit/_macro.spec.js +++ b/src/components/char-check-limit/_macro.spec.js @@ -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', - }, - ['
Test content.
'], - ), - ); + 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', - }, - ['Test content.
'], - ), - ); + describe('GIVEN: Params: variant', () => { + describe('WHEN: variant is provided', () => { + const $ = cheerio.load( + renderComponent( + 'char-check-limit', + { + ...EXAMPLE_CHAR_CHECK_LIMIT, + variant: 'check', + }, + ['Test content.
'], + ), + ); + + 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('Test content.
'); + test('renders the passed content ', () => { + expect($('.ons-js-char-check-input').text()).toBe('Test content.'); + }); + }); }); }); diff --git a/src/components/char-check-limit/_test-examples.js b/src/components/char-check-limit/_test-examples.js new file mode 100644 index 0000000000..6a700b1cbb --- /dev/null +++ b/src/components/char-check-limit/_test-examples.js @@ -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', +};