diff --git a/cypress/full/tooltip_page_spec.ts b/cypress/full/tooltip_page_spec.ts new file mode 100644 index 0000000000..4b5d3244b6 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/cypress/integration/tooltip_page_spec.ts b/cypress/integration/tooltip_page_spec.ts index 0477d6ee77..aaa00f89f0 100644 --- a/cypress/integration/tooltip_page_spec.ts +++ b/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); }); }); }); diff --git a/cypress/support/tooltip.po.ts b/cypress/support/tooltip.po.ts index 277f745f0f..29c0b201d8 100644 --- a/cypress/support/tooltip.po.ts +++ b/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(); + } } diff --git a/package-lock.json b/package-lock.json index b4e9b74842..71a6ff692d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7183,7 +7183,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7598,7 +7599,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7654,6 +7656,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7697,12 +7700,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } },