feat: add xterm.focus check in CodeServer

Author: jsjoeio

test/e2e/models/CodeServer.ts

@@ -63,6 +63,11 @@ export class CodeServer {
     const isTerminalVisible = await this.page.isVisible("#terminal")
     if (isTerminalVisible) {
       await this.page.keyboard.press(`Control+Backquote`)
+      // Wait for terminal to receive focus
+      await this.page.waitForSelector("div.terminal.xterm.focus")
+      // Sometimes the terminal reloads
+      // which is why we wait for it twice
+      await this.page.waitForSelector("div.terminal.xterm.focus")
       return
     }
     // Open using the manu
@@ -76,6 +81,14 @@ export class CodeServer {
     // Click text=Terminal
     await this.page.hover("text=Terminal")
     await this.page.click("text=Terminal")
+
+    // Wait for terminal to receive focus
+    // Sometimes the terminal reloads once or twice
+    // which is why we wati for it to have the focus class
+    await this.page.waitForSelector("div.terminal.xterm.focus")
+    // Sometimes the terminal reloads
+    // which is why we wait for it twice
+    await this.page.waitForSelector("div.terminal.xterm.focus")
   }
 
   /**

test/e2e/terminal.test.ts

@@ -2,7 +2,8 @@ import { test, expect } from "@playwright/test"
 import * as fs from "fs"
 import { tmpdir } from "os"
 import * as path from "path"
-
+import util from "util"
+import * as cp from "child_process"
 import { STORAGE } from "../utils/constants"
 import { CodeServer } from "./models/CodeServer"
 
@@ -13,6 +14,8 @@ test.describe("Integrated Terminal", () => {
   const testFileName = "test.txt"
   const testString = "new string test from e2e test"
   let codeServer: CodeServer
+  let tmpFolderPath: string = ""
+  let tmpFile: string = ""
 
   // TODO@jsjoeio
   // Fix this once https://github.com/microsoft/playwright-test/issues/240
@@ -26,25 +29,33 @@ test.describe("Integrated Terminal", () => {
   test.beforeEach(async ({ page }) => {
     codeServer = new CodeServer(page)
     await codeServer.setup()
-  })
-
-  test("should echo a string to a file", options, async ({ page }) => {
     // NOTE@jsjoeio
     // We're not using tmpdir from src/node/constants
     // because Playwright doesn't fully support ES modules from
     // the erorrs I'm seeing
-    const tmpFolderPath = fs.mkdtempSync(path.join(tmpdir(), "code-server-test"))
-    const tmpFile = `${tmpFolderPath}${path.sep}${testFileName}`
+    tmpFolderPath = fs.mkdtempSync(path.join(tmpdir(), "code-server-test"))
+    tmpFile = `${tmpFolderPath}${path.sep}${testFileName}`
+  })
+
+  test.afterEach(async () => {
+    // Ensure directory was removed
+    fs.rmdirSync(tmpFolderPath, { recursive: true })
+  })
+
+  test("should echo a string to a file", options, async ({ page }) => {
+    const command = `mkfifo '${tmpFile}' && cat '${tmpFile}'`
+    const exec = util.promisify(cp.exec)
+    const output = exec(command, { encoding: "utf8" })
+
     // Open terminal and type in value
     await codeServer.focusTerminal()
 
-    // give the terminal a second to load
     await page.waitForLoadState("load")
-    await page.keyboard.type(`echo '${testString}' > ${tmpFile}`)
-    // Wait for the typing to finish before hitting enter
-    await page.waitForTimeout(500)
+    await page.keyboard.type(`echo '${testString}' > '${tmpFile}'`)
     await page.keyboard.press("Enter")
-    await page.waitForTimeout(2000)
+
+    const { stdout } = await output
+    expect(stdout).toMatch(testString)
 
     // .access checks if the file exists without opening it
     // it doesn't return anything hence why we expect it to