Add tests and test support commands for visual editor

Author: vezwork

apps/vscode/.gitignore

@@ -1,3 +1,4 @@
 out/
 *.vsix
 test-out/
+examples-out/

apps/vscode/.vscode-test.mjs

@@ -4,5 +4,8 @@ export default defineConfig([
   {
     files: 'test-out/*.test.js',
     workspaceFolder: 'src/test/examples',
+    mocha: {
+      timeout: 3000,
+    },
   },
 ]);

apps/vscode/src/providers/editor/editor.ts

@@ -69,6 +69,8 @@ import {
 import { ExtensionHost } from "../../host";
 import { TabInputCustom } from "vscode";
 
+const kVisualModeConfirmed = "visualModeConfirmed";
+
 export interface QuartoVisualEditor extends QuartoEditor {
   hasFocus(): Promise<boolean>;
   getActiveBlockContext(): Promise<CodeViewActiveBlockContext | null>;
@@ -87,6 +89,18 @@ export function activateEditor(
 
   // return commands
   return [
+    {
+      id: 'quarto.test_setkVisualModeConfirmedTrue',
+      execute() {
+        context.globalState.update(kVisualModeConfirmed, true);
+      }
+    },
+    {
+      id: 'quarto.test_isInVisualEditor',
+      execute() {
+        return VisualEditorProvider.activeEditor() !== undefined;
+      }
+    },
     editInVisualModeCommand(),
     editInSourceModeCommand(),
     toggleEditModeCommand(),
@@ -99,7 +113,7 @@ export class VisualEditorProvider implements CustomTextEditorProvider {
 
   // track the last contents of any active untitled docs (used
   // for recovering from attempt to edit )
-  private static activeUntitled?: { uri: Uri, content: string };
+  private static activeUntitled?: { uri: Uri, content: string; };
 
   // track the last edited line of code in text editors (used for syncing position)
   private static editorLastSourcePos = new Map<string, number>();
@@ -312,7 +326,6 @@ export class VisualEditorProvider implements CustomTextEditorProvider {
     private readonly lspRequest: JsonRpcRequestTransport,
     private readonly engine: MarkdownEngine) { }
 
-
   public async resolveCustomTextEditor(
     document: TextDocument,
     webviewPanel: WebviewPanel,
@@ -333,7 +346,6 @@ export class VisualEditorProvider implements CustomTextEditorProvider {
     };
 
     // prompt the user
-    const kVisualModeConfirmed = "visualModeConfirmed";
 
     // Check for environment variables to force the state of the visual editor confirmation modal
     // QUARTO_VISUAL_EDITOR_CONFIRMED > PW_TEST > CI

apps/vscode/src/test/examples/hello.qmd

@@ -8,3 +8,5 @@ format: html
 ```{python}
 1 + 1
 ```
+
+*YO!*

apps/vscode/src/test/quartoDoc.test.ts

@@ -1,13 +1,56 @@
 import * as vscode from "vscode";
 import * as assert from "assert";
-import { exampleWorkspacePath } from "./test-utils";
+import { exampleWorkspacePath, exampleWorkspaceOutPath, copyFile, wait } from "./test-utils";
 import { isQuartoDoc } from "../core/doc";
 
+const APPROX_TIME_TO_OPEN_VISUAL_EDITOR = 1600;
+
 suite("Quarto basics", () => {
+  // Before we run any tests, we should copy any files that get edited in the tests to file under `exampleWorkspaceOutPath`
+  suiteSetup(async () => {
+    const didCopyFile = await copyFile(exampleWorkspacePath('hello.qmd'), exampleWorkspaceOutPath('hello.qmd'));
+    assert.ok(didCopyFile);
+  });
+
   test("Can open a Quarto document", async () => {
-    const doc = await vscode.workspace.openTextDocument(exampleWorkspacePath("hello.qmd"));
+    const doc = await vscode.workspace.openTextDocument(exampleWorkspaceOutPath("hello.qmd"));
     const editor = await vscode.window.showTextDocument(doc);
+
     assert.strictEqual(editor?.document.languageId, "quarto");
     assert.strictEqual(isQuartoDoc(editor?.document), true);
   });
+  // Note: the following tests may be flaky. They rely on waiting estimated amounts of time for commands to complete.
+  test("Can edit in visual mode", async () => {
+    const doc = await vscode.workspace.openTextDocument(exampleWorkspaceOutPath("hello.qmd"));
+    const editor = await vscode.window.showTextDocument(doc);
+
+    // manually confirm visual mode so dialogue pop-up doesn't show because dialogues cause test errors
+    // and switch to visual editor
+    await vscode.commands.executeCommand("quarto.test_setkVisualModeConfirmedTrue");
+    await wait(300); // It seems necessary to wait around 300ms for this command to be done.
+    await vscode.commands.executeCommand("quarto.editInVisualMode");
+    await wait(APPROX_TIME_TO_OPEN_VISUAL_EDITOR);
+
+    assert.ok(await vscode.commands.executeCommand("quarto.test_isInVisualEditor"));
+  });
+  // Note: this test runs after the previous test, so `hello.qmd` has already been touched by the previous
+  //       test. That's okay for this test, but could cause issues if you expect a qmd to look how it
+  //       does in `/examples`.
+  test("Roundtrip doesn't change hello.qmd", async () => {
+    const doc = await vscode.workspace.openTextDocument(exampleWorkspaceOutPath("hello.qmd"));
+    const editor = await vscode.window.showTextDocument(doc);
+
+    const docTextBefore = doc.getText();
+
+    // switch to visual editor and back
+    await vscode.commands.executeCommand("quarto.test_setkVisualModeConfirmedTrue");
+    await wait(300);
+    await vscode.commands.executeCommand("quarto.editInVisualMode");
+    await wait(APPROX_TIME_TO_OPEN_VISUAL_EDITOR);
+    await vscode.commands.executeCommand("quarto.editInSourceMode");
+    await wait(300);
+
+    const docTextAfter = doc.getText();
+    assert.ok(docTextBefore === docTextAfter);
+  });
 });

apps/vscode/src/test/test-utils.ts

@@ -1,4 +1,5 @@
 import * as path from "path";
+import * as vscode from "vscode";
 
 
 /**
@@ -16,3 +17,32 @@ export const WORKSPACE_PATH = path.join(TEST_PATH, "examples");
 export function exampleWorkspacePath(file: string): string {
   return path.join(WORKSPACE_PATH, file);
 }
+export function exampleWorkspaceOutPath(file: string): string {
+  return path.join(WORKSPACE_PATH, 'examples-out', file);
+}
+
+export function wait(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export async function copyFile(
+  sourcePath: string,
+  destPath: string,
+): Promise<boolean> {
+  try {
+    const wsedit = new vscode.WorkspaceEdit();
+    const data = await vscode.workspace.fs.readFile(
+      vscode.Uri.file(sourcePath)
+    );
+    const destFileUri = vscode.Uri.file(destPath);
+    wsedit.createFile(destFileUri, { ignoreIfExists: true });
+
+    await vscode.workspace.fs.writeFile(destFileUri, data);
+
+    let isDone = await vscode.workspace.applyEdit(wsedit);
+    if (isDone) return true;
+    else return false;
+  } catch (err) {
+    return false;
+  }
+}