Refactor CharCheckLimit test file to new format

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',
-                },
-                ['<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.');
+            });
+        });
     });
 });

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',
+};