From a89eca052d0e797ebcc0fdd41e36b0f6d5342dc2 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 12 Mar 2025 18:22:48 -0400
Subject: [PATCH] [playground] Use onMount to check if the editor is available

Playground test flakiness seems to be fixed but adding this as an extra precaution
---
 .../playground/__tests__/e2e/page.spec.ts     | 23 +++++++++----------
 .../playground/components/Editor/Input.tsx    |  3 +++
 compiler/apps/playground/package.json         |  2 +-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts
index e2700e006a..48bb0eed4e 100644
--- a/compiler/apps/playground/__tests__/e2e/page.spec.ts
+++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts
@@ -9,6 +9,13 @@ import {expect, test} from '@playwright/test';
 import {encodeStore, type Store} from '../../lib/stores';
 import {format} from 'prettier';
 
+function isMonacoLoaded(): boolean {
+  return (
+    typeof window['MonacoEnvironment'] !== 'undefined' &&
+    window['__MONACO_LOADED__'] === true
+  );
+}
+
 function formatPrint(data: Array<string>): Promise<string> {
   return format(data.join(''), {parser: 'babel'});
 }
@@ -105,9 +112,7 @@ function nonReactFn() {
 
 test('editor should open successfully', async ({page}) => {
   await page.goto(`/`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(
-    () => typeof window['MonacoEnvironment'] !== 'undefined',
-  );
+  await page.waitForFunction(isMonacoLoaded);
   await page.screenshot({
     fullPage: true,
     path: 'test-results/00-fresh-page.png',
@@ -123,9 +128,7 @@ test('editor should compile from hash successfully', async ({page}) => {
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(
-    () => typeof window['MonacoEnvironment'] !== 'undefined',
-  );
+  await page.waitForFunction(isMonacoLoaded);
 
   // User input from hash compiles
   await page.screenshot({
@@ -149,9 +152,7 @@ test('reset button works', async ({page}) => {
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-  await page.waitForFunction(
-    () => typeof window['MonacoEnvironment'] !== 'undefined',
-  );
+  await page.waitForFunction(isMonacoLoaded);
 
   // Reset button works
   page.on('dialog', dialog => dialog.accept());
@@ -175,9 +176,7 @@ TEST_CASE_INPUTS.forEach((t, idx) =>
     };
     const hash = encodeStore(store);
     await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
-    await page.waitForFunction(
-      () => typeof window['MonacoEnvironment'] !== 'undefined',
-    );
+    await page.waitForFunction(isMonacoLoaded);
     await page.screenshot({
       fullPage: true,
       path: `test-results/03-0${idx}-${t.name}.png`,
diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx
index 34df68787d..2adfdb512f 100644
--- a/compiler/apps/playground/components/Editor/Input.tsx
+++ b/compiler/apps/playground/components/Editor/Input.tsx
@@ -89,6 +89,9 @@ export default function Input({errors, language}: Props): JSX.Element {
     _: editor.IStandaloneCodeEditor,
     monaco: Monaco,
   ) => void = (_, monaco) => {
+    if (typeof window !== 'undefined') {
+      window['__MONACO_LOADED__'] = true;
+    }
     setMonaco(monaco);
 
     const tscOptions = {
diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json
index 152ce0ea83..795e9525ce 100644
--- a/compiler/apps/playground/package.json
+++ b/compiler/apps/playground/package.json
@@ -12,7 +12,7 @@
     "vercel-build": "yarn build",
     "start": "next start",
     "lint": "next lint",
-    "test": "playwright test"
+    "test": "playwright test --workers=4"
   },
   "dependencies": {
     "@babel/core": "^7.18.9",