diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx index 36b363233a1f..acb9dfd23278 100644 --- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx +++ b/packages/fiori/cypress/specs/DynamicPage.cy.tsx @@ -1,11 +1,23 @@ import DynamicPage from "../../src/DynamicPage.js"; import DynamicPageTitle from "../../src/DynamicPageTitle.js"; import DynamicPageHeader from "../../src/DynamicPageHeader.js"; +import Bar from "@ui5/webcomponents/dist/Bar.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; +import { setAnimationMode } from "@ui5/webcomponents-base"; + +before(() => { + if (typeof setAnimationMode !== 'undefined') { + cy.wrap({ setAnimationMode }) + .then(api => { + return api.setAnimationMode("none"); + }) + } +}); describe("DynamicPage", () => { - beforeEach(() => { + it("should unpin the header when snapping after being pinned", () => { cy.mount( - +
Page Title
 @@ -18,21 +30,937 @@ describe("DynamicPage", () => { ); - cy.get("#test-dynamic-page").as("dynamicPage"); + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", false); }); - it("should unpin the header when snapping after being pinned", () => { - cy.get("@dynamicPage") - .invoke("prop", "headerPinned", true); + it("toggles the header-snapped state with 'headerSnapped' property", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("exist"); - cy.get("@dynamicPage") + cy.get("[ui5-dynamic-page]") .invoke("prop", "headerSnapped", true); - cy.get("@dynamicPage") + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("not.exist"); + }); + + it("propagates-down the 'headerSnapped' property", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "snapped", true); + + cy.get("[ui5-dynamic-page-title]") + .should("have.prop", "snapped", true); + + cy.get("[ui5-dynamic-page]") .invoke("prop", "headerSnapped", false); - cy.get("@dynamicPage") - .invoke("prop", "headerPinned") - .should("be.false"); + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "snapped", false); + + cy.get("[ui5-dynamic-page-title]") + .should("have.prop", "snapped", false); + }); + + it("toggles the header-pinned state with 'headerPinned' property", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("header.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]") + .should("not.exist"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container > slot[name=headerArea]") + .should("exist"); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("header.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]") + .should("exist"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container > slot[name=headerArea]") + .should("not.exist"); + }); + + it("propagates-down the 'headerPinned' property", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "pinned", true); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerPinned", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "pinned", false); + }); + + it("toggles the pin-button visibility with 'hidePinButton' property", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "hidePinButton", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "hidePinButton", false); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "hidePinButton", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .should("have.prop", "hidePinButton", true); + }); +}); + +describe("Scroll", () => { + it("snaps the header upon scroll", () => { + cy.mount( + + +
Page Title
+ + + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[data-testid='scroll-down']").then(($btn) => { + $btn[0].addEventListener("click", () => { + const scrollContainer = document.querySelector("[ui5-dynamic-page]") + .shadowRoot.querySelector(".ui5-dynamic-page-scroll-container"); + if (scrollContainer) { + scrollContainer.scrollTo(0, 500); + } + }); + }); + + cy.get("[data-testid='scroll-down']").click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + }); + + it("expands the header upon scroll", () => { + cy.mount( + + +
Page Title
+ + + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[data-testid='scroll-to-top']").then(($btn) => { + $btn[0].addEventListener("click", () => { + const scrollContainer = document.querySelector("[ui5-dynamic-page]") + .shadowRoot.querySelector(".ui5-dynamic-page-scroll-container"); + if (scrollContainer) { + scrollContainer.scrollTo(0, 0); + } + }); + }); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .scrollTo(0, 500); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[data-testid='scroll-to-top']").click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + }); +}); + +describe("Page general interaction", () => { + it("toggles the header when scrollTop is between SCROLL_THRESHOLD and headerHeight", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + + + + + ); + + cy.get("[ui5-dynamic-page]").should("exist"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .should("exist") + .then(($container) => { + $container[0].scrollTop = 20; + }); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "showHeaderInStickArea", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "showHeaderInStickArea", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .should("have.prop", "scrollTop", 0); + }); + + it("allows toggle the footer", () => { + cy.mount( + + +
Page Title
+ + + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + + + + + ); + + cy.get("[data-testid='toggle-footer']").then(($btn) => { + $btn[0].addEventListener("click", () => { + const dynamicPage = document.querySelector("[ui5-dynamic-page]"); + const hasFooter = dynamicPage.hasAttribute("show-footer"); + if (hasFooter) { + dynamicPage.removeAttribute("show-footer"); + } else { + dynamicPage.setAttribute("show-footer", "true"); + } + }); + }); + + cy.get("[ui5-dynamic-page]") + .should("have.attr", "show-footer"); + + cy.get("[data-testid='toggle-footer']").click(); + + cy.get("[ui5-dynamic-page]") + .should("not.have.attr", "show-footer"); + }); + + it("snaps the header upon pressing the snap button", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .should("have.length.greaterThan", 0); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + }); + + it("expands the header upon pressing the expand button", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("not.exist"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("exist"); + }); + + it("expands the header in the sticky area", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerInContent", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("exist"); + }); + + it("pins the header", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .eq(1) + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + }); + + it("keeps the pinned header expanded during scroll", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .scrollTo(0, 500); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .should("have.prop", "scrollTop", 500); + }); + + it("unpins the header upon press of snap button", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerPinned", false); + }); + + it("expands the title with click", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page-title]").click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + }); + + it("snaps the title with click", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .click(50, 50); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + }); + + it("expands the title using keyboard", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .focus() + .realPress('Enter'); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + }); + + it("snaps the title using keyboard", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .focus() + .realPress('Enter'); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + }); +}); + +describe("Page layout when content has 100% height", () => { + it("footer does not hide the content", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Content with 100% height +
+ + + + + + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "showFooter", true); + + cy.get("[ui5-dynamic-page] > div") + .then(($content) => { + const contentBottom = $content[0].getBoundingClientRect().bottom; + + cy.get("[ui5-bar]") + .then(($footer) => { + const footerTop = $footer[0].getBoundingClientRect().top; + + expect(contentBottom).to.be.at.most(footerTop); + }); + }); + }); + + it("content expands to fill the space between header and footer", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Content with 100% height +
+ + + + + + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "showFooter", true); + + cy.get("[ui5-dynamic-page-header]") + .then(($header) => { + const headerBottom = $header[0].getBoundingClientRect().bottom; + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-spacer") + .then(($footerSpacer) => { + const footerTop = $footerSpacer[0].getBoundingClientRect().top; + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-fit-content") + .then(($content) => { + const contentTop = $content[0].getBoundingClientRect().top; + const contentBottom = $content[0].getBoundingClientRect().bottom; + + expect(contentTop).to.equal(headerBottom); + expect(contentBottom).to.equal(footerTop); + }); + }); + }); + }); +}); + +describe("Page layout when content overflows", () => { + it("footer does not hide the content", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Very tall content that overflows and requires scrolling +
+ + + + + + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "showFooter", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .scrollTo(0, 500); + + cy.get("[ui5-dynamic-page] > div").should("be.visible"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .should("have.prop", "scrollTop") + .and("be.greaterThan", 0); + + cy.get("[ui5-bar]").should("be.visible"); + }); +}); + +describe("ARIA attributes", () => { + it("sets expanded state attributes", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-title-header-wrapper") + .should("have.attr", "aria-label", "Header Expanded"); + + cy.get("[ui5-dynamic-page-header]") + .shadow() + .find(".ui5-dynamic-page-header-root") + .should("have.attr", "role", "region"); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .should("have.attr", "aria-expanded", "true") + .should("have.attr", "role", "button"); + + cy.get("[ui5-dynamic-page-title]") + .should("have.prop", "__id") + .then((titleId) => { + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .should("have.attr", "aria-describedby", `${titleId}-toggle-description`); + }); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find("ui5-button.ui5-dynamic-page-header-action-expand") + .should("have.prop", "accessibleName", "Snap Header") + .should("have.prop", "tooltip", "Snap Header"); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find("ui5-toggle-button.ui5-dynamic-page-header-action-pin") + .should("have.prop", "accessibleName", "Pin Header") + .should("have.prop", "tooltip", "Pin Header"); + }); + + it("sets snapped state attributes", () => { + cy.mount( + + +
Page Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-title-header-wrapper") + .should("have.attr", "aria-label", "Header Snapped"); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .should("have.attr", "aria-expanded", "false") + .should("have.attr", "role", "button"); + + cy.get("[ui5-dynamic-page-title]") + .should("have.prop", "__id") + .then((titleId) => { + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .should("have.attr", "aria-describedby", `${titleId}-toggle-description`); + }); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find("ui5-button") + .should("exist") + .should("have.prop", "accessibleName", "Expand Header") + .should("have.prop", "tooltip", "Expand Header"); }); }); \ No newline at end of file diff --git a/packages/fiori/cypress/specs/DynamicPage.mobile.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.mobile.cy.tsx new file mode 100644 index 000000000000..1579704f1b42 --- /dev/null +++ b/packages/fiori/cypress/specs/DynamicPage.mobile.cy.tsx @@ -0,0 +1,180 @@ +import DynamicPage from "../../src/DynamicPage.js"; +import DynamicPageTitle from "../../src/DynamicPageTitle.js"; +import DynamicPageHeader from "../../src/DynamicPageHeader.js"; + +describe("DynamicPage Mobile Behaviour", () => { + beforeEach(() => { + cy.ui5SimulateDevice("phone"); + }); + it("should display snapped title on mobile when snappedTitleOnMobile slot has content and header is snapped", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.contains("Mobile Snapped Title").should("be.visible"); + }); + + it("the header content should not be rendered when snappedTitleOnMobile content is present", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find(".ui5-dynamic-page-scroll-container") + .scrollTo(0, 340); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("slot[name=headerArea]") + .should("not.exist"); + }); + + it("should not display snapped title on mobile when snappedTitleOnMobile slot is empty", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page-title]") + .find("[slot='snappedTitleOnMobile']") + .then(($el) => { + if ($el.length > 0) { + $el.remove(); + } + }); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.contains("Mobile Snapped Title").should("not.exist"); + + cy.get("[ui5-dynamic-page-title]") + .find("[slot='snappedTitleOnMobile']") + .should("not.exist"); + }); + + it("should expand the header when clicked on the snapped title on mobile", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", false); + }); + + it("should not display snapped title on mobile when header is not snapped", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", false); + + cy.contains("Mobile Snapped Title").should("not.be.visible"); + }); + + it("should focus the title focus area when header action is clicked to snap the header", () => { + cy.mount( + + +
Page Title
+
Mobile Snapped Title
+ + +
Header Content
+ +
+ Page content with enough height to enable scrolling +
+ + ); + + cy.get("[ui5-dynamic-page]") + .invoke("prop", "headerSnapped", false); + + cy.get("[ui5-dynamic-page]") + .shadow() + .find("ui5-dynamic-page-header-actions") + .shadow() + .find(".ui5-dynamic-page-header-action") + .first() + .click(); + + cy.get("[ui5-dynamic-page]") + .should("have.prop", "headerSnapped", true); + + cy.get("[ui5-dynamic-page-title]") + .shadow() + .find(".ui5-dynamic-page-title-focus-area") + .should("be.focused"); + }); +}); \ No newline at end of file diff --git a/packages/fiori/test/specs/DynamicPage.mobile.spec.js b/packages/fiori/test/specs/DynamicPage.mobile.spec.js deleted file mode 100644 index 5a532e5fcfd5..000000000000 --- a/packages/fiori/test/specs/DynamicPage.mobile.spec.js +++ /dev/null @@ -1,149 +0,0 @@ -import { assert } from "chai"; - -describe("DynamicPage Mobile Behaviour", () => { - beforeEach(async () => { - await browser.url("test/pages/DynamicPageWithSnappedTitleOnMobile.html"); - await browser.emulateDevice("iPhone X"); - }); - - it("should display snapped title on mobile when snappedTitleOnMobile slot has content and header is snapped", async () => { - const dynamicPage = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // Ensure the header is snapped - await dynamicPage.setProperty("headerSnapped", true); - - // Check if the snapped title on mobile is visible - const snappedTitleOnMobile = await title.shadow$(".ui5-dynamic-page--snapped-title-on-mobile"); - const isDisplayed = await snappedTitleOnMobile.isDisplayed(); - - assert.ok( - isDisplayed, - "Snapped title on mobile should be displayed when header is snapped and snappedTitleOnMobile slot has content." - ); - }); - - it("the header content should not be rendered when snappedTitleOnMobile content is present", async () => { - const dynamicPage = await browser.$("#page"); - const headerAreaSlot = await dynamicPage.shadow$("slot[name=headerArea]"); - const scrollContainer = await dynamicPage.shadow$(".ui5-dynamic-page-scroll-container"); - - const initialScrollTop = await scrollContainer.getProperty("scrollTop"); - - // Scroll the content to snap the header - await browser.execute((container) => { - container.scrollTop = 340; - }, scrollContainer); - - // Wait until the scroll position has changed - await browser.waitUntil( - async () => (await scrollContainer.getProperty("scrollTop")) > initialScrollTop, - { - timeout: 2000, - timeoutMsg: "The scroll handler must be called.", - } - ); - - // Assert that the header is snapped - const isHeaderSnapped = await dynamicPage.getProperty("headerSnapped"); - assert.strictEqual( - isHeaderSnapped, - true, - "Header should be snapped when the content is scrolled." - ); - - // Assert that the header content is not rendered - const isHeaderContentRendered = await headerAreaSlot.isExisting(); - assert.strictEqual( - isHeaderContentRendered, - false, - "Header content should not be rendered when snappedTitleOnMobile slot has content." - ); - }); - - it("should not display snapped title on mobile when snappedTitleOnMobile slot is empty", async () => { - const dynamicPage = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // Remove content from the snappedTitleOnMobile slot - await browser.execute(() => { - const titleElement = document.querySelector("#page ui5-dynamic-page-title"); - const snappedTitleContent = titleElement.querySelector("[slot='snappedTitleOnMobile']"); - if (snappedTitleContent) { - titleElement.removeChild(snappedTitleContent); - } - }); - - // Snap the header - await dynamicPage.setProperty("headerSnapped", true); - - // Check if the snapped title on mobile is not visible - const snappedTitleOnMobile = await title.shadow$(".ui5-dynamic-page--snapped-title-on-mobile"); - const isDisplayed = await snappedTitleOnMobile.isDisplayed(); - - assert.strictEqual( - isDisplayed, - false, - "Snapped title on mobile should not be displayed when the snappedTitleOnMobile slot is empty." - ); - }); - - it("should expand the header when clicked on the snapped title on mobile", async () => { - const dynamicPage = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // Ensure the header is snapped - await dynamicPage.setProperty("headerSnapped", true); - - // Click on the title focus area to expand the header - const titleFocusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area"); - await titleFocusArea.click(); - - // Check if the header is expanded - const headerSnapped = await dynamicPage.getProperty("headerSnapped"); - - assert.strictEqual( - headerSnapped, - false, - "Header should expand when snapped title on mobile is clicked." - ); - }); - - it("should not display snapped title on mobile when header is not snapped", async () => { - const dynamicPage = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // Ensure the header is not snapped - await dynamicPage.setProperty("headerSnapped", false); - - // Check if the snapped title on mobile is not visible - const snappedTitleOnMobile = await title.shadow$(".ui5-dynamic-page--snapped-title-on-mobile"); - const isDisplayed = await snappedTitleOnMobile.isDisplayed(); - - assert.strictEqual( - isDisplayed, - false, - "Snapped title on mobile should not be displayed when the header is not snapped." - ); - }); - - it("should focus the title focus area when header action is clicked to snap the header", async () => { - const dynamicPage = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // Ensure the header is expanded - await dynamicPage.setProperty("headerSnapped", false); - - // Click on the header action to snap the header - const snapButton = await dynamicPage.shadow$("ui5-dynamic-page-header-actions") - .shadow$(".ui5-dynamic-page-header-action"); - await snapButton.click(); - - // Check if the title focus area is focused - const isFocused = await title.isFocused(); - assert.ok( - isFocused, - "Focus should be applied to the title focus area after snapping the header via header action." - ); - }); -}); \ No newline at end of file diff --git a/packages/fiori/test/specs/DynamicPage.spec.js b/packages/fiori/test/specs/DynamicPage.spec.js deleted file mode 100644 index 1dfb5813f6a0..000000000000 --- a/packages/fiori/test/specs/DynamicPage.spec.js +++ /dev/null @@ -1,470 +0,0 @@ -import { assert } from "chai"; - -describe("API", () => { - before(async () => { - await browser.url(`test/pages/DynamicPage_test.html`); - }); - - it("toggles the header-snapped state with 'headerSnapped' property", async () => { - const page = await browser.$("#page"); - const headerSlot = await page.shadow$("slot[name=headerArea]"); - - // assert init state - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is initially expanded"); - assert.ok(await headerSlot.isExisting(), "Header slot is rendered"); - - // act - await page.setProperty("headerSnapped", true); - - // assert header is no longer rendered - assert.strictEqual(await headerSlot.isExisting(), false, "Header is not rendered"); - }); - - it("propagates-down the 'headerSnapped' property", async () => { - const page = await browser.$("#page"), - headerActions = page.shadow$('ui5-dynamic-page-header-actions'), - title = await browser.$("#page ui5-dynamic-page-title"); - - // assert init state - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - assert.strictEqual(await headerActions.getProperty("snapped"), true, "Header action is snapped"); - assert.strictEqual(await title.getProperty("snapped"), true, "Title is snapped"); - - // act - await page.setProperty("headerSnapped", false); - - // assert property is propagated - assert.strictEqual(await headerActions.getProperty("snapped"), false, "Header action is expanded"); - assert.strictEqual(await title.getProperty("snapped"), false, "Title is expanded"); - }); - - it("toggles the header-pinned state with 'headerPinned' property", async () => { - const page = await browser.$("#page"), - headerInStickyArea = await page.shadow$('header.ui5-dynamic-page-title-header-wrapper > slot[name=headerArea]'), - headerInScrollableArea = await page.shadow$('.ui5-dynamic-page-scroll-container > slot[name=headerArea]');; - - // assert init state - assert.strictEqual(await page.getProperty("headerPinned"), false, "Header is initially not pinned"); - assert.strictEqual( await headerInStickyArea.isExisting(), false, "Header is not in the sticky area"); - assert.strictEqual( await headerInScrollableArea.isExisting(), true, "Header is inside the scrollable area"); - - // act - await page.setProperty("headerPinned", true); - - // assert header is pinned in DOM - assert.strictEqual(await headerInStickyArea.isExisting(), true, "Header is inside the sticky area"); - assert.strictEqual(await headerInScrollableArea.isExisting(), false, "Header is not in the scrollable area"); - }); - - it("propagates-down the 'headerPinned' property", async () => { - const page = await browser.$("#page"), - headerActions = page.shadow$('ui5-dynamic-page-header-actions'); - - // assert init state - assert.strictEqual(await page.getProperty("headerPinned"), true, "Header is pinned"); - assert.strictEqual(await headerActions.getProperty("pinned"), true, "Pin header action is initially on"); - - // act - await page.setProperty("headerPinned", false); - - // assert property is propagated - assert.strictEqual(await headerActions.getProperty("pinned"), false, "Pin header action is off"); - }); - - it("toggles the pin-button visibility with 'hidePinButton' property", async () => { - const page = await browser.$("#page"), - headerActions = page.shadow$('ui5-dynamic-page-header-actions'); - - // assert init state - assert.strictEqual(await page.getProperty("hidePinButton"), false, "Pin button is initially visible"); - assert.strictEqual(await headerActions.getProperty("hidePinButton"), false, "Pin button is initially visible"); - - // act - await page.setProperty("hidePinButton", true); - - // assert pin button is not rendered - assert.strictEqual(await headerActions.getProperty("hidePinButton"), true, "Pin button is hidden"); - }); -}); - -describe("Scroll", () => { - before(async () => { - await browser.url(`test/pages/DynamicPage_test.html`); - }); - - // this test must be at the end because it messes up with the scroll state - it("snaps the header upon scroll", async () => { - const dynamicPage = await browser.$("#page"); - const scrollButton = await browser.$("#scrollDownBtn"); - - // Act: scroll to hide the header - await dynamicPage.setProperty("skipSnapOnScroll", false); - await scrollButton.click(); - - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), true, "The header must be snapped"); - await browser.waitUntil(async () => (await browser.$("#page").getProperty("headerSnapped")), { - timeout: 2000, - timeoutMsg: "The header must be snapped." - }); - }); - - it("expands the header upon scroll", async () => { - const dynamicPage = await browser.$("#page"); - const scrollButton = await browser.$("#scrollToTopBtn"); - - // Act: scroll to show the header - await dynamicPage.setProperty("skipSnapOnScroll", false); - await scrollButton.click(); - - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), false, "The header must be expanded"); - await browser.waitUntil(async () => !(await browser.$("#page").getProperty("headerSnapped")), { - timeout: 2000, - timeoutMsg: "The header must be expanded." - }); - }); -}); - -describe("Page general interaction", () => { - before(async () => { - await browser.url(`test/pages/DynamicPage_test.html`); - }); - - it("toggles the header when scrollTop is between SCROLL_THRESHOLD and headerHeight", async () => { - const page = await browser.$("#page"); - const scrollContainer = await page.shadow$(".ui5-dynamic-page-scroll-container"); - const snapButton = await page.shadow$("ui5-dynamic-page-header-actions").shadow$(".ui5-dynamic-page-header-action"); - - await scrollContainer.setProperty("scrollTop", 20); - - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is initially expanded"); - - await snapButton.click(); - - assert.strictEqual(await page.getProperty("headerSnapped"), true, "The header should be snapped"); - assert.strictEqual(await page.getProperty("showHeaderInStickArea"), true, "Header should be displayed in the sticky area"); - - await snapButton.click(); - - assert.strictEqual(await page.getProperty("headerSnapped"), false, "The header should be expanded again after unsnapping"); - assert.strictEqual(await page.getProperty("showHeaderInStickArea"), false, "Header should not be in the sticky area when expanded"); - - assert.strictEqual(await scrollContainer.getProperty("scrollTop"), 0, "scrollTop should be reset to 0 after unsnapping"); - }); - - it("allows toggle the footer", async () => { - const footer = await browser.$("#page").shadow$(".ui5-dynamic-page-footer"); - const toggleFooterButton = await browser.$("#actionsToolbar").$("#toggleFooterBtn"); - - assert.ok(await footer.isDisplayedInViewport(), "Footer should be visible."); - - // act: click to hide the footer - await toggleFooterButton.click(); - - await browser.waitUntil(async () => !(await footer.isDisplayedInViewport()), { - timeout: 1000, - timeoutMsg: "expected footer to not be visible after 1000ms" - }); - }); - - it("snaps the header upon pressing the snap button", async () => { - const dynamicPage = await browser.$("#page"); - const snapButton = await dynamicPage.shadow$("ui5-dynamic-page-header-actions").shadow$(".ui5-dynamic-page-header-action"); - - // check initial state - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), false, "Header is initially expanded"); - assert.ok(await snapButton.isExisting(), "Arrow button is found"); - - // act: click to snap the header - await snapButton.click(); - - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), true, "Header is snapped"); - }); - - it("expands the header upon pressing the expand button", async () => { - const dynamicPage = await browser.$("#page"); - const headerSlot = await dynamicPage.shadow$("slot[name=headerArea]"); - const expandButton = await dynamicPage.shadow$("ui5-dynamic-page-header-actions").shadow$(".ui5-dynamic-page-header-action"); - - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), true, "Header is snapped"); - assert.strictEqual(await dynamicPage.shadow$("slot[name=headerArea]").isExisting(), false, "Header slot is not rendered"); - - // act: click to expand the header - await expandButton.click(); - - assert.strictEqual(await dynamicPage.getProperty("headerSnapped"), false, "Header is expanded"); - assert.ok(await headerSlot.isExisting(), "Header slot is rendered"); - }); - - it("expands the header in the sticky area", async () => { - const dynamicPage = await browser.$("#page"); - - dynamicPage.setProperty("headerSnapped", true); - const page = await browser.$("#page"); - const expandButton = await page.shadow$("ui5-dynamic-page-header-actions").shadow$(".ui5-dynamic-page-header-action"); - - assert.strictEqual(await page.getProperty("headerInContent"), false, "Header slot is not rendered"); - - // act: click to expand the header - await expandButton.click(); - - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is expanded"); - assert.ok(await page.shadow$("slot[name=headerArea]").isExisting(), - "Header slot is rendered in the sticky area"); - }); - - it("pins the header", async () => { - const page = await browser.$("#page"); - const pinButton = await page.shadow$("ui5-dynamic-page-header-actions") - .shadow$$(".ui5-dynamic-page-header-action")[1]; - - // act: pin the header - await pinButton.click(); - - assert.strictEqual(await page.getProperty("headerPinned"), true, "Header is pinned"); - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is still expanded"); - }); - - it("keeps the pinned header expanded during scroll", async () => { - const page = await browser.$("#page"); - const scrollTopBeforeScroll = await page.shadow$(".ui5-dynamic-page-scroll-container").getProperty("scrollTop"); - const scrollButton = await browser.$("#scrollDownBtn"); - - // act: scroll the page down - await scrollButton.click(); - - // wait untill the page processes the scroll event - await browser.waitUntil(async () => (await page.shadow$(".ui5-dynamic-page-scroll-container").getProperty("scrollTop")) > scrollTopBeforeScroll, { - timeout: 2000, - timeoutMsg: "The scroll handler must me called." - }); - - // check: the header state should remained unchanged - assert.strictEqual(await page.getProperty("headerPinned"), true, "Header is still pinned"); - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is still expanded"); - }); - - it("unpins the header upon press of snap button", async () => { - const page = await browser.$("#page"); - const snapButton = await page.shadow$("ui5-dynamic-page-header-actions") - .shadow$(".ui5-dynamic-page-header-action"); - - // act: snap the header - await snapButton.click(); - - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - }); - - it("expands the title with click", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // assert initial state - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - - // act: click to expand - await title.click(); - - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is expanded"); - }); - - it("snaps the title with click", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - const focusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area"); - - // ensure initial state - await page.setProperty("headerSnapped", false); - - // act: click to snap - // click at random position to avoid clicking of toolbar buttons - await focusArea.click({ x: 50, y: 50 }); - - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - }); - - it("expands the title using keyboard", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // assert init state - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - - // act: toggle the title - await title.keys("Enter") - - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is expanded"); - }); - - it("snaps the title using keyboard", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - - // assert init state - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is expanded"); - - // act: toggle the title - await title.keys("Enter") - - assert.strictEqual(await page.getProperty("headerSnapped"), true, "Header is snapped"); - }); -}); - -describe("Page layout when content has 100% height", () => { - before(async () => { - await browser.url(`test/pages/DynamicPageWithFullscreenContent.html`); - }); - - it("footer does not hide the content", async () => { - const page = await browser.$("#page"); - const content = await browser.$("#content"); - const footer = await browser.$("#footer"); - - assert.ok(await page.getProperty("showFooter"), "Footer is shown"); - - const contentBottom = await browser.execute((el) => { - return el.getBoundingClientRect().bottom; - }, content); - const footerTop = await browser.execute((el) => { - return el.getBoundingClientRect().top; - }, footer); - - assert.ok(contentBottom <= footerTop, "No overlap"); - }); - - it("content expands to fill the space between header and footer", async () => { - const page = await browser.$("#page"); - const content = await page.shadow$(".ui5-dynamic-page-fit-content"); - const header = await browser.$("#page ui5-dynamic-page-header"); - const footerSpacer = await page.shadow$(".ui5-dynamic-page-spacer"); - - assert.ok(await page.getProperty("showFooter"), "Footer is shown"); - - const headerBottom = await browser.execute((el) => { - return el.getBoundingClientRect().bottom; - }, header); - - const footerTop = await browser.execute((el) => { - return el.getBoundingClientRect().top; - }, footerSpacer); - - const contentTop = await browser.execute((el) => { - return el.getBoundingClientRect().top; - }, content); - - const contentBottom = await browser.execute((el) => { - return el.getBoundingClientRect().bottom; - }, content); - - assert.strictEqual(contentTop, headerBottom, "Content is rendered right below header"); - assert.strictEqual(contentBottom, footerTop, "Content is rendered right above footer"); - }); - -}); - -describe("Page layout when content oveflows", () => { - before(async () => { - await browser.url(`test/pages/DynamicPage_test.html`); - }); - - it("footer does not hide the content", async () => { - const page = await browser.$("#page"); - const content = await browser.$("#col1list"); - const footer = await browser.$("#footer"); - const scrollTopBeforeScroll = await page.shadow$(".ui5-dynamic-page-scroll-container").getProperty("scrollTop"); - const scrollButton = await browser.$("#scrollToBottomBtn"); - - assert.ok(await page.getProperty("showFooter"), "Footer is shown"); - - // act: scroll the page down - await scrollButton.click(); - - // wait untill the page processes the scroll event - await browser.waitUntil(async () => (await page.shadow$(".ui5-dynamic-page-scroll-container").getProperty("scrollTop")) > scrollTopBeforeScroll, { - timeout: 2000, - timeoutMsg: "The scroll handler must me called." - }); - - // check if footer overlaps content - const contentBottom = await browser.execute((el) => { - return el.getBoundingClientRect().bottom; - }, content); - const footerTop = await browser.execute((el) => { - return el.getBoundingClientRect().top; - }, footer); - - assert.ok(contentBottom <= footerTop, "No overlap"); - }); -}); - -describe("ARIA attributes", () => { - before(async () => { - await browser.url(`test/pages/DynamicPage_test.html`); - }); - - it("sets expanded state attributes", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - const titleFocusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area"); - const headerWrapper = await page.shadow$(".ui5-dynamic-page-title-header-wrapper"); - const headerRoot = await page.$("ui5-dynamic-page-header").shadow$(".ui5-dynamic-page-header-root"); - const headerActions = await page.shadow$("ui5-dynamic-page-header-actions"); - const expandButton = await headerActions.shadow$("ui5-button.ui5-dynamic-page-header-action-expand"); - const pinButton = await headerActions.shadow$("ui5-toggle-button.ui5-dynamic-page-header-action-pin"); - - // assert init state - assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is expanded"); - - // check ARIA attribute values - assert.strictEqual(await headerWrapper.getAttribute("aria-label"), "Header Expanded", - "aria-label value is correct"); - assert.strictEqual(await headerRoot.getAttribute("role"), "region", - "header role is correct"); - - assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "true", - "aria-expanded value is correct"); - assert.strictEqual(await titleFocusArea.getAttribute("aria-describedby"), `${await title.getProperty("__id")}-toggle-description`, - "aria-describedby is correct"); - assert.strictEqual(await titleFocusArea.getAttribute("role"), "button", - "title focus area role is correct"); - - assert.strictEqual(await expandButton.getProperty("accessibleName"), "Snap Header", - "expand button accessible-name is correct"); - assert.strictEqual(await expandButton.getProperty("tooltip"), "Snap Header", - "expand button accessible-name is correct"); - - assert.strictEqual(await pinButton.getProperty("accessibleName"), "Pin Header", - "pin button accessible-name is correct"); - assert.strictEqual(await pinButton.getProperty("tooltip"), "Pin Header", - "pin button accessible-name is correct"); - }); - - it("sets snapped state attributes", async () => { - const page = await browser.$("#page"); - const title = await browser.$("#page ui5-dynamic-page-title"); - const titleFocusArea = await title.shadow$(".ui5-dynamic-page-title-focus-area"); - const headerWrapper = await page.shadow$(".ui5-dynamic-page-title-header-wrapper"); - - // snap the header - await page.setProperty("headerSnapped", true); - - // check ARIA attribute values - assert.strictEqual(await headerWrapper.getAttribute("aria-label"), "Header Snapped", - "aria-label value is correct"); - - assert.strictEqual(await titleFocusArea.getAttribute("aria-expanded"), "false", - "aria-expanded value is correct"); - assert.strictEqual(await titleFocusArea.getAttribute("aria-describedby"), `${await title.getProperty("__id")}-toggle-description`, - "aria-describedby is correct"); - assert.strictEqual(await titleFocusArea.getAttribute("role"), "button", - "title focus area role is correct"); - - const headerActions = await page.shadow$("ui5-dynamic-page-header-actions"); - const expandButton = await headerActions.shadow$("ui5-button"); - - assert.ok(await expandButton.isExisting(), "expand button is rendered"); - assert.strictEqual(await expandButton.getProperty("accessibleName"), "Expand Header", - "expand button accessible-name is correct"); - assert.strictEqual(await expandButton.getProperty("tooltip"), "Expand Header", - "expand button tooltip is correct"); - }); -}); \ No newline at end of file