Upgrade XTermJs to v5 to get snapshot testing working

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/features/terminal/__snapshots__/opening-terminal-tab.test.tsx.snap

@@ -515,7 +515,7 @@ exports[`test for opening terminal tab within cluster frame when new terminal ta
               class="TerminalWindow dark"
             >
               <div
-                class="terminal xterm"
+                class="terminal xterm xterm-dom-renderer-owner-1"
                 dir="ltr"
                 tabindex="0"
               >
@@ -529,6 +529,7 @@ exports[`test for opening terminal tab within cluster frame when new terminal ta
                 </div>
                 <div
                   class="xterm-screen"
+                  style="width: 0px; height: 0px;"
                 >
                   <div
                     class="xterm-helpers"
@@ -553,21 +554,93 @@ exports[`test for opening terminal tab within cluster frame when new terminal ta
                       class="composition-view"
                     />
                   </div>
-                  <canvas
-                    class="xterm-text-layer"
-                    style="z-index: 0;"
-                  />
-                  <canvas
-                    class="xterm-selection-layer"
-                    style="z-index: 1;"
-                  />
-                  <canvas
-                    class="xterm-link-layer"
-                    style="z-index: 2;"
-                  />
-                  <canvas
-                    class="xterm-cursor-layer"
-                    style="z-index: 3;"
+                  <style>
+                    .xterm-dom-renderer-owner-1 .xterm-rows span { display: inline-block; height: 100%; vertical-align: top; width: 0px}
+                  </style>
+                  <style>
+                    .xterm-dom-renderer-owner-1 .xterm-rows { color: #ffffff; font-family: RobotoMono; font-size: 12px;}.xterm-dom-renderer-owner-1 span:not(.xterm-bold) { font-weight: normal;}.xterm-dom-renderer-owner-1 span.xterm-bold { font-weight: bold;}.xterm-dom-renderer-owner-1 span.xterm-italic { font-style: italic;}@keyframes blink_box_shadow_1 { 50% {  box-shadow: none; }}@keyframes blink_block_1 { 0% {  background-color: #ffffff;  color: #000000; } 50% {  background-color: #000000;  color: #ffffff; }}.xterm-dom-renderer-owner-1 .xterm-rows:not(.xterm-focus) .xterm-cursor.xterm-cursor-block { outline: 1px solid #ffffff; outline-offset: -1px;}.xterm-dom-renderer-owner-1 .xterm-rows.xterm-focus .xterm-cursor.xterm-cursor-blink:not(.xterm-cursor-block) { animation: blink_box_shadow_1 1s step-end infinite;}.xterm-dom-renderer-owner-1 .xterm-rows.xterm-focus .xterm-cursor.xterm-cursor-blink.xterm-cursor-block { animation: blink_block_1 1s step-end infinite;}.xterm-dom-renderer-owner-1 .xterm-rows.xterm-focus .xterm-cursor.xterm-cursor-block { background-color: #ffffff; color: #000000;}.xterm-dom-renderer-owner-1 .xterm-rows .xterm-cursor.xterm-cursor-bar { box-shadow: 1px 0 0 #ffffff inset;}.xterm-dom-renderer-owner-1 .xterm-rows .xterm-cursor.xterm-cursor-underline { box-shadow: 0 -1px 0 #ffffff inset;}.xterm-dom-renderer-owner-1 .xterm-selection { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none;}.xterm-dom-renderer-owner-1.focus .xterm-selection div { position: absolute; background-color: #4d4d4d;}.xterm-dom-renderer-owner-1 .xterm-selection div { position: absolute; background-color: #4d4d4d;}.xterm-dom-renderer-owner-1 .xterm-fg-0 { color: #2e3436; }.xterm-dom-renderer-owner-1 .xterm-bg-0 { background-color: #2e3436; }.xterm-dom-renderer-owner-1 .xterm-fg-1 { color: #cc0000; }.xterm-dom-renderer-owner-1 .xterm-bg-1 { background-color: #cc0000; }.xterm-dom-renderer-owner-1 .xterm-fg-2 { color: #4e9a06; }.xterm-dom-renderer-owner-1 .xterm-bg-2 { background-color: #4e9a06; }.xterm-dom-renderer-owner-1 .xterm-fg-3 { color: #c4a000; }.xterm-dom-renderer-owner-1 .xterm-bg-3 { background-color: #c4a000; }.xterm-dom-renderer-owner-1 .xterm-fg-4 { color: #3465a4; }.xterm-dom-renderer-owner-1 .xterm-bg-4 { background-color: #3465a4; }.xterm-dom-renderer-owner-1 .xterm-fg-5 { color: #75507b; }.xterm-dom-renderer-owner-1 .xterm-bg-5 { background-color: #75507b; }.xterm-dom-renderer-owner-1 .xterm-fg-6 { color: #06989a; }.xterm-dom-renderer-owner-1 .xterm-bg-6 { background-color: #06989a; }.xterm-dom-renderer-owner-1 .xterm-fg-7 { color: #d3d7cf; }.xterm-dom-renderer-owner-1 .xterm-bg-7 { background-color: #d3d7cf; }.xterm-dom-renderer-owner-1 .xterm-fg-8 { color: #555753; }.xterm-dom-renderer-owner-1 .xterm-bg-8 { background-color: #555753; }.xterm-dom-renderer-owner-1 .xterm-fg-9 { color: #ef2929; }.xterm-dom-renderer-owner-1 .xterm-bg-9 { background-color: #ef2929; }.xterm-dom-renderer-owner-1 .xterm-fg-10 { color: #8ae234; }.xterm-dom-renderer-owner-1 .xterm-bg-10 { background-color: #8ae234; }.xterm-dom-renderer-owner-1 .xterm-fg-11 { color: #fce94f; }.xterm-dom-renderer-owner-1 .xterm-bg-11 { background-color: #fce94f; }.xterm-dom-renderer-owner-1 .xterm-fg-12 { color: #729fcf; }.xterm-dom-renderer-owner-1 .xterm-bg-12 { background-color: #729fcf; }.xterm-dom-renderer-owner-1 .xterm-fg-13 { color: #ad7fa8; }.xterm-dom-renderer-owner-1 .xterm-bg-13 { background-color: #ad7fa8; }.xterm-dom-renderer-owner-1 .xterm-fg-14 { color: #34e2e2; }.xterm-dom-renderer-owner-1 .xterm-bg-14 { background-color: #34e2e2; }.xterm-dom-renderer-owner-1 .xterm-fg-15 { color: #eeeeec; }.xterm-dom-renderer-owner-1 .xterm-bg-15 { background-color: #eeeeec; }.xterm-dom-renderer-owner-1 .xterm-fg-16 { color: #000000; }.xterm-dom-renderer-owner-1 .xterm-bg-16 { background-color: #000000; }.xterm-dom-renderer-owner-1 .xterm-fg-17 { color: #00005f; }.xterm-dom-renderer-owner-1 .xterm-bg-17 { background-color: #00005f; }.xterm-dom-renderer-owner-1 .xterm-fg-18 { color: #000087; }.xterm-dom-renderer-owner-1 .xterm-bg-18 { background-color: #000087; }.xterm-dom-renderer-owner-1 .xterm-fg-19 { color: #0000af; }.xterm-dom-renderer-owner-1 .xterm-bg-19 { background-color: #0000af; }.xterm-dom-renderer-owner-1 .xterm-fg-20 { color: #0000d7; }.xterm-dom-renderer-owner-1 .xterm-bg-20 { background-color: #0000d7; }.xterm-dom-renderer-owner-1 .xterm-fg-21 { color: #0000ff; }.xterm-dom-renderer-owner-1 .xterm-bg-21 { background-color: #0000ff; }.xterm-dom-renderer-owner-1 .xterm-fg-22 { color: #005f00; }.xterm-dom-renderer-owner-1 .xterm-bg-22 { background-color: #005f00; }.xterm-dom-renderer-owner-1 .xterm-fg-23 { color: #005f5f; }.xterm-dom-renderer-owner-1 .xterm-bg-23 { background-color: #005f5f; }.xterm-dom-renderer-owner-1 .xterm-fg-24 { color: #005f87; }.xterm-dom-renderer-owner-1 .xterm-bg-24 { background-color: #005f87; }.xterm-dom-renderer-owner-1 .xterm-fg-25 { color: #005faf; }.xterm-dom-renderer-owner-1 .xtermLine truncated
+                  </style>
+                  <div
+                    aria-hidden="true"
+                    class="xterm-rows"
+                    style="line-height: normal;"
+                  >
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                    <div
+                      style="width: 0px; height: 0px; line-height: 0px; overflow: hidden;"
+                    />
+                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="xterm-selection"
                   />
                   <div
                     class="xterm-decoration-container"

src/features/terminal/opening-terminal-tab.test.tsx

@@ -4,32 +4,22 @@
  */
 
 import type { RenderResult } from "@testing-library/react";
-import assert from "assert";
-import { TypedRegEx } from "typed-regex";
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
-
-const pngBase64Matcher = TypedRegEx("data:image/png;base64,(?<ENCODED>.+)");
-
-function convertCanvasToPngBuffer(canvas: { toDataURL: () => string }): Buffer {
-  const content = canvas.toDataURL();
-  const match = pngBase64Matcher.captures(content);
-
-  assert(match);
-
-  return Buffer.from(match.ENCODED, "base64");
-}
+import type { FindByTextWithMarkup } from "../../test-utils/findByTextWithMarkup";
+import { findByTextWithMarkupFor } from "../../test-utils/findByTextWithMarkup";
 
 describe("test for opening terminal tab within cluster frame", () => {
   let builder: ApplicationBuilder;
   let result: RenderResult;
-  let textCanvas: HTMLCanvasElement;
+  let findByTextWithMarkup: FindByTextWithMarkup;
 
   beforeEach(async () => {
     builder = getApplicationBuilder();
     builder.setEnvironmentToClusterFrame();
 
     result = await builder.render();
+    findByTextWithMarkup = findByTextWithMarkupFor(result);
   });
 
   afterEach(() => {
@@ -39,7 +29,6 @@ describe("test for opening terminal tab within cluster frame", () => {
   describe("when new terminal tab is opened", () => {
     beforeEach(() => {
       result.getByTestId("dock-tab-for-terminal").click();
-      textCanvas = result.baseElement.querySelector("canvas.xterm-text-layer") as HTMLCanvasElement;
     });
 
     it("renders", () => {
@@ -53,7 +42,7 @@ describe("test for opening terminal tab within cluster frame", () => {
     });
 
     it("shows connecting message", async () => {
-      expect(convertCanvasToPngBuffer(textCanvas)).toMatchImageSnapshot();
+      await findByTextWithMarkup("Connecting ...");
     });
 
     it.skip("connects websocket to main", () => {

src/renderer/components/dock/terminal/terminal.ts

@@ -91,6 +91,7 @@ export class Terminal {
     this.api = api;
 
     this.xterm = this.dependencies.createTerminalRenderer({
+      allowProposedApi: true,
       cursorBlink: true,
       cursorStyle: "bar",
       fontSize: this.fontSize,
@@ -164,11 +165,12 @@ export class Terminal {
   };
 
   onData = (data: string) => {
-    if (!this.api.isReady) return;
-    this.api.sendMessage({
-      type: TerminalChannels.STDIN,
-      data,
-    });
+    if (this.api.isReady) {
+      this.api.sendMessage({
+        type: TerminalChannels.STDIN,
+        data,
+      });
+    }
   };
 
   onScroll = () => {
@@ -176,7 +178,6 @@ export class Terminal {
   };
 
   onClear = () => {
-    console.log("clearing");
     this.xterm.clear();
   };
 

src/test-utils/findByTextWithMarkup.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { MatcherFunction, RenderResult, SelectorMatcherOptions, waitForOptions } from "@testing-library/react";
+import { getDefaultNormalizer } from "@testing-library/react";
+
+const hasTextFor = (text: string) => {
+  const normalize = getDefaultNormalizer();
+
+  return (
+    (node: HTMLElement | Element) => normalize(node.textContent ?? "") === text
+  );
+};
+
+export type FindByTextWithMarkup = (text: string, options?: SelectorMatcherOptions, waitForElementOptions?: waitForOptions) => Promise<void>;
+
+export function findByTextWithMarkupFor(result: RenderResult): FindByTextWithMarkup {
+  return async (text, options, waitForOptions) => {
+    const hasText = hasTextFor(text);
+    const matcherFunction: MatcherFunction = (content, element): boolean => {
+      if (!element) {
+        return false;
+      }
+
+      const childrenDontHaveText = Array.from(element.children)
+        .every(child => !hasText(child));
+
+      return hasText(element) && childrenDontHaveText;
+    };
+
+    await result.findByText(matcherFunction, options, waitForOptions);
+  };
+}