From 771bd1448efa44ada67e1239ac3ec7adb9e381e6 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Tue, 24 Jun 2025 11:36:31 +0300 Subject: [PATCH 1/7] chore(ui5-illustrated-message): migrate wdio tests to cypress --- .../cypress/specs/IllustratedMessage.cy.tsx | 286 ++++++++++++++++++ 1 file changed, 286 insertions(+) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index c90eda58086f..ad96ca40ad62 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -1,6 +1,8 @@ import IllustratedMessage from "../../src/IllustratedMessage.js"; import Label from "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" +import Panel from "@ui5/webcomponents/dist/Panel.js"; +import Title from "@ui5/webcomponents/dist/Title.js"; describe("Accessibility", () => { it("should add aria-hidden and role=presetation to the SVG when decorative is true", () => { @@ -33,6 +35,38 @@ describe("Accessibility", () => { .should("not.have.attr", "aria-label"); }); + + it("content with auto design shrinks to fit the parent container", () => { + const newContainerHeight = 300; + const expectedMedia = "dialog"; + + cy.mount( +
+ + + +
+ ); + + cy.get("#container") + .invoke("css", "height", `${newContainerHeight}px`); + + cy.get("#illustratedMsg5") + .shadow() + .find(".ui5-illustrated-message-root") + .then($contents => { + const scrollHeight = $contents[0].scrollHeight; + const offsetHeight = $contents[0].offsetHeight; + + expect(scrollHeight).to.be.lessThan(newContainerHeight); + + expect(scrollHeight).to.equal(offsetHeight); + }); + + cy.get("#illustratedMsg5") + .invoke("prop", "media") + .should("equal", expectedMedia); + }); }); describe("design", () => { @@ -77,4 +111,256 @@ describe("design", () => { }); +}); + +describe("IllustratedMessage 'design' property", () => { + it("should show up properly, when in panel and it expand/collapse", () => { + cy.mount( + +
+ Expandable panel title +
+ + + ); + + cy.get("#illustratedMsg4") + .invoke("prop", "media") + .then((initialMedia) => { + cy.get("#panel1") + .invoke("prop", "collapsed", true); + + cy.get("#illustratedMsg4") + .invoke("prop", "media") + .should("equal", "base"); + + cy.get("#panel1") + .invoke("prop", "collapsed", false); + + cy.get("#illustratedMsg4") + .invoke("prop", "media") + .should("not.equal", "base"); + }); + }); +}); + +describe("Vertical responsiveness", () => { + it("content with auto design shrinks to fit the parent container", () => { + const newContainerHeight = 300; + const expectedMedia = "dialog"; + + cy.mount( +
+ + + +
+ ); + + cy.get("#container") + .invoke("css", "height", `${newContainerHeight}px`); + + cy.get("#illustratedMsg5") + .shadow() + .find(".ui5-illustrated-message-root") + .then($contents => { + const scrollHeight = $contents[0].scrollHeight; + const offsetHeight = $contents[0].offsetHeight; + + expect(scrollHeight).to.be.lessThan(newContainerHeight); + + expect(scrollHeight).to.equal(offsetHeight); + }); + + cy.get("#illustratedMsg5") + .invoke("prop", "media") + .should("equal", expectedMedia); + }); + + it("content with auto design expands to fit the parent container", () => { + const newContainerHeight = 500; + const expectedMedia = "scene"; + + cy.mount( +
+ + + +
+ ); + + cy.get("#container") + .invoke("css", "height", `${newContainerHeight}px`); + + cy.get("#illustratedMsg5") + .shadow() + .find(".ui5-illustrated-message-root") + .then($contents => { + const scrollHeight = $contents[0].scrollHeight; + const offsetHeight = $contents[0].offsetHeight; + + expect(scrollHeight).to.be.lessThan(newContainerHeight); + + expect(scrollHeight).to.equal(offsetHeight); + }); + + cy.get("#illustratedMsg5") + .invoke("prop", "media") + .should("equal", expectedMedia); + }); + + it("content with fixed design fits the parent container", () => { + const newContainerHeight = 250; + const expectedMedia = "dialog"; + + cy.mount( +
+ + + +
+ ); + + cy.get("#illustratedMsg5") + .invoke("prop", "design", "Dialog"); + + cy.get("#container") + .invoke("css", "height", `${newContainerHeight}px`); + + cy.get("#illustratedMsg5") + .shadow() + .find(".ui5-illustrated-message-root") + .then($contents => { + const scrollHeight = $contents[0].scrollHeight; + const offsetHeight = $contents[0].offsetHeight; + + expect(scrollHeight).to.be.lessThan(newContainerHeight); + + expect(scrollHeight).to.equal(offsetHeight); + }); + + cy.get("#illustratedMsg5") + .invoke("prop", "media") + .should("equal", expectedMedia); + }); + + it("shows image with unconstrained height when container has auto height", () => { + const newContainerHeight = "auto"; + + cy.mount( +
+ + + +
+ ); + + cy.get("#container") + .invoke("css", "height", newContainerHeight); + + cy.get("#illustratedMsg5") + .shadow() + .find(".ui5-illustrated-message-illustration svg") + .should("have.css", "height", "240px"); + }); + + it("Illustration visible, when container fit content height", () => { + cy.mount( +
+ + + +
+ ); + + cy.get("#illustratedMsg1") + .invoke("prop", "design", "Scene"); + + cy.get(".illustratedmessage1auto") + .invoke("attr", "style", "height: 440px"); + + cy.get("#illustratedMsg1") + .shadow() + .find(".ui5-illustrated-message-illustration svg") + .then($illustration => { + const scrollHeight = $illustration[0].scrollHeight; + expect(scrollHeight).to.not.equal(0); + }); + + cy.get(".illustratedmessage1auto") + .invoke("attr", "style", ""); + }); + + it("Illustration visible, when IM slotted and container has fixed height", () => { + cy.mount( + +
+ Expandable panel title +
+ + + ); + + cy.get("#panel1") + .invoke("attr", "style", "height: 19rem"); + + cy.get("#illustratedMsg4") + .shadow() + .find(".ui5-illustrated-message-illustration svg") + .then($illustration => { + const scrollHeight = $illustration[0].scrollHeight; + expect(scrollHeight).to.not.equal(0); + }); + + cy.get("#panel1") + .invoke("attr", "style", ""); + }); +}); + +describe("Dot design resource handling", () => { + it("uses substitute Spot illustration", () => { + cy.mount( + + + + ); + + cy.get("#illustratedMsg1") + .invoke("prop", "name", "TntUnableToLoad"); + + cy.get("#illustratedMsg1") + .invoke("prop", "design", "Dot"); + + cy.get("#illustratedMsg1") + .shadow() + .find(".ui5-illustrated-message-illustration svg") + .should("have.id", "tnt-Spot-UnableToLoad"); + }); + + it("uses original Dot illustration", () => { + cy.mount( + + + + ); + + cy.get("#illustratedMsg1") + .invoke("prop", "name", "AddPeople"); + + cy.get("#illustratedMsg1") + .invoke("prop", "design", "Dot"); + + cy.get("#illustratedMsg1") + .shadow() + .find(".ui5-illustrated-message-illustration svg") + .should("have.id", "sapIllus-Dot-AddPeople"); + }); }); \ No newline at end of file From ce76cfefe16fb3f473061c86ed4a8360df2cf9bc Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Tue, 24 Jun 2025 11:54:12 +0300 Subject: [PATCH 2/7] refactor: improve tests --- .../cypress/specs/IllustratedMessage.cy.tsx | 53 +++++++------------ 1 file changed, 20 insertions(+), 33 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index ad96ca40ad62..96fbae9d3489 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -54,18 +54,15 @@ describe("Accessibility", () => { cy.get("#illustratedMsg5") .shadow() .find(".ui5-illustrated-message-root") - .then($contents => { + .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); - expect(scrollHeight).to.equal(offsetHeight); }); cy.get("#illustratedMsg5") - .invoke("prop", "media") - .should("equal", expectedMedia); + .should("have.prop", "media", expectedMedia); }); }); @@ -130,21 +127,19 @@ describe("IllustratedMessage 'design' property", () => { cy.get("#illustratedMsg4") .invoke("prop", "media") - .then((initialMedia) => { - cy.get("#panel1") - .invoke("prop", "collapsed", true); - cy.get("#illustratedMsg4") - .invoke("prop", "media") - .should("equal", "base"); + cy.get("#panel1") + .invoke("prop", "collapsed", true); - cy.get("#panel1") - .invoke("prop", "collapsed", false); + cy.get("#illustratedMsg4") + .should("have.prop", "media", "base"); - cy.get("#illustratedMsg4") - .invoke("prop", "media") - .should("not.equal", "base"); - }); + cy.get("#panel1") + .invoke("prop", "collapsed", false); + + cy.get("#illustratedMsg4") + .invoke("prop", "media") + .should("not.equal", "base"); }); }); @@ -167,18 +162,16 @@ describe("Vertical responsiveness", () => { cy.get("#illustratedMsg5") .shadow() .find(".ui5-illustrated-message-root") - .then($contents => { + .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; expect(scrollHeight).to.be.lessThan(newContainerHeight); - expect(scrollHeight).to.equal(offsetHeight); }); cy.get("#illustratedMsg5") - .invoke("prop", "media") - .should("equal", expectedMedia); + .should("have.prop", "media", expectedMedia); }); it("content with auto design expands to fit the parent container", () => { @@ -199,18 +192,15 @@ describe("Vertical responsiveness", () => { cy.get("#illustratedMsg5") .shadow() .find(".ui5-illustrated-message-root") - .then($contents => { + .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); - expect(scrollHeight).to.equal(offsetHeight); }); cy.get("#illustratedMsg5") - .invoke("prop", "media") - .should("equal", expectedMedia); + .should("have.prop", "media", expectedMedia); }); it("content with fixed design fits the parent container", () => { @@ -234,18 +224,15 @@ describe("Vertical responsiveness", () => { cy.get("#illustratedMsg5") .shadow() .find(".ui5-illustrated-message-root") - .then($contents => { + .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); - expect(scrollHeight).to.equal(offsetHeight); }); cy.get("#illustratedMsg5") - .invoke("prop", "media") - .should("equal", expectedMedia); + .should("have.prop", "media", expectedMedia); }); it("shows image with unconstrained height when container has auto height", () => { @@ -286,7 +273,7 @@ describe("Vertical responsiveness", () => { cy.get("#illustratedMsg1") .shadow() .find(".ui5-illustrated-message-illustration svg") - .then($illustration => { + .should(($illustration) => { const scrollHeight = $illustration[0].scrollHeight; expect(scrollHeight).to.not.equal(0); }); @@ -315,7 +302,7 @@ describe("Vertical responsiveness", () => { cy.get("#illustratedMsg4") .shadow() .find(".ui5-illustrated-message-illustration svg") - .then($illustration => { + .should(($illustration) => { const scrollHeight = $illustration[0].scrollHeight; expect(scrollHeight).to.not.equal(0); }); From ac73c27056fcf8925d2aad626b330e5f634b8c18 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 25 Jun 2025 11:15:07 +0300 Subject: [PATCH 3/7] refactor: address comments --- .../cypress/specs/IllustratedMessage.cy.tsx | 163 +++++------------- 1 file changed, 41 insertions(+), 122 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index 96fbae9d3489..0ec75e9649e2 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -113,143 +113,102 @@ describe("design", () => { describe("IllustratedMessage 'design' property", () => { it("should show up properly, when in panel and it expand/collapse", () => { cy.mount( - -
- Expandable panel title -
- + + ); - cy.get("#illustratedMsg4") - .invoke("prop", "media") - - cy.get("#panel1") + cy.get("[ui5-panel]") .invoke("prop", "collapsed", true); - cy.get("#illustratedMsg4") + cy.get("[ui5-illustrated-message]") .should("have.prop", "media", "base"); - cy.get("#panel1") + cy.get("[ui5-panel]") .invoke("prop", "collapsed", false); - cy.get("#illustratedMsg4") - .invoke("prop", "media") - .should("not.equal", "base"); + cy.get("[ui5-illustrated-message]") + .should("have.prop", "media") + .and("not.equal", "base"); }); }); describe("Vertical responsiveness", () => { it("content with auto design shrinks to fit the parent container", () => { - const newContainerHeight = 300; - const expectedMedia = "dialog"; - cy.mount( -
- - - +
+
); - cy.get("#container") - .invoke("css", "height", `${newContainerHeight}px`); + cy.get("div") + .invoke("css", "height", "300px"); - cy.get("#illustratedMsg5") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-root") .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); + expect(scrollHeight).to.be.lessThan(300); expect(scrollHeight).to.equal(offsetHeight); }); - - cy.get("#illustratedMsg5") - .should("have.prop", "media", expectedMedia); }); it("content with auto design expands to fit the parent container", () => { - const newContainerHeight = 500; - const expectedMedia = "scene"; - cy.mount( -
- - - +
+
); - cy.get("#container") - .invoke("css", "height", `${newContainerHeight}px`); + cy.get("div") + .invoke("css", "height", "500px"); - cy.get("#illustratedMsg5") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-root") .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); + expect(scrollHeight).to.be.lessThan(500); expect(scrollHeight).to.equal(offsetHeight); }); - - cy.get("#illustratedMsg5") - .should("have.prop", "media", expectedMedia); }); it("content with fixed design fits the parent container", () => { - const newContainerHeight = 250; - const expectedMedia = "dialog"; - cy.mount( -
- - - +
+
); - cy.get("#illustratedMsg5") - .invoke("prop", "design", "Dialog"); - - cy.get("#container") - .invoke("css", "height", `${newContainerHeight}px`); + cy.get("div") + .invoke("css", "height", "250px"); - cy.get("#illustratedMsg5") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-root") .should(($contents) => { const scrollHeight = $contents[0].scrollHeight; const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); + expect(scrollHeight).to.be.lessThan(250); expect(scrollHeight).to.equal(offsetHeight); }); - - cy.get("#illustratedMsg5") - .should("have.prop", "media", expectedMedia); }); it("shows image with unconstrained height when container has auto height", () => { - const newContainerHeight = "auto"; - cy.mount( -
- - - +
+
); - cy.get("#container") - .invoke("css", "height", newContainerHeight); + cy.get("div") + .invoke("css", "height", "auto"); - cy.get("#illustratedMsg5") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") .should("have.css", "height", "240px"); @@ -257,76 +216,44 @@ describe("Vertical responsiveness", () => { it("Illustration visible, when container fit content height", () => { cy.mount( -
- - - +
+
); - cy.get("#illustratedMsg1") - .invoke("prop", "design", "Scene"); - - cy.get(".illustratedmessage1auto") - .invoke("attr", "style", "height: 440px"); - - cy.get("#illustratedMsg1") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") .should(($illustration) => { const scrollHeight = $illustration[0].scrollHeight; expect(scrollHeight).to.not.equal(0); }); - - cy.get(".illustratedmessage1auto") - .invoke("attr", "style", ""); }); it("Illustration visible, when IM slotted and container has fixed height", () => { cy.mount( - -
- Expandable panel title -
- + + ); - cy.get("#panel1") - .invoke("attr", "style", "height: 19rem"); - - cy.get("#illustratedMsg4") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") .should(($illustration) => { const scrollHeight = $illustration[0].scrollHeight; expect(scrollHeight).to.not.equal(0); }); - - cy.get("#panel1") - .invoke("attr", "style", ""); }); }); describe("Dot design resource handling", () => { it("uses substitute Spot illustration", () => { cy.mount( - - - + ); - cy.get("#illustratedMsg1") - .invoke("prop", "name", "TntUnableToLoad"); - - cy.get("#illustratedMsg1") - .invoke("prop", "design", "Dot"); - - cy.get("#illustratedMsg1") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") .should("have.id", "tnt-Spot-UnableToLoad"); @@ -334,18 +261,10 @@ describe("Dot design resource handling", () => { it("uses original Dot illustration", () => { cy.mount( - - - + ); - cy.get("#illustratedMsg1") - .invoke("prop", "name", "AddPeople"); - - cy.get("#illustratedMsg1") - .invoke("prop", "design", "Dot"); - - cy.get("#illustratedMsg1") + cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") .should("have.id", "sapIllus-Dot-AddPeople"); From 26d78eab97654a6d06c03ea5f66caf57edfef3d5 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 30 Jun 2025 10:43:18 +0300 Subject: [PATCH 4/7] chore: delete old wdio tests --- .../test/specs/IllustratedMessage.spec.js | 215 ------------------ 1 file changed, 215 deletions(-) delete mode 100644 packages/fiori/test/specs/IllustratedMessage.spec.js diff --git a/packages/fiori/test/specs/IllustratedMessage.spec.js b/packages/fiori/test/specs/IllustratedMessage.spec.js deleted file mode 100644 index 70b743bbe7e3..000000000000 --- a/packages/fiori/test/specs/IllustratedMessage.spec.js +++ /dev/null @@ -1,215 +0,0 @@ -import { assert } from "chai"; - -describe("IllustratedMessage 'design' property", () => { - before(async () => { - await browser.url(`test/pages/IllustratedMessage.html`); - }); - - it("should show up properly, when in panel and it expand/collapse", async () => { - // Arrange - const illustratedMsg = await browser.$("#illustratedMsg4"); - const panel = await browser.$("#panel1"); - let illustratedMsgMedia = await illustratedMsg.getProperty("media"); - // Act - - await panel.setProperty("collapsed", true); - illustratedMsgMedia = await illustratedMsg.getProperty("media"); - - // Assert - assert.strictEqual(illustratedMsgMedia, "base", "'media' should be equal to 'base', when the panel is collapsed"); - - await panel.setProperty("collapsed", false); - illustratedMsgMedia = await illustratedMsg.getProperty("media"); - - // Assert - assert.strictEqual(illustratedMsgMedia !== "base", true, "'media' shouldn`t anymore be equal to 'base', when panel is expanded"); - - }); - -}); - -describe("Accessibility", () => { - before(async () => { - await browser.url(`test/pages/IllustratedMessage.html`); - }); - - - it("accessible-name-ref", async () => { - // Arrange - const illustratedMsg = await browser.$("#illustratedMsg2"), - illustratedMsgSVG = await browser.$("#illustratedMsg2").shadow$('.ui5-illustrated-message-illustration svg'), - EXPECTED_ARIA_LABEL_NAME = "Text from aria-labelledby"; - - // Assert - assert.strictEqual(await illustratedMsgSVG.getAttribute("aria-label"), EXPECTED_ARIA_LABEL_NAME, "aria-label is set"); - - // Act - await illustratedMsg.removeAttribute("accessible-name-ref"); - - // Assert - assert.strictEqual(await illustratedMsgSVG.hasAttribute("aria-label"), false); - - // Act - await illustratedMsg.setAttribute("accessible-name-ref", "lbl"); - - // Assert - assert.strictEqual(await illustratedMsgSVG.getAttribute("aria-label"), EXPECTED_ARIA_LABEL_NAME, "aria-label is set"); - - }); - -}); - -describe("Vertical responsiveness", () => { - before(async () => { - await browser.url(`test/pages/IllustratedMessage.html`); - }); - - it("content with auto design shrinks to fit the parent container", async () => { - - const newContainerHeight = 300, - expectedMedia = "dialog", - illustratedMsg = await browser.$("#illustratedMsg5"); - - // Act: apply new height - await browser.executeAsync(async (newContainerHeight, done) => { - document.getElementById("container").style.height = newContainerHeight; - done(); - }, `${newContainerHeight}px`); - - // Check - const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), - scrollHeight = await contents.getProperty("scrollHeight"), - offsetHeight = await contents.getProperty("offsetHeight"), - illustratedMsgMedia = await illustratedMsg.getProperty("media"); - assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); - assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); - assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); - }); - - it("content with auto design expands to fit the parent container", async () => { - - const newContainerHeight = 500, - expectedMedia = "scene", - illustratedMsg = await browser.$("#illustratedMsg5"); - - // Act: apply new height - await browser.executeAsync(async (newContainerHeight, done) => { - document.getElementById("container").style.height = newContainerHeight; - done(); - }, `${newContainerHeight}px`); - - // Check - const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), - scrollHeight = await contents.getProperty("scrollHeight"), - offsetHeight = await contents.getProperty("offsetHeight"), - illustratedMsgMedia = await illustratedMsg.getProperty("media"); - assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); - assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); - assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); - }); - - it("content with fixed design fits the parent container", async () => { - - const newContainerHeight = 250, - expectedMedia = "dialog", - illustratedMsg = await browser.$("#illustratedMsg5"); - - // set fixed design - illustratedMsg.setProperty("design", "Dialog"); - - // Act: apply new height - await browser.executeAsync(async (newContainerHeight, done) => { - document.getElementById("container").style.height = newContainerHeight; - done(); - }, `${newContainerHeight}px`); - - // Check - const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), - scrollHeight = await contents.getProperty("scrollHeight"), - offsetHeight = await contents.getProperty("offsetHeight"), - illustratedMsgMedia = await illustratedMsg.getProperty("media"); - assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); - assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); - assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); - }); - - it("shows image with unconstrained height when container has auto height", async () => { - - const newContainerHeight = "auto", - illustratedMsg = await browser.$("#illustratedMsg5"); - - // Act: apply new height - await browser.executeAsync(async (newContainerHeight, done) => { - document.getElementById("container").style.height = newContainerHeight; - done(); - }, newContainerHeight); - - // Check - const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); - const cssHeight = (await illustration.getCSSProperty("height")).value; - - assert.strictEqual(cssHeight, "160px", "svg has expected height"); - }); - - it("Illustration visible, when container fit content height", async () => { - - const illustratedMsgContainer = await browser.$(".illustratedmessage1auto"); - const illustratedMsg = await browser.$("#illustratedMsg1"); - await illustratedMsg.setProperty("design", "Scene"); - - // Act - await illustratedMsgContainer.setAttribute("style", "height: 440px"); - const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); - - // Check - assert.notEqual(await illustration.getProperty("scrollHeight"), 0, "Illustration fits its container inherited height"); - await illustratedMsgContainer.setAttribute("style", ""); - }); - - it("Illustration visible, when IM slotted and container has fixed height", async () => { - - const panel = await browser.$("#panel1"); - const illustratedMsg = await browser.$("#illustratedMsg4"); - const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); - - // Act - await panel.setAttribute("style", "height: 19rem"); - - // Check - assert.notEqual(await illustration.getProperty("scrollHeight"), 0, "Illustration fits its container inherited height"); - await panel.setAttribute("style", ""); - }); -}); - -describe("Dot design resource handling", () => { - before(async () => { - await browser.url(`test/pages/IllustratedMessage.html`); - }); - - it("uses substitute Spot illustration", async () => { - - const illustratedMsg = await browser.$("#illustratedMsg1"); - - // Act - await illustratedMsg.setProperty("name", "TntUnableToLoad"); // set an illustration which doesn't have original Dot SVG - await illustratedMsg.setProperty("design", "Dot"); - const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); - - // Check - assert.strictEqual(await illustration.getProperty("id"), "tnt-Spot-UnableToLoad", "Spot SVG is used when no Dot is present"); - }); - - it("uses original Dot illustration", async () => { - - const illustratedMsg = await browser.$("#illustratedMsg1"); - - // Act - await illustratedMsg.setProperty("name", "AddPeople"); // set an illustration which has original Dot SVG - await illustratedMsg.setProperty("design", "Dot"); - const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); - - // Check - assert.strictEqual(await illustration.getProperty("id"), "sapIllus-Dot-AddPeople", "Dot is present, therefore used"); - }); - -}); From 38bac6917145e9a95b0464fa70338214a83f550e Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 4 Aug 2025 16:18:51 +0300 Subject: [PATCH 5/7] chore: address comments --- .../cypress/specs/IllustratedMessage.cy.tsx | 43 ++++++------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index af64dc33862d..65f1add3b346 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -35,35 +35,6 @@ describe("Accessibility", () => { .should("not.have.attr", "aria-label"); }); - - it("content with auto design shrinks to fit the parent container", () => { - const newContainerHeight = 300; - const expectedMedia = "dialog"; - - cy.mount( -
- - - -
- ); - - cy.get("#container") - .invoke("css", "height", `${newContainerHeight}px`); - - cy.get("#illustratedMsg5") - .shadow() - .find(".ui5-illustrated-message-root") - .should(($contents) => { - const scrollHeight = $contents[0].scrollHeight; - const offsetHeight = $contents[0].offsetHeight; - expect(scrollHeight).to.be.lessThan(newContainerHeight); - expect(scrollHeight).to.equal(offsetHeight); - }); - - cy.get("#illustratedMsg5") - .should("have.prop", "media", expectedMedia); - }); }); describe("design", () => { @@ -154,6 +125,8 @@ describe("IllustratedMessage 'design' property", () => { describe("Vertical responsiveness", () => { it("content with auto design shrinks to fit the parent container", () => { + const expectedMedia = "dialog"; + cy.mount(
@@ -173,9 +146,14 @@ describe("Vertical responsiveness", () => { expect(scrollHeight).to.be.lessThan(300); expect(scrollHeight).to.equal(offsetHeight); }); + + cy.get("[ui5-illustrated-message]") + .should("have.prop", "media", expectedMedia); }); it("content with auto design expands to fit the parent container", () => { + const expectedMedia = "scene"; + cy.mount(
@@ -194,6 +172,9 @@ describe("Vertical responsiveness", () => { expect(scrollHeight).to.be.lessThan(500); expect(scrollHeight).to.equal(offsetHeight); }); + + cy.get("[ui5-illustrated-message]") + .should("have.prop", "media", expectedMedia); }); it("content with fixed design fits the parent container", () => { @@ -219,7 +200,7 @@ describe("Vertical responsiveness", () => { it("shows image with unconstrained height when container has auto height", () => { cy.mount( -
+
); @@ -230,7 +211,7 @@ describe("Vertical responsiveness", () => { cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") - .should("have.css", "height", "240px"); + .should("have.css", "height", "160px"); }); it("Illustration visible, when container fit content height", () => { From a8be7163500572462e73a8b4c53beb060143fd20 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 4 Aug 2025 16:35:52 +0300 Subject: [PATCH 6/7] fix: failing test --- packages/fiori/cypress/specs/IllustratedMessage.cy.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index 65f1add3b346..e69813d6855f 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -128,14 +128,11 @@ describe("Vertical responsiveness", () => { const expectedMedia = "dialog"; cy.mount( -
+
); - cy.get("div") - .invoke("css", "height", "300px"); - cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-root") @@ -155,14 +152,11 @@ describe("Vertical responsiveness", () => { const expectedMedia = "scene"; cy.mount( -
+
); - cy.get("div") - .invoke("css", "height", "500px"); - cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-root") From b424f1e68077f720a1f3e0cb1aeb8feb77e665ac Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Tue, 5 Aug 2025 12:31:34 +0300 Subject: [PATCH 7/7] chore: remove unused import --- packages/fiori/cypress/specs/IllustratedMessage.cy.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index e69813d6855f..df9a91b81f8a 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -2,7 +2,6 @@ import IllustratedMessage from "../../src/IllustratedMessage.js"; import Label from "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" import Panel from "@ui5/webcomponents/dist/Panel.js"; -import Title from "@ui5/webcomponents/dist/Title.js"; describe("Accessibility", () => { it("should add aria-hidden and role=presetation to the SVG when decorative is true", () => {