feat(tests): add full e2e coverage for Tooltip component

cypress/full/tooltip_page_spec.ts

@@ -0,0 +1,209 @@
+import { TooltipPo } from '../support/tooltip.po';
+
+describe('Tooltip demo page test suite', () => {
+  const tooltip = new TooltipPo();
+
+  before(() => tooltip.navigateTo());
+
+  describe('Placement tooltip', () => {
+
+    const basic = tooltip.exampleDemosArr.placement;
+    const placement = tooltip.tooltipPlacements;
+
+    it('when user on hovering on trigger btn in the Placement exmpl - tooltip appears on the setted placement', () => {
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placement.top.tooltipClass,
+        placement.top.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placement.right.tooltipClass,
+        placement.right.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placement.auto.tooltipClass,
+        placement.auto.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placement.left.tooltipClass,
+        placement.left.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placement.bottom.tooltipClass,
+        placement.bottom.name
+      );
+    });
+  });
+
+  describe('Dismiss tooltip', () => {
+
+    const dismissPlacement = tooltip.exampleDemosArr.dismiss;
+
+    it('when user click on Dismissible btn, tooltip appears', () => {
+      tooltip.clickOnTooltip(dismissPlacement);
+      tooltip.isTooltipAppearsAndVisible(dismissPlacement);
+    });
+    it('when user clicks the another placement, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(dismissPlacement);
+    });
+  });
+
+  describe('Dynamic Content', () => {
+
+    const dynamicContentPlacement = tooltip.exampleDemosArr.dynamicTooltip;
+
+    it('when user clicks on the Dynamic Content tooltip btn, Tooltip appears', () => {
+      tooltip.focusOnTooltip(dynamicContentPlacement);
+      tooltip.isTooltipAppearsAndVisible(dynamicContentPlacement);
+    });
+
+    it('when user clicks the another placement, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(dynamicContentPlacement);
+    });
+  });
+
+  describe('Custom content template', () => {
+
+    const customContentTemplate = tooltip.exampleDemosArr.customContentTemplate;
+
+    it('when user clicks on the Custom content template tooltip btn, Tooltip appears', () => {
+      tooltip.focusOnTooltip(customContentTemplate);
+      tooltip.isTooltipAppearsAndVisible(customContentTemplate);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(customContentTemplate);
+    });
+  });
+
+  describe('Dynamic Html', () => {
+
+    const dynamicHtmlTooltip = tooltip.exampleDemosArr.dynamicHtmlButton;
+
+    it('when user hover on the tooltip btn, Tooltip appears', () => {
+      tooltip.focusOnTooltip(dynamicHtmlTooltip);
+      tooltip.isTooltipAppearsAndVisible(dynamicHtmlTooltip);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(dynamicHtmlTooltip);
+    });
+  });
+
+  describe('Append to body', () => {
+
+    const appendToBody = tooltip.exampleDemosArr.defaultTooltip;
+
+    it('when user hover on the "Default tooltip", tooltip appears and dismiss after mouse leave', () => {
+      tooltip.focusOnBtn(appendToBody);
+      tooltip.isTooltipAppearsAndVisible(tooltip.body);
+      tooltip.isTooltipDismissAfterClick(appendToBody);
+    });
+
+    it('when user hover on the "Tooltip appended to body", tooltip appears and dismiss after mouse leave', () => {
+      tooltip.focusOnBtn(appendToBody, 1);
+      tooltip.isTooltipAppearsAndVisible(tooltip.body);
+      tooltip.isTooltipDismissAfterClick(appendToBody);
+    });
+  });
+
+  describe('Configuring defaults', () => {
+
+    const configuringDefaultsTooltip = tooltip.exampleDemosArr.configuringDefaults;
+
+    it('when user clicks on the Configuring tooltip btn, Tooltip appears & dismiss after mouse leave', () => {
+      tooltip.focusOnTooltip(configuringDefaultsTooltip);
+      tooltip.isTooltipAppearsAndVisible(tooltip.body);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(configuringDefaultsTooltip);
+    });
+  });
+
+  describe('Custom triggers', () => {
+
+    const customTriggersTooltip = tooltip.exampleDemosArr.customTriggersTooltip;
+
+    it('when user focus on the "Hover on me!" btn, Tooltip appears and hide after clicks', () => {
+      tooltip.isCustomTriggersAppearsAndVisible(customTriggersTooltip,
+        'Hover over me!',
+        'mouseenter',
+        'I will hide on click'
+      );
+    });
+
+    it('when user clicks on the "Click on me!" btn, Tooltip appears and hide after press again', () => {
+      tooltip.isCustomTriggersAppearsAndVisible(customTriggersTooltip,
+        'Click on me!',
+        'click',
+        'I will hide on click'
+      );
+    });
+  });
+
+  describe('Manual triggering', () => {
+
+    const manualTriggeringTooltip = tooltip.exampleDemosArr.manualTriggeringTooltip;
+
+    it('when user clicks on Show, then tooltip appear under the text, and dismiss after click Hide', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 0);
+      tooltip.isTooltipAppearsAndVisible(tooltip.body);
+      tooltip.clickOnBtn(manualTriggeringTooltip, 1);
+      tooltip.isToggleTooltipDisappears();
+    });
+
+    it('when user clicks on Toggle, then tooltip appears and hide, after click again', () => {
+      tooltip.clickOnBtn(manualTriggeringTooltip, 2);
+      tooltip.isTooltipAppearsAndVisible(tooltip.body);
+      tooltip.clickOnBtn(manualTriggeringTooltip, 2);
+      tooltip.isToggleTooltipDisappears();
+    });
+  });
+
+  describe('Component level styling', () => {
+
+    const componentLevelStyling = tooltip.exampleDemosArr.componentLevelStyling;
+
+    it('when user hover on the "I have component level styling" btn, tooltip appears', () => {
+      tooltip.focusOnTooltip(componentLevelStyling);
+      tooltip.isTooltipAppearsAndVisible(componentLevelStyling);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(componentLevelStyling);
+    });
+  });
+
+  describe('Custom class', () => {
+
+    const customClass = tooltip.exampleDemosArr.customClass;
+
+    it('when user hover on the "IDemo with custom class" btn, tooltip appears', () => {
+      tooltip.focusOnTooltip(customClass);
+      tooltip.isTooltipAppearsAndVisible(customClass);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(customClass);
+    });
+  });
+
+  describe('Tooltip with delay', () => {
+
+    const delayTooltip = tooltip.exampleDemosArr.delayTooltip;
+
+    it('when user hover on the "Tooltip with 0,5sec delay" btn, tooltip appears and dismiss after mouse leave', () => {
+      cy.viewport(1440, 900);
+      tooltip.clickOnDemoMenu('Tooltip with delay');
+      tooltip.focusOnTooltip(delayTooltip);
+      tooltip.isTooltipAppearsAndVisible(delayTooltip);
+    });
+
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterClick(delayTooltip);
+    });
+  });
+});

