@ons/design-system 70.0.15 → 70.0.17

package/README.md

@@ -44,6 +44,15 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
+## Lighthouse Testing - local
+
+This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
+
+```bash
+yarn global add @lhci/cli
+yarn test-lighthouse 
+```
+
 ## Testing - macros and scripts
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
@@ -112,7 +121,7 @@ It is sometimes useful to adjust the following settings when writing tests or di
 
 ## Testing - Visual regression tests
 
-This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using Puppeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
 
 The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
 

package/components/access-code/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: access-code', () => {
+describe('FOR: Macro: Access-code', () => {
     describe('GIVEN: Params: required', () => {
         describe('WHEN: all required params are provided', () => {
             const $ = cheerio.load(
@@ -24,7 +24,7 @@ describe('FOR: access-code', () => {
             test('THEN: autocomplete is disabled on text input', () => {
                 expect($('input').attr('autocomplete')).toBe('off');
             });
-            test('THEN: text input has automatic capitalisation', () => {
+            test('THEN: text input has autocapitalize attribute', () => {
                 expect($('input').attr('autocapitalize')).toBe('characters');
             });
         });

package/components/accordion/_macro.spec.js

@@ -4,64 +4,82 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
-    id: 'accordion-identifier',
-    itemsList: [
-        {
-            title: 'Title for item 1',
-            content: 'Content for item 1',
-        },
-        {
-            title: 'Title for item 2',
-            content: 'Content for item 2',
-        },
-    ],
-};
-
-const EXAMPLE_ACCORDION = {
-    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-    allButton: {
-        open: 'Open label',
-        close: 'Close label',
-    },
-};
-
-describe('macro: accordion', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+import { EXAMPLE_ACCORDION } from './_test_examples';
+
+describe('FOR: Macro: Accordion', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            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('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-        expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+    describe('GIVEN: Params: required and allButton', () => {
+        describe('WHEN: required and allButton params are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('accordion', {
-                ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
-        expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+            });
+        });
     });
-
-    describe('item', () => {
-        it('has provided title text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__title').first().text().trim();
-            expect(titleText).toBe('Title for item 1');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+                expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+            });
         });
-
-        it('has title with provided tag override', () => {
+    });
+    describe('GIVEN: Params: itemsList: AccordionItem', () => {
+        describe('WHEN: title is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: renders title with provided text', () => {
+                const titleText = $('.ons-details__title').first().text().trim();
+                expect(titleText).toBe('Title for item 1');
+            });
+        });
+        describe('WHEN: titleTag is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            content: 'Content for item 1',
+                        },
+                    ],
+                }),
+            );
+            test('THEN: item title renders with default heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h2');
+            });
+        });
+        describe('WHEN: titleTag is provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -73,19 +91,19 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            const titleTag = $('.ons-details__title')[0].tagName;
-            expect(titleTag).toBe('h5');
+            test('THEN: item title renders with provided heading tag', () => {
+                const titleTag = $('.ons-details__title')[0].tagName;
+                expect(titleTag).toBe('h5');
+            });
         });
-
-        it('has provided content text', () => {
-            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-            const titleText = $('.ons-details__content').first().text().trim();
-            expect(titleText).toBe('Content for item 1');
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+            test('THEN: item content renders with provided text', () => {
+                const titleText = $('.ons-details__content').first().text().trim();
+                expect(titleText).toBe('Content for item 1');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -99,12 +117,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details').attr('a')).toBe('123');
-            expect($('.ons-details').attr('b')).toBe('456');
+            test('THEN: item renders with provided HTML attributes', () => {
+                expect($('.ons-details').attr('a')).toBe('123');
+                expect($('.ons-details').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `headingAttributes`', () => {
+        describe('WHEN: headingAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -118,12 +136,12 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__heading').attr('a')).toBe('123');
-            expect($('.ons-details__heading').attr('b')).toBe('456');
+            test('THEN: item header renders with provided HTML attributes', () => {
+                expect($('.ons-details__heading').attr('a')).toBe('123');
+                expect($('.ons-details__heading').attr('b')).toBe('456');
+            });
         });
-
-        it('has additionally provided `contentAttributes`', () => {
+        describe('WHEN: contentAttributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
                     itemsList: [
@@ -138,31 +156,37 @@ describe('macro: accordion', () => {
                     ],
                 }),
             );
-
-            expect($('.ons-details__content').attr('a')).toBe('123');
-            expect($('.ons-details__content').attr('b')).toBe('456');
+            test('THEN: item content renders with provided HTML attributes', () => {
+                expect($('.ons-details__content').attr('a')).toBe('123');
+                expect($('.ons-details__content').attr('b')).toBe('456');
+            });
         });
     });
-
-    describe('toggle all button', () => {
-        it('outputs a button with the expected class', () => {
+    describe('GIVEN: Params: allButton: AccordionButton', () => {
+        describe('WHEN: required open/close params are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            test('THEN: renders button with expected class', () => {
+                expect($('button.ons-accordion__toggle-all').length).toBe(1);
+            });
+            test('THEN: renders button with provided open text', () => {
+                expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label');
+            });
+            test('THEN: renders button with provided close text', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label');
+            });
         });
-
-        it('has additionally provided `attributes`', () => {
+        describe('WHEN: attributes are provided', () => {
             const $ = cheerio.load(
                 renderComponent('accordion', {
-                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    ...EXAMPLE_ACCORDION,
                     allButton: {
                         open: 'Open label',
                         close: 'Close label',
@@ -173,9 +197,56 @@ describe('macro: accordion', () => {
                     },
                 }),
             );
-
-            expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
-            expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            test('THEN: renders button with additional attributes provided', () => {
+                expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+                expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+            });
+        });
+    });
+    describe('GIVEN: Params: saveState', () => {
+        describe('WHEN: saveState param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders without saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState')).toBe(undefined);
+            });
+        });
+        describe('WHEN: saveState param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    saveState: true,
+                }),
+            );
+            test('THEN: renders with saveState attribute', () => {
+                expect($('.ons-details--accordion').attr('saveState'));
+            });
+        });
+    });
+    describe('GIVEN: Params: open', () => {
+        describe('WHEN: open param is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                }),
+            );
+            test('THEN: renders with accordion items closed on page load', () => {
+                expect($('.ons-details--accordion').attr('open')).toBe(undefined);
+            });
+        });
+        describe('WHEN: open param is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    open: true,
+                }),
+            );
+            test('THEN: renders with accordion items open on page load', () => {
+                expect($('.ons-details--accordion').attr('open'));
+            });
         });
     });
 });

