@ons/design-system 70.0.7 → 70.0.8

package/components/list/_macro.spec.js

@@ -6,647 +6,647 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_LIST_TEXT_ITEMS = {
-  itemsList: [{ text: 'First item' }, { text: 'Second item' }],
+    itemsList: [{ text: 'First item' }, { text: 'Second item' }],
 };
 
 const EXAMPLE_ITEM_TEXT = {
-  text: 'Text item with <strong>markup</strong>',
+    text: 'Text item with <strong>markup</strong>',
 };
 
 const EXAMPLE_ITEM_ARTICLE_TITLE = {
-  title: 'Article title',
+    title: 'Article title',
 };
 
 const EXAMPLE_ITEM_NAVIGATION_TITLE = {
-  title: 'Long article title',
-  navigationTitle: 'Nav friendly title',
+    title: 'Long article title',
+    navigationTitle: 'Nav friendly title',
 };
 const EXAMPLE_NESTED_LIST_TEXT_ITEMS = {
-  itemsList: [
-    { text: 'First item' },
-    { text: 'Second item' },
-    { text: 'Third item', itemsList: [{ text: 'First item' }, { text: 'Second item' }] },
-  ],
+    itemsList: [
+        { text: 'First item' },
+        { text: 'Second item' },
+        { text: 'Third item', itemsList: [{ text: 'First item' }, { text: 'Second item' }] },
+    ],
 };
 
 describe('macro: list', () => {
-  describe('list element', () => {
-    it('has `id` attribute when provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          id: 'example-id',
-        }),
-      );
-
-      expect($('.ons-list').attr('id')).toBe('example-id');
-    });
+    describe('list element', () => {
+        it('has `id` attribute when provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    id: 'example-id',
+                }),
+            );
+
+            expect($('.ons-list').attr('id')).toBe('example-id');
+        });
 
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          classes: 'extra-class another-extra-class',
-        }),
-      );
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
 
-      expect($('.ons-list').hasClass('extra-class')).toBe(true);
-      expect($('.ons-list').hasClass('another-extra-class')).toBe(true);
-    });
+            expect($('.ons-list').hasClass('extra-class')).toBe(true);
+            expect($('.ons-list').hasClass('another-extra-class')).toBe(true);
+        });
 
-    it('has provided variant style class when one variant is provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          variants: 'dashed',
-        }),
-      );
+        it('has provided variant style class when one variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    variants: 'dashed',
+                }),
+            );
 
-      expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
-    });
+            expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
+        });
 
-    it('has provided variant style classes when multiple variants are provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          variants: ['dashed', 'inline'],
-        }),
-      );
+        it('has provided variant style classes when multiple variants are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    variants: ['dashed', 'inline'],
+                }),
+            );
 
-      expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
-      expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
-    });
+            expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
+            expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
+        });
 
-    it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [{ text: 'Item text', prefix: 'Abc' }],
-        }),
-      );
+        it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [{ text: 'Item text', prefix: 'Abc' }],
+                }),
+            );
 
-      expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
-      expect($('.ons-list').hasClass('ons-list--prefix')).toBe(true);
-    });
+            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
+            expect($('.ons-list').hasClass('ons-list--prefix')).toBe(true);
+        });
 
-    it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [{ text: 'Item text', suffix: 'Abc' }],
-        }),
-      );
+        it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [{ text: 'Item text', suffix: 'Abc' }],
+                }),
+            );
 
-      expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
-      expect($('.ons-list').hasClass('ons-list--suffix')).toBe(true);
-    });
+            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
+            expect($('.ons-list').hasClass('ons-list--suffix')).toBe(true);
+        });
 
-    it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          iconPosition: 'before',
-          iconType: 'check',
-        }),
-      );
-
-      expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
-      expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
-    });
+        it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    iconPosition: 'before',
+                    iconType: 'check',
+                }),
+            );
+
+            expect($('.ons-list').hasClass('ons-list--bare')).toBe(true);
+            expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
+        });
 
-    it('renders a <ul> element by default', () => {
-      const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));
+        it('renders a <ul> element by default', () => {
+            const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));
 
-      expect($('.ons-list')[0].tagName).toBe('ul');
-    });
+            expect($('.ons-list')[0].tagName).toBe('ul');
+        });
 
-    it('renders a custom element when a custom `element` is provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          element: 'div',
-        }),
-      );
+        it('renders a custom element when a custom `element` is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    element: 'div',
+                }),
+            );
 
-      expect($('.ons-list')[0].tagName).toBe('div');
-    });
+            expect($('.ons-list')[0].tagName).toBe('div');
+        });
 
-    it('renders a <ol> element when specified', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          element: 'ol',
-        }),
-      );
+        it('renders a <ol> element when specified', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    element: 'ol',
+                }),
+            );
 
-      expect($('.ons-list')[0].tagName).toBe('ol');
-    });
+            expect($('.ons-list')[0].tagName).toBe('ol');
+        });
 
-    it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          element: 'ol',
-        }),
-      );
+        it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    element: 'ol',
+                }),
+            );
 
-      expect($('.ons-list li').length).toBe(2);
-    });
+            expect($('.ons-list li').length).toBe(2);
+        });
 
-    describe('when <ol> is specified but there is only one list item', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          element: 'ol',
-          itemsList: [{ text: 'Only item' }],
-        }),
-      );
-
-      it('renders a <p> element', () => {
-        expect($('.ons-list')[0].tagName).toBe('p');
-      });
-
-      it('has `ons-list--p` modifier class', () => {
-        expect($('.ons-list').hasClass('ons-list--p')).toBe(true);
-      });
-
-      it('does not output any <li> elements', () => {
-        expect($('.ons-list li').length).toBe(0);
-      });
-    });
+        describe('when <ol> is specified but there is only one list item', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    element: 'ol',
+                    itemsList: [{ text: 'Only item' }],
+                }),
+            );
+
+            it('renders a <p> element', () => {
+                expect($('.ons-list')[0].tagName).toBe('p');
+            });
+
+            it('has `ons-list--p` modifier class', () => {
+                expect($('.ons-list').hasClass('ons-list--p')).toBe(true);
+            });
+
+            it('does not output any <li> elements', () => {
+                expect($('.ons-list li').length).toBe(0);
+            });
+        });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_LIST_TEXT_ITEMS,
-          attributes: {
-            a: 123,
-            b: 456,
-          },
-        }),
-      );
-
-      expect($('.ons-list').attr('a')).toBe('123');
-      expect($('.ons-list').attr('b')).toBe('456');
-    });
-  });
-
-  describe.each([
-    ['text', EXAMPLE_ITEM_TEXT, 'Text item with <strong>markup</strong>'],
-    ['article title', EXAMPLE_ITEM_ARTICLE_TITLE, 'Article title'],
-    ['navigation title', EXAMPLE_ITEM_NAVIGATION_TITLE, 'Nav friendly title'],
-  ])('with %s', (_, item, expectedItemText) => {
-    describe('content without link', () => {
-      it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [item],
-          }),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-      });
-
-      it('renders the expected list item text', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [item],
-          }),
-        );
-
-        expect($.html()).toContain(expectedItemText);
-      });
-
-      it('does not render a hyperlink element', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [item],
-          }),
-        );
-
-        expect($('a').length).toBe(0);
-      });
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+
+            expect($('.ons-list').attr('a')).toBe('123');
+            expect($('.ons-list').attr('b')).toBe('456');
+        });
     });
 
