feat(ui5-popover): rename property and add test

Author: TeodorTaushanov

packages/main/src/Popover.ts

@@ -198,13 +198,13 @@ class Popover extends Popup {
 	 * close automatically when the opener is moved on the page.
 	 *
 	 * @type {boolean}
-	 * @name sap.ui.webc.main.Popover.prototype.autoCloseOnScroll
+	 * @name sap.ui.webc.main.Popover.prototype.closeOnScroll
 	 * @defaultvalue false
 	 * @public
 	 * @since 1.18.0
 	 */
 	@property({ type: Boolean })
-	autoCloseOnScroll!: boolean;
+	closeOnScroll!: boolean;
 
 	/**
 	 * Defines the ID or DOM Reference of the element that the popover is shown at
@@ -423,18 +423,19 @@ class Popover extends Popup {
 	_show() {
 		let placement;
 		const popoverSize = this.getPopoverSize();
+		const prevOpenerRect = this._openerRect!;
 		const openerRect = this._opener!.getBoundingClientRect();
 
 		if (popoverSize.width === 0 || popoverSize.height === 0) {
 			// size can not be determined properly at this point, popover will be shown with the next reposition
 			return;
 		}
 
-		if (this.autoCloseOnScroll) {
-			if (Math.abs(this._openerRect!.left - openerRect.left) > followOfTolerance
-				|| Math.abs(this._openerRect!.top - openerRect.top) > followOfTolerance
-				|| Math.abs(this._openerRect!.right - openerRect.right) > followOfTolerance
-				|| Math.abs(this._openerRect!.bottom - openerRect.bottom) > followOfTolerance) {
+		if (this.closeOnScroll) {
+			if (Math.abs(prevOpenerRect.left - openerRect.left) > followOfTolerance
+				|| Math.abs(prevOpenerRect.top - openerRect.top) > followOfTolerance
+				|| Math.abs(prevOpenerRect.right - openerRect.right) > followOfTolerance
+				|| Math.abs(prevOpenerRect.bottom - openerRect.bottom) > followOfTolerance) {
 				return this.close();
 			}
 		}

packages/main/test/pages/Popover.html

@@ -124,7 +124,7 @@
 		Open Big Popover
 	</ui5-button>
 
-	<ui5-popover placement-type="Bottom" _prevent-reposition-and-close id="big-popover" header-text="hello world">
+	<ui5-popover placement-type="Bottom" id="big-popover" header-text="hello world">
 		<ui5-list id="bigList"></ui5-list>
 	</ui5-popover>
 
@@ -188,7 +188,7 @@
 
 	<ui5-button id="btnPopAutoCloseOnScroll">Auto close on scroll</ui5-button>
 
-	<ui5-popover id="popAutoCloseOnScroll" auto-close-on-scroll>
+	<ui5-popover id="popAutoCloseOnScroll" close-on-scroll>
 		Auto close on scroll
 	</ui5-popover>
 

packages/main/test/specs/Popover.spec.js

@@ -77,6 +77,24 @@ describe("Popover general interaction", () => {
 	// 	await browser.$("#btn").scrollIntoView();
 	// });
 
+	it("tests if popover auto closes on scroll", async () => {
+		const btnOpenPopover = await browser.$("#btnPopAutoCloseOnScroll");
+
+		await btnOpenPopover.click();
+
+		const popover = await browser.$("#popAutoCloseOnScroll");
+		assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
+
+		const top = await browser.$("html").getProperty("scrollTop");
+		await browser.$("html").setProperty("scrollTop", top + 40);
+
+		await browser.pause(500);
+
+		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
+
+		await browser.$("html").setProperty("scrollTop", top);
+	});
+
 	it("tests popover does not close with opener", async () => {
 		const popover = await browser.$("#quickViewCard");
 		const btnOpenPopover = await browser.$("#btnQuickViewCardOpener");
@@ -474,7 +492,7 @@ describe("Horizontal Alignment", () => {
 		await browser.$("#horizontalAlignBtn").click();
 		const popover = await browser.$("#popoverHorizontalAlign");
 		const opener = await browser.$("#targetOpener");
-	
+
 		assert.ok(await isHorizontallyCentered(popover, opener), `Popover should be centered`);
 	});
 
@@ -492,7 +510,7 @@ describe("Horizontal Alignment", () => {
 		await browser.$("#horizontalAlignBtn").click();
 		const popover = await browser.$("#popoverHorizontalAlign");
 		const opener = await browser.$("#targetOpener");
-	
+
 		assert.ok(await isHorizontallyRightAligned(popover, opener), `Popover should be right aligned`);
 	});