test: first pass test for breadcrumb

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('<sl-breadcrumb>', () => {
       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<SlBreadcrumb>(html`
+        <sl-breadcrumb>
+          <span class="replacement-separator" slot="separator">/</span>
+          <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('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);
+    });
   });
 });