From dd03a77385904b76defe2277e5bc0ec1d9063c55 Mon Sep 17 00:00:00 2001 From: SriHV Date: Fri, 3 Jan 2025 16:20:48 +0000 Subject: [PATCH 1/5] refactored tests --- .../char-check-limit/_macro.spec.js | 102 +++++++++--------- .../char-check-limit/_test-examples.js | 7 ++ 2 files changed, 61 insertions(+), 48 deletions(-) create mode 100644 src/components/char-check-limit/_test-examples.js 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', +}; From 1dabadaf53ed5422f15c1a703cddfe97cd175339 Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Thu, 9 Jan 2025 19:13:29 +0000 Subject: [PATCH 2/5] Update src/components/char-check-limit/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/char-check-limit/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/char-check-limit/_macro.spec.js b/src/components/char-check-limit/_macro.spec.js index 1229d77bb4..757f8000e6 100644 --- a/src/components/char-check-limit/_macro.spec.js +++ b/src/components/char-check-limit/_macro.spec.js @@ -7,7 +7,7 @@ import { renderComponent } from '../../tests/helpers/rendering'; import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples'; -describe('FOR: Macro: Char check limit', () => { +describe('FOR: Macro: CharCheckLimit', () => { describe('GIVEN: Params: Required', () => { describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); From 9e676fdfb478d6aea09070246a0d0b6f339d475d Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Thu, 9 Jan 2025 19:13:41 +0000 Subject: [PATCH 3/5] Update src/components/char-check-limit/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/char-check-limit/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/char-check-limit/_macro.spec.js b/src/components/char-check-limit/_macro.spec.js index 757f8000e6..c3373520d1 100644 --- a/src/components/char-check-limit/_macro.spec.js +++ b/src/components/char-check-limit/_macro.spec.js @@ -67,7 +67,7 @@ describe('FOR: Macro: CharCheckLimit', () => { expect(results).toHaveNoViolations(); }); - test('renders the passed content ', () => { + test('THEN: renders the passed content', () => { expect($('.ons-js-char-check-input').text()).toBe('Test content.'); }); }); From 51becf8462ad2593bece3b0226f8977e7b20635d Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Thu, 9 Jan 2025 19:13:49 +0000 Subject: [PATCH 4/5] Update src/components/char-check-limit/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/char-check-limit/_macro.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/char-check-limit/_macro.spec.js b/src/components/char-check-limit/_macro.spec.js index c3373520d1..c81c11ca9a 100644 --- a/src/components/char-check-limit/_macro.spec.js +++ b/src/components/char-check-limit/_macro.spec.js @@ -62,7 +62,7 @@ describe('FOR: Macro: CharCheckLimit', () => { ), ); - test('passes jest-axe checks with check', async () => { + test('passes jest-axe checks with variant set to check', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); From 345f49fd186ae7c6d4976babcf4ef1cd17322b25 Mon Sep 17 00:00:00 2001 From: SriHV Date: Thu, 9 Jan 2025 19:18:02 +0000 Subject: [PATCH 5/5] changes as per comments --- .../char-check-limit/_macro.spec.js | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/components/char-check-limit/_macro.spec.js b/src/components/char-check-limit/_macro.spec.js index c81c11ca9a..210d568830 100644 --- a/src/components/char-check-limit/_macro.spec.js +++ b/src/components/char-check-limit/_macro.spec.js @@ -12,38 +12,24 @@ describe('FOR: Macro: CharCheckLimit', () => { describe('WHEN: required params are provided', () => { const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); - test('passes jest-axe checks', async () => { + test('THEN: passes jest-axe checks', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); }); - test('has the provided id attribute', () => { + test('THEN: has the provided id attribute', () => { expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit'); }); - test('has the data attribute which defines charCountPlural', () => { + test('THEN: 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', () => { + test('THEN: has the data attribute which defines charCountSingular', () => { expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining'); }); - }); - }); - - 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)); - + test('THEN: has the data attribute which defines charCountOverLimitSingular', () => { expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many'); }); - }); - }); - - 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)); - + test('THEN: has the data attribute which defines charCountOverLimitPlural', () => { expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many'); }); }); @@ -62,7 +48,7 @@ describe('FOR: Macro: CharCheckLimit', () => { ), ); - test('passes jest-axe checks with variant set to check', async () => { + test('THEN: passes jest-axe checks with variant set to check', async () => { const results = await axe($.html()); expect(results).toHaveNoViolations(); });