Fix/645 add unit tests for slots (#903)

* fix(ui-library): adding unit tests for components using slots
deven-org · Feb 21, 2024 · 41f609a · 41f609a
1 parent e73c650
commit 41f609a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/packages/ui-library/src/components/form-caption-group/index.test.ts b/packages/ui-library/src/components/form-caption-group/index.test.ts
@@ -4,7 +4,7 @@ import { BlrFormCaptionGroupRenderFunction } from './renderFunction';
 import { BlrFormCaptionGroupType } from './index';
 
 import { fixture, expect } from '@open-wc/testing';
-import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { querySelectorAllDeep } from 'query-selector-shadow-dom';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { html } from 'lit-html';
 
@@ -33,8 +33,7 @@ const mixedCaptions = html` ${hintCaption} ${errorCaption} `;
 describe('blr-form-caption-group', () => {
   it('is rendering captions inside slot', async () => {
     const element = await fixture(BlrFormCaptionGroupRenderFunction(sampleParams, mixedCaptions));
-    const caption = querySelectorDeep('blr-form-caption', element.getRootNode() as HTMLElement);
-
-    expect(caption).to.exist;
+    const captions = querySelectorAllDeep('blr-form-caption', element.getRootNode() as HTMLElement);
+    expect(captions).to.be.lengthOf(captions.length);
   });
 });
diff --git a/packages/ui-library/src/components/select/index.test.ts b/packages/ui-library/src/components/select/index.test.ts
@@ -83,4 +83,11 @@ describe('blr-select', () => {
 
     expect(className).to.contain('sm');
   });
+
+  it('is rendering options inside slot', async () => {
+    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, size: 'sm' }, optionsAsChildren));
+    const options = querySelectorAllDeep('.blr-select-option', element?.getRootNode() as HTMLElement);
+    const optionsLength = optionsAsChildren.strings[0].trim().split('</option>').filter(Boolean).length;
+    expect(options).to.be.lengthOf(optionsLength);
+  });
 });
diff --git a/packages/ui-library/src/components/tab-bar/index.test.ts b/packages/ui-library/src/components/tab-bar/index.test.ts
@@ -3,7 +3,7 @@ import '@boiler/ui-library/dist/';
 import { BlrTabBarRenderFunction } from './renderFunction';
 
 import { fixture, expect } from '@open-wc/testing';
-import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';
 import { html } from 'lit-html';
 import { BlrTabBarType } from '.';
 
@@ -45,18 +45,23 @@ describe('blr-tab-bar', () => {
   it('has a size md by default', async () => {
     const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
 
-    const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
-    const className = input?.className;
-
+    const tabBar = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
+    const className = tabBar?.className;
     expect(className).to.contain('md');
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
     const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }, tabsAsChildren));
 
-    const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
-    const className = input?.className;
-
+    const tabBar = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
+    const className = tabBar?.className;
     expect(className).to.contain('sm');
   });
+
+  it('is rendering tabs inside slot', async () => {
+    const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }, tabsAsChildren));
+    const tabs = querySelectorAllDeep('.nav-item-container', element?.getRootNode() as HTMLElement);
+    const tabsLength = tabsAsChildren.strings[0].trim().split('</p>').filter(Boolean).length;
+    expect(tabs).to.be.lengthOf(tabsLength);
+  });
 });
diff --git a/packages/ui-library/src/components/tooltip/index.test.ts b/packages/ui-library/src/components/tooltip/index.test.ts
@@ -12,7 +12,10 @@ const sampleParams: BlrTooltipType = {
   placement: 'right',
 };
 
-const testContent = html`<div style="height: 200px; width: 200px; background-color: lightblue"></div>`;
+const testContent = html`<div
+  className="blue-box"
+  style="height: 200px; width: 200px; background-color: lightblue"
+></div>`;
 
 describe('blr-tooltip', () => {
   it('is having a tooltip bubble element', async () => {
@@ -22,4 +25,9 @@ describe('blr-tooltip', () => {
 
     expect(tooltip).to.exist;
   });
+
+  it('is rendering the tooltip child element', async () => {
+    const element = await fixture(BlrTooltipRenderFunction(sampleParams, testContent));
+    expect(element.childNodes[1]).to.exist;
+  });
 });