sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

expose a few state props for debugging (#1008)

Browse Source 
* expose a few state props for debugging

* rename h.appState & add h.setState

* support setting elements
This commit is contained in:
David Luzar 2020-03-18 20:44:05 +01:00 committed by GitHub
parent cb66adc716
commit ff033640e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/App.tsx
View File

@ -64,7 +64,7 @@ import {
import { KEYS, isArrowKey } from "../keys";
import { findShapeByKey, shapesShortcutKeys } from "../shapes";
import { createHistory } from "../history";
import { createHistory, SceneHistory } from "../history";
import ContextMenu from "./ContextMenu";
@ -113,33 +113,6 @@ function withBatchedUpdates<
}) as TFunction;
}
// -----------------------------------------------------------------------------
// TEST HOOKS
// -----------------------------------------------------------------------------
declare global {
interface Window {
__TEST__: {
elements: readonly ExcalidrawElement[];
appState: AppState;
};
}
}
if (process.env.NODE_ENV === "test") {
window.__TEST__ = {} as Window["__TEST__"];
}
// -----------------------------------------------------------------------------
if (process.env.NODE_ENV === "test") {
Object.defineProperty(window.__TEST__, "elements", {
get() {
return globalSceneState.getAllElements();
},
});
}
const { history } = createHistory();
let cursorX = 0;
@ -476,11 +449,23 @@ export class App extends React.Component<any, AppState> {
private unmounted = false;
public async componentDidMount() {
if (process.env.NODE_ENV === "test") {
Object.defineProperty(window.__TEST__, "appState", {
configurable: true,
get: () => {
return this.state;
if (
process.env.NODE_ENV === "test" ||
process.env.NODE_ENV === "development"
) {
const setState = this.setState.bind(this);
Object.defineProperties(window.h, {
state: {
configurable: true,
get: () => {
return this.state;
},
},
setState: {
configurable: true,
value: (...args: Parameters<typeof setState>) => {
return this.setState(...args);
},
},
});
}
@ -2447,3 +2432,39 @@ export class App extends React.Component<any, AppState> {
}
}
}
// -----------------------------------------------------------------------------
// TEST HOOKS
// -----------------------------------------------------------------------------
declare global {
interface Window {
h: {
elements: readonly ExcalidrawElement[];
state: AppState;
history: SceneHistory;
};
}
}
if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
window.h = {} as Window["h"];
Object.defineProperties(window.h, {
elements: {
get() {
return globalSceneState.getAllElements();
},
set(elements: ExcalidrawElement[]) {
return globalSceneState.replaceAllElements(elements);
},
},
history: {
get() {
return history;
},
},
});
}
// -----------------------------------------------------------------------------

22
src/tests/dragCreate.test.tsx
View File

@ -15,7 +15,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("add element to the scene when pointer dragging long enough", () => {
it("rectangle", () => {
@ -36,7 +36,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("rectangle");
@ -64,7 +64,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("ellipse");
@ -92,7 +92,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("diamond");
@ -120,7 +120,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -152,7 +152,7 @@ describe("add element to the scene when pointer dragging long enough", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -183,7 +183,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -202,7 +202,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -221,7 +221,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -243,7 +243,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
@ -265,7 +265,7 @@ describe("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
});

14
src/tests/move.test.tsx
View File

@ -13,7 +13,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("move element", () => {
it("rectangle", () => {
@ -29,9 +29,9 @@ describe("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
@ -42,7 +42,7 @@ describe("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]);
});
@ -62,9 +62,9 @@ describe("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
@ -75,7 +75,7 @@ describe("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(2);
// previous element should stay intact

2
src/tests/multiPointCreate.test.tsx
View File

@ -15,7 +15,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("remove shape in non linear elements", () => {
it("rectangle", () => {

14
src/tests/resize.test.tsx
View File

@ -13,7 +13,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("resize element", () => {
it("rectangle", () => {
@ -29,9 +29,9 @@ describe("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -49,7 +49,7 @@ describe("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -70,9 +70,9 @@ describe("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
@ -90,7 +90,7 @@ describe("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);

28
src/tests/selection.test.tsx
View File

@ -14,7 +14,7 @@ beforeEach(() => {
renderScene.mockClear();
});
const { __TEST__: h } = window;
const { h } = window;
describe("selection element", () => {
it("create selection element on pointer down", () => {
@ -27,7 +27,7 @@ describe("selection element", () => {
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
expect(renderScene).toHaveBeenCalledTimes(1);
const selectionElement = h.appState.selectionElement!;
const selectionElement = h.state.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 100]);
@ -48,7 +48,7 @@ describe("selection element", () => {
fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(2);
const selectionElement = h.appState.selectionElement!;
const selectionElement = h.state.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 30]);
@ -70,7 +70,7 @@ describe("selection element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
});
});
@ -95,9 +95,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("diamond", () => {
@ -120,9 +120,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("ellipse", () => {
@ -145,9 +145,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("arrow", () => {
@ -183,9 +183,9 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
it("arrow escape", () => {
@ -221,8 +221,8 @@ describe("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
expect(h.appState.selectionElement).toBeNull();
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.appState.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
});
});