From 86e06ce1e639039bef2e455af70fa1d29c90e10c Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Tue, 21 Sep 2021 20:43:32 +1000 Subject: [PATCH 1/3] test: start the breadcrumb test. --- src/components/breadcrumb/breadcrumb.test.ts | 34 +++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.test.ts b/src/components/breadcrumb/breadcrumb.test.ts index b3c65045..62292176 100644 --- a/src/components/breadcrumb/breadcrumb.test.ts +++ b/src/components/breadcrumb/breadcrumb.test.ts @@ -1,13 +1,39 @@ -import { expect, fixture, html, waitUntil } from '@open-wc/testing'; +import { expect, fixture, html } from '@open-wc/testing'; // import sinon from 'sinon'; import '../../../dist/shoelace.js'; import type SlBreadcrumb from './breadcrumb'; describe('', () => { - it('should render a component', async () => { - const el = await fixture(html` `); + let el; - expect(el).to.exist; + describe('when provided a standard list of el-breadcrumb-item children and no parameters', async () => { + before(async () => { + el = await fixture(html` + + Catalog + Clothing + Women's + Shirts & Tops + + `); + }); + + it('should render a component that passes accessibility test', async () => { + await expect(el).to.be.accessible(); + }); + + it('should render a component that passes accessibility test', async () => { + await expect(el).to.be.accessible(); + }); + + // it('should render the child content provided', async () => { + // expect(el.innerText).to.eq('Badge'); + // }); + + // it('should default to square styling, with the primary color', async () => { + // const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement; + // expect(part.classList.value).to.eq('badge badge--primary'); + // }); }); }); From 35d7926e1896cae16fdda8602ba753815ce4658a Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Tue, 21 Sep 2021 22:18:21 +1000 Subject: [PATCH 2/3] test: first pass test for breadcrumb --- src/components/breadcrumb/breadcrumb.test.ts | 31 ++++++++++++++------ 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.test.ts b/src/components/breadcrumb/breadcrumb.test.ts index 62292176..72fd10b2 100644 --- a/src/components/breadcrumb/breadcrumb.test.ts +++ b/src/components/breadcrumb/breadcrumb.test.ts @@ -1,4 +1,4 @@ -import { expect, fixture, html } from '@open-wc/testing'; +import { expect, fixture, html, waitUntil } from '@open-wc/testing'; // import sinon from 'sinon'; import '../../../dist/shoelace.js'; @@ -23,17 +23,30 @@ describe('', () => { await expect(el).to.be.accessible(); }); + it.only('should render sl-icon as separator', async () => { + expect(el.querySelectorAll('sl-icon').length).to.eq(4); + }); + }); + + describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "seperator"', async () => { + before(async () => { + el = await fixture(html` + + / + First + Second + Third + + `); + }); + it('should render a component that passes accessibility test', async () => { await expect(el).to.be.accessible(); }); - // it('should render the child content provided', async () => { - // expect(el.innerText).to.eq('Badge'); - // }); - - // it('should default to square styling, with the primary color', async () => { - // const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement; - // expect(part.classList.value).to.eq('badge badge--primary'); - // }); + it('should replace the sl-icon separator with the provided separator', async () => { + expect(el.querySelectorAll('.replacement-separator').length).to.eq(4); + expect(el.querySelectorAll('sl-icon').length).to.eq(0); + }); }); }); From c38fd3986c5add7798f4142f95817e197de487f1 Mon Sep 17 00:00:00 2001 From: Christos Hrousis Date: Sat, 25 Sep 2021 12:12:50 +1000 Subject: [PATCH 3/3] test: uplift sepcificity of aria test, and test separator. --- src/components/breadcrumb/breadcrumb.test.ts | 78 ++++++++++++++++++-- 1 file changed, 73 insertions(+), 5 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.test.ts b/src/components/breadcrumb/breadcrumb.test.ts index 72fd10b2..fdd5641e 100644 --- a/src/components/breadcrumb/breadcrumb.test.ts +++ b/src/components/breadcrumb/breadcrumb.test.ts @@ -1,11 +1,10 @@ -import { expect, fixture, html, waitUntil } from '@open-wc/testing'; -// import sinon from 'sinon'; +import { expect, fixture, html } from '@open-wc/testing'; import '../../../dist/shoelace.js'; import type SlBreadcrumb from './breadcrumb'; describe('', () => { - let el; + let el: SlBreadcrumb; describe('when provided a standard list of el-breadcrumb-item children and no parameters', async () => { before(async () => { @@ -23,12 +22,18 @@ describe('', () => { await expect(el).to.be.accessible(); }); - it.only('should render sl-icon as separator', async () => { + it('should render sl-icon as separator', async () => { expect(el.querySelectorAll('sl-icon').length).to.eq(4); }); + + it('should attach aria-current "page" on the last breadcrumb item.', async () => { + const breadcrumbItems = el.querySelectorAll('sl-breadcrumb-item'); + const lastNode = breadcrumbItems[3]; + expect(lastNode).attribute('aria-current', 'page'); + }); }); - describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "seperator"', async () => { + describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "seperator" to support Custom Separators', async () => { before(async () => { el = await fixture(html` @@ -44,9 +49,72 @@ describe('', () => { await expect(el).to.be.accessible(); }); + it('should accept "separator" as an assigned child in the shadow root', async () => { + const slot = el.shadowRoot.querySelector('slot[name=separator]'); + const childNodes = slot.assignedNodes({ flatten: true }); + + expect(childNodes.length).to.eq(1); + }); + it('should replace the sl-icon separator with the provided separator', async () => { expect(el.querySelectorAll('.replacement-separator').length).to.eq(4); expect(el.querySelectorAll('sl-icon').length).to.eq(0); }); }); + + describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', async () => { + before(async () => { + el = await fixture(html` + + + / + Home + + First + Second + Third + + `); + }); + + it('should render a component that passes accessibility test', async () => { + await expect(el).to.be.accessible(); + }); + + it.skip('should accept "prefix" as an assigned child in the shadow root', () => { + // TODO: I suspect this test doesn't work because the slot resides inside the breadcrumb-item not the breadcrumb list + const slot = el.shadowRoot.querySelector('slot[name=prefix]'); + const childNodes = slot.assignedNodes({ flatten: true }); + + expect(childNodes.length).to.eq(1); + }); + }); + + describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', async () => { + before(async () => { + el = await fixture(html` + + First + Second + Third + + / + Security + + + `); + }); + + it('should render a component that passes accessibility test', async () => { + await expect(el).to.be.accessible(); + }); + + it.skip('should accept "suffix" as an assigned child in the shadow root', () => { + // TODO: I suspect this test doesn't work because the slot resides inside the breadcrumb-item not the breadcrumb list + const slot = el.shadowRoot.querySelector('slot[name=suffix]'); + const childNodes = slot.assignedNodes({ flatten: true }); + + expect(childNodes.length).to.eq(1); + }); + }); });