Skip to content

Commit d31e202

Browse files
duygu-rmdnduygu-rmdn
authored
fix(ui5-side-navigation): right arrow and left arrow behavior fixed (#11434)
1 parent aac7449 commit d31e202

File tree

7 files changed

+503
-32
lines changed

7 files changed

+503
-32
lines changed

‎packages/fiori/cypress/specs/SideNavigation.cy.tsx‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import group from "@ui5/webcomponents-icons/dist/group.js";
66
import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT } from "../../src/generated/i18n/i18n-defaults.js";
77
import Title from "@ui5/webcomponents/dist/Title.js";
88
import Label from "@ui5/webcomponents/dist/Label.js";
9+
import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
910

1011
describe("Side Navigation Rendering", () => {
1112
it("Tests rendering in collapsed mode", () => {
@@ -222,6 +223,269 @@ describe("Side Navigation interaction", () => {
222223
cy.get("#unselectableItem").should("be.focused").and("not.have.attr", "expanded");
223224
});
224225

226+
it("Tests expanding of items with ArrowRight", () => {
227+
cy.mount(
228+
<SideNavigation id="sn">
229+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
230+
<SideNavigationItem id="unselectableItem" text="1">
231+
<SideNavigationSubItem text="1.2" />
232+
</SideNavigationItem>
233+
</SideNavigation>
234+
);
235+
236+
cy.get("#focusStart").realClick();
237+
cy.realPress("ArrowDown");
238+
cy.realPress("ArrowRight");
239+
240+
cy.get("#unselectableItem").should("have.attr", "expanded");
241+
});
242+
243+
it("Tests collapsing of items with ArrowLeft", () => {
244+
cy.mount(
245+
<SideNavigation id="sn">
246+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
247+
<SideNavigationItem id="unselectableItem" text="1" expanded>
248+
<SideNavigationSubItem text="1.2" />
249+
</SideNavigationItem>
250+
</SideNavigation>
251+
);
252+
cy.get("#focusStart").realClick();
253+
cy.realPress("ArrowDown");
254+
cy.realPress("ArrowLeft");
255+
256+
cy.get("#unselectableItem").should("not.have.attr", "expanded");
257+
258+
});
259+
260+
it("Tests expanding of items with ArrowRight on collapsed sn", () => {
261+
cy.mount(
262+
<SideNavigation id="sn" collapsed={true}>
263+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
264+
<SideNavigationItem id="unselectableItem" text="1">
265+
<SideNavigationSubItem id="snn1" text="1.2" />
266+
</SideNavigationItem>
267+
</SideNavigation>
268+
);
269+
270+
cy.get("#unselectableItem").realClick();
271+
272+
cy.get("#sn")
273+
.shadow()
274+
.find(`[ui5-side-navigation-item][text="1"]`)
275+
.should('be.focused');
276+
277+
cy.realPress("ArrowLeft");
278+
cy.get("#unselectableItem").should('be.focused');
279+
280+
cy.realPress("ArrowRight");
281+
cy.get("#sn")
282+
.shadow()
283+
.find(`[ui5-side-navigation-item][text="1"]`)
284+
.should('be.focused');
285+
286+
cy.get("#sn")
287+
.shadow()
288+
.find<ResponsivePopover>("[ui5-responsive-popover]")
289+
.ui5ResponsivePopoverOpened();
290+
});
291+
292+
it("Tests collapsing of items with ArrowLeft on collapsed sn", () => {
293+
cy.mount(
294+
<SideNavigation id="sn" collapsed={true}>
295+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
296+
<SideNavigationItem id="unselectableItem" text="1">
297+
<SideNavigationSubItem text="1.2" />
298+
</SideNavigationItem>
299+
</SideNavigation>
300+
);
301+
302+
cy.get("#unselectableItem").realClick();
303+
304+
cy.get("#sn")
305+
.shadow()
306+
.find(`[ui5-side-navigation-item][text="1"]`)
307+
.should('be.focused'); // Фокуса на правилното място ли е след, като съм отворил popover?
308+
309+
cy.realPress("ArrowLeft"); // Ако фокуса е на правилното място, натисни ArrowLeft
310+
311+
cy.get("#unselectableItem").should('be.focused'); // След като съм натиснал ArrowLeft, провери дали фокуса е на правилното място
312+
313+
cy.get("#sn")
314+
.shadow()
315+
.find<ResponsivePopover>("[ui5-responsive-popover]")
316+
.ui5ResponsivePopoverClosed(); // Ако фокуса е на правилното място провери дали popover-a е затворен, защото така очаквам
317+
});
318+
319+
it("Tests expanding of items with ArrowLeft for rtl", () => {
320+
cy.mount(
321+
<div dir="rtl">
322+
<SideNavigation id="sn">
323+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
324+
<SideNavigationItem id="unselectableItem" text="1">
325+
<SideNavigationSubItem text="1.2" />
326+
</SideNavigationItem>
327+
</SideNavigation>
328+
</div>
329+
);
330+
331+
cy.get("#focusStart").realClick();
332+
cy.realPress("ArrowDown");
333+
cy.realPress("ArrowLeft");
334+
335+
cy.get("#unselectableItem").should("have.attr", "expanded");
336+
});
337+
338+
it("Tests collapsing of items with ArrowRight for rtl", () => {
339+
cy.mount(
340+
<div dir="rtl">
341+
<SideNavigation id="sn">
342+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
343+
<SideNavigationItem id="unselectableItem" text="1">
344+
<SideNavigationSubItem text="1.2" />
345+
</SideNavigationItem>
346+
</SideNavigation>
347+
</div>
348+
);
349+
350+
cy.get("#unselectableItem").realClick();
351+
cy.get("#unselectableItem").realPress("ArrowRight");
352+
353+
cy.get("#unselectableItem").should("not.have.attr", "expanded");
354+
355+
});
356+
357+
it("Tests expanding of items with ArrowLeft on collapsed sn for rtl", () => {
358+
cy.mount(
359+
<div dir="rtl">
360+
<SideNavigation id="sn" collapsed={true}>
361+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
362+
<SideNavigationItem id="unselectableItem" text="1">
363+
<SideNavigationSubItem text="1.2" />
364+
</SideNavigationItem>
365+
</SideNavigation>
366+
</div>
367+
);
368+
369+
cy.get("#unselectableItem").realClick();
370+
371+
cy.get("#sn")
372+
.shadow()
373+
.find(`[ui5-side-navigation-item][text="1"]`)
374+
.should('be.focused');
375+
376+
cy.realPress("ArrowRight");
377+
378+
cy.get("#unselectableItem").should('be.focused');
379+
380+
cy.realPress("ArrowLeft");
381+
cy.get("#sn")
382+
.shadow()
383+
.find(`[ui5-side-navigation-item][text="1"]`)
384+
.should('be.focused');
385+
386+
cy.get("#sn")
387+
.shadow()
388+
.find<ResponsivePopover>("[ui5-responsive-popover]")
389+
.ui5ResponsivePopoverOpened();
390+
});
391+
392+
it("Tests collapsing of items with ArrowRight on collapsed sn for rtl", () => {
393+
cy.mount(
394+
<div dir="rtl">
395+
<SideNavigation id="sn" collapsed={true}>
396+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
397+
<SideNavigationItem id="unselectableItem" text="1">
398+
<SideNavigationSubItem text="1.2" />
399+
</SideNavigationItem>
400+
</SideNavigation>
401+
</div>
402+
);
403+
404+
cy.get("#unselectableItem").realClick();
405+
cy.get("#sn")
406+
.shadow()
407+
.find(`[ui5-side-navigation-item][text="1"]`)
408+
.should('be.focused');
409+
410+
cy.realPress("ArrowRight");
411+
412+
cy.get("#sn")
413+
.shadow()
414+
.find<ResponsivePopover>("[ui5-responsive-popover]")
415+
.ui5ResponsivePopoverClosed();
416+
});
417+
418+
it("Tests expanding of items with Plus", () => {
419+
cy.mount(
420+
<SideNavigation id="sn">
421+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
422+
<SideNavigationItem id="unselectableItem" text="1">
423+
<SideNavigationSubItem text="1.2" />
424+
</SideNavigationItem>
425+
</SideNavigation>
426+
);
427+
428+
cy.get("#focusStart").realClick();
429+
cy.realPress("ArrowDown");
430+
cy.realPress("+");
431+
432+
cy.get("#unselectableItem").should("have.attr", "expanded");
433+
434+
});
435+
436+
it("Tests collapsing of items with Minus", () => {
437+
cy.mount(
438+
<SideNavigation id="sn">
439+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
440+
<SideNavigationItem id="unselectableItem" text="1">
441+
<SideNavigationSubItem text="1.2" />
442+
</SideNavigationItem>
443+
</SideNavigation>
444+
);
445+
446+
cy.get("#unselectableItem").realClick();
447+
cy.realPress("-");
448+
449+
cy.get("#unselectableItem").should("not.have.attr", "expanded");
450+
451+
});
452+
453+
it("Tests expanding of items with Plus for rtl", () => {
454+
cy.mount(
455+
<div dir="rtl">
456+
<SideNavigation id="sn">
457+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
458+
<SideNavigationItem id="unselectableItem" text="1">
459+
<SideNavigationSubItem text="1.2" />
460+
</SideNavigationItem>
461+
</SideNavigation>
462+
</div>
463+
);
464+
465+
cy.get("#focusStart").realClick();
466+
cy.realPress("ArrowDown");
467+
cy.realPress("+");
468+
469+
cy.get("#unselectableItem").should("have.attr", "expanded");
470+
});
471+
472+
it("Tests collapsing of items with Minus for rtl", () => {
473+
cy.mount(
474+
<div dir="rtl">
475+
<SideNavigation id="sn">
476+
<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
477+
<SideNavigationItem id="unselectableItem" text="1">
478+
<SideNavigationSubItem text="1.2" />
479+
</SideNavigationItem>
480+
</SideNavigation>
481+
</div>
482+
);
483+
cy.get("#unselectableItem").realClick();
484+
cy.realPress("-");
485+
486+
cy.get("#unselectableItem").should("not.have.attr", "expanded");
487+
});
488+
225489
it("Tests expanding and collapsing of unselectable parent item when SideNavigation is collapsed", () => {
226490
cy.mount(
227491
<SideNavigation id="sideNav" collapsed={true}>

0 commit comments

Comments
 (0)