84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import ExcalidrawApp from "../excalidraw-app";
|
|
import { CODES } from "../keys";
|
|
import { API } from "../tests/helpers/api";
|
|
import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
|
|
import {
|
|
act,
|
|
fireEvent,
|
|
render,
|
|
screen,
|
|
togglePopover,
|
|
} from "../tests/test-utils";
|
|
import { copiedStyles } from "./actionStyles";
|
|
|
|
const { h } = window;
|
|
|
|
const mouse = new Pointer("mouse");
|
|
|
|
describe("actionStyles", () => {
|
|
beforeEach(async () => {
|
|
await render(<ExcalidrawApp />);
|
|
});
|
|
|
|
afterEach(async () => {
|
|
// https://github.com/floating-ui/floating-ui/issues/1908#issuecomment-1301553793
|
|
// affects node v16+
|
|
await act(async () => {});
|
|
});
|
|
|
|
it("should copy & paste styles via keyboard", async () => {
|
|
UI.clickTool("rectangle");
|
|
mouse.down(10, 10);
|
|
mouse.up(20, 20);
|
|
|
|
UI.clickTool("rectangle");
|
|
mouse.down(10, 10);
|
|
mouse.up(20, 20);
|
|
|
|
// Change some styles of second rectangle
|
|
togglePopover("Stroke");
|
|
UI.clickOnTestId("color-red");
|
|
togglePopover("Background");
|
|
UI.clickOnTestId("color-blue");
|
|
// Fill style
|
|
fireEvent.click(screen.getByTitle("Cross-hatch"));
|
|
// Stroke width
|
|
fireEvent.click(screen.getByTitle("Bold"));
|
|
// Stroke style
|
|
fireEvent.click(screen.getByTitle("Dotted"));
|
|
// Roughness
|
|
fireEvent.click(screen.getByTitle("Cartoonist"));
|
|
// Opacity
|
|
fireEvent.change(screen.getByLabelText("Opacity"), {
|
|
target: { value: "60" },
|
|
});
|
|
|
|
mouse.reset();
|
|
|
|
API.setSelectedElements([h.elements[1]]);
|
|
|
|
Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
|
|
Keyboard.codeDown(CODES.C);
|
|
});
|
|
const secondRect = JSON.parse(copiedStyles)[0];
|
|
expect(secondRect.id).toBe(h.elements[1].id);
|
|
|
|
mouse.reset();
|
|
// Paste styles to first rectangle
|
|
API.setSelectedElements([h.elements[0]]);
|
|
Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
|
|
Keyboard.codeDown(CODES.V);
|
|
});
|
|
|
|
const firstRect = API.getSelectedElement();
|
|
expect(firstRect.id).toBe(h.elements[0].id);
|
|
expect(firstRect.strokeColor).toBe("#e03131");
|
|
expect(firstRect.backgroundColor).toBe("#a5d8ff");
|
|
expect(firstRect.fillStyle).toBe("cross-hatch");
|
|
expect(firstRect.strokeWidth).toBe(2); // Bold: 2
|
|
expect(firstRect.strokeStyle).toBe("dotted");
|
|
expect(firstRect.roughness).toBe(2); // Cartoonist: 2
|
|
expect(firstRect.opacity).toBe(60);
|
|
});
|
|
});
|