feat(ui5-dynamic-page): add tests

packages/fiori/test/pages/DynamicPageWithFullscreenContent.html

@@ -139,7 +139,7 @@
         </ui5-dynamic-page>
 
         <template id="templateDiv">
-            <div style="height:100%;display:flex;flex-direction:column;background-color: #00800037;">
+            <div id="content" style="height:100%;display:flex;flex-direction:column;background-color: #00800037;">
                 <div>first item</div>
                 <div style="height:100%;"></div>
                 <div>last item</div>

packages/fiori/test/specs/DynamicPage.spec.js

@@ -0,0 +1,53 @@
+import { assert } from "chai";
+
+describe("Page content with 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 browser.$("#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");
+    });
+
+});