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

cypress/full/tooltip_page_spec.ts

@@ -0,0 +1,160 @@
+import { TooltipPo } from '../support/tooltip.po';
+
+describe('Tooltip demo page test suite', () => {
+  const tooltip = new TooltipPo();
+
+  beforeEach(() => tooltip.navigateTo());
+
+  describe('Placement tooltip', () => {
+    const basic = tooltip.exampleDemosArr.placement;
+    const placementsOfTheTooltipContainer = tooltip.placementsOfTheTooltipContainer;
+
+    it('when user on hovering on trigger btn in the Placement exmpl - tooltip appears on the setted placement', () => {
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placementsOfTheTooltipContainer.placementTop.tooltipContainerClass,
+        placementsOfTheTooltipContainer.placementTop.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placementsOfTheTooltipContainer.placementRight.tooltipContainerClass,
+        placementsOfTheTooltipContainer.placementRight.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placementsOfTheTooltipContainer.placementAuto.tooltipContainerClass,
+        placementsOfTheTooltipContainer.placementAuto.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placementsOfTheTooltipContainer.placementLeft.tooltipContainerClass,
+        placementsOfTheTooltipContainer.placementLeft.name
+      );
+      tooltip.isTooltipPlacementCorrect(
+        basic,
+        placementsOfTheTooltipContainer.placementBottom.tooltipContainerClass,
+        placementsOfTheTooltipContainer.placementBottom.name
+      );
+    });
+  });
+
+  describe('Dismiss tooltip', () => {
+    const dismissPlacement = tooltip.exampleDemosArr.dismiss;
+    it('when user click on Dismissible btn, tooltip appears', () => {
+      tooltip.isTooltipAppearOnClick(dismissPlacement);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(dismissPlacement);
+    });
+  });
+
+  describe('Dynamic Content', () => {
+    const dynamicContentPlacement = tooltip.exampleDemosArr.dynamicTooltip;
+    it('when the user clicks on the Dynamic Content tooltip btn, Tooltip appears', () => {
+      tooltip.isTooltipAppearOnFocus(dynamicContentPlacement);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(dynamicContentPlacement);
+    });
+  });
+
+  describe('Custom content template', () => {
+    const customContentTemplate = tooltip.exampleDemosArr.customContentTemplate;
+    it('when the user clicks on the Custom content template tooltip btn, Tooltip appears', () => {
+      tooltip.isTooltipAppearOnFocus(customContentTemplate);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(customContentTemplate);
+    });
+  });
+
+  describe('Dynamic Html', () => {
+    const dynamicHtmlTooltip = tooltip.exampleDemosArr.dynamicHtmlButton;
+    it('when user clicks on the tooltip btn, Tooltip appears', () => {
+      tooltip.isTooltipAppearOnFocus(dynamicHtmlTooltip);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(dynamicHtmlTooltip);
+    });
+  });
+
+  describe('Append to body', () => {
+    const appendToBody = tooltip.exampleDemosArr.defaultTooltip;
+    it('when the user hover on the Default tooltip, tooltip appears and dismiss after mouse leave', () => {
+      tooltip.isAppendToBodyTooltipAppearsVisibleAndDismissible(appendToBody, 'Default tooltip');
+      tooltip.isAppendToBodyTooltipAppearsVisibleAndDismissible(appendToBody, 'Tooltip appended to body');
+    });
+  });
+
+  describe('Configuring defaults', () => {
+    const configuringDefaultsTooltip = tooltip.exampleDemosArr.configuringDefaults;
+    it('when the user clicks on the Configuring tooltip btn, Tooltip appears', () => {
+      tooltip.isConfiguringTooltipAppearOnFocus(configuringDefaultsTooltip);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(configuringDefaultsTooltip);
+    });
+  });
+
+
+  describe('Custom triggers', () => {
+    const customTriggersTooltip = tooltip.exampleDemosArr.customTriggersTooltip;
+    it('when the user focus on the "Hover on me!" btn, Tooltip appears and hide after clicks', () => {
+      tooltip.isCustomTriggersClickAppearsAndVisible(
+        customTriggersTooltip,
+        'Hover over me!',
+        'mouseenter',
+        'I will hide on click'
+      );
+    });
+    it('when the user clicks on the "Click on me!" btn, Tooltip appears and hide after press again', () => {
+      tooltip.isCustomTriggersClickAppearsAndVisible(
+        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-container appear above the text and dismiss after user clicks "Hide"', () => {
+      tooltip.isManualTooltipsAppearsAndVisible(manualTriggeringTooltip, 'Hello there! I was triggered manually');
+    });
+    it('when the user clicks on "Toggle", then tooltip appears and hide after press again', () => {
+      tooltip.isToggleTooltipAppearsAndDisappears(manualTriggeringTooltip, 'Hello there! I was triggered manually');
+  });
+  });
+
+  describe('Component level styling', () => {
+    const componentLevelStyling = tooltip.exampleDemosArr.componentLevelStyling;
+    it('when the user hover on the "I have component level styling" btn, tooltip appears', () => {
+      tooltip.isTooltipAppearOnFocus(componentLevelStyling);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(componentLevelStyling);
+    });
+
+  });
+
+  describe('Custom class', () => {
+    const customClass = tooltip.exampleDemosArr.customClass;
+    it('when the user hover on the "IDemo with custom class" btn, tooltip appears', () => {
+      tooltip.isTooltipAppearOnFocus(customClass);
+    });
+    it('when user moves the mouse cursor away, then tooltip-container disappeared', () => {
+      tooltip.isTooltipDismissAfterTheClicks(customClass);
+    });
+  });
+
+  describe('Tooltip with delay', () => {
+    const delayTooltip = tooltip.exampleDemosArr.delayTooltip;
+    it('when the 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.isTooltipAppearOnFocus(delayTooltip);
+      tooltip.isTooltipDismissAfterTheClicks(delayTooltip);
+    });
+  });
+});

