mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
refactor: Stop using the deprecated keyCode (#2426)
Co-authored-by: Lipis <lipiridis@gmail.com> Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Lipis
GitHub
parent
58fcb44de0
commit
014097a97e
21 changed files with 257 additions and 281 deletions
|
|
@ -9393,7 +9393,7 @@ exports[`regression tests given selected element A with lower z-index than unsel
|
|||
|
||||
exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `17`;
|
||||
|
||||
exports[`regression tests hotkey 2 selects rectangle tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 2 selects rectangle tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -9465,7 +9465,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 2 selects rectangle tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 2 selects rectangle tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -9491,7 +9491,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 2 selects rectangle tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 2 selects rectangle tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -9546,11 +9546,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 2 selects rectangle tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 2 selects rectangle tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 2 selects rectangle tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key 2 selects rectangle tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey 3 selects diamond tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 3 selects diamond tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -9622,7 +9622,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 3 selects diamond tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 3 selects diamond tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -9648,7 +9648,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 3 selects diamond tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 3 selects diamond tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -9703,11 +9703,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 3 selects diamond tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 3 selects diamond tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 3 selects diamond tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key 3 selects diamond tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey 4 selects ellipse tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 4 selects ellipse tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -9779,7 +9779,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 4 selects ellipse tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 4 selects ellipse tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -9805,7 +9805,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 4 selects ellipse tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 4 selects ellipse tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -9860,11 +9860,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 4 selects ellipse tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 4 selects ellipse tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 4 selects ellipse tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key 4 selects ellipse tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey 5 selects arrow tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 5 selects arrow tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -9936,7 +9936,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 5 selects arrow tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 5 selects arrow tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -9975,7 +9975,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 5 selects arrow tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 5 selects arrow tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10043,11 +10043,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 5 selects arrow tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 5 selects arrow tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 5 selects arrow tool: [end of test] number of renders 1`] = `7`;
|
||||
exports[`regression tests key 5 selects arrow tool: [end of test] number of renders 1`] = `7`;
|
||||
|
||||
exports[`regression tests hotkey 6 selects line tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 6 selects line tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10119,7 +10119,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 6 selects line tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 6 selects line tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -10158,7 +10158,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 6 selects line tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 6 selects line tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10226,11 +10226,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 6 selects line tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 6 selects line tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 6 selects line tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key 6 selects line tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey 7 selects draw tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10302,7 +10302,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 7 selects draw tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -10341,7 +10341,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 7 selects draw tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10409,11 +10409,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey 7 selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey 7 selects draw tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key 7 selects draw tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey a selects arrow tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key a selects arrow tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10485,7 +10485,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey a selects arrow tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key a selects arrow tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -10524,7 +10524,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey a selects arrow tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key a selects arrow tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10592,11 +10592,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey a selects arrow tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key a selects arrow tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey a selects arrow tool: [end of test] number of renders 1`] = `7`;
|
||||
exports[`regression tests key a selects arrow tool: [end of test] number of renders 1`] = `7`;
|
||||
|
||||
exports[`regression tests hotkey d selects diamond tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key d selects diamond tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10668,7 +10668,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey d selects diamond tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key d selects diamond tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -10694,7 +10694,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey d selects diamond tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key d selects diamond tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10749,11 +10749,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey d selects diamond tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key d selects diamond tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey d selects diamond tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key d selects diamond tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey e selects ellipse tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key e selects ellipse tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10825,7 +10825,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey e selects ellipse tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key e selects ellipse tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -10851,7 +10851,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey e selects ellipse tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key e selects ellipse tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -10906,11 +10906,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey e selects ellipse tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key e selects ellipse tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey e selects ellipse tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key e selects ellipse tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey l selects line tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key l selects line tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -10982,7 +10982,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey l selects line tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key l selects line tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -11021,7 +11021,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey l selects line tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key l selects line tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -11089,11 +11089,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey l selects line tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey l selects line tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key l selects line tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey r selects rectangle tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -11165,7 +11165,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey r selects rectangle tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -11191,7 +11191,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey r selects rectangle tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -11246,11 +11246,11 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey r selects rectangle tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey r selects rectangle tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests hotkey x selects draw tool: [end of test] appState 1`] = `
|
||||
exports[`regression tests key x selects draw tool: [end of test] appState 1`] = `
|
||||
Object {
|
||||
"appearance": "light",
|
||||
"collaborators": Map {},
|
||||
|
|
@ -11322,7 +11322,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey x selects draw tool: [end of test] element 0 1`] = `
|
||||
exports[`regression tests key x selects draw tool: [end of test] element 0 1`] = `
|
||||
Object {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
|
|
@ -11361,7 +11361,7 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey x selects draw tool: [end of test] history 1`] = `
|
||||
exports[`regression tests key x selects draw tool: [end of test] history 1`] = `
|
||||
Object {
|
||||
"recording": false,
|
||||
"redoStack": Array [],
|
||||
|
|
@ -11429,9 +11429,9 @@ Object {
|
|||
}
|
||||
`;
|
||||
|
||||
exports[`regression tests hotkey x selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
exports[`regression tests key x selects draw tool: [end of test] number of elements 1`] = `1`;
|
||||
|
||||
exports[`regression tests hotkey x selects draw tool: [end of test] number of renders 1`] = `6`;
|
||||
exports[`regression tests key x selects draw tool: [end of test] number of renders 1`] = `6`;
|
||||
|
||||
exports[`regression tests make a group and duplicate it: [end of test] appState 1`] = `
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import App from "../components/App";
|
|||
import { UI, Pointer, Keyboard } from "./helpers/ui";
|
||||
import { getTransformHandles } from "../element/transformHandles";
|
||||
import { API } from "./helpers/api";
|
||||
import { KEYS } from "../keys";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
|
|
@ -97,10 +98,10 @@ describe("element binding", () => {
|
|||
expect(arrow.endBinding).toBe(null);
|
||||
|
||||
expect(API.getSelectedElement().type).toBe("arrow");
|
||||
Keyboard.hotkeyPress("ARROW_RIGHT");
|
||||
Keyboard.keyPress(KEYS.ARROW_RIGHT);
|
||||
expect(arrow.endBinding?.elementId).toBe(rectangle.id);
|
||||
|
||||
Keyboard.hotkeyPress("ARROW_LEFT");
|
||||
Keyboard.keyPress(KEYS.ARROW_LEFT);
|
||||
expect(arrow.endBinding).toBe(null);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { ToolName } from "../queries/toolQueries";
|
||||
import { fireEvent, GlobalTestState } from "../test-utils";
|
||||
import { KEYS, Key } from "../../keys";
|
||||
import {
|
||||
ExcalidrawElement,
|
||||
ExcalidrawLinearElement,
|
||||
ExcalidrawTextElement,
|
||||
} from "../../element/types";
|
||||
import { CODES } from "../../keys";
|
||||
import { ToolName } from "../queries/toolQueries";
|
||||
import { fireEvent, GlobalTestState } from "../test-utils";
|
||||
import { API } from "./api";
|
||||
|
||||
const { h } = window;
|
||||
|
|
@ -36,30 +36,12 @@ export class Keyboard {
|
|||
}
|
||||
};
|
||||
|
||||
static hotkeyDown = (hotkey: Key) => {
|
||||
const key = KEYS[hotkey];
|
||||
if (typeof key !== "string") {
|
||||
throw new Error("must provide a hotkey, not a key code");
|
||||
}
|
||||
Keyboard.keyDown(key);
|
||||
};
|
||||
|
||||
static hotkeyUp = (hotkey: Key) => {
|
||||
const key = KEYS[hotkey];
|
||||
if (typeof key !== "string") {
|
||||
throw new Error("must provide a hotkey, not a key code");
|
||||
}
|
||||
Keyboard.keyUp(key);
|
||||
};
|
||||
|
||||
static keyDown = (key: string) => {
|
||||
fireEvent.keyDown(document, {
|
||||
key,
|
||||
ctrlKey,
|
||||
shiftKey,
|
||||
altKey,
|
||||
keyCode: key.toUpperCase().charCodeAt(0),
|
||||
which: key.toUpperCase().charCodeAt(0),
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -69,20 +51,36 @@ export class Keyboard {
|
|||
ctrlKey,
|
||||
shiftKey,
|
||||
altKey,
|
||||
keyCode: key.toUpperCase().charCodeAt(0),
|
||||
which: key.toUpperCase().charCodeAt(0),
|
||||
});
|
||||
};
|
||||
|
||||
static hotkeyPress = (key: Key) => {
|
||||
Keyboard.hotkeyDown(key);
|
||||
Keyboard.hotkeyUp(key);
|
||||
};
|
||||
|
||||
static keyPress = (key: string) => {
|
||||
Keyboard.keyDown(key);
|
||||
Keyboard.keyUp(key);
|
||||
};
|
||||
|
||||
static codeDown = (code: string) => {
|
||||
fireEvent.keyDown(document, {
|
||||
code,
|
||||
ctrlKey,
|
||||
shiftKey,
|
||||
altKey,
|
||||
});
|
||||
};
|
||||
|
||||
static codeUp = (code: string) => {
|
||||
fireEvent.keyUp(document, {
|
||||
code,
|
||||
ctrlKey,
|
||||
shiftKey,
|
||||
altKey,
|
||||
});
|
||||
};
|
||||
|
||||
static codePress = (code: string) => {
|
||||
Keyboard.codeDown(code);
|
||||
Keyboard.codeUp(code);
|
||||
};
|
||||
}
|
||||
|
||||
export class Pointer {
|
||||
|
|
@ -209,7 +207,7 @@ export class UI {
|
|||
static group(elements: ExcalidrawElement[]) {
|
||||
mouse.select(elements);
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
ExcalidrawRectangleElement,
|
||||
} from "../element/types";
|
||||
import { UI, Pointer, Keyboard } from "./helpers/ui";
|
||||
import { KEYS } from "../keys";
|
||||
|
||||
// Unmount ReactDOM from root
|
||||
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
||||
|
|
@ -88,9 +89,9 @@ describe("move element", () => {
|
|||
renderScene.mockClear();
|
||||
|
||||
// Move selected rectangle
|
||||
Keyboard.keyDown("ArrowRight");
|
||||
Keyboard.keyDown("ArrowDown");
|
||||
Keyboard.keyDown("ArrowDown");
|
||||
Keyboard.keyDown(KEYS.ARROW_RIGHT);
|
||||
Keyboard.keyDown(KEYS.ARROW_DOWN);
|
||||
Keyboard.keyDown(KEYS.ARROW_DOWN);
|
||||
|
||||
// Check that the arrow size has been changed according to moving the rectangle
|
||||
expect(renderScene).toHaveBeenCalledTimes(3);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { queryByText } from "@testing-library/react";
|
|||
import { copiedStyles } from "../actions/actionStyles";
|
||||
import { UI, Pointer, Keyboard } from "./helpers/ui";
|
||||
import { API } from "./helpers/api";
|
||||
import { CODES, KEYS } from "../keys";
|
||||
|
||||
const { h } = window;
|
||||
|
||||
|
|
@ -129,13 +130,13 @@ describe("regression tests", () => {
|
|||
mouse.click(40, -10);
|
||||
mouse.click(50, 10);
|
||||
mouse.click(30, 10);
|
||||
Keyboard.hotkeyPress("ENTER");
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
|
||||
UI.clickTool("line");
|
||||
mouse.click(40, -20);
|
||||
mouse.click(50, 10);
|
||||
mouse.click(30, 10);
|
||||
Keyboard.hotkeyPress("ENTER");
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
|
||||
UI.clickTool("draw");
|
||||
mouse.down(40, -20);
|
||||
|
|
@ -172,15 +173,15 @@ describe("regression tests", () => {
|
|||
});
|
||||
|
||||
for (const [keys, shape] of [
|
||||
["2r", "rectangle"],
|
||||
["3d", "diamond"],
|
||||
["4e", "ellipse"],
|
||||
["5a", "arrow"],
|
||||
["6l", "line"],
|
||||
["7x", "draw"],
|
||||
[`2${KEYS.R}`, "rectangle"],
|
||||
[`3${KEYS.D}`, "diamond"],
|
||||
[`4${KEYS.E}`, "ellipse"],
|
||||
[`5${KEYS.A}`, "arrow"],
|
||||
[`6${KEYS.L}`, "line"],
|
||||
[`7${KEYS.X}`, "draw"],
|
||||
] as [string, ExcalidrawElement["type"]][]) {
|
||||
for (const key of keys) {
|
||||
it(`hotkey ${key} selects ${shape} tool`, () => {
|
||||
it(`key ${key} selects ${shape} tool`, () => {
|
||||
Keyboard.keyPress(key);
|
||||
|
||||
mouse.down(10, 10);
|
||||
|
|
@ -190,7 +191,6 @@ describe("regression tests", () => {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
it("change the properties of a shape", () => {
|
||||
UI.clickTool("rectangle");
|
||||
mouse.down(10, 10);
|
||||
|
|
@ -397,10 +397,10 @@ describe("regression tests", () => {
|
|||
|
||||
it("spacebar + drag scrolls the canvas", () => {
|
||||
const { scrollX: startScrollX, scrollY: startScrollY } = h.state;
|
||||
Keyboard.hotkeyDown("SPACE");
|
||||
Keyboard.keyDown(KEYS.SPACE);
|
||||
mouse.down(50, 50);
|
||||
mouse.up(60, 60);
|
||||
Keyboard.hotkeyUp("SPACE");
|
||||
Keyboard.keyUp(KEYS.SPACE);
|
||||
const { scrollX, scrollY } = h.state;
|
||||
expect(scrollX).not.toEqual(startScrollX);
|
||||
expect(scrollY).not.toEqual(startScrollY);
|
||||
|
|
@ -410,12 +410,12 @@ describe("regression tests", () => {
|
|||
UI.clickTool("rectangle");
|
||||
mouse.down(10, 10);
|
||||
mouse.up(10, 10);
|
||||
Keyboard.hotkeyPress("ARROW_LEFT");
|
||||
Keyboard.hotkeyPress("ARROW_LEFT");
|
||||
Keyboard.hotkeyPress("ARROW_RIGHT");
|
||||
Keyboard.hotkeyPress("ARROW_UP");
|
||||
Keyboard.hotkeyPress("ARROW_UP");
|
||||
Keyboard.hotkeyPress("ARROW_DOWN");
|
||||
Keyboard.keyPress(KEYS.ARROW_LEFT);
|
||||
Keyboard.keyPress(KEYS.ARROW_LEFT);
|
||||
Keyboard.keyPress(KEYS.ARROW_RIGHT);
|
||||
Keyboard.keyPress(KEYS.ARROW_UP);
|
||||
Keyboard.keyPress(KEYS.ARROW_UP);
|
||||
Keyboard.keyPress(KEYS.ARROW_DOWN);
|
||||
expect(h.elements[0].x).toBe(9);
|
||||
expect(h.elements[0].y).toBe(9);
|
||||
});
|
||||
|
|
@ -433,20 +433,20 @@ describe("regression tests", () => {
|
|||
mouse.click(60, -10);
|
||||
mouse.click(60, 10);
|
||||
mouse.click(40, 10);
|
||||
Keyboard.hotkeyPress("ENTER");
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
|
||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(3);
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
});
|
||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
});
|
||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(1);
|
||||
Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
});
|
||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
||||
});
|
||||
|
|
@ -469,7 +469,7 @@ describe("regression tests", () => {
|
|||
expect(API.getStateHistory().length).toBe(3);
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
});
|
||||
|
||||
expect(API.getStateHistory().length).toBe(2);
|
||||
|
|
@ -480,7 +480,7 @@ describe("regression tests", () => {
|
|||
expect(API.getStateHistory().length).toBe(2);
|
||||
|
||||
Keyboard.withModifierKeys({ shift: true, ctrl: true }, () => {
|
||||
Keyboard.keyPress("z");
|
||||
Keyboard.keyPress(KEYS.Z);
|
||||
});
|
||||
|
||||
expect(API.getStateHistory().length).toBe(3);
|
||||
|
|
@ -501,11 +501,11 @@ describe("regression tests", () => {
|
|||
|
||||
it("zoom hotkeys", () => {
|
||||
expect(h.state.zoom.value).toBe(1);
|
||||
fireEvent.keyDown(document, { code: "Equal", ctrlKey: true });
|
||||
fireEvent.keyUp(document, { code: "Equal", ctrlKey: true });
|
||||
fireEvent.keyDown(document, { code: CODES.EQUAL, ctrlKey: true });
|
||||
fireEvent.keyUp(document, { code: CODES.EQUAL, ctrlKey: true });
|
||||
expect(h.state.zoom.value).toBeGreaterThan(1);
|
||||
fireEvent.keyDown(document, { code: "Minus", ctrlKey: true });
|
||||
fireEvent.keyUp(document, { code: "Minus", ctrlKey: true });
|
||||
fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true });
|
||||
fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true });
|
||||
expect(h.state.zoom.value).toBe(1);
|
||||
});
|
||||
|
||||
|
|
@ -553,7 +553,7 @@ describe("regression tests", () => {
|
|||
}
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
for (const element of h.elements) {
|
||||
|
|
@ -591,8 +591,8 @@ describe("regression tests", () => {
|
|||
mouse.up(10, 10);
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("a");
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.keyPress(KEYS.A);
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
expect(API.getSelectedElements().length).toBe(3);
|
||||
|
|
@ -629,7 +629,7 @@ describe("regression tests", () => {
|
|||
mouse.click();
|
||||
});
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
expect(h.elements.map((element) => element.id)).toEqual([
|
||||
|
|
@ -658,8 +658,8 @@ describe("regression tests", () => {
|
|||
positions.push(mouse.getPosition());
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("a");
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.keyPress(KEYS.A);
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
mouse.doubleClick();
|
||||
|
|
@ -668,7 +668,7 @@ describe("regression tests", () => {
|
|||
mouse.click();
|
||||
});
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
const groupIds = h.elements[2].groupIds;
|
||||
|
|
@ -813,7 +813,7 @@ describe("regression tests", () => {
|
|||
});
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
fireEvent.contextMenu(GlobalTestState.canvas, {
|
||||
|
|
@ -1106,7 +1106,7 @@ describe("regression tests", () => {
|
|||
});
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
fireEvent.contextMenu(GlobalTestState.canvas, {
|
||||
|
|
@ -1502,8 +1502,8 @@ describe("regression tests", () => {
|
|||
UI.group([rect3, rect4]);
|
||||
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("a");
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.keyPress(KEYS.A);
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
const selectedGroupIds_prev = h.state.selectedGroupIds;
|
||||
|
|
@ -1617,7 +1617,7 @@ it(
|
|||
|
||||
// Create group with first and third rectangle
|
||||
Keyboard.withModifierKeys({ ctrl: true }, () => {
|
||||
Keyboard.keyPress("g");
|
||||
Keyboard.codePress(CODES.G);
|
||||
});
|
||||
|
||||
expect(API.getSelectedElements().length).toBe(2);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue