Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tests

Browse Source
This commit is contained in:
Aakansha Doshi 2023-03-06 16:47:08 +05:30
parent 357a1c47f6
commit 9025ad99fc
2 changed files with 265 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/element/textElement.test.ts
View File

@ -6,6 +6,7 @@ import {
getMaxContainerWidth,
getMaxContainerHeight,
wrapText,
computeContainerCoords,
} from "./textElement";
import { FontString } from "./types";
@ -177,122 +178,150 @@ break it now`,
});
});
describe("Test measureText", () => {
describe("Test computeBoundTextElementCoords", () => {
const params = { width: 200, height: 100, x: 10, y: 20 };
describe("Test computeBoundTextElementCoords", () => {
const params = { width: 200, height: 100, x: 10, y: 20 };
it("should compute coords correctly when ellipse", () => {
const element = API.createElement({
type: "ellipse",
...params,
});
expect(computeBoundTextElementCoords(element)).toEqual({
x: 44.2893218813452455,
y: 39.64466094067262,
});
it("should compute coords correctly when ellipse", () => {
const element = API.createElement({
type: "ellipse",
...params,
});
it("should compute coords correctly when rectangle", () => {
const element = API.createElement({
type: "rectangle",
...params,
});
expect(computeBoundTextElementCoords(element)).toEqual({
x: 15,
y: 25,
});
});
it("should compute coords correctly when diamond", () => {
const element = API.createElement({
type: "diamond",
...params,
});
expect(computeBoundTextElementCoords(element)).toEqual({
x: 65,
y: 50,
});
expect(computeBoundTextElementCoords(element)).toEqual({
x: 44.2893218813452455,
y: 39.64466094067262,
});
});
describe("Test computeContainerDimensionForBoundText", () => {
const params = {
width: 178,
height: 194,
};
it("should compute container height correctly for rectangle", () => {
const element = API.createElement({
type: "rectangle",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
160,
);
it("should compute coords correctly when rectangle", () => {
const element = API.createElement({
type: "rectangle",
...params,
});
it("should compute container height correctly for ellipse", () => {
const element = API.createElement({
type: "ellipse",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
226,
);
});
it("should compute container height correctly for diamond", () => {
const element = API.createElement({
type: "diamond",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
320,
);
expect(computeBoundTextElementCoords(element)).toEqual({
x: 15,
y: 25,
});
});
describe("Test getMaxContainerWidth", () => {
const params = {
width: 178,
height: 194,
};
it("should return max width when container is rectangle", () => {
const container = API.createElement({ type: "rectangle", ...params });
expect(getMaxContainerWidth(container)).toBe(168);
it("should compute coords correctly when diamond", () => {
const element = API.createElement({
type: "diamond",
...params,
});
it("should return max width when container is ellipse", () => {
const container = API.createElement({ type: "ellipse", ...params });
expect(getMaxContainerWidth(container)).toBe(116);
});
it("should return max width when container is diamond", () => {
const container = API.createElement({ type: "diamond", ...params });
expect(getMaxContainerWidth(container)).toBe(79);
});
});
describe("Test getMaxContainerHeight", () => {
const params = {
width: 178,
height: 194,
};
it("should return max height when container is rectangle", () => {
const container = API.createElement({ type: "rectangle", ...params });
expect(getMaxContainerHeight(container)).toBe(184);
});
it("should return max height when container is ellipse", () => {
const container = API.createElement({ type: "ellipse", ...params });
expect(getMaxContainerHeight(container)).toBe(127);
});
it("should return max height when container is diamond", () => {
const container = API.createElement({ type: "diamond", ...params });
expect(getMaxContainerHeight(container)).toBe(87);
expect(computeBoundTextElementCoords(element)).toEqual({
x: 65,
y: 50,
});
});
});
describe("Test computeContainerCoords", () => {
const boundTextElement = API.createElement({
type: "text",
width: 200,
height: 100,
x: 10,
y: 20,
});
it("should compute coords correctly when ellipse", () => {
expect(computeContainerCoords(boundTextElement, "ellipse")).toEqual({
x: -24.289321881345245,
y: 0.3553390593273775,
});
});
it("should compute coords correctly when rectangle", () => {
expect(computeContainerCoords(boundTextElement, "rectangle")).toEqual({
x: 5,
y: 15,
});
});
it("should compute coords correctly when diamond", () => {
expect(computeContainerCoords(boundTextElement, "diamond")).toEqual({
x: -45,
y: -10,
});
});
});
describe("Test computeContainerDimensionForBoundText", () => {
const params = {
width: 178,
height: 194,
};
it("should compute container height correctly for rectangle", () => {
const element = API.createElement({
type: "rectangle",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
160,
);
});
it("should compute container height correctly for ellipse", () => {
const element = API.createElement({
type: "ellipse",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
226,
);
});
it("should compute container height correctly for diamond", () => {
const element = API.createElement({
type: "diamond",
...params,
});
expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
320,
);
});
});
describe("Test getMaxContainerWidth", () => {
const params = {
width: 178,
height: 194,
};
it("should return max width when container is rectangle", () => {
const container = API.createElement({ type: "rectangle", ...params });
expect(getMaxContainerWidth(container)).toBe(168);
});
it("should return max width when container is ellipse", () => {
const container = API.createElement({ type: "ellipse", ...params });
expect(getMaxContainerWidth(container)).toBe(116);
});
it("should return max width when container is diamond", () => {
const container = API.createElement({ type: "diamond", ...params });
expect(getMaxContainerWidth(container)).toBe(79);
});
});
describe("Test getMaxContainerHeight", () => {
const params = {
width: 178,
height: 194,
};
it("should return max height when container is rectangle", () => {
const container = API.createElement({ type: "rectangle", ...params });
expect(getMaxContainerHeight(container)).toBe(184);
});
it("should return max height when container is ellipse", () => {
const container = API.createElement({ type: "ellipse", ...params });
expect(getMaxContainerHeight(container)).toBe(127);
});
it("should return max height when container is diamond", () => {
const container = API.createElement({ type: "diamond", ...params });
expect(getMaxContainerHeight(container)).toBe(87);
});
});

130
src/element/textWysiwyg.test.tsx
View File

@ -989,6 +989,136 @@ describe("textWysiwyg", () => {
]);
});
describe.only("when using shift resize", () => {
it("should wrap text correctly when resizing using shift from 'ne' handle", async () => {
Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
await new Promise((r) => setTimeout(r, 0));
fireEvent.change(editor, {
target: { value: "Excalidraw is an opensource virtual whiteboard" },
});
editor.blur();
const textElement = h.elements[1] as ExcalidrawTextElement;
expect(rectangle.width).toBe(90);
expect(rectangle.height).toBe(202);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excalid
raw is
an
opensou
rce
virtual
whitebo
ard`,
);
resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
shift: true,
});
expect(rectangle.width).toBe(200);
expect(rectangle.height).toBe(449);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excalidraw is an
opensource virtual
whiteboard`,
);
});
it("should wrap text correctly when resizing using shift vertically using 'n' handle", async () => {
Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
await new Promise((r) => setTimeout(r, 0));
fireEvent.change(editor, {
target: { value: "Excalidraw is an opensource virtual whiteboard" },
});
editor.blur();
const textElement = h.elements[1] as ExcalidrawTextElement;
expect(rectangle.width).toBe(90);
expect(rectangle.height).toBe(202);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excalid
raw is
an
opensou
rce
virtual
whitebo
ard`,
);
resize(rectangle, "n", [rectangle.x + 30, rectangle.y - 50], {
shift: true,
});
expect(rectangle.width).toBe(104);
expect(rectangle.height).toBe(232);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excalidra
w is an
opensourc
e virtual
whiteboar
d`,
);
});
it("should wrap text correctly when resizing using shift horizontally and text overflows", async () => {
Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
await new Promise((r) => setTimeout(r, 0));
fireEvent.change(editor, {
target: { value: "Excalidraw is an opensource virtual whiteboard" },
});
editor.blur();
const textElement = h.elements[1] as ExcalidrawTextElement;
expect(rectangle.width).toBe(90);
expect(rectangle.height).toBe(202);
expect(rectangle.y).toBe(20);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excalid
raw is
an
opensou
rce
virtual
whitebo
ard`,
);
resize(rectangle, "e", [rectangle.x - 30, rectangle.y + 30], {
shift: true,
});
expect(rectangle.width).toBe(70);
expect(rectangle.height).toBe(226);
expect(rectangle.y).toBe(8);
expect(textElement.fontSize).toBe(20);
expect(textElement.text).toBe(
`Excal
idraw
is an
opens
ource
virtu
al
white
board`,
);
});
});
it("should bind text correctly when container duplicated with alt-drag", async () => {
Keyboard.keyPress(KEYS.ENTER);