test: uplift sepcificity of aria test, and test separator.

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('<sl-breadcrumb>', () => {
-  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('<sl-breadcrumb>', () => {
       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<SlBreadcrumb>(html`
         <sl-breadcrumb>
@@ -44,9 +49,72 @@ describe('<sl-breadcrumb>', () => {
       await expect(el).to.be.accessible();
     });
 
+    it('should accept "separator" as an assigned child in the shadow root', async () => {
+      const slot = <HTMLSlotElement>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<SlBreadcrumb>(html`
+        <sl-breadcrumb>
+          <sl-breadcrumb-item>
+            <span class="prefix-example" slot="prefix">/</span>
+            Home
+          </sl-breadcrumb-item>
+          <sl-breadcrumb-item>First</sl-breadcrumb-item>
+          <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+          <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+        </sl-breadcrumb>
+      `);
+    });
+
+    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 = <HTMLSlotElement>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<SlBreadcrumb>(html`
+        <sl-breadcrumb>
+          <sl-breadcrumb-item>First</sl-breadcrumb-item>
+          <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+          <sl-breadcrumb-item>Third</sl-breadcrumb-item>
+          <sl-breadcrumb-item>
+            <span class="prefix-example" slot="suffix">/</span>
+            Security
+          </sl-breadcrumb-item>
+        </sl-breadcrumb>
+      `);
+    });
+
+    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 = <HTMLSlotElement>el.shadowRoot.querySelector('slot[name=suffix]');
+      const childNodes = slot.assignedNodes({ flatten: true });
+
+      expect(childNodes.length).to.eq(1);
+    });
+  });
 });