feat: create tests for tooltip component

src/web-components/dropdown/index.test.ts

@@ -1,4 +1,3 @@
-import { drop } from 'lodash';
 import '.';
 
 import sleep from '../../common/utils/sleep';
@@ -47,12 +46,12 @@ export const createEl = ({
   }
 
   if (showTooltip) {
-    element.setAttribute('showTooltip', JSON.stringify(showTooltip));
     const onHoverData = {
       name: 'onHover',
       action: 'Click to see more',
     };
     element.setAttribute('onHoverData', JSON.stringify(onHoverData));
+    element.setAttribute('canShowTooltip', 'true');
   }
 
   if (!options) {
@@ -459,23 +458,14 @@ describe('dropdown', () => {
     });
   });
 
-  describe.only('onHover', () => {
-    test('should show tooltip when hovering', async () => {
+  describe('tooltip', () => {
+    test('should render tooltip if can show it', async () => {
       createEl({ position: 'bottom-right', align: 'left', showTooltip: true });
-
       await sleep();
 
       const tooltip = element()?.shadowRoot?.querySelector('superviz-tooltip');
 
-      expect(tooltip).toBeFalsy();
-
-      dropdown()?.dispatchEvent(new MouseEvent('mouseenter'));
-
-      const tooltipAfterHover = element()?.shadowRoot?.querySelector(
-        '.superviz-who-is-online__tooltip',
-      );
-
-      expect(tooltipAfterHover).toBeTruthy();
+      expect(tooltip).toBeTruthy();
     });
   });
 });

src/web-components/dropdown/index.ts

@@ -67,13 +67,13 @@ export class Dropdown extends WebComponentsBaseElement {
     super.disconnectedCallback();
     document.removeEventListener('click', this.onClickOutDropdown);
     const dropdown = this.shadowRoot.querySelector('.dropdown');
-    dropdown.removeEventListener('mouseenter', () => {
+    dropdown?.removeEventListener('mouseenter', () => {
       this.showTooltip = true;
     });
-    dropdown.removeEventListener('mouseleave', () => {
+    dropdown?.removeEventListener('mouseleave', () => {
       this.showTooltip = false;
     });
-    this.dropdownResizeObserver.disconnect();
+    this.dropdownResizeObserver?.disconnect();
   }
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {

src/web-components/tooltip/index.style.ts

@@ -2,7 +2,7 @@ import { css } from 'lit';
 
 export const dropdownStyle = css`
   .superviz-who-is-online__tooltip {
-    --host-heigth: 0px;
+    --host-height: 0px;
     --host-width: 0px;
     --vertical-offset: 12px;
 
@@ -65,11 +65,11 @@ export const dropdownStyle = css`
 
   .tooltip-top {
     top: auto;
-    bottom: calc(var(--host-heigth) + var(--vertical-offset));
+    bottom: calc(var(--host-height) + var(--vertical-offset));
   }
 
   .tooltip-bottom {
-    top: calc(var(--host-heigth) + var(--vertical-offset));
+    top: calc(var(--host-height) + var(--vertical-offset));
     bottom: auto;
   }
 

src/web-components/tooltip/index.test.ts

@@ -0,0 +1,146 @@
+import sleep from '../../common/utils/sleep';
+
+import '.';
+
+interface Attributes {
+  tooltipData?: { name: string; action: string };
+  shiftTooltipLeft?: boolean;
+}
+
+const createEl = ({ shiftTooltipLeft, tooltipData }: Attributes) => {
+  const element = document.createElement('superviz-tooltip');
+  document.body.appendChild(element);
+  if (shiftTooltipLeft) {
+    element.setAttribute('shiftTooltipLeft', '');
+  }
+
+  if (tooltipData) {
+    element.setAttribute('tooltipData', JSON.stringify(tooltipData));
+  }
+
+  document.body.appendChild(element);
+
+  return element;
+};
+
+describe('tooltip', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.style.width = '300px';
+    document.body.style.height = '300px';
+  });
+
+  test('should instantiate with the correct default ', async () => {
+    createEl({});
+    const element = document.querySelector('superviz-tooltip');
+    expect(element).toBeTruthy();
+  });
+
+  test('should set default position at bottom center', async () => {
+    const element = createEl({});
+    await sleep();
+
+    expect(element['tooltipVerticalPosition']).toBe('tooltip-bottom');
+    expect(element['tooltipHorizontalPosition']).toBe('tooltip-center');
+  });
+
+  test('should toggle tooltip on mouseenter', async () => {
+    const element = createEl({});
+    await sleep();
+
+    const mouseEnter = new CustomEvent('mouseenter', { bubbles: true, composed: true });
+    element.dispatchEvent(mouseEnter);
+    await sleep();
+
+    expect(element['showTooltip']).toBe(true);
+
+    const mouseLeave = new CustomEvent('mouseleave', { bubbles: true, composed: true });
+    element.dispatchEvent(mouseLeave);
+    await sleep();
+
+    expect(element['showTooltip']).toBe(false);
+  });
+
+  test('should repostion tooltip to top if bottom is out of the screen', async () => {
+    const element = createEl({});
+    await sleep();
+
+    element['tooltip'].getBoundingClientRect = jest.fn(() => {
+      return { bottom: 1000, top: 100 };
+    });
+
+    element['adjustTooltipPosition']();
+    await sleep();
+
+    expect(element['tooltipVerticalPosition']).toBe('tooltip-top');
+  });
+
+  test('should repostion tooltip to bottom if top is out of the screen', async () => {
+    const element = createEl({});
+    await sleep();
+    element['tooltipVerticalPosition'] = 'tooltip-top';
+
+    element['tooltip'].getBoundingClientRect = jest.fn(() => {
+      return { bottom: 100, top: -1 };
+    });
+
+    element['adjustTooltipPosition']();
+    await sleep();
+
+    expect(element['tooltipVerticalPosition']).toBe('tooltip-bottom');
+  });
+
+  test('should repostion tooltip to right if left is out of the screen', async () => {
+    const element = createEl({});
+    await sleep();
+
+    element['tooltip'].getBoundingClientRect = jest.fn(() => {
+      return { left: -1, right: 100 };
+    });
+
+    element['adjustTooltipPosition']();
+    await sleep();
+
+    expect(element['tooltipHorizontalPosition']).toBe('tooltip-right');
+  });
+
+  test('should repostion tooltip to left if right is out of the screen', async () => {
+    const element = createEl({});
+    await sleep();
+
+    element['tooltip'].getBoundingClientRect = jest.fn(() => {
+      return { left: 100, right: 1000 };
+    });
+
+    const map = new Map([['showTooltip', true]]);
+    map.has = jest.fn(() => true);
+    element['adjustTooltipPosition']();
+    element['updated'](map);
+    await sleep();
+
+    expect(element['tooltipHorizontalPosition']).toBe('tooltip-left');
+  });
+
+  test('should render tooltip with the correct data', async () => {
+    const element = createEl({
+      tooltipData: { name: 'test name', action: 'test action' },
+    });
+    await sleep();
+
+    const mouseEnter = new CustomEvent('mouseenter', { bubbles: true, composed: true });
+    element.dispatchEvent(mouseEnter);
+    await sleep();
+
+    const tooltip = element.shadowRoot!.querySelector(
+      '.superviz-who-is-online__tooltip',
+    ) as HTMLElement;
+    expect(tooltip).toBeTruthy();
+
+    const tooltipName = tooltip!.querySelector('.tooltip-name');
+
+    expect(tooltipName!.textContent).toBe('test name');
+
+    const tooltipAction = tooltip!.querySelector('.tooltip-action');
+    expect(tooltipAction!.textContent).toBe('test action');
+  });
+});

src/web-components/tooltip/index.ts

@@ -23,7 +23,7 @@ export class Tooltip extends WebComponentsBaseElement {
   declare tooltipHorizontalPosition: Positions;
   declare shiftTooltipLeft: boolean;
 
-  declare hostSizes: { height: number; width: number };
+  declare parentSizes: { height: number; width: number };
 
   static properties = {
     tooltipData: { type: Object },
@@ -32,56 +32,61 @@ export class Tooltip extends WebComponentsBaseElement {
     tooltip: { type: Object },
     tooltipVerticalPosition: { type: String },
     tooltipHorizontalPosition: { type: String },
-    hostSizes: { type: Object },
+    parentSizes: { type: Object },
     shiftTooltipLeft: { type: Boolean },
   };
 
   constructor() {
     super();
     this.tooltipVerticalPosition = PositionsEnum['TOOLTIP-BOTTOM'];
     this.tooltipHorizontalPosition = PositionsEnum['TOOLTIP-CENTER'];
+    this.showTooltip = false;
+    this.parentSizes = { height: 0, width: 0 };
   }
 
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
-    const { host } = this.getRootNode() as unknown as { host: HTMLElement };
-
-    host.addEventListener('mouseenter', () => {
-      this.showTooltip = true;
-    });
-
-    host.addEventListener('mouseleave', () => {
-      this.showTooltip = false;
-    });
+    const { parentElement } = this;
+    parentElement?.addEventListener('mouseenter', this.show);
+    parentElement?.addEventListener('mouseleave', this.hide);
 
     this.tooltipVerticalPosition = PositionsEnum['TOOLTIP-BOTTOM'];
     this.tooltipHorizontalPosition = PositionsEnum['TOOLTIP-CENTER'];
   }
 
+  private hide = () => {
+    this.showTooltip = false;
+  };
+
+  private show = () => {
+    this.showTooltip = true;
+  };
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    const { host } = this.getRootNode() as unknown as { host: HTMLElement };
-    host.removeEventListener('mouseenter', () => {
-      this.showTooltip = true;
-    });
-
-    host.removeEventListener('mouseleave', () => {
-      this.showTooltip = false;
-    });
+
+    const { parentElement } = this;
+
+    parentElement?.removeEventListener('mouseenter', this.show);
+    parentElement?.removeEventListener('mouseleave', this.hide);
   }
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     if (changedProperties.has('showTooltip') && this.showTooltip) {
-      const { height, width } = (this.getRootNode() as any).host.getBoundingClientRect();
-      if (this.hostSizes?.height !== height || this.hostSizes?.width !== width) {
-        this.hostSizes = { height, width };
+      const { parentElement } = this;
+      if (!parentElement) return;
+
+      const { height, width } = parentElement.getBoundingClientRect();
+
+      if (this.parentSizes.height !== height || this.parentSizes.width !== width) {
+        this.parentSizes = { height, width };
       }
     }
   }
 
   private adjustTooltipVerticalPosition = () => {
-    const { left, right, bottom, top } = this.tooltip.getBoundingClientRect();
+    const { bottom, top } = this.tooltip.getBoundingClientRect();
     const maxY = window.innerHeight;
 
     if (this.tooltipVerticalPosition.includes('top') && top < 0) {
@@ -144,7 +149,8 @@ export class Tooltip extends WebComponentsBaseElement {
 
     return html`<div
       class=${classMap(classList)}
-      style="--host-heigth: ${this.hostSizes?.height}px; --host-width: ${this.hostSizes?.width}px;"
+      style="--host-height: ${this.parentSizes?.height}px; --host-width: ${this.parentSizes
+        ?.width}px;"
     >
       <p class="tooltip-name">${this.tooltipData?.name}</p>
       <p class="tooltip-action">${this.tooltipData?.action}</p>