Skip to content

Commit 444deb8

Browse files
StefanDimitrov04StefanDimitrov04
authored
chore(ui5-tokenizer): migrate mobile tests to cypress (#12284)
1 parent c410c3f commit 444deb8

File tree

2 files changed

+160
-128
lines changed

2 files changed

+160
-128
lines changed

‎packages/main/cypress/specs/Tokenizer.mobile.cy.tsx

Lines changed: 160 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Tokenizer from "../../src/Tokenizer.js";
22
import Button from "../../src/Button.js";
33
import Token from "../../src/Token.js";
4-
import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
4+
import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, TOKENIZER_POPOVER_REMOVE } from "../../src/generated/i18n/i18n-defaults.js";
55

66
describe("Phone mode", () => {
77
beforeEach(() => {
@@ -96,5 +96,163 @@ describe("Phone mode", () => {
9696
.find("[ui5-token]")
9797
.eq(1)
9898
.should("have.attr", "selected");
99-
})
99+
});
100+
101+
it("n-more picker dialog is properly rendered", () => {
102+
cy.mount(
103+
<Tokenizer id="nmore-tokenizer" style={{ width: "50%" }}>
104+
<Token text="Andora"></Token>
105+
<Token text="Bulgaria"></Token>
106+
<Token text="Canada"></Token>
107+
</Tokenizer>
108+
);
109+
110+
cy.get("[ui5-tokenizer]")
111+
.shadow()
112+
.find(".ui5-tokenizer-more-text")
113+
.as("nMoreLabel");
114+
115+
cy.get("@nMoreLabel")
116+
.realClick();
117+
118+
cy.get("[ui5-tokenizer]")
119+
.shadow()
120+
.find("ui5-responsive-popover")
121+
.as("nMoreDialog");
122+
123+
cy.get("@nMoreDialog")
124+
.should("have.attr", "open");
125+
126+
cy.get("@nMoreDialog")
127+
.find(".ui5-responsive-popover-footer ui5-button[design='Emphasized']")
128+
.should("be.visible");
129+
130+
cy.get("@nMoreDialog")
131+
.find(".ui5-responsive-popover-footer ui5-button[design='Transparent']")
132+
.should("be.visible");
133+
134+
cy.get("@nMoreDialog")
135+
.find(".ui5-responsive-popover-header .ui5-responsive-popover-header-text")
136+
.should("have.text", TOKENIZER_POPOVER_REMOVE.defaultText);
137+
});
138+
139+
it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", () => {
140+
cy.mount(
141+
<Tokenizer style={{ width: "50%" }}>
142+
<Token text="Andora"></Token>
143+
<Token text="Bulgaria"></Token>
144+
<Token text="Canada"></Token>
145+
</Tokenizer>
146+
);
147+
148+
cy.get("[ui5-tokenizer]")
149+
.invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy"));
150+
151+
cy.get("[ui5-tokenizer]")
152+
.shadow()
153+
.find(".ui5-tokenizer-more-text")
154+
.as("nMoreLabel");
155+
156+
cy.get("@nMoreLabel")
157+
.realClick();
158+
159+
cy.get("[ui5-tokenizer]")
160+
.shadow()
161+
.find("ui5-responsive-popover")
162+
.as("nMoreDialog");
163+
164+
cy.get("@nMoreDialog")
165+
.find("ui5-li")
166+
.eq(0)
167+
.shadow()
168+
.find(".ui5-li-deletebtn ui5-button")
169+
.as("firstListItemDeleteButton");
170+
171+
cy.get("@firstListItemDeleteButton")
172+
.realClick();
173+
174+
cy.get("@nMoreDialog")
175+
.find(".ui5-responsive-popover-footer ui5-button")
176+
.eq(0)
177+
.realClick();
178+
179+
cy.get("@tokenDeleteSpy")
180+
.should("have.been.calledOnce");
181+
});
182+
183+
it("Should NOT fire the ui5-token-delete event when no items are deleted and OK is pressed", () => {
184+
cy.mount(
185+
<Tokenizer style={{ width: "50%" }}>
186+
<Token text="Andora"></Token>
187+
<Token text="Bulgaria"></Token>
188+
<Token text="Canada"></Token>
189+
</Tokenizer>
190+
);
191+
192+
cy.get("[ui5-tokenizer]")
193+
.invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy"));
194+
195+
cy.get("[ui5-tokenizer]")
196+
.shadow()
197+
.find(".ui5-tokenizer-more-text")
198+
.as("nMoreLabel");
199+
200+
cy.get("@nMoreLabel")
201+
.realClick();
202+
203+
cy.get("[ui5-tokenizer]")
204+
.shadow()
205+
.find("ui5-responsive-popover")
206+
.as("nMoreDialog");
207+
208+
cy.get("@nMoreDialog")
209+
.find(".ui5-responsive-popover-footer ui5-button")
210+
.eq(0)
211+
.realClick();
212+
213+
cy.get("@tokenDeleteSpy")
214+
.should("not.have.been.called");
215+
});
216+
it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", () => {
217+
cy.mount(
218+
<Tokenizer style={{ width: "50%" }}>
219+
<Token text="Andora"></Token>
220+
<Token text="Bulgaria"></Token>
221+
<Token text="Canada"></Token>
222+
</Tokenizer>
223+
);
224+
cy.get("[ui5-tokenizer]")
225+
.invoke("on", "token-delete", cy.spy().as("tokenDeleteSpy"));
226+
227+
cy.get("[ui5-tokenizer]")
228+
.shadow()
229+
.find(".ui5-tokenizer-more-text")
230+
.as("nMoreLabel");
231+
232+
cy.get("@nMoreLabel")
233+
.realClick();
234+
235+
cy.get("[ui5-tokenizer]")
236+
.shadow()
237+
.find("ui5-responsive-popover")
238+
.as("nMoreDialog");
239+
240+
cy.get("@nMoreDialog")
241+
.find("ui5-li")
242+
.eq(0)
243+
.shadow()
244+
.find(".ui5-li-deletebtn ui5-button")
245+
.as("firstListItemDeleteButton");
246+
247+
cy.get("@firstListItemDeleteButton")
248+
.realClick();
249+
250+
cy.get("@nMoreDialog")
251+
.find(".ui5-responsive-popover-footer ui5-button")
252+
.eq(1)
253+
.realClick();
254+
255+
cy.get("@tokenDeleteSpy")
256+
.should("not.have.been.called");
257+
});
100258
})

‎packages/main/test/specs/Tokenizer.mobile.spec.js

Lines changed: 0 additions & 126 deletions
This file was deleted.

0 commit comments

Comments
 (0)