diff --git a/packages/fiori/cypress/specs/MediaGallery.cy.tsx b/packages/fiori/cypress/specs/MediaGallery.cy.tsx index a0054d5b24ad..7504dcb035f6 100644 --- a/packages/fiori/cypress/specs/MediaGallery.cy.tsx +++ b/packages/fiori/cypress/specs/MediaGallery.cy.tsx @@ -2,6 +2,223 @@ import MediaGallery from "../../src/MediaGallery.js"; import MediaGalleryItem from "../../src/MediaGalleryItem.js"; import type UI5Element from "@ui5/webcomponents-base"; +describe("MediaGallery general interaction", () => { + beforeEach(() => { + cy.mount( + + + + + + + + + + + + + + + ); + + }); + + it("fires selection-change on thumbnail click", () => { + cy.get("[ui5-media-gallery]").then(($gallery) => { + const gallery = $gallery[0]; + gallery.addEventListener("ui5-selection-change", cy.stub().as("selectionChanged")); + }); + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(2).click(); + + cy.get("@selectionChanged") + .should("have.been.calledOnce") + .and("be.calledWithMatch", { + type: "ui5-selection-change" + }); + + cy.get("@selectionChanged").then((stub: any) => { + const event = stub.getCall(0).args[0]; + const selectedItem = event.detail.item; + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(2).then(($item) => { + expect(selectedItem).to.equal($item[0]); + }); + }); + }); + + it("changes selection-flag on selection-change", () => { + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(1).as("oldSelectedItem"); + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(2).as("newSelectedItem"); + + cy.get("@oldSelectedItem").should("have.prop", "selected", true); + cy.get("@newSelectedItem").should("have.prop", "selected", false); + + cy.get("@newSelectedItem").click(); + + cy.get("@newSelectedItem").should("have.prop", "selected", true); + cy.get("@oldSelectedItem").should("have.prop", "selected", false); + }); + + it("does not fire selection-change on click on already selected item", () => { + cy.get("[ui5-media-gallery]").then(($gallery) => { + const gallery = $gallery[0]; + gallery.addEventListener("ui5-selection-change", cy.stub().as("selectionChanged")); + }); + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(1).as("selectedItem"); + cy.get("@selectedItem").should("have.prop", "selected", true); + cy.get("@selectedItem").click(); + + cy.get("@selectionChanged").should("not.have.been.called"); + }); + + it("fires overflow-click on overflow button click", () => { + cy.get("[ui5-media-gallery]").then($gallery => { + const gallery = $gallery[0]; + + gallery.addEventListener("ui5-overflow-click", cy.stub().as("overflowClicked")); + + for (let i = 0; i < 10; i++) { + const item = document.createElement("ui5-media-gallery-item"); + item.innerHTML = ` + + + `; + gallery.appendChild(item); + } + }); + + cy.wait(100); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-overflow ui5-button") + .should("exist") + .should("be.visible") + .click(); + + cy.get("@overflowClicked") + .should("have.been.calledOnce") + .and("be.calledWithMatch", { + type: "ui5-overflow-click" + }); + }); + + it("fires display-area-click", () => { + cy.mount( + + + + + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]").then(($gallery) => { + const gallery = $gallery[0]; + gallery.addEventListener("ui5-display-area-click", cy.stub().as("displayAreaClicked")); + }); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display") + .click(); + + cy.get("@displayAreaClicked") + .should("have.been.calledOnce") + .and("be.calledWithMatch", { + type: "ui5-display-area-click" + }); + }); + + it("does not fire display-area-click when interactiveDisplayArea==false", () => { + cy.mount( + + + + + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]").then(($gallery) => { + const gallery = $gallery[0]; + gallery.addEventListener("ui5-display-area-click", cy.stub().as("displayAreaClicked")); + }); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display") + .click(); + + cy.get("@displayAreaClicked").should("not.have.been.called"); + }); + + it("fires selection-change after keyboard handling", () => { + cy.get("[ui5-media-gallery]").then(($gallery) => { + const gallery = $gallery[0]; + gallery.addEventListener("ui5-selection-change", cy.stub().as("selectionChanged")); + }); + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(0).click(); + cy.get("@selectionChanged").should("have.been.called"); + + cy.realPress("ArrowDown"); + cy.realPress("Enter"); + + cy.get("@selectionChanged").should("have.been.calledTwice"); + cy.get("@selectionChanged").then((stub: any) => { + const secondEvent = stub.getCall(1).args[0]; + const selectedItem = secondEvent.detail.item; + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(1).then(($item) => { + expect(selectedItem).to.equal($item[0]); + }); + }); + + cy.realPress("ArrowUp"); + cy.realPress("Space"); + + cy.get("@selectionChanged").should("have.been.calledThrice"); + cy.get("@selectionChanged").then((stub: any) => { + const thirdEvent = stub.getCall(2).args[0]; + const selectedItem = thirdEvent.detail.item; + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(0).then(($item) => { + expect(selectedItem).to.equal($item[0]); + }); + }); + }); + + it("changes selection when selected item is disabled", () => { + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(0).as("firstItem"); + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").eq(1).as("secondItem"); + + cy.get("@firstItem").click(); + cy.get("@firstItem").invoke("prop", "disabled", true); + + cy.get("@firstItem").should("have.prop", "selected", false); + cy.get("@secondItem").should("have.prop", "selected", true); + }); +}); + describe("MediaGallery - getFocusDomRef Method", () => { it("should return undefined when the MediaGallery is empty", () => { cy.mount(); @@ -16,34 +233,34 @@ describe("MediaGallery - getFocusDomRef Method", () => { cy.mount( - - + + - - + + ); cy.get("[ui5-media-gallery], #item1") - .then(($el) => { - const mg = $el[0]; - const item = $el[1]; - expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef()); - }); + .then(($el) => { + const mg = $el[0]; + const item = $el[1]; + expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef()); + }); }); it("should return last focused item in the MediaGallery", () => { cy.mount( - - + + - - + + ); @@ -57,6 +274,356 @@ describe("MediaGallery - getFocusDomRef Method", () => { const item = $el[1]; expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef()); + }); + }); +}); + +describe("MediaGallery layout", () => { + it("auto layout S size", () => { + const newWidth = 599; // S size + const marginSize = 16; + const expectedEffectiveLayout = "Vertical"; + const expectedDisplayWidth = newWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( + + + + + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("auto layout M size", () => { + const newWidth = 600; // M size + const marginSize = 16; + const thumbnailWidth = 64; + const thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize); + const expectedEffectiveLayout = "Horizontal"; + const expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( + + + + + + + + + + + + + + + ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("auto layout L size and restricted height", () => { + const newWidth = 1024; // L size + const marginSize = 16; + const parentHeight = 800; + const expectedEffectiveLayout = "Horizontal"; + const expectedDisplayWidth = parentHeight - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("auto layout L size and unrestricted height", () => { + const newWidth = 1024; // L size + const marginSize = 16; + const parentHeight = 3000; + const thumbnailWidth = 64; + const thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize); + const expectedEffectiveLayout = "Horizontal"; + const expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").then($gallery => { + ($gallery[0] as any)._updateLayout(); + }); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("vertical layout L size and unrestricted height", () => { + const newWidth = 1024; // L size + const marginSize = 16; + const parentHeight = 3000; + const expectedEffectiveLayout = "Vertical"; + const expectedDisplayWidth = newWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("vertical layout L size and restricted height", () => { + const newWidth = 1024; // L size + const marginSize = 16; + const parentHeight = 600; + const thumbnailWidth = 64; + const thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize); + const expectedEffectiveLayout = "Vertical"; + const expectedDisplayWidth = parentHeight - thumbnailsMenuWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("horizontal layout S size and restricted height", () => { + const newWidth = 599; // S size + const marginSize = 16; + const parentHeight = 400; + const expectedEffectiveLayout = "Horizontal"; + const expectedDisplayWidth = parentHeight - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("horizontal layout S size and unrestricted height", () => { + const newWidth = 599; // S size + const marginSize = 16; + const parentHeight = 3000; + const thumbnailWidth = 64; + const thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize); + const expectedEffectiveLayout = "Horizontal"; + const expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize); + const expectedDisplayHeight = expectedDisplayWidth; + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]").should("have.prop", "effectiveLayout", expectedEffectiveLayout); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("item with 'Wide' layout and all thumbnails shown", () => { + const newWidth = 1400; // L size + const parentHeight = 800; + const marginSize = 16; + const expectedDisplayWidth = 1006; // 3/4 of the available width + const expectedDisplayHeight = parentHeight - (2 * marginSize); + + cy.mount( +
+ + + + + + + + + + + + + + +
+ ); + + cy.get("[ui5-media-gallery]") + .shadow() + .find(".ui5-media-gallery-display [ui5-media-gallery-item]") + .should("have.prop", "offsetWidth", expectedDisplayWidth) + .should("have.prop", "offsetHeight", expectedDisplayHeight); + }); + + it("narrow container", () => { + const newWidth = 80; // width allows only the overflow button to be displayed; all items will overflow + + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-media-gallery] [ui5-media-gallery-item]").then($items => { + const itemsCount = $items.length; + + cy.get("[ui5-media-gallery]").should("have.prop", "_overflowSize", itemsCount); }); }); }); \ No newline at end of file diff --git a/packages/fiori/test/specs/MediaGallery.spec.js b/packages/fiori/test/specs/MediaGallery.spec.js deleted file mode 100644 index e79cc2dd18b5..000000000000 --- a/packages/fiori/test/specs/MediaGallery.spec.js +++ /dev/null @@ -1,407 +0,0 @@ -import { assert } from "chai"; - - -describe("MediaGallery general interaction", () => { - before(async () => { - await browser.url(`test/pages/MediaGallery.html`); - }); - - it("fires selection-change on thumbnail click", async () => { - const item = await browser.$$("#mGallery2 ui5-media-gallery-item")[1]; - - // Act - await item.click(); - //await browser.debug(); - - // Check - const result = await browser.$("#selectedIndexLabel"); - assert.strictEqual(await result.getHTML(false), "1", "event for selected item is thrown"); - }); - - it("changes selection-flag on selection-change", async () => { - const oldSelectedItem = await browser.$("#mGallery2 ui5-media-gallery-item[selected]"); - const newSelectedItem = await browser.$$("#mGallery2 ui5-media-gallery-item")[2]; - - // Act - await newSelectedItem.click(); - - // Check - assert.strictEqual(await newSelectedItem.getProperty("selected"), true, "flag of pevious is updated"); - assert.strictEqual(await oldSelectedItem.getProperty("selected"), false, "flag of newly selected is updated"); - }); - - it("does not fire selection-change on click on already selected item", async () => { - // Setup - const clearOldResults = await browser.$("#clearBtn"); - await clearOldResults.click(); - - const oldSelectedItem = await browser.$("#mGallery2 ui5-media-gallery-item[selected]"); - - // Act: click on the already selected item - await oldSelectedItem.click(); - - // Check - const result = await browser.$("#selectedIndexLabel"); - assert.strictEqual(await result.getHTML(false), "", "event is not fired"); - }); - - it("fires overflow-click on overflow button click", async () => { - // Setup - const clearOldResults = await browser.$("#clearBtn"); - await clearOldResults.click(); - - const overflowBtn = await browser.$("#mGallery2").shadow$(".ui5-media-gallery-overflow ui5-button"); - - // Act - await overflowBtn.click(); - - // Check - const result = await browser.$("#overflowClickCallCountLabel"); - assert.strictEqual(await result.getHTML(false), "1", "event is fired"); - }); - - it("fires display-area-click", async () => { - // Setup - const clearOldResults = await browser.$("#clearBtn"); - await clearOldResults.click(); - - const gallery = await browser.$("#mGallery2"); - await gallery.setProperty("interactiveDisplayArea", true); - const displayArea = gallery.shadow$(".ui5-media-gallery-display"); - - // Act - await displayArea.click(); - - // Check - const result = await browser.$("#displayAreaClickCallCountLabel"); - assert.strictEqual(await result.getHTML(false), "1", "event is fired"); - }); - - it("does not fire display-area-click when interactiveDisplayArea==false", async () => { - // Setup - const clearOldResults = await browser.$("#clearBtn"); - await clearOldResults.click(); - - const gallery = await browser.$("#mGallery2"); - await gallery.setProperty("interactiveDisplayArea", false); - const displayArea = gallery.shadow$(".ui5-media-gallery-display"); - - // Act - await displayArea.click(); - - // Check - const result = await browser.$("#displayAreaClickCallCountLabel"); - assert.strictEqual(await result.getHTML(false), "", "no event is fired"); - }); - - it("fires selection-change after keyboard handling", async () => { - const gallery = await browser.$("#mGallery2").shadow$(".ui5-media-gallery-root"), - item0 = await browser.$$("#mGallery2 ui5-media-gallery-item")[0]; - - // Act: move the selection to the second item using KBH - await item0.click(); - await gallery.keys("ArrowDown"); - await gallery.keys("Enter"); - - // Check - const result = await browser.$("#selectedIndexLabel"); - assert.strictEqual(await result.getHTML(false), "1", "event for selected item is thrown"); - - // Act: move the selection back to the first item using KBH - await gallery.keys("ArrowUp"); - await gallery.keys("Space"); - - // Check - const result1 = await browser.$("#selectedIndexLabel"); - assert.strictEqual(await result1.getHTML(false), "0", "event for selected item is thrown"); - }); - - it("changes selection when selected item is disabled", async () => { - const gallery = await browser.$("#mGallery2").shadow$(".ui5-media-gallery-root"), - item0 = await browser.$$("#mGallery2 ui5-media-gallery-item")[0], - item1 = await browser.$$("#mGallery2 ui5-media-gallery-item")[1]; - - // Act: move the selection to the second item using KBH - await item0.click(); - await item0.setProperty("disabled", true); - - // Check - assert.strictEqual(await item0.getProperty("selected"), false, "disabled item is no longer seleted"); - assert.strictEqual(await item1.getProperty("selected"), true, "selection changed to the second item"); - }); - -}); - -describe("MediaGallery layout", () => { - before(async () => { - await browser.url(`test/pages/MediaGallery.html`); - }); - - it("auto layout S size", async () => { - - const newWidth = 599, // S size - marginSize = 16, - expectedEffectiveLayout = "Vertical", - expectedDisplayWidth = newWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - // Act: apply new width - await browser.executeAsync(async (newWidth, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - done(); - }, newWidth); - - // Check - const gallery = await browser.$("#mGallery1"); - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("auto layout M size", async () => { - - const newWidth = 600, // M size - marginSize = 16, - thumbnailWidth = 64, - thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize), - expectedEffectiveLayout = "Horizontal", - expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - // Act: apply new width - await browser.executeAsync(async (newWidth, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - done(); - }, newWidth); - - // Check - const gallery = await browser.$("#mGallery1"); - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("auto layout L size and restricted height", async () => { - - const newWidth = 1024, // L size - marginSize = 16, - parentHeight = 800, - expectedEffectiveLayout = "Horizontal", - expectedDisplayWidth = parentHeight - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - // Act: apply new width - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // Check - const gallery = await browser.$("#mGallery1"); - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("auto layout L size and unrestricted height", async () => { - - const newWidth = 1024, // L size - marginSize = 16, - parentHeight = 3000, // a big enough value - thumbnailWidth = 64, - thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize), - expectedEffectiveLayout = "Horizontal", - expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - // Act: apply new width - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - document.getElementById("mGallery1")._updateLayout(); - done(); - }, newWidth, parentHeight); - - // Check - const gallery = await browser.$("#mGallery1"); - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("vertical layout L size and unrestricted height", async () => { - - const newWidth = 1024, // L size - marginSize = 16, - parentHeight = 3000, // a big enough value - expectedEffectiveLayout = "Vertical", - expectedDisplayWidth = newWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - const gallery = await browser.$("#mGallery1"); - - // Setup - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // Act - await gallery.setProperty("layout", "Vertical"); - - // Check - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("vertical layout L size and restricted height", async () => { - - const newWidth = 1024, // L size - marginSize = 16, - parentHeight = 600, - thumbnailWidth = 64, - thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize), - expectedEffectiveLayout = "Vertical", - expectedDisplayWidth = parentHeight - thumbnailsMenuWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - const gallery = await browser.$("#mGallery1"); - - // Setup - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // Act - await gallery.setProperty("layout", "Vertical"); - - // Check - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("horizontal layout S size and restricted height", async () => { - - const newWidth = 599, // S size - marginSize = 16, - parentHeight = 400, - expectedEffectiveLayout = "Horizontal", - expectedDisplayWidth = parentHeight - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - const gallery = await browser.$("#mGallery1"); - - // Setup - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // Act - await gallery.setProperty("layout", "Horizontal"); - - // Check - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("horizontal layout S size and unrestricted height", async () => { - - const newWidth = 599, // S size - marginSize = 16, - parentHeight = 3000, // big enough value - thumbnailWidth = 64, - thumbnailsMenuWidth = thumbnailWidth + (2 * marginSize), - expectedEffectiveLayout = "Horizontal", - expectedDisplayWidth = newWidth - thumbnailsMenuWidth - (2 * marginSize), - expectedDisplayHeight = expectedDisplayWidth; - - const gallery = await browser.$("#mGallery1"); - - // Setup - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // Act - await gallery.setProperty("layout", "Horizontal"); - - // Check - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - - assert.strictEqual(await gallery.getProperty("effectiveLayout"), expectedEffectiveLayout, "correct effective layout"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("item with 'Wide' layout and all thumbnails shown", async () => { - - const newWidth = 1400, // L size - parentHeight = 800, - marginSize = 16, - expectedDisplayWidth = 1006, // 3/4 of the available width - expectedDisplayHeight = parentHeight - (2 * marginSize); - - const gallery = await browser.$("#mGallery1"), - item0 = await browser.$$("#mGallery1 ui5-media-gallery-item")[0]; - - // Setup - await browser.executeAsync(async (newWidth, parentHeight, done) => { - document.getElementById("mGallery1").style.width = `${newWidth}px`; - document.getElementById("mGallery1").parentElement.style.height = `${parentHeight}px`; - done(); - }, newWidth, parentHeight); - - // item width 'wide' layout while all thumbnails shown - await gallery.setProperty("showAllThumbnails", true); - await item0.setProperty("layout", "Wide"); - - // Act: select the item width 'wide' layout - await item0.setProperty("selected", true); - - // Check - const display = await browser.$("#mGallery1").shadow$(".ui5-media-gallery-display ui5-media-gallery-item"); - assert.strictEqual(await display.getProperty("offsetWidth"), expectedDisplayWidth, "correct display width"); - assert.strictEqual(await display.getProperty("offsetHeight"), expectedDisplayHeight, "correct display height"); - }); - - it("narrow container", async () => { - - const newWidth = 80, // width allows only the overflow button to be displayed; all items will overflow - gallery = await browser.$("#galleryInNarrowContainer"), - itemsCount = await browser.$$("#galleryInNarrowContainer ui5-media-gallery-item").length; - - // Setup - await browser.executeAsync(async (newWidth, done) => { - document.getElementById("galleryInNarrowContainer").style.width = `${newWidth}px`; - done(); - }, newWidth); - - // Check - assert.strictEqual(await gallery.getProperty("_overflowSize"), itemsCount, "correct overflow size"); - }); -}); \ No newline at end of file