Skip to content

test(ui5-upload-collection): enhance tests #12409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 13, 2025
Merged

test(ui5-upload-collection): enhance tests #12409

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
287e83a
test(ui5-upload-collection): enhance tests
LidiyaGeorgieva Oct 1, 2025
cae4471
chore: clean up
LidiyaGeorgieva Oct 1, 2025
d443c46
chore: clean up
duygu-rmdn Oct 7, 2025
d7c7ed3
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
duygu-rmdn Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 120 additions & 104 deletions packages/fiori/cypress/specs/UploadCollection.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,46 +312,23 @@ describe("UploadCollection Rendering", () => {
// workaround since we do not set the button as diabled, possibly a bug
});

it("Tests _dndOverlay existence", () => {
cy.mount(<UploadCollection id="uploadCollection" />);

cy.get("#uploadCollection").then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const overlay = uploadCollection._dndOverlay;
expect(overlay).to.be.null;
});

const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File(["file content"], "test.txt"));

cy.get("#uploadCollection")
.trigger("dragenter", {
eventConstructor: "DragEvent",
force: true,
dataTransfer,
})
.shadow()
.find(".uc-dnd-overlay")
.should("exist");
});

it("Tests computed classes and shadow DOM getters", () => {
it("Test UploadCollection rendering when no items are present", () => {
cy.mount(
<UploadCollection id="uploadCollection" />
);

cy.get("#uploadCollection").then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const classes = uploadCollection.classes;
expect(classes).to.have.property("content");
expect(classes.content).to.have.property("ui5-uc-content", true);
expect(classes.content).to.have.property("ui5-uc-content-no-data", true); // items.length === 0

const root = uploadCollection._root;
expect(root).to.exist;
expect(root).to.have.class("ui5-uc-root");
cy.get("#uploadCollection")
.shadow()
.find("> div.ui5-uc-root")
.should("exist");

cy.get("#uploadCollection")
.shadow()
.find(".ui5-uc-root > div.ui5-uc-content.ui5-uc-content-no-data")
.should("exist");
});
});

Expand All @@ -365,8 +342,10 @@ describe("UploadCollection Rendering", () => {
cy.get("#uploadCollection").then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const classes = uploadCollection.classes;
expect(classes.content).to.have.property("ui5-uc-content-no-data", false); // items.length > 0
cy.get("#uploadCollection")
.shadow()
.find(".ui5-uc-root > div.ui5-uc-content.ui5-uc-content-no-data")
.should("not.exist");
});
});
});
Expand Down Expand Up @@ -501,29 +480,6 @@ describe("Events", () => {
.should("have.been.called");
});

it("Tests _ondragenter early return when not dragging files", () => {
cy.mount(<UploadCollection id="uploadCollection" />);

cy.get("#uploadCollection")
.then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

// Set initial mode to verify it doesn't change
uploadCollection._dndOverlayMode = "None";

const emptyDragEvent = {
dataTransfer: {
items: [],
types: [],
effectAllowed: 'none'
}
} as unknown as DragEvent;

uploadCollection._ondragenter(emptyDragEvent);
expect(uploadCollection._dndOverlayMode).to.equal("None");
});
});

