Fix playground e2e test for real
ghstack-source-id: 1b52cb312a5f26e8e058bfe4a29b586ffaeb25d7 Pull Request resolved: https://github.com/facebook/react-forget/pull/2843
Lauren Tan committed
Apr 11, 2024 at 12:13 UTC
6e65445911e15e51a549fe456a428d342ba745e5
2 files changed
+30
-10
compiler/apps/playground/__tests__/e2e/page.spec.ts
+22
-8
@@ -6,23 +6,33 @@
6
*/
7
8
import { expect, test } from "@playwright/test";
9
+import { encodeStore, type Store } from "../../lib/stores";
10
10
-const delay = 50;
11
+const STORE: Store = {
12
+ source: `export default function TestComponent({ x }) {
13
+ return <Button>{x}</Button>;
14
+}
15
+`,
16
+};
17
+const HASH = encodeStore(STORE);
18
19
function concat(data: Array<string>): string {
20
return data.join("");
21
}
22
23
test("editor should compile successfully", async ({ page }) => {
17
- await page.goto("/", { waitUntil: "networkidle" });
24
+ await page.goto(`/#${HASH}`, { waitUntil: "networkidle" });
25
+ await page.screenshot({
26
+ fullPage: true,
27
+ path: "test-results/00-on-networkidle.png",
28
+ });
29
19
- // User input compiles
20
- const monacoEditor = page.locator(".monaco-editor").nth(0);
21
- await monacoEditor.click();
22
- await page.keyboard.press("Meta+KeyA", { delay });
23
- await page.keyboard.type("export default function TestComponent({ x }) {\n");
24
- await page.keyboard.type("return <Button>{x}</Button>;\n");
30
+ // User input from hash compiles
31
await page.getByRole("button", { name: /JS/ }).click();
32
+ await page.screenshot({
33
+ fullPage: true,
34
+ path: "test-results/01-show-js-before.png",
35
+ });
36
const userInput =
37
(await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
38
expect(concat(userInput)).toMatchSnapshot("user-input.txt");
@@ -30,6 +40,10 @@ test("editor should compile successfully", async ({ page }) => {
40
// Reset button works
41
page.on("dialog", (dialog) => dialog.accept());
42
await page.getByRole("button", { name: "Reset" }).click();
43
+ await page.screenshot({
44
+ fullPage: true,
45
+ path: "test-results/02-show-js-after.png",
46
+ });
47
const defaultInput =
48
(await page.locator(".monaco-editor").nth(2).allInnerTexts()) ?? [];
49
expect(concat(defaultInput)).toMatchSnapshot("default-input.txt");
compiler/apps/playground/lib/stores/store.ts
+8
-2
@@ -18,12 +18,18 @@ import { defaultStore } from "../defaultStore";
18
export interface Store {
19
source: string;
20
}
21
+export function encodeStore(store: Store): string {
22
+ return compressToEncodedURIComponent(JSON.stringify(store));
23
+}
24
+export function decodeStore(hash: string): Store {
25
+ return JSON.parse(decompressFromEncodedURIComponent(hash));
26
+}
27
28
/**
29
* Serialize, encode, and save @param store to localStorage and update URL.
30
*/
31
export function saveStore(store: Store) {
26
- const hash = compressToEncodedURIComponent(JSON.stringify(store));
32
+ const hash = encodeStore(store);
33
localStorage.setItem("playgroundStore", hash);
34
history.replaceState({}, "", `#${hash}`);
35
}
@@ -54,7 +60,7 @@ export function initStoreFromUrlOrLocalStorage(): Store {
60
// Initialize with the default store.
61
if (!encodedSource) return defaultStore;
62
57
- const raw = JSON.parse(decompressFromEncodedURIComponent(encodedSource));
63
+ const raw = decodeStore(encodedSource);
64
65
invariant(isValidStore(raw), "Invalid Store");
66
return raw;