cypress/integration/tooltip_page_spec.ts

@@ -8,10 +8,10 @@ describe('Tooltip demo page test suite', () => {
   describe('Basic tooltip', () => {
     const basic = tooltip.exampleDemosArr.basic;
 
-    it('basic tooltip appears after hovering on trigger button', () => {
-      cy.get(basic).as('basicDemo').find(tooltip.togglerTooltip).focus();
-      cy.get('@basicDemo')
-        .should('to.have.descendants', tooltip.containerTooltip);
+    it('when the user on hovering on the trigger btn, tooltip appears and dismiss after mouse leave', () => {
+      tooltip.focusOnTooltip(basic);
+      tooltip.isTooltipAppearsAndVisible(basic);
+      tooltip.isTooltipDismissAfterClick(basic);
     });
   });
 });

cypress/support/tooltip.po.ts

@@ -7,8 +7,93 @@ export class TooltipPo extends BaseComponent {
 
   togglerTooltip = 'button';
   containerTooltip = 'bs-tooltip-container';
+  body = 'body';
 
   exampleDemosArr = {
-    basic: 'demo-tooltip-basic'
+    basic: 'demo-tooltip-basic',
+    placement: 'demo-tooltip-placement',
+    dismiss: 'demo-tooltip-dismiss',
+    dynamicTooltip: 'demo-tooltip-dynamic',
+    customContentTemplate: 'demo-tooltip-custom-content',
+    dynamicHtmlButton: 'demo-tooltip-dynamic-html',
+    defaultTooltip: 'demo-tooltip-container',
+    configuringDefaults: 'demo-tooltip-config',
+    customTriggersTooltip: 'demo-tooltip-triggers-custom',
+    manualTriggeringTooltip: 'demo-tooltip-triggers-manual',
+    componentLevelStyling: 'demo-tooltip-styling-local',
+    customClass: 'demo-tooltip-class',
+    delayTooltip: 'demo-tooltip-delay'
   };
+
+  tooltipPlacements = {
+    top: { tooltipClass: 'tooltip in tooltip-top bs-tooltip-top top show', name: 'Tooltip on top' },
+    right: {
+      tooltipClass: 'tooltip in tooltip-right bs-tooltip-right right show',
+      name: 'Tooltip on right'
+    },
+    auto: {
+      tooltipClass: 'tooltip in tooltip-auto bs-tooltip-auto auto show bottom',
+      name: 'Tooltip auto'
+    },
+    left: {
+      tooltipClass: 'tooltip in tooltip-left bs-tooltip-left left show',
+      name: 'Tooltip on left'
+    },
+    bottom: {
+      tooltipClass: 'tooltip in tooltip-bottom bs-tooltip-bottom bottom show',
+      name: 'Tooltip on bottom'
+    }
+  };
+
+  isTooltipPlacementCorrect(baseSelector: string, placement: string, buttonName: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`)
+      .contains(buttonName)
+      .focus();
+
+    cy.get(`${baseSelector} ${this.containerTooltip}`)
+      .should('be.visible')
+      .should('have.attr', 'class', placement);
+  }
+
+  focusOnBtn(baseSelector: string, buttonIndex?: number) {
+    cy.get(`${ baseSelector } button`).eq(buttonIndex ? buttonIndex : 0).focus();
+  }
+
+  focusOnTooltip(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`).focus();
+  }
+
+  clickOnTooltip(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`).click();
+  }
+
+ isTooltipAppearsAndVisible(baseSelector: string) {
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+    cy.get(`${baseSelector} ${this.containerTooltip}`).should('be.visible');
+  }
+
+  isTooltipDismissAfterClick(baseSelector: string) {
+    cy.get(`${baseSelector}`).closest('.section.bd-example').click();
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+
+  isCustomTriggersAppearsAndVisible(baseSelector: string, buttonName: string, triggerEvent: string, tooltipText: string) {
+    if (triggerEvent === 'click') {
+    cy.get(`${baseSelector}`).contains(buttonName).click();
+    } else {
+      cy.get(`${baseSelector}`).contains(buttonName).trigger(triggerEvent);
+    }
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+    cy.get(`${this.containerTooltip}`).should('be.visible').contains(tooltipText);
+    cy.get(`${baseSelector}`).contains(buttonName).click();
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+
+  isToggleTooltipDisappears() {
+    cy.get(`${this.body}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+
+  clickOnDemoMenu(subMenu: string) {
+    cy.get('add-nav').contains('a', subMenu).click();
+  }
 }