playground and autorun tests (incomplete)

This commit is contained in:
Vyacheslav Matyukhin 2022-10-09 13:15:26 +04:00
parent eaa7d38428
commit 27c4c9acf2
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
3 changed files with 61 additions and 4 deletions

View File

@ -16,7 +16,7 @@ const WrappedCodeEditor: React.FC<{
setCode: (code: string) => void; setCode: (code: string) => void;
errorLocations?: SqLocation[]; errorLocations?: SqLocation[];
}> = ({ code, setCode, errorLocations }) => ( }> = ({ 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 <CodeEditor
value={code} value={code}
onChange={setCode} onChange={setCode}

View File

@ -182,7 +182,7 @@ const RunControls: React.FC<{
const CurrentPlayIcon = isRunning ? RefreshIcon : PlayIcon; const CurrentPlayIcon = isRunning ? RefreshIcon : PlayIcon;
return ( return (
<div className="flex space-x-1 items-center"> <div className="flex space-x-1 items-center" data-testid="autorun-controls">
{autorunMode ? null : ( {autorunMode ? null : (
<button onClick={run}> <button onClick={run}>
<CurrentPlayIcon <CurrentPlayIcon
@ -355,7 +355,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
const errorLocations = getErrorLocations(resultAndBindings.result); const errorLocations = getErrorLocations(resultAndBindings.result);
const firstTab = vars.showEditor ? ( const firstTab = vars.showEditor ? (
<div className="border border-slate-200"> <div className="border border-slate-200" data-testid="squiggle-editor">
<CodeEditor <CodeEditor
errorLocations={errorLocations} errorLocations={errorLocations}
value={code} value={code}
@ -407,7 +407,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
> >
{tabs} {tabs}
</div> </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> </div>
); );

View File

@ -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")
);
*/
});