-    describe('content with an internal link', () => {
-      it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-              },
-            ],
-          }),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-      });
-
-      it('renders a hyperlink element', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link').is('a')).toBe(true);
-        expect($('.ons-list__link').attr('href')).toBe('/internal-link');
-      });
-
-      it('does not render a hyperlink element for current item', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                current: true,
-              },
-            ],
-          }),
-        );
-
-        expect($('a').length).toBe(0);
-      });
-
-      it('supports the `inPageLink` variant', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                variants: 'inPageLink',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link').hasClass('ons-js-inpagelink')).toBe(true);
-      });
-
-      it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                classes: 'extra-class another-extra-class',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link').hasClass('extra-class')).toBe(true);
-        expect($('.ons-list__link').hasClass('another-extra-class')).toBe(true);
-      });
-
-      it('has the provided `target` attribute', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                target: '_blank',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link').attr('target')).toBe('_blank');
-      });
-
-      it('renders visually hidden screen reader message when target is "_blank"', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                target: '_blank',
-                screenreaderMessage: 'opens in a new tab',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
-      });
-
-      it('renders a default visually hidden screen reader message when target is "_blank"', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                target: '_blank',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
-      });
-
-      it('has additionally provided `attributes`', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                attributes: {
-                  a: 123,
-                  b: 456,
-                },
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link').attr('a')).toBe('123');
-        expect($('.ons-list__link').attr('b')).toBe('456');
-      });
-
-      it('renders visually hidden prefix', () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: '/internal-link',
-                prefix: 'item prefix',
-              },
-            ],
-          }),
-        );
-
-        expect($('.ons-list__link .ons-u-vh').text()).toBe('item prefix');
-      });
-    });
+    describe.each([
+        ['text', EXAMPLE_ITEM_TEXT, 'Text item with <strong>markup</strong>'],
+        ['article title', EXAMPLE_ITEM_ARTICLE_TITLE, 'Article title'],
+        ['navigation title', EXAMPLE_ITEM_NAVIGATION_TITLE, 'Nav friendly title'],
+    ])('with %s', (_, item, expectedItemText) => {
+        describe('content without link', () => {
+            it('passes jest-axe checks', async () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [item],
+                    }),
+                );
+
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            it('renders the expected list item text', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [item],
+                    }),
+                );
+
+                expect($.html()).toContain(expectedItemText);
+            });
+
+            it('does not render a hyperlink element', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [item],
+                    }),
+                );
+
+                expect($('a').length).toBe(0);
+            });
+        });
 
-    describe('content with an external link', () => {
-      it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(
-          renderComponent('list', {
-            itemsList: [
-              {
-                ...item,
-                url: 'https://example.com/external-link',
-                external: true,
-              },
-            ],
-          }),
-        );
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-      });
-
-      it('uses the `external-link` component to render external links', () => {
-        const faker = templateFaker();
-        const externalLinkSpy = faker.spy('external-link');
-
-        faker.renderComponent('list', {
-          itemsList: [
-            {
-              ...item,
-              url: 'https://example.com/external-link',
-              external: true,
-            },
-          ],
+        describe('content with an internal link', () => {
+            it('passes jest-axe checks', async () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                            },
+                        ],
+                    }),
+                );
+
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            it('renders a hyperlink element', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').is('a')).toBe(true);
+                expect($('.ons-list__link').attr('href')).toBe('/internal-link');
+            });
+
+            it('does not render a hyperlink element for current item', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                current: true,
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('a').length).toBe(0);
+            });
+
+            it('supports the `inPageLink` variant', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                variants: 'inPageLink',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').hasClass('ons-js-inpagelink')).toBe(true);
+            });
+
+            it('has additionally provided style classes', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                classes: 'extra-class another-extra-class',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').hasClass('extra-class')).toBe(true);
+                expect($('.ons-list__link').hasClass('another-extra-class')).toBe(true);
+            });
+
+            it('has the provided `target` attribute', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                target: '_blank',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').attr('target')).toBe('_blank');
+            });
+
+            it('renders visually hidden screen reader message when target is "_blank"', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                target: '_blank',
+                                screenreaderMessage: 'opens in a new tab',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
+            });
+
+            it('renders a default visually hidden screen reader message when target is "_blank"', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                target: '_blank',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
+            });
+
+            it('has additionally provided `attributes`', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                attributes: {
+                                    a: 123,
+                                    b: 456,
+                                },
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link').attr('a')).toBe('123');
+                expect($('.ons-list__link').attr('b')).toBe('456');
+            });
+
+            it('renders visually hidden prefix', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: '/internal-link',
+                                prefix: 'item prefix',
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__link .ons-u-vh').text()).toBe('item prefix');
+            });
         });
 
