From 27c4c9acf2c2c61b26761e2f0f3377927a08860c Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sun, 9 Oct 2022 13:15:26 +0400
Subject: [PATCH] playground and autorun tests (incomplete)

---
 .../src/components/SquiggleEditor.tsx         |  2 +-
 .../src/components/SquigglePlayground.tsx     |  8 ++-
 packages/components/test/autorun.test.tsx     | 55 +++++++++++++++++++
 3 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/test/autorun.test.tsx

diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 23765f38..38caa04d 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -16,7 +16,7 @@ const WrappedCodeEditor: React.FC<{
   setCode: (code: string) => void;
   errorLocations?: SqLocation[];
 }> = ({ code, setCode, errorLocations }) => (
-  <div className="border border-grey-200 p-2 m-4">
+  <div className="border border-grey-200 p-2 m-4" data-testid="squiggle-editor">
     <CodeEditor
       value={code}
       onChange={setCode}
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 59898d6b..52b9df17 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -182,7 +182,7 @@ const RunControls: React.FC<{
   const CurrentPlayIcon = isRunning ? RefreshIcon : PlayIcon;
 
   return (
-    <div className="flex space-x-1 items-center">
+    <div className="flex space-x-1 items-center" data-testid="autorun-controls">
       {autorunMode ? null : (
         <button onClick={run}>
           <CurrentPlayIcon
@@ -355,7 +355,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   const errorLocations = getErrorLocations(resultAndBindings.result);
 
   const firstTab = vars.showEditor ? (
-    <div className="border border-slate-200">
+    <div className="border border-slate-200" data-testid="squiggle-editor">
       <CodeEditor
         errorLocations={errorLocations}
         value={code}
@@ -407,7 +407,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       >
         {tabs}
       </div>
-      <div className="w-1/2 p-2 pl-4">{squiggleChart}</div>
+      <div className="w-1/2 p-2 pl-4" data-testid="playground-result">
+        {squiggleChart}
+      </div>
     </div>
   );
 
diff --git a/packages/components/test/autorun.test.tsx b/packages/components/test/autorun.test.tsx
new file mode 100644
index 00000000..d62f8870
--- /dev/null
+++ b/packages/components/test/autorun.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import "@testing-library/jest-dom";
+import { SquigglePlayground } from "../src/index";
+
+test("Autorun is default", async () => {
+  render(<SquigglePlayground code="70*30" />);
+  await waitFor(() =>
+    expect(screen.getByTestId("playground-result")).toHaveTextContent("2100")
+  );
+});
+
+test("Autorun can be switched off", async () => {
+  const user = userEvent.setup();
+  render(<SquigglePlayground code="70*30" />);
+
+  expect(screen.getByTestId("autorun-controls")).toHaveTextContent("Autorun");
+
+  await waitFor(() =>
+    expect(screen.getByTestId("playground-result")).toHaveTextContent("2100")
+  );
+
+  await user.click(screen.getByText("Autorun")); // disable
+  expect(screen.getByTestId("autorun-controls")).toHaveTextContent("Paused");
+  expect(screen.getByTestId("autorun-controls")).not.toHaveTextContent(
+    "Autorun"
+  );
+
+  await user.click(screen.getByText("Paused")); // enable autorun again
+  expect(screen.getByTestId("autorun-controls")).toHaveTextContent("Autorun");
+
+  // we should replace the code here, but it's hard to update react-ace state via user events: https://github.com/securingsincity/react-ace/issues/923
+  // ...or replace react-ace with something else
+
+  // TODO:
+
+  /*
+  const editor = screen
+    .getByTestId("squiggle-editor")
+    .querySelector(".ace_editor") as HTMLElement;
+  editor.focus();
+  //   await user.clear(editor);
+  await userEvent.paste("40*40"); // https://github.com/securingsincity/react-ace/issues/923#issuecomment-755502696
+  screen.debug(editor);
+
+  // this makes the tests slower, but it's hard to test otherwise that the code _didn't_ execute
+  await new Promise((r) => setTimeout(r, 300));
+  expect(screen.getByTestId("playground-result")).toHaveTextContent("2100"); // still the old value
+
+  await waitFor(() =>
+    expect(screen.getByTestId("playground-result")).toHaveTextContent("1600")
+  );
+*/
+});