package/components/accordion/_test_examples.js

@@ -0,0 +1,13 @@
+export const EXAMPLE_ACCORDION = {
+    id: 'accordion-identifier',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+    ],
+};

package/components/address-input/autosuggest.address.spec.js

@@ -602,6 +602,8 @@ describe('script: address-input', () => {
         beforeEach(async () => {
             await setTestPage('/test', renderComponent('address-input', EXAMPLE_ADDRESS_INPUT_WITH_API));
             await page.evaluate(() => document.documentElement.setAttribute('lang', 'cy'));
+
+            await setTimeout(50);
         });
 
         it('then the fetch url should contain the favour Welsh parameter', async () => {

package/components/back-to-top/_macro.spec.js

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('FOR: Back-to-top', () => {
+describe('FOR: Macro: Back-to-top', () => {
     describe('GIVEN: Params: default', () => {
         describe('WHEN: params are at default', () => {
             const $ = cheerio.load(renderComponent('back-to-top'));

package/components/breadcrumbs/_macro.spec.js

@@ -5,125 +5,131 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_BREADCRUMBS_MINIMAL = {
-    itemsList: [
-        {
-            url: 'https://example.com/',
-            text: 'Home',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-        },
-    ],
-};
-
-const EXAMPLE_BREADCRUMBS = {
-    classes: 'extra-class another-extra-class',
-    ariaLabel: 'Breadcrumbs label',
-    id: 'example-breadcrumbs',
-    itemsList: [
-        {
-            itemClasses: 'item-extra-class item-another-extra-class',
-            linkClasses: 'link-extra-class link-another-extra-class',
-            url: 'https://example.com/',
-            text: 'Home',
-            attributes: {
-                'data-a': '123',
-                'data-b': '456',
-            },
-            id: 'first-breadcrumb',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-            id: 'second-breadcrumb',
-            attributes: {
-                'data-a': '789',
-                'data-b': 'ABC',
-            },
-        },
-    ],
-};
-
-describe('macro: breadcrumbs', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
-    });
-
-    it('has a default `aria-label` of "Breadcrumbs"', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
-    });
-
-    it('has the provided `ariaLabel` for `aria-label`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
-    });
-
-    it('has the provided `id`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+import { EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS, EXAMPLE_BREADCRUMBS_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Breadcrumbs', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS);
+            test('THEN: renders chevron icon next to item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `item` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: all', () => {
+        describe('WHEN: all Params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS);
+            test('THEN: renders chevron icon next to each item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron', 'chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `link` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with correct additional classes', () => {
+                expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
-
-    it('has provided `url` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
-        expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+    describe('GIVEN: Params: ariaLabel', () => {
+        describe('WHEN: ariaLabel is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders with default aria-label of "Breadcrumbs"', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
+            });
+        });
+        describe('WHEN: ariaLabel is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    ariaLabel: 'Breadcrumbs label',
+                }),
+            );
+            test('THEN: renders with provided aria-label', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
+            });
+        });
     });
-
-    it('has provided `text` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
-        expect(labels).toEqual(['Home', 'Guide']);
-    });
-
-    it('has provided `attributes` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
-        expect(testValuesA).toEqual(['123', '789']);
-        const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
-        expect(testValuesB).toEqual(['456', 'ABC']);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    id: 'example-breadcrumbs',
+                }),
+            );
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+            });
+        });
     });
-
-    it('has a "chevron" icon for each breadcrumb item', () => {
-        const faker = templateFaker();
-        const iconsSpy = faker.spy('icon');
-
-        faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
-
-        const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
-        expect(iconTypes).toEqual(['chevron', 'chevron']);
+    describe('GIVEN: Params: itemsList (multiple)', () => {
+        describe('WHEN: itemClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item with provided style classes', () => {
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: linkClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders link with provided style classes', () => {
+                expect($('.ons-breadcrumbs__link').hasClass('link-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__link').hasClass('link-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: id param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided id', () => {
+                const ids = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('id'));
+                expect(ids).toEqual(['first-breadcrumb', 'second-breadcrumb']);
+            });
+        });
+        describe('WHEN: url param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided url link', () => {
+                const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
+                expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+            });
+        });
+        describe('WHEN: text param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item links with provided text', () => {
+                const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
+                expect(labels).toEqual(['Home', 'Guide']);
+            });
+        });
+        describe('WHEN: attributes param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided attributes', () => {
+                const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
+                expect(testValuesA).toEqual(['123', '789']);
+                const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
+                expect(testValuesB).toEqual(['456', 'ABC']);
+            });
+        });
     });
 });