cypress/integration/tooltip_page_spec.ts

@@ -8,10 +8,8 @@ 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.isTooltipAppearOnFocus(basic);
     });
   });
 });

cypress/support/pagination.po.ts

@@ -28,7 +28,7 @@ export class PaginationPo extends BaseComponent {
   };
 
   isActivePositionEqual(baseSelector: string, positionNumber: string) {
-    cy.get(`${baseSelector} ${this.classActive}`).invoke('text')
+      cy.get(`${baseSelector} ${this.classActive}`).invoke('text')
       .should(linkTxt => expect(linkTxt).to.equal(positionNumber));
   }
 

cypress/support/tooltip.po.ts

@@ -7,8 +7,112 @@ 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'
+
+  };
+
+  placementsOfTheTooltipContainer = {
+    placementTop: { tooltipContainerClass: 'tooltip in tooltip-top bs-tooltip-top top show', name: 'Tooltip on top' },
+    placementRight: {
+      tooltipContainerClass: 'tooltip in tooltip-right bs-tooltip-right right show',
+      name: 'Tooltip on right'
+    },
+    placementAuto: {
+      tooltipContainerClass: 'tooltip in tooltip-auto bs-tooltip-auto auto show bottom',
+      name: 'Tooltip auto'
+    },
+    placementLeft: {
+      tooltipContainerClass: 'tooltip in tooltip-left bs-tooltip-left left show',
+      name: 'Tooltip on left'
+    },
+    placementBottom: {
+      tooltipContainerClass: '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);
+  }
+
+  isTooltipAppearOnFocus(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`).focus();
+    this.isTooltipAppearsAndVisible(baseSelector);
+  }
+
+  isTooltipAppearOnClick(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`).click();
+    this.isTooltipAppearsAndVisible(baseSelector);
+  }
+
+ isTooltipAppearsAndVisible(baseSelector: string) {
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+    cy.get(`${baseSelector} ${this.containerTooltip}`).should('be.visible');
+  }
+
+  isTooltipDismissAfterTheClicks(baseSelector: string) {
+    cy.get(`${baseSelector}`).closest('.section.bd-example').click();
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+
+  isAppendToBodyTooltipAppearsVisibleAndDismissible(baseSelector: string, buttonName: string) {
+    cy.get(`${baseSelector}`).contains(buttonName).focus();
+    cy.get(`${this.containerTooltip}`).contains('Vivamus sagittis lacus vel augue laoreet rutrum faucibus');
+    this.isTooltipAppearsAndVisible(this.body);
+      }
+
+  isConfiguringTooltipAppearOnFocus(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.togglerTooltip}`).focus();
+    this.isTooltipAppearsAndVisible(this.body);
+    }
+  isCustomTriggersClickAppearsAndVisible(baseSelector: string, buttonName: string, tiggerEvent: string, tooltipText: string) {
+    if (tiggerEvent === 'click') {
+    cy.get(`${baseSelector}`).contains(buttonName).click();
+    } else {
+      cy.get(`${baseSelector}`).contains(buttonName).trigger(tiggerEvent);
+    }
+    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);
+  }
+
+  isManualTooltipsAppearsAndVisible(baseSelector: string, tooltipText: string) {
+    cy.get(`${baseSelector}`).contains('Show').click();
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+    cy.get(`${this.containerTooltip}`).should('be.visible').contains(tooltipText);
+    cy.get(`${baseSelector}`).contains('Hide').click();
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+    isToggleTooltipAppearsAndDisappears(baseSelector: string, tooltipText: string) {
+    cy.get(`${baseSelector}`).contains('Toggle').click();
+    cy.get(`${baseSelector}`).should('to.have.descendants', this.containerTooltip);
+    cy.get(`${this.containerTooltip}`).should('be.visible').contains(tooltipText);
+    cy.get(`${baseSelector}`).contains('Toggle').click();
+    cy.get(`${baseSelector}`).should('not.to.have.descendants', this.containerTooltip);
+  }
+  clickOnDemoMenu(subMenu: string) {
+    cy.get('add-nav').contains('a', subMenu).click();
+  }
 }

demo/src/app/components/+tooltip/demos/config/config.html

@@ -1,4 +1,5 @@
 <button type="button" class="btn btn-primary"
-        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        >
   Preconfigured tooltip
 </button>

demo/src/app/components/+tooltip/demos/container/container.html

@@ -1,12 +1,14 @@
 <div class="row" style="position: relative; overflow: hidden; padding-top: 10px;">
   <div class="col-xs-12 col-12">
     <button type="button" class="btn btn-danger"
-            tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+            tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+            >
       Default tooltip
     </button>
     <button type="button" class="btn btn-success"
             tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-            container="body">
+            container="body"
+            >
       Tooltip appended to body
     </button>
   </div>