diff --git a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx b/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx index 7df693b67636..be7344dd308b 100644 --- a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx +++ b/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx @@ -1,7 +1,7 @@ import Tokenizer from "../../src/Tokenizer.js"; import Button from "../../src/Button.js"; import Token from "../../src/Token.js"; -import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js"; +import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, TOKENIZER_POPOVER_REMOVE } from "../../src/generated/i18n/i18n-defaults.js"; describe("Phone mode", () => { beforeEach(() => { @@ -96,5 +96,163 @@ describe("Phone mode", () => { .find("[ui5-token]") .eq(1) .should("have.attr", "selected"); - }) + }); + + it("n-more picker dialog is properly rendered", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("ui5-responsive-popover") + .as("nMoreDialog"); + + cy.get("@nMoreDialog") + .should("have.attr", "open"); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-footer ui5-button[design='Emphasized']") + .should("be.visible"); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-footer ui5-button[design='Transparent']") + .should("be.visible"); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-header .ui5-responsive-popover-header-text") + .should("have.text", TOKENIZER_POPOVER_REMOVE.defaultText); + }); + + it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-tokenizer]") + .invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy")); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("ui5-responsive-popover") + .as("nMoreDialog"); + + cy.get("@nMoreDialog") + .find("ui5-li") + .eq(0) + .shadow() + .find(".ui5-li-deletebtn ui5-button") + .as("firstListItemDeleteButton"); + + cy.get("@firstListItemDeleteButton") + .realClick(); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-footer ui5-button") + .eq(0) + .realClick(); + + cy.get("@tokenDeleteSpy") + .should("have.been.calledOnce"); + }); + + it("Should NOT fire the ui5-token-delete event when no items are deleted and OK is pressed", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-tokenizer]") + .invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy")); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("ui5-responsive-popover") + .as("nMoreDialog"); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-footer ui5-button") + .eq(0) + .realClick(); + + cy.get("@tokenDeleteSpy") + .should("not.have.been.called"); + }); + it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", () => { + cy.mount( + + + + + + ); + cy.get("[ui5-tokenizer]") + .invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy")); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("ui5-responsive-popover") + .as("nMoreDialog"); + + cy.get("@nMoreDialog") + .find("ui5-li") + .eq(0) + .shadow() + .find(".ui5-li-deletebtn ui5-button") + .as("firstListItemDeleteButton"); + + cy.get("@firstListItemDeleteButton") + .realClick(); + + cy.get("@nMoreDialog") + .find(".ui5-responsive-popover-footer ui5-button") + .eq(1) + .realClick(); + + cy.get("@tokenDeleteSpy") + .should("not.have.been.called"); + }); }) \ No newline at end of file diff --git a/packages/main/test/specs/Tokenizer.mobile.spec.js b/packages/main/test/specs/Tokenizer.mobile.spec.js deleted file mode 100644 index c63f9c049c32..000000000000 --- a/packages/main/test/specs/Tokenizer.mobile.spec.js +++ /dev/null @@ -1,126 +0,0 @@ -import { assert } from "chai"; - -async function getResourceBundleTexts(keys) { - return browser.executeAsync((keys, done) => { - const tokenizer = document.getElementById("nmore-tokenizer"); - - const texts = keys.reduce((result, key) => { - result[key] = tokenizer.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts[key], 3) - return result; - }, {}); - done(texts); - - }, keys); -} - -describe("Tokenizer general interaction", () => { - before(async () => { - await browser.url(`test/pages/Tokenizer.html`); - await browser.emulateDevice('iPhone X'); - }); - - it("n-more picker dialog is properly rendered", async () => { - const tokenizer = await browser.$("#nmore-tokenizer"); - const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text"); - const keys = [ - "TOKENIZER_POPOVER_REMOVE", - ]; - const texts = await getResourceBundleTexts(keys); - - await nMoreLabel.click(); - - const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover"); - - assert.ok(await nMoreDialog.getProperty("open"), "More Popover should be open"); - assert.ok(await nMoreDialog.$(".ui5-responsive-popover-footer ui5-button[design='Emphasized']").isDisplayed(), "More Popover OK button is shown"); - assert.ok(await nMoreDialog.$(".ui5-responsive-popover-footer ui5-button[design='Transparent']").isDisplayed(), "More Popover Cancel button is shown"); - assert.strictEqual(await nMoreDialog.$(".ui5-responsive-popover-header .ui5-responsive-popover-header-text").getText(), texts.TOKENIZER_POPOVER_REMOVE, "More Popover title is correctly translated"); - }); -}); - -describe("Deleting tokens", () => { - beforeEach(async () => { - await browser.url(`test/pages/Tokenizer.html`); - await browser.emulateDevice('iPhone X'); - }); - - it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", async () => { - const tokenizer = await browser.$("#delete-tokenizer"); - const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text"); - - await nMoreLabel.click(); - - const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover"); - const firstlistItemDeleteButton = await nMoreDialog.$$("ui5-li")[0].shadow$('.ui5-li-deletebtn ui5-button'); - const secondlistItemDeleteButton = await nMoreDialog.$$("ui5-li")[1].shadow$('.ui5-li-deletebtn ui5-button'); - - await firstlistItemDeleteButton.click(); - await secondlistItemDeleteButton.click(); - await nMoreDialog.$(".ui5-responsive-popover-footer ui5-button").click(); - - const deletedTokensLabel = await browser.$("#deletedTokensLabel"); - const deleteFiredLabel = await browser.$("#deleteFiredLabel"); - - const tokens = await tokenizer.$$("ui5-token"); - - assert.equal(await deletedTokensLabel.getText(), "Event [token-delete] :: Andora, Bulgaria", "should have 2 deleted tokens"); - assert.equal(await deleteFiredLabel.getText(), "Event [token-delete] counter :: 1", "Event should be fired once"); - assert.equal(tokens.length, 3, "should have 3 tokens"); - - await nMoreLabel.click(); - - assert.ok(await nMoreDialog.getProperty("open"), "Popover should be opened."); - assert.strictEqual(await nMoreDialog.$$("ui5-li").length, 3, "3 items should be present"); - assert.ok(await nMoreDialog.$("ui5-li").matches(":focus"), "First item should be focused on open"); - }); - - it("Should NOT fire the ui5-token-delete event when no items are deleted and OK is pressed", async () => { - const tokenizer = await browser.$("#delete-tokenizer"); - const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text"); - - await nMoreLabel.click(); - - const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover"); - - await nMoreDialog.$$(".ui5-responsive-popover-footer ui5-button")[1].click(); - - const deletedTokensLabel = await browser.$("#deletedTokensLabel"); - const deleteFiredLabel = await browser.$("#deleteFiredLabel"); - - const tokens = await tokenizer.$$("ui5-token"); - - assert.equal(await deletedTokensLabel.getText(), "Event [token-delete] :: N/A", "should have no deleted tokens"); - assert.equal(await deleteFiredLabel.getText(), "Event [token-delete] counter :: N/A", "Event should not be fired"); - assert.equal(tokens.length, 5, "should have 5 tokens"); - }); - - it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", async () => { - const tokenizer = await browser.$("#delete-tokenizer"); - const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text"); - - await nMoreLabel.click(); - - const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover"); - const firstlistItemDeleteButton = await nMoreDialog.$$("ui5-li")[0].shadow$('.ui5-li-deletebtn ui5-button'); - const secondlistItemDeleteButton = await nMoreDialog.$$("ui5-li")[1].shadow$('.ui5-li-deletebtn ui5-button'); - - await firstlistItemDeleteButton.click(); - await secondlistItemDeleteButton.click(); - await nMoreDialog.$$(".ui5-responsive-popover-footer ui5-button")[1].click(); - - const deletedTokensLabel = await browser.$("#deletedTokensLabel"); - const deleteFiredLabel = await browser.$("#deleteFiredLabel"); - - const tokens = await tokenizer.$$("ui5-token"); - - assert.equal(await deletedTokensLabel.getText(), "Event [token-delete] :: N/A", "should have no deleted tokens"); - assert.equal(await deleteFiredLabel.getText(), "Event [token-delete] counter :: N/A", "Event should not be fired"); - assert.equal(tokens.length, 5, "should have 5 tokens"); - - await nMoreLabel.click(); - - assert.ok(await nMoreDialog.getProperty("open"), "Popover should be opened."); - assert.strictEqual(await nMoreDialog.$$("ui5-li").length, 5, "All items should be present"); - assert.ok(await nMoreDialog.$("ui5-li").matches(":focus"), "First item should be focused on open"); - }); -}); \ No newline at end of file