Add console log and outputs #39

mdbenjam · 2022-03-23T15:01:39Z

This PR:

Correctly imports the new name of the testing library
Adds a new output pane that shows the most recent command's error or console output.
Displays console outputs in both the command history view and the output pane.

ConsoleLog.mp4

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

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

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

mdbenjam · 2022-03-23T15:03:59Z

package/src/commandParser.js

@@ -25,7 +25,9 @@ function refresh() {
 let IDENTIFIER_MAP = {
  highlight,
  refresh,
+  console,


Add console as a default available command

mdbenjam · 2022-03-23T15:04:56Z

package/src/commandParser.js

-        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]}`
-        );
+      await delay(1);


Add a delay after every command to give the React code time to update and to send logs/errors.

mdbenjam · 2022-03-23T15:05:52Z

package/src/commandParser.js

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


Get every type of output, note the type and send it to the user.

mdbenjam · 2022-03-23T15:06:31Z

package/src/testingUtil.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 () {


Retain an alias for the original console.log that we can use to output lines only to the console, and not to the user in the UI.

mdbenjam · 2022-03-23T15:06:53Z

package/src/testingUtil.js

@@ -175,11 +178,7 @@ fastify.post("/command", async (request, reply) => {
    html: addStyleLinks(
      replaceFilePaths(document.documentElement.innerHTML, manifest)
    ),
-    error: output.error && {


No longer report errors separately, just send consoleOutputs with their type.

mdbenjam · 2022-03-23T15:07:55Z

test-runner/src/App.css

+}
+
+.editor-div {


This setup allows each code mirror instance on the page to fill an equal amount of space vertically! Before this we were doing some less than idea layout management with things like calc(50vh - 100px)

mdbenjam · 2022-03-23T15:08:31Z

test-runner/src/CommandInput.js

@@ -21,12 +31,13 @@ function CommandInput({ setInnerHTML, availableCommands }) {
      ...existingHistory,
      {
        content: "",
-        errors: [],
+        consoleOutputs: [],


Just like on the backend, get rid of tracking errors independently and only track the console outputs. Within each output we have a type which can be error or log (or potentially info etc).

mdbenjam · 2022-03-23T15:08:54Z

test-runner/src/CommandInput.js

        wasReset: false,
      },
    ];
  });
  const [editorValue, setEditorValue] = useState("");
+  const [output, setOutput] = useState("");


Add a new output state which is the most recent output from a command.

mdbenjam · 2022-03-23T15:09:06Z

test-runner/src/CommandInput.js

+          />
+        </div>
+        <h1 className="code-window-titles">Output</h1>
+        <div className="editor-div">


Show the most recent output

mdbenjam · 2022-03-23T15:09:22Z

test-runner/src/Editor.js

@@ -40,7 +40,7 @@ import {
 const completePropertyAfter = ["PropertyName", ".", "?."];

 const fixedHeightEditor = EditorView.theme({
-  "&": { height: "calc(50vh - 100px)" },


Now that we're properly using flexbox we can change this to 100%!

mdbenjam · 2022-03-23T15:10:01Z

test-runner/src/Editor.js


-const errorEffect = StateEffect.define({});
-const errorState = StateField.define({
+const consoleEffect = StateEffect.define({});


Rename a lot of things from error to console to make them more generic.

mdbenjam · 2022-03-23T15:11:44Z

test-runner/src/Editor.js

-      }),
-      sort: true,
-    });
+    if (consoleEffects.length > 0) {


This new check plus the line below (148 filter: () => false) means that we:

Only update this when the effect update contains a consoleEffect

Remove all of the existing consoleEffect, and adds them all back

Prior to this we had to make sure to only add the new consoleEffects or else we would double add them. This filter, then add approach is better for our case since we maintain the total list of consoleEffects outside of the editor and pass it in every time.

mdbenjam · 2022-03-23T15:12:59Z

test-runner/src/Editor.js

-          error: error.message,
-        });
-      })
-      .filter((error) => {


No longer need this filter because of: https://github.com/mdbenjam/testing-library-visualizer/pull/39/files#r833385524

… into mdbenjam/add-output-view

mdbenjam · 2022-03-23T19:49:28Z

🎉 This PR is included in version 1.0.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

mdbenjam added 4 commits March 21, 2022 14:54

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

9c68185

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

6e9e2c8

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

31011db

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

fix: fixes crash when history is reset

56ba194

mdbenjam commented Mar 23, 2022

View reviewed changes

mdbenjam added 5 commits March 23, 2022 11:13

style: removing console logs

c6906c8

Merge branch 'main' of github.com:mdbenjam/testing-library-visualizer…

7e4710d

… into mdbenjam/add-output-view

test: updating tests for new console log features

211e594

style: updating lint errors

f68bba6

build: update location of testing-library-visualizer import

b9b47b1

mdbenjam merged commit c59b1ad into main Mar 23, 2022

mdbenjam mentioned this pull request Mar 23, 2022

Display console.logging #16

Closed

mdbenjam added the released label Mar 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add console log and outputs #39

Add console log and outputs #39

Uh oh!

mdbenjam commented Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam Mar 23, 2022

Uh oh!

mdbenjam commented Mar 23, 2022

Uh oh!

Uh oh!

		}

		.editor-div {

Add console log and outputs #39

Add console log and outputs #39

Uh oh!

Conversation

mdbenjam commented Mar 23, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdbenjam commented Mar 23, 2022

Uh oh!

Uh oh!