Fix UI Tests (kitsteam#8)

.gitignore

@@ -30,4 +30,5 @@ coverage
 dev-dist
 html
 examples/**/bundle.*
-meta*.json
+meta*.json
+assets/

docker-compose.yml

@@ -9,6 +9,7 @@ services:
     container_name: excalidraw
     ports:
       - "3000:3000"
+      - "4173:4173" # Vitest UI
     restart: on-failure
     healthcheck:
       disable: true

package.json

@@ -76,7 +76,7 @@
     "test": "yarn test:app",
     "test:coverage": "vitest --coverage",
     "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui --coverage.enabled=true",
+    "test:ui": "yarn test --ui --coverage.enabled=true --open=false",
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
     "build:preview": "yarn build && vite preview --port 5000",

packages/excalidraw/element/flowchart.test.tsx

@@ -23,7 +23,7 @@ beforeEach(async () => {
   // The bounds of hand-drawn linear elements may change after flipping, so
   // removing this style for testing
   UI.clickTool("arrow");
-  UI.clickByTitle("Architect");
+  UI.clickByTitle("Architekt");
   UI.clickTool("selection");
 });
 

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -847,7 +847,7 @@ describe("textWysiwyg", () => {
       });
       const contextMenu = document.querySelector(".context-menu");
       fireEvent.click(
-        queryByText(contextMenu as HTMLElement, "Bind text to the container")!,
+        queryByText(contextMenu as HTMLElement, "Text an Container binden")!,
       );
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(rectangle.boundElements).toStrictEqual([
@@ -978,7 +978,7 @@ describe("textWysiwyg", () => {
         clientY: 30,
       });
       const contextMenu = document.querySelector(".context-menu");
-      fireEvent.click(queryByText(contextMenu as HTMLElement, "Unbind text")!);
+      fireEvent.click(queryByText(contextMenu as HTMLElement, "Text lösen")!);
       expect(h.elements[0].boundElements).toEqual([]);
       expect((h.elements[1] as ExcalidrawTextElement).containerId).toEqual(
         null,
@@ -1035,8 +1035,8 @@ describe("textWysiwyg", () => {
 
       editor.select();
 
-      fireEvent.click(screen.getByTitle("Left"));
-      fireEvent.click(screen.getByTitle("Align bottom"));
+      fireEvent.click(screen.getByTitle("Links"));
+      fireEvent.click(screen.getByTitle("Untere Kanten"));
       Keyboard.exitTextEditor(editor);
 
       // should left align horizontally and bottom vertically after resize
@@ -1054,8 +1054,8 @@ describe("textWysiwyg", () => {
 
       editor.select();
 
-      fireEvent.click(screen.getByTitle("Right"));
-      fireEvent.click(screen.getByTitle("Align top"));
+      fireEvent.click(screen.getByTitle("Rechts"));
+      fireEvent.click(screen.getByTitle("Obere Kanten"));
 
       Keyboard.exitTextEditor(editor);
 
@@ -1218,7 +1218,7 @@ describe("textWysiwyg", () => {
       let contextMenu = document.querySelector(".context-menu");
 
       fireEvent.click(
-        queryByText(contextMenu as HTMLElement, "Bind text to the container")!,
+        queryByText(contextMenu as HTMLElement, "Text an Container binden")!,
       );
 
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text).toBe(
@@ -1230,7 +1230,7 @@ describe("textWysiwyg", () => {
         clientY: 30,
       });
       contextMenu = document.querySelector(".context-menu");
-      fireEvent.click(queryByText(contextMenu as HTMLElement, "Unbind text")!);
+      fireEvent.click(queryByText(contextMenu as HTMLElement, "Text lösen")!);
       expect(h.elements[0].boundElements).toEqual([]);
       expect(getOriginalContainerHeightFromCache(container.id)).toBe(null);
 
@@ -1280,7 +1280,7 @@ describe("textWysiwyg", () => {
       ).toEqual(FONT_FAMILY["Comic Shanns"]);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
-      fireEvent.click(screen.getByTitle(/Very large/i));
+      fireEvent.click(screen.getByTitle(/Sehr groß/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontSize,
       ).toEqual(36);
@@ -1315,7 +1315,7 @@ describe("textWysiwyg", () => {
       ).toEqual(FONT_FAMILY.Nunito);
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.35);
+      ).toEqual(1.25);
     });
 
     describe("should align correctly", () => {
@@ -1333,8 +1333,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when top left", async () => {
-        fireEvent.click(screen.getByTitle("Left"));
-        fireEvent.click(screen.getByTitle("Align top"));
+        fireEvent.click(screen.getByTitle("Links"));
+        fireEvent.click(screen.getByTitle("Obere Kanten"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
             15,
@@ -1344,8 +1344,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when top center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Align top"));
+        fireEvent.click(screen.getByTitle("Zentriert"));
+        fireEvent.click(screen.getByTitle("Obere Kanten"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
             30,
@@ -1355,8 +1355,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when top right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Align top"));
+        fireEvent.click(screen.getByTitle("Rechts"));
+        fireEvent.click(screen.getByTitle("Obere Kanten"));
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
@@ -1367,8 +1367,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when center left", async () => {
-        fireEvent.click(screen.getByTitle("Center vertically"));
-        fireEvent.click(screen.getByTitle("Left"));
+        fireEvent.click(screen.getByTitle("Vertikal zentrieren"));
+        fireEvent.click(screen.getByTitle("Links"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
             15,
@@ -1378,8 +1378,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when center center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Center vertically"));
+        fireEvent.click(screen.getByTitle("Zentriert"));
+        fireEvent.click(screen.getByTitle("Vertikal zentrieren"));
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
@@ -1390,8 +1390,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when center right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Center vertically"));
+        fireEvent.click(screen.getByTitle("Rechts"));
+        fireEvent.click(screen.getByTitle("Vertikal zentrieren"));
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
@@ -1402,8 +1402,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when bottom left", async () => {
-        fireEvent.click(screen.getByTitle("Left"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
+        fireEvent.click(screen.getByTitle("Links"));
+        fireEvent.click(screen.getByTitle("Untere Kanten"));
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
@@ -1414,8 +1414,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when bottom center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
+        fireEvent.click(screen.getByTitle("Zentriert"));
+        fireEvent.click(screen.getByTitle("Untere Kanten"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
             30,
@@ -1425,8 +1425,8 @@ describe("textWysiwyg", () => {
       });
 
       it("when bottom right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
+        fireEvent.click(screen.getByTitle("Rechts"));
+        fireEvent.click(screen.getByTitle("Untere Kanten"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
             45,
@@ -1447,7 +1447,7 @@ describe("textWysiwyg", () => {
       );
 
       editor.select();
-      fireEvent.click(screen.getByTitle("Left"));
+      fireEvent.click(screen.getByTitle("Links"));
 
       Keyboard.exitTextEditor(editor);
 
@@ -1469,7 +1469,7 @@ describe("textWysiwyg", () => {
 
       const contextMenu = document.querySelector(".context-menu");
       fireEvent.click(
-        queryByText(contextMenu as HTMLElement, "Wrap text in a container")!,
+        queryByText(contextMenu as HTMLElement, "Text in Container einbetten")!,
       );
       expect(h.elements.length).toBe(3);
 
@@ -1531,7 +1531,7 @@ describe("textWysiwyg", () => {
         (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
       ).toBe(VERTICAL_ALIGN.MIDDLE);
 
-      fireEvent.click(screen.getByTitle("Align bottom"));
+      fireEvent.click(screen.getByTitle("Untere Kanten"));
 
       Keyboard.exitTextEditor(editor);
 

packages/excalidraw/tests/__snapshots__/App.test.tsx.snap

@@ -5,40 +5,40 @@ exports[`Test <App/> > should show error modal when using brave and measureText
   data-testid="brave-measure-text-error"
 >
   <p>
-    Looks like you are using Brave browser with the 
+    Sieht so aus, als ob Du den Brave-Browser verwendest und die 
     <span
       style="font-weight: 600;"
     >
-      Aggressively Block Fingerprinting
+      aggressive Blockierung von Fingerabdrücken
     </span>
-     setting enabled.
+     aktiviert hast.
   </p>
   <p>
-    This could result in breaking the 
+    Dies könnte dazu führen, dass die 
     <span
       style="font-weight: 600;"
     >
-      Text Elements
+      Textelemente
     </span>
-     in your drawings.
+     in Ihren Zeichnungen zerstört werden.
   </p>
   <p>
-    We strongly recommend disabling this setting. You can follow 
+    Wir empfehlen dringend, diese Einstellung zu deaktivieren. Dazu kannst Du 
     <a
       href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser"
     >
-      these steps
+      diesen Schritten
     </a>
-     on how to do so.
+     folgen.
   </p>
   <p>
-    If disabling this setting doesn't fix the display of text elements, please open an 
+    Wenn die Deaktivierung dieser Einstellung die fehlerhafte Anzeige von Textelementen nicht behebt, öffne bitte ein 
     <a
       href="https://github.com/excalidraw/excalidraw/issues/new"
     >
-      issue
+      Ticket
     </a>
-     on our GitHub, or write us on 
+     auf unserem GitHub oder schreibe uns auf 
     <a
       href="https://discord.gg/UexuTaE"
     >

packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active tool is mermaid 1`] = `
-"<div class="Modal Dialog ttd-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" data-prevent-outside-click="true"><div class="Modal__background"></div><div class="Modal__content" style="--max-width: 1200px;" tabindex="0"><div class="Island"><div class="Dialog__content"><div dir="ltr" data-orientation="horizontal" class="ttd-dialog-tabs-root"><p class="dialog-mermaid-title">Mermaid to Excalidraw</p><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r0:-trigger-mermaid" id="radix-:r0:-content-mermaid" tabindex="0" class="ttd-dialog-content" style=""><div class="ttd-dialog-desc">Currently only <a href="https://mermaid.js.org/syntax/flowchart.html">Flowchart</a>,<a href="https://mermaid.js.org/syntax/sequenceDiagram.html"> Sequence, </a> and <a href="https://mermaid.js.org/syntax/classDiagram.html">Class </a>Diagrams are supported. The other types will be rendered as image in Excalidraw.</div><div class="ttd-dialog-panels"><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Mermaid Syntax</label></div><textarea class="ttd-dialog-input" placeholder="Write Mermaid diagram defintion here...">flowchart TD
+"<div class="Modal Dialog ttd-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" data-prevent-outside-click="true"><div class="Modal__background"></div><div class="Modal__content" style="--max-width: 1200px;" tabindex="0"><div class="Island"><div class="Dialog__content"><div dir="ltr" data-orientation="horizontal" class="ttd-dialog-tabs-root"><p class="dialog-mermaid-title">Mermaid zu Excalidraw</p><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r0:-trigger-mermaid" id="radix-:r0:-content-mermaid" tabindex="0" class="ttd-dialog-content" style=""><div class="ttd-dialog-desc">Derzeit werden nur <a href="https://mermaid.js.org/syntax/flowchart.html">Flussdiagramme</a>, <a href="https://mermaid.js.org/syntax/sequenceDiagram.html">Sequenzdiagramme</a> und <a href="https://mermaid.js.org/syntax/classDiagram.html">Klassendiagramme</a> unterstützt. Die anderen Typen werden als Bild in Excalidraw dargestellt.</div><div class="ttd-dialog-panels"><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Mermaid-Syntax</label></div><textarea class="ttd-dialog-input" placeholder="Write Mermaid diagram defintion here...">flowchart TD
  A[Christmas] --&gt;|Get money| B(Go shopping)
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]
  C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Vorschau</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Einfügen<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Test <MermaidToExcalidraw/> > should show error in preview when mermaid library throws error 1`] = `