Upgrade XTermJs to v5 to get snapshot testing working

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

package.json

@@ -449,7 +449,7 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",
-    "xterm": "^4.19.0",
+    "xterm": "^5.0.0",
     "xterm-addon-fit": "^0.5.0"
   },
   "peerDependencies": {

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);
+  };
+}

yarn.lock

@@ -14000,9 +14000,9 @@ ws@^8.12.0:
   integrity sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==
 
 ws@^8.2.3, ws@^8.4.2, ws@^8.9.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
-  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.10.0.tgz#00a28c09dfb76eae4eb45c3b565f771d6951aa51"
+  integrity sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==
 
 xml-name-validator@^4.0.0:
   version "4.0.0"
@@ -14041,11 +14041,16 @@ xterm-link-provider@^1.3.1:
   dependencies:
     xterm "^4.6.0"
 
-xterm@^4.19.0, xterm@^4.6.0:
+xterm@^4.6.0:
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
   integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
 
+xterm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-5.0.0.tgz#0af50509b33d0dc62fde7a4ec17750b8e453cc5c"
+  integrity sha512-tmVsKzZovAYNDIaUinfz+VDclraQpPUnAME+JawosgWRMphInDded/PuY0xmU5dOhyeYZsI0nz5yd8dPYsdLTA==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"