Skip to content

Commit d6c2a8a

Browse files
duygu-rmdnduygu-rmdn
authored
chore(ui5-upload-collection): migrate wdio tests to cypress (#11265)
1 parent b083e4a commit d6c2a8a

File tree

2 files changed

+280
-341
lines changed

2 files changed

+280
-341
lines changed

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

Lines changed: 280 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,27 +329,110 @@ describe("UploadCollection Rendering", () => {
329329

330330
describe("Events", () => {
331331
it("Tests that item fires 'rename'", () => {
332+
const renameEventStub = cy.stub();
333+
334+
cy.mount(
335+
<UploadCollection id="uploadCollection">
336+
<UploadCollectionItem id="item" onRename={renameEventStub} fileName="File name" type="Detail" />
337+
</UploadCollection>);
338+
339+
cy.get("#item")
340+
.shadow()
341+
.find(".ui5-li-detailbtn")
342+
.realClick();
343+
344+
cy.get("#item")
345+
.shadow()
346+
.find("#ui5-uci-edit-input")
347+
.should("have.focus")
348+
.realType("fileNameSuffix");
349+
350+
cy.realPress("Enter");
351+
352+
cy.wrap(renameEventStub)
353+
.should("have.been.called");
332354
});
333355

334356
it("Tests firing 'item-delete' regardless of the selectionMode", () => {
357+
cy.mount(
358+
<UploadCollection id="uploadCollection">
359+
<UploadCollectionItem id="item" fileName="File name" />
360+
</UploadCollection>);
361+
362+
cy.get("#item")
363+
.shadow()
364+
.find(".ui5-upload-collection-deletebtn")
365+
.realClick();
366+
367+
cy.get("#uploadCollection")
368+
.shadow()
369+
.find("#item")
370+
.should("not.exist");
335371
});
336372

337373
it("Tests firing 'item-delete' when 'DELETE' key is pressed on item", () => {
374+
cy.mount(
375+
<UploadCollection id="uploadCollection">
376+
<UploadCollectionItem id="item" fileName="File name" />
377+
</UploadCollection>);
378+
379+
cy.get("#item")
380+
.realClick();
381+
382+
cy.realPress("Delete");
383+
384+
cy.get("#uploadCollection")
385+
.shadow()
386+
.find("#item")
387+
.should("not.exist");
338388
});
339389

340390
it("Tests that item fires 'retry'", () => {
391+
const retryEventStub = cy.stub();
392+
393+
cy.mount(
394+
<UploadCollection id="uploadCollection">
395+
<UploadCollectionItem id="item" onRetry={retryEventStub} fileName="File name" uploadState="Error" />
396+
</UploadCollection>);
397+
398+
cy.get("#item")
399+
.shadow()
400+
.find(".ui5-uci-buttons ui5-button")
401+
.realClick();
402+
403+
cy.wrap(retryEventStub)
404+
.should("have.been.called");
341405
});
342406

343407
it("Tests that item fires 'terminate'", () => {
408+
const terminateEventStub = cy.stub();
409+
410+
cy.mount(
411+
<UploadCollection id="uploadCollection">
412+
<UploadCollectionItem id="item" onTerminate={terminateEventStub} fileName="File name" uploadState="Uploading" />
413+
</UploadCollection>);
414+
415+
cy.get("#item")
416+
.shadow()
417+
.find(".ui5-uci-buttons ui5-button")
418+
.realClick();
419+
420+
cy.wrap(terminateEventStub)
421+
.should("have.been.called");
344422
});
345423
});
346424

347425
describe("Keyboard handling", () => {
348426
it("Tests item tab order", () => {
349427
cy.mount(<UploadCollectionStatesSample />);
350428

429+
cy.get("#hiddenFileName")
430+
.shadow()
431+
.find("li")
432+
.should("have.attr", "tabindex", "-1");
433+
351434
cy.get("#hiddenFileName").realClick();
352-
cy.get("#hiddenFileName").should("be.focused");
435+
cy.get("#hiddenFileName").should("have.focus");
353436

354437
cy.realPress("Tab");
355438
cy.get("#hiddenFileName")
@@ -377,24 +460,220 @@ describe("Keyboard handling", () => {
377460
});
378461

379462
it("Tests Tab through empty upload collection", () => {
463+
cy.mount(<>
464+
<button id="tabStop1">Tab stop helper</button>
465+
<UploadCollection id="uploadCollection" />
466+
<button id="tabStop2">Tab stop helper</button>
467+
</>);
468+
469+
cy.get("#tabStop1").realClick();
470+
cy.realPress("Tab");
471+
cy.realPress("Tab");
472+
473+
cy.get("#uploadCollection")
474+
.shadow()
475+
.find(".uc-no-files")
476+
.should("have.attr", "forced-tab-index", "0");
477+
478+
cy.get("#uploadCollection")
479+
.shadow()
480+
.find(".uc-no-files")
481+
.should("not.have.focus");
482+
483+
cy.get("#tabStop2").should("have.focus");
380484
});
381485
});
382486

383487
describe("Edit - various file names", () => {
384488
it("Tests that dots are preserved in the file name", () => {
489+
cy.mount(
490+
<UploadCollection id="uploadCollection">
491+
<UploadCollectionItem id="item" fileName="File name" type="Detail" upload-state="Error" />
492+
</UploadCollection>);
493+
494+
cy.get("#item")
495+
.shadow()
496+
.find(".ui5-li-detailbtn")
497+
.realClick();
498+
499+
cy.get("#item")
500+
.shadow()
501+
.find("#ui5-uci-edit-input")
502+
.should("have.focus")
503+
.realType("last.reports-edited");
504+
505+
cy.realPress("Enter");
506+
507+
cy.get("#item")
508+
.shadow()
509+
.find(".ui5-uci-file-name")
510+
.should("have.text", "last.reports-edited");
385511
});
386512

387513
it("Tests that extension is able to be added, if there isn't such", () => {
514+
const newFileName = "newFileName.newExtension";
515+
const newFileName2 = "newFileName2";
516+
517+
cy.mount(
518+
<UploadCollection id="uploadCollection">
519+
<UploadCollectionItem id="item" fileName="File name" type="Detail" />
520+
</UploadCollection>);
521+
522+
cy.get("#item")
523+
.shadow()
524+
.find(".ui5-li-detailbtn")
525+
.realClick();
526+
527+
cy.get("#item")
528+
.shadow()
529+
.find("#ui5-uci-edit-input")
530+
.should("have.focus")
531+
.realType(newFileName);
532+
533+
cy.realPress("Enter");
534+
535+
cy.get("#item")
536+
.shadow()
537+
.find(".ui5-uci-file-name")
538+
.should("have.text", newFileName);
539+
540+
cy.get("#item")
541+
.shadow()
542+
.find(".ui5-li-detailbtn")
543+
.realClick();
544+
545+
cy.get("#item")
546+
.shadow()
547+
.find("#ui5-uci-edit-input")
548+
.should("have.focus")
549+
.realType(newFileName2);
550+
551+
cy.realPress("Enter");
552+
553+
cy.get("#item")
554+
.shadow()
555+
.find(".ui5-uci-file-name")
556+
.should("have.text", newFileName2 + ".newExtension");
388557
});
389558

390559
it("Tests that hidden file name is NOT considered as extension", () => {
560+
cy.mount(
561+
<UploadCollection id="uploadCollection">
562+
<UploadCollectionItem id="item" fileName=".gitignore" type="Detail" />
563+
</UploadCollection>);
564+
565+
cy.get("#item")
566+
.shadow()
567+
.find(".ui5-li-detailbtn")
568+
.realClick();
569+
570+
cy.get("#item")
571+
.shadow()
572+
.find(".ui5-uci-file-name")
573+
.should("not.have.text");
391574
});
392575

393576
it("Tests cancelling of name change via keyboard", () => {
577+
cy.mount(
578+
<UploadCollection id="uploadCollection">
579+
<UploadCollectionItem id="item" fileName=".gitignore" type="Detail" />
580+
</UploadCollection>);
581+
582+
cy.get("#item")
583+
.shadow()
584+
.find(".ui5-li-detailbtn")
585+
.realClick();
586+
587+
cy.get("#item")
588+
.shadow()
589+
.find("#ui5-uci-edit-input")
590+
.should("have.focus")
591+
.realType("new name");
592+
593+
cy.realPress("Tab");
594+
cy.realPress("Tab");
595+
cy.realPress("Enter");
596+
597+
cy.get("#item")
598+
.shadow()
599+
.find(".ui5-uci-file-name")
600+
.should("have.text", ".gitignore");
394601
});
395602
});
396603

397604
describe("Drag and Drop", () => {
605+
it("Tests drag and drop overlay when dragging a file", () => {
606+
cy.mount(<UploadCollection id="uploadCollection" />);
607+
608+
const dataTransfer = new DataTransfer();
609+
dataTransfer.items.add(new File([new Blob(["file content"], { type: "text/html" })], "test.txt"))
610+
611+
cy.document()
612+
.then((document) => {
613+
return document.body;
614+
})
615+
.trigger("dragenter", {
616+
eventConstructor: "DragEvent",
617+
force: true,
618+
dataTransfer
619+
});
620+
621+
cy.get("#uploadCollection")
622+
.should("have.prop", "_dndOverlayMode", "Drag")
623+
.shadow()
624+
.find(".uc-dnd-overlay.uc-drag-overlay")
625+
.should("be.visible");
626+
627+
cy.get("#uploadCollection")
628+
.shadow()
629+
.find(".uc-dnd-overlay")
630+
.trigger("dragenter", {
631+
eventConstructor: "DragEvent",
632+
force: true,
633+
dataTransfer
634+
});
635+
636+
cy.get("#uploadCollection")
637+
.should("have.prop", "_dndOverlayMode", "Drop")
638+
.shadow()
639+
.find(".uc-dnd-overlay.uc-drop-overlay")
640+
.should("be.visible");
641+
642+
cy.get("#uploadCollection")
643+
.shadow()
644+
.find(".uc-dnd-overlay")
645+
.trigger("drop", {
646+
eventConstructor: "DragEvent",
647+
force: true,
648+
dataTransfer
649+
});
650+
651+
cy.get("#uploadCollection")
652+
.should("have.prop", "_dndOverlayMode", "None")
653+
.shadow()
654+
.find(".uc-dnd-overlay")
655+
.should("not.exist");
656+
});
657+
398658
it("Tests that drag and drop overlay is NOT shown when NOT dragging files", () => {
659+
cy.mount(<UploadCollection id="uploadCollection" />);
660+
661+
const dataTransfer = new DataTransfer();
662+
663+
cy.document()
664+
.then((document) => {
665+
return document.body;
666+
})
667+
.trigger("dragenter", {
668+
eventConstructor: "DragEvent",
669+
force: true,
670+
dataTransfer
671+
});
672+
673+
cy.get("#uploadCollection")
674+
.should("have.prop", "_dndOverlayMode", "None")
675+
.shadow()
676+
.find(".uc-dnd-overlay")
677+
.should("not.exist");
399678
});
400679
});

0 commit comments

Comments
 (0)