-        expect(externalLinkSpy.occurrences[0]).toEqual({
-          url: 'https://example.com/external-link',
-          linkText: expectedItemText,
+        describe('content with an external link', () => {
+            it('passes jest-axe checks', async () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                url: 'https://example.com/external-link',
+                                external: true,
+                            },
+                        ],
+                    }),
+                );
+
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            it('uses the `external-link` component to render external links', () => {
+                const faker = templateFaker();
+                const externalLinkSpy = faker.spy('external-link');
+
+                faker.renderComponent('list', {
+                    itemsList: [
+                        {
+                            ...item,
+                            url: 'https://example.com/external-link',
+                            external: true,
+                        },
+                    ],
+                });
+
+                expect(externalLinkSpy.occurrences[0]).toEqual({
+                    url: 'https://example.com/external-link',
+                    linkText: expectedItemText,
+                });
+            });
+
+            it('does not use the `external-link` component to render the current item', () => {
+                const faker = templateFaker();
+                const externalLinkSpy = faker.spy('external-link');
+
+                faker.renderComponent('list', {
+                    itemsList: [
+                        {
+                            ...item,
+                            url: 'https://example.com/external-link',
+                            external: true,
+                            current: true,
+                        },
+                    ],
+                });
+
+                expect(externalLinkSpy.occurrences.length).toBe(0);
+            });
         });
-      });
-
-      it('does not use the `external-link` component to render the current item', () => {
-        const faker = templateFaker();
-        const externalLinkSpy = faker.spy('external-link');
-
-        faker.renderComponent('list', {
-          itemsList: [
-            {
-              ...item,
-              url: 'https://example.com/external-link',
-              external: true,
-              current: true,
-            },
-          ],
+    });
+
+    describe('prefix', () => {
+        it('renders item `prefix` content', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [
+                        {
+                            prefix: '[PREFIX]',
+                            text: 'Item text',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__prefix').text().trim()).toBe('[PREFIX].');
         });
 
-        expect(externalLinkSpy.occurrences.length).toBe(0);
-      });
-    });
-  });
-
-  describe('prefix', () => {
-    it('renders item `prefix` content', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [
-            {
-              prefix: '[PREFIX]',
-              text: 'Item text',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__prefix').text().trim()).toBe('[PREFIX].');
-    });
+        it('marks `prefix` content as visually hidden when list element is not <ol>', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [
+                        {
+                            prefix: '[PREFIX]',
+                            text: 'Item text',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__prefix').attr('aria-hidden')).toBe('true');
+        });
 
-    it('marks `prefix` content as visually hidden when list element is not <ol>', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [
-            {
-              prefix: '[PREFIX]',
-              text: 'Item text',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__prefix').attr('aria-hidden')).toBe('true');
+        it('does not mark `prefix` content as visually hidden when list element is <ol>', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    element: 'ol',
+                    itemsList: [
+                        {
+                            prefix: '[PREFIX]',
+                            text: 'Item text 1',
+                        },
+                        {
+                            prefix: '[PREFIX]',
+                            text: 'Item text 2',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__prefix').attr('aria-hidden')).toBeUndefined();
+        });
     });
 
-    it('does not mark `prefix` content as visually hidden when list element is <ol>', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          element: 'ol',
-          itemsList: [
-            {
-              prefix: '[PREFIX]',
-              text: 'Item text 1',
-            },
-            {
-              prefix: '[PREFIX]',
-              text: 'Item text 2',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__prefix').attr('aria-hidden')).toBeUndefined();
-    });
-  });
-
-  describe('suffix', () => {
-    it('renders item `suffix` content', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [
-            {
-              suffix: '[SUFFIX]',
-              text: 'Item text',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__suffix').text().trim()).toBe('[SUFFIX]');
-    });
+    describe('suffix', () => {
+        it('renders item `suffix` content', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [
+                        {
+                            suffix: '[SUFFIX]',
+                            text: 'Item text',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__suffix').text().trim()).toBe('[SUFFIX]');
+        });
 
-    it('marks `suffix` content as visually hidden when list element is not <ol>', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [
-            {
-              suffix: '[SUFFIX]',
-              text: 'Item text',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__suffix').attr('aria-hidden')).toBe('true');
-    });
+        it('marks `suffix` content as visually hidden when list element is not <ol>', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [
+                        {
+                            suffix: '[SUFFIX]',
+                            text: 'Item text',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__suffix').attr('aria-hidden')).toBe('true');
+        });
 
-    it('does not mark `suffix` content as visually hidden when list element is <ol>', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          element: 'ol',
-          itemsList: [
-            {
-              suffix: '[SUFFIX]',
-              text: 'Item text 1',
-            },
-            {
-              suffix: '[SUFFIX]',
-              text: 'Item text 2',
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-list__suffix').attr('aria-hidden')).toBeUndefined();
-    });
-  });
-
-  describe('icons', () => {
-    it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', (iconPosition) => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icon');
-
-      faker.renderComponent('list', {
-        ...EXAMPLE_LIST_TEXT_ITEMS,
-        iconPosition,
-        iconType: 'check',
-        iconSize: 'xl',
-      });
-
-      expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xl' });
-      expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'check', iconSize: 'xl' });
+        it('does not mark `suffix` content as visually hidden when list element is <ol>', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    element: 'ol',
+                    itemsList: [
+                        {
+                            suffix: '[SUFFIX]',
+                            text: 'Item text 1',
+                        },
+                        {
+                            suffix: '[SUFFIX]',
+                            text: 'Item text 2',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-list__suffix').attr('aria-hidden')).toBeUndefined();
+        });
     });
 
-    it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', (iconPosition) => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icon');
+    describe('icons', () => {
+        it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', (iconPosition) => {
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
 
-      faker.renderComponent('list', {
-        itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
-        iconPosition,
-        iconType: 'check',
-        iconSize: 'xxl',
-      });
+            faker.renderComponent('list', {
+                ...EXAMPLE_LIST_TEXT_ITEMS,
+                iconPosition,
+                iconType: 'check',
+                iconSize: 'xl',
+            });
 
-      expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xxl' });
-      expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: 'xxl' });
-      expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: 'xxl' });
-    });
+            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xl' });
+            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'check', iconSize: 'xl' });
+        });
 
-    it('renders the icon before the item text', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
-          iconPosition: 'before',
-          iconType: 'check',
-          iconSize: 'xl',
-        }),
-      );
-
-      expect($('.ons-list__prefix + #first').length).toBe(1);
-    });
+        it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', (iconPosition) => {
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
 
