Add console log and outputs (#39)

* feat(add console log preview): displays console log output to users

Passes the console log output from the test to the frontend to be displayed for the user in a new
output pane.

* feat(multi-line outputs): adds multi line output to the hover tooltip

When a single command results in multiple lines of output, we need to show all these lines to the
user.

* fix: add different underline for console log outputs

Makes console log outputs underlined in yellow and errors underlined in red.

* fix: fixes crash when history is reset

* style: removing console logs

* test: updating tests for new console log features

* style: updating lint errors

* build: update location of testing-library-visualizer import

Author: mdbenjam

README.md

@@ -9,14 +9,14 @@ The goal of this library is to make writing and debugging tests iteratively easi
 
 Install the package via:
 
-```npm install react-testing-visualizer```
+```npm install testing-library-visualizer```
 
 If you want to have your app's styling and assets available while debugging then you should build the application and put the following in a jest setup file. If you're using Create React App the following can go into `setupTests.js`. If you don't have a file that sets up the jest context, you can [specify one](https://jestjs.io/docs/configuration#setupfiles-array). 
 
 ```javascript
 import {
   setup,
-} from "react-testing-visualizer";
+} from "testing-library-visualizer";
 import path from "path";
 import { expect } from "@jest/globals";
 import { screen, within, fireEvent } from "@testing-library/react";
@@ -32,15 +32,15 @@ registerCommands({ screen, within, fireEvent, userEvent, expect }); // This shou
 Once setup, debugging a test is simple. In the test file with the test you want to debug add:
 
 ```javascript
-import { debugTest } from "react-testing-visualizer";
+import { debugTest } from "testing-library-visualizer";
 ```
 
 Then replace `test` with `debugTest`. For example:
 
 ```javascript
 import { render } from "@testing-library/react";
 import App from "./App";
-import { debugTest } from "react-testing-visualizer";
+import { debugTest } from "testing-library-visualizer";
 
 debugTest("Test App", async () => {
   render(<App />);
@@ -105,7 +105,7 @@ To do this you'll need to add the following to your jest test setup file.
 ```javascript
 import {
   registerStyling,
-} from "react-testing-visualizer";
+} from "testing-library-visualizer";
 
 registerStyling(/* <URL of styling> */);
 ```
@@ -119,7 +119,7 @@ In many projects you'll define custom commands that you will want to run in the
 ```javascript
 import {
   registerCommands,
-} from "react-testing-visualizer";
+} from "testing-library-visualizer";
 
 registerCommands({
   test: () => {

package/package-lock.json

@@ -25,7 +25,9 @@ function refresh() {
 let IDENTIFIER_MAP = {
   highlight,
   refresh,
+  console,
 };
+
 export const registerCommands = (commands) => {
   IDENTIFIER_MAP = { ...IDENTIFIER_MAP, ...commands };
 };
@@ -133,39 +135,71 @@ export async function runCommand(
   });
 
   var lineNumber = 0;
+  let consoleOutputs = [];
+
+  function parseLogs(lineNumber, consoleOutputs) {
+    for (const consoleLog of consoleLogQueue) {
+      if (!consoleLog.seen) {
+        consoleLog.seen = true;
+
+        for (const arg of consoleLog.arguments) {
+          if (consoleLog.method === "error") {
+            consoleOutputs.push({
+              type: "error",
+              message: `Error printed to console.error. This error occurred asynchronously, and may have happened before this line was executed.\n\n${arg}`,
+              lineNumber,
+            });
+          } else {
+            consoleOutputs.push({
+              message: String(arg),
+              type: consoleLog.method,
+              lineNumber,
+            });
+          }
+        }
+      }
+    }
+  }
 
   try {
     if (parseTree.type !== "Program") {
       throw SyntaxError;
     }
 
-    for (const statement of parseTree.body) {
-      await evaluator.traverseTree(statement);
-      lineNumber += 1;
-    }
-    lineNumber -= 1;
-
     function delay(time) {
       return new Promise((resolve) => setTimeout(resolve, time));
     }
 
-    await delay(10);
+    for (const statement of parseTree.body) {
+      await evaluator.traverseTree(statement);
 
-    for (const consoleLog of consoleLogQueue) {
-      if (consoleLog.method === "error" && !consoleLog.seen) {
-        consoleLog.seen = true;
-        throw Error(
-          `Error printed to console.error. This error occurred asynchronously, and may have happened before this line was executed.\n\n${consoleLog.arguments[0]}`
-        );
-      }
+      parseLogs(lineNumber, consoleOutputs);
+      lineNumber += 1;
     }
 
-    return { ok: true, error: null, lineNumber: null };
+    lineNumber -= 1;
+    await delay(1);
+
+    // Run this again after the delay in case there are more messages
+    parseLogs(lineNumber, consoleOutputs);
+
+    return {
+      ok: true,
+      error: null,
+      consoleOutputs,
+    };
   } catch (error) {
     return {
       ok: false,
-      error: { ...error, message: removeUnicodeColor(error.message) },
-      lineNumber,
+      error: { ...error },
+      consoleOutputs: [
+        ...consoleOutputs,
+        {
+          type: "error",
+          message: removeUnicodeColor(error.message),
+          lineNumber,
+        },
+      ],
     };
   }
 }

package/src/commandParser.js

@@ -86,25 +86,38 @@ function TestComponent() {
   return (
     <>
       {text}
-      <button onClick={() => setTimeout(() => setText("Goodbye"), 5)}>
+      <button onClick={() => setTimeout(() => setText("Goodbye"), 0)}>
         click me
       </button>
     </>
   );
 }
 
 test("reports warnings", async () => {
+  await debuggerSetup(async () => {
+    render(<TestComponent />);
+    const output = (
+      await runCommand(
+        "userEvent.click(screen.getByText('click me'))",
+        consoleLogQueue
+      )
+    ).consoleOutputs[0];
+    expect(output.message).toEqual(
+      expect.stringMatching(/not wrapped in act/g)
+    );
+    expect(output.type).toEqual("error");
+  });
+});
+
+test("reports console logs", async () => {
   await debuggerSetup(async () => {
     render(<TestComponent />);
 
-    expect(
-      (
-        await runCommand(
-          "userEvent.click(screen.getByText('click me'))",
-          consoleLogQueue
-        )
-      ).error.message
-    ).toEqual(expect.stringMatching(/not wrapped in act/g));
+    const output = (
+      await runCommand("console.log('hello world')", consoleLogQueue)
+    ).consoleOutputs[0];
+    expect(output.message).toEqual(expect.stringMatching(/hello world/g));
+    expect(output.type).toEqual("log");
   });
 });
 

package/src/commandParser.test.js

@@ -61,6 +61,9 @@ export const debuggerSetup = async (fn) => {
     consoleLogQueue.push({ method: "log", arguments: arguments });
     return _log.apply(console, arguments);
   };
+  console.log_without_reporting = function () {
+    return _log.apply(console, arguments);
+  };
 
   console.warn = function () {
     consoleLogQueue.push({ method: "warn", arguments: arguments });
@@ -175,11 +178,7 @@ fastify.post("/command", async (request, reply) => {
     html: addStyleLinks(
       replaceFilePaths(document.documentElement.innerHTML, manifest)
     ),
-    error: output.error && {
-      name: output.error.name,
-      message: output.error.message,
-      lineNumber: output.lineNumber,
-    },
+    consoleOutputs: output.consoleOutputs,
   };
 });
 
@@ -200,7 +199,9 @@ export const start = async (setupFunction) => {
     await getCssFiles();
     await setupFunction();
     await fastify.listen(3001);
-    console.log("Debug server is running, open at localhost:3001");
+    console.log_without_reporting(
+      "Debug server is running, open at localhost:3001"
+    );
     while (isListening) {
       await sleep(50);
     }

package/src/testingUtil.js

@@ -8,7 +8,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.0",
-    "react-testing-visualizer": "file:../package",
+    "testing-library-visualizer": "file:../package",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

test-app/package-lock.json

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import App from "./App";
-import { debugTest } from "react-testing-visualizer";
+import { debugTest } from "testing-library-visualizer";
 
 debugTest("renders learn react link", async () => {
   render(<App />);

test-app/package.json

@@ -7,14 +7,13 @@ import {
   registerStyling,
   setup,
   registerCommands,
-} from "react-testing-visualizer";
+} from "testing-library-visualizer";
 import path from "path";
+import { screen, within, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 setup(path.join(__dirname, "..", "build"));
 
 registerStyling("static/css/test.css");
-registerCommands({
-  test: () => {
-    console.log("test command");
-  },
-});
+
+registerCommands({ screen, within, fireEvent, userEvent, expect });