it("Tests _onSelectionChange method coverage", () => {
const selectionChangeStub = cy.stub();
cy.wrap(selectionChangeStub).as("selectionChangeStub");
Expand Down Expand Up @@ -734,7 +690,10 @@ describe("Drag and Drop", () => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([new Blob(["file content"], { type: "text/html" })], "test.txt"))

cy.get("#uploadCollection")
cy.document()
.then((document) => {
return document.body;
})
.trigger("dragenter", {
eventConstructor: "DragEvent",
force: true,
Expand Down Expand Up @@ -783,7 +742,10 @@ describe("Drag and Drop", () => {

const dataTransfer = new DataTransfer();

cy.get("#uploadCollection")
cy.document()
.then((document) => {
return document.body;
})
.trigger("dragenter", {
eventConstructor: "DragEvent",
force: true,
Expand All @@ -805,11 +767,21 @@ describe("Drag and Drop", () => {

cy.get("#uploadCollection")
.then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const mockEvent = { preventDefault: cy.spy().as("preventDefault") } as unknown as DragEvent;

uploadCollection._ondragover(mockEvent);
const uploadCollection = $el[0] as UploadCollection;

const mockEvent = new DragEvent("dragover", {
bubbles: true,
cancelable: true
});

// Add preventDefault spy to the created event
const preventDefaultSpy = cy.spy().as("preventDefault");
Object.defineProperty(mockEvent, 'preventDefault', {
value: preventDefaultSpy,
writable: true
});

uploadCollection._ondragover(mockEvent);

cy.get("@preventDefault").should("have.been.calledOnce");
});
Expand All @@ -824,14 +796,24 @@ describe("Drag and Drop", () => {

uploadCollection._dndOverlayMode = "Drop";

const mockDragEvent = {
dataTransfer: {
items: [{ kind: 'file' }],
types: ['Files']
},
target: document.createElement('div'),
stopPropagation: cy.stub()
} as unknown as DragEvent;
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([''], 'test.txt'));
const mockDragEvent = new DragEvent("drop", {
bubbles: true,
cancelable: true,
dataTransfer: dataTransfer
});

// Add target and stopPropagation to the created event
Object.defineProperty(mockDragEvent, 'target', {
value: document.createElement('div'),
writable: true
});

Object.defineProperty(mockDragEvent, 'stopPropagation', {
value: cy.stub(),
writable: true
});

uploadCollection._ondrop(mockDragEvent);

Expand All @@ -844,13 +826,21 @@ describe("Drag and Drop", () => {

cy.get("#uploadCollection").then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const mockDragEvent = {
preventDefault: cy.spy().as("preventDefault"),
} as unknown as DragEvent;


const mockDragEvent = new DragEvent("dragover", {
bubbles: true,
cancelable: true
});

// Add preventDefault spy to the created event
const preventDefaultSpy = cy.spy().as("preventDefault");
Object.defineProperty(mockDragEvent, 'preventDefault', {
value: preventDefaultSpy,
writable: true
});

uploadCollection._ondragover(mockDragEvent);

cy.get("@preventDefault").should("not.have.been.called");
});
});
Expand All @@ -861,24 +851,26 @@ describe("Drag and Drop", () => {
cy.get("#uploadCollection").then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

const mockDragEvent = {
target: document.createElement("div"),
stopPropagation: cy.spy().as("stopPropagation"),
} as unknown as DragEvent;

const originalQuerySelector = uploadCollection.shadowRoot!.querySelector;
uploadCollection.shadowRoot!.querySelector = (selector: string) => {
if (selector === ".uc-dnd-overlay") {
return document.createElement("div");
}
return originalQuerySelector.call(uploadCollection.shadowRoot, selector);
};

uploadCollection._ondrop(mockDragEvent);

cy.get("@stopPropagation").should("have.been.calledOnce");

uploadCollection.shadowRoot!.querySelector = originalQuerySelector;
const mockDragEvent = new DragEvent("drop", {
bubbles: true,
cancelable: true
});

// Add target and stopPropagation to the created event
Object.defineProperty(mockDragEvent, 'target', {
value: document.createElement("div"),
writable: true
});

Object.defineProperty(mockDragEvent, 'stopPropagation', {
value: cy.spy().as("stopPropagation"),
writable: true
});

uploadCollection._ondrop(mockDragEvent);

cy.get("@stopPropagation").should("have.been.calledOnce");

});
});

Expand Down Expand Up @@ -933,16 +925,40 @@ describe("Drag and Drop", () => {

uploadCollection._dndOverlayMode = "None";

const mockDragEvent = {
dataTransfer: {
items: [{ kind: 'file' }],
types: ['Files']
}
} as unknown as DragEvent;
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([''], 'test.txt'));
const mockDragEvent = new DragEvent("dragenter", {
bubbles: true,
cancelable: true,
dataTransfer: dataTransfer
});

uploadCollection._ondragenter(mockDragEvent);

expect(uploadCollection._dndOverlayMode).to.equal("None");
});
});
});

it("Tests _ondragenter early return when not dragging files", () => {
cy.mount(<UploadCollection id="uploadCollection" />);

cy.get("#uploadCollection")
.then(($el) => {
const uploadCollection = $el[0] as UploadCollection;

// Set initial mode to verify it doesn't change
uploadCollection._dndOverlayMode = "None";

const emptyDataTransfer = new DataTransfer();
const emptyDragEvent = new DragEvent("dragenter", {
bubbles: true,
cancelable: true,
dataTransfer: emptyDataTransfer
});

uploadCollection._ondragenter(emptyDragEvent);
expect(uploadCollection._dndOverlayMode).to.equal("None");
});
});

});
17 changes: 0 additions & 17 deletions packages/fiori/src/UploadCollection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,23 +252,6 @@ class UploadCollection extends UI5Element {
this.fireDecoratorEvent("selection-change", { selectedItems: e.detail.selectedItems as UploadCollectionItem[] });
}

get classes() {
return {
content: {
"ui5-uc-content": true,
"ui5-uc-content-no-data": this.items.length === 0,
},
};
}

get _root() {
return this.shadowRoot!.querySelector(".ui5-uc-root");
}

get _dndOverlay() {
return this._root?.querySelector(".uc-dnd-overlay");
}

get _showDndOverlay() {
return this._dndOverlayMode !== UploadCollectionDnDOverlayMode.None;
}
Expand Down
Loading