-    it('renders the icon after the item text', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
-          iconPosition: 'after',
-          iconType: 'check',
-          iconSize: 'xl',
-        }),
-      );
-
-      expect($('#first + .ons-list__suffix').length).toBe(1);
-    });
-  });
-
-  describe('nested list element', () => {
-    it('has provided variant style class when one variant is provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
-          variants: 'dashed',
-        }),
-      );
-
-      expect($('.ons-list--dashed').length).toBe(2);
-    });
+            faker.renderComponent('list', {
+                itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
+                iconPosition,
+                iconType: 'check',
+                iconSize: 'xxl',
+            });
 
-    it('has provided variant style classes when multiple variants are provided', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
-          variants: ['dashed', 'inline'],
-        }),
-      );
+            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xxl' });
+            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: 'xxl' });
+            expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: 'xxl' });
+        });
 
-      expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
-      expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
+        it('renders the icon before the item text', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
+                    iconPosition: 'before',
+                    iconType: 'check',
+                    iconSize: 'xl',
+                }),
+            );
+
+            expect($('.ons-list__prefix + #first').length).toBe(1);
+        });
+
+        it('renders the icon after the item text', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
+                    iconPosition: 'after',
+                    iconType: 'check',
+                    iconSize: 'xl',
+                }),
+            );
+
+            expect($('#first + .ons-list__suffix').length).toBe(1);
+        });
     });
 
-    it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
-      const $ = cheerio.load(
-        renderComponent('list', {
-          ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
-        }),
-      );
+    describe('nested list element', () => {
+        it('has provided variant style class when one variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+                    variants: 'dashed',
+                }),
+            );
 
-      expect($('.ons-list li').length).toBe(5);
+            expect($('.ons-list--dashed').length).toBe(2);
+        });
+
+        it('has provided variant style classes when multiple variants are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+                    variants: ['dashed', 'inline'],
+                }),
+            );
+
+            expect($('.ons-list').hasClass('ons-list--dashed')).toBe(true);
+            expect($('.ons-list').hasClass('ons-list--inline')).toBe(true);
+        });
+
+        it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_NESTED_LIST_TEXT_ITEMS,
+                }),
+            );
+
+            expect($('.ons-list li').length).toBe(5);
+        });
     });
-  });
 });