mirror of
https://github.com/maputnik/editor.git
synced 2026-05-28 10:57:27 +00:00
Kanish Jeba Mathew M
93596b3540
## Feat: Add drag and drop support to Upload Style area Closes #911 --- ### Problem The Upload Style area only supported click-to-upload. Users could not drag and drop a JSON file directly onto it. ### Fix Added `onDragOver` and `onDrop` event handlers to the Upload Style area. The dropped file is passed to the existing file reading logic already used by the Upload button. A visual highlight is shown when dragging over the area.
57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
/// <reference types="cypress-real-events" />
|
|
import { CypressHelper } from "@shellygo/cypress-test-utils";
|
|
import "cypress-real-events/support";
|
|
|
|
export default class MaputnikCypressHelper {
|
|
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
|
|
|
|
public given = {
|
|
...this.helper.given,
|
|
};
|
|
|
|
public get = {
|
|
locationHash: (): Cypress.Chainable<string> => cy.location("hash"),
|
|
...this.helper.get,
|
|
};
|
|
|
|
public when = {
|
|
dragAndDropWithWait: (element: string, targetElement: string) => {
|
|
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
|
this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
|
|
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" });
|
|
this.helper.when.wait(1);
|
|
this.helper.get.elementByTestId(targetElement).realMouseUp();
|
|
},
|
|
clickCenter: (element: string) => {
|
|
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
|
|
this.helper.when.wait(200);
|
|
this.helper.get.elementByTestId(element).realMouseUp();
|
|
},
|
|
openFileByFixture: (fixture: string, buttonTestId: string, inputTestId: string) => {
|
|
cy.window().then((win) => {
|
|
const file = {
|
|
text: cy.stub().resolves(cy.fixture(fixture).then(JSON.stringify)),
|
|
};
|
|
const fileHandle = {
|
|
getFile: cy.stub().resolves(file),
|
|
};
|
|
if (!win.showOpenFilePicker) {
|
|
this.helper.get.elementByTestId(inputTestId).selectFile("cypress/fixtures/" + fixture, { force: true });
|
|
} else {
|
|
cy.stub(win, "showOpenFilePicker").resolves([fileHandle]);
|
|
this.helper.get.elementByTestId(buttonTestId).click();
|
|
}
|
|
});
|
|
},
|
|
dropFileByFixture: (fixture: string, dropzoneTestId: string) => {
|
|
this.helper.get.elementByTestId(dropzoneTestId).selectFile("cypress/fixtures/" + fixture, {
|
|
action: "drag-drop",
|
|
force: true,
|
|
});
|
|
},
|
|
...this.helper.when,
|
|
};
|
|
|
|
public beforeAndAfter = this.helper.beforeAndAfter;
|
|
}
|