@ons/design-system 72.0.1 → 72.1.1

package/components/feedback/_macro.spec.js

@@ -4,103 +4,132 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_FEEDBACK_MINIMAL = {
-    heading: 'Feedback heading',
-    content: 'Feedback content...',
-    linkUrl: 'http://example.com',
-    linkText: 'Feedback link text',
-};
-
-const EXAMPLE_FEEDBACK_FULL = {
-    id: 'example-feedback',
-    classes: 'extra-class',
-    heading: 'Feedback heading',
-    headingLevel: 5,
-    headingClasses: 'extra-heading-class another-extra-heading-class',
-    content: 'Feedback content...',
-    linkUrl: 'http://example.com',
-    linkText: 'Feedback link text',
-};
-
-describe('macro: feedback', () => {
-    it('passes jest-axe checks with minimum parameters', async () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+import { EXAMPLE_FEEDBACK, EXAMPLE_FEEDBACK_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Feedback', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the title has a default headingLevel of 2', () => {
+                expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+            });
+        });
     });
 
-    it('passes jest-axe checks with full parameters', async () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+    describe('GIVEN: Params: all', () => {
+        describe('WHEN: all params are provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_ALL_PARAMS));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                id: 'example-id',
-            }),
-        );
-
-        expect($('#example-id').length).toBe(1);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    id: 'example-id',
+                }),
+            );
+            test('THEN: renders with provided id', () => {
+                expect($('#example-id').length).toBe(1);
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
-        expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
+                expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it.each([
-        [1, 'h1'],
-        [4, 'h4'],
-    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                ...EXAMPLE_FEEDBACK_MINIMAL,
-                headingLevel,
-            }),
-        );
-
-        expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    describe('GIVEN: Params: heading', () => {
+        describe('WHEN: heading is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                }),
+            );
+            test('THEN: renders with provided heading text', () => {
+                expect($('.ons-feedback__heading').text().trim()).toBe('Feedback heading');
+            });
+        });
     });
 
-    it('has a default `headingLevel` of 2', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    describe('GIVEN: Params: headingLevel', () => {
+        describe('WHEN: headingLevel is provided', () => {
+            test.each([
+                [1, 'h1'],
+                [4, 'h4'],
+            ])('THEN: has the correct heading element type for the provided headingLevel (%i -> %s)', (headingLevel, expectedTitleTag) => {
+                const $ = cheerio.load(
+                    renderComponent('feedback', {
+                        ...EXAMPLE_FEEDBACK,
+                        headingLevel,
+                    }),
+                );
+                const titleTag = $(`${expectedTitleTag}.ons-feedback__heading`)[0].tagName;
+                expect(titleTag).toBe(expectedTitleTag);
+            });
+        });
     });
 
-    it('has additional heading style classes', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
-
-        expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
-        expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+    describe('GIVEN: Params: headingClasses', () => {
+        describe('WHEN: additional heading style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    headingClasses: 'extra-heading-class another-extra-heading-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
+                expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+            });
+        });
     });
 
-    it('has a paragraph with the provided `content`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('p').text().trim()).toBe('Feedback content...');
+    describe('GIVEN: Params: content', () => {
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders paragraph with the provided content', () => {
+                expect($('p').text().trim()).toBe('Feedback content...');
+            });
+        });
     });
 
-    it('has a link with the provided `linkUrl`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+    describe('GIVEN: Params: linkUrl', () => {
+        describe('WHEN: linkUrl is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders a link with the provided linkUrl', () => {
+                expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+            });
+        });
     });
 
-    it('has a link with the provided `linkText`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+    describe('GIVEN: Params: linkText', () => {
+        describe('WHEN: linkText is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders a link with the provided linkText', () => {
+                expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+            });
+        });
     });
 });

package/components/feedback/_test_examples.js

@@ -0,0 +1,17 @@
+export const EXAMPLE_FEEDBACK = {
+    heading: 'Feedback heading',
+    content: 'Feedback content...',
+    linkUrl: 'http://example.com',
+    linkText: 'Feedback link text',
+};
+
+export const EXAMPLE_FEEDBACK_ALL_PARAMS = {
+    id: 'example-feedback',
+    classes: 'extra-class',
+    heading: 'Feedback heading',
+    headingLevel: 5,
+    headingClasses: 'extra-heading-class another-extra-heading-class',
+    content: 'Feedback content...',
+    linkUrl: 'http://example.com',
+    linkText: 'Feedback link text',
+};

package/components/field/_macro.spec.js

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

package/components/section-navigation/_macro.njk

@@ -31,9 +31,12 @@
                                 class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
                             >
                                 {% if isCurrent == true %}
-                                    {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
-                                    class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                                    aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    <a
+                                        class="ons-section-nav__link ons-section-nav__item-header"
+                                        href="{{ item.url }}"
+                                        aria-current="location"
+                                        >{{ item.text }}</a
+                                    >
                                 {% else %}
                                     <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                                 {% endif %}
@@ -71,9 +74,9 @@
                         class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
                     >
                         {% if isCurrent == true %}
-                            {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
-                            class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                            aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            <a class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location"
+                                >{{ item.text }}</a
+                            >
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                         {% endif %}