From 26bca0005c7ef82a733c23f08baa1e2b8d702ec9 Mon Sep 17 00:00:00 2001
From: lauren <poteto@users.noreply.github.com>
Date: Wed, 12 Mar 2025 17:47:24 -0400
Subject: [PATCH] [playground] Wait for Monaco to fully load (#32584)

I'm not sure what exactly is causing the flakiness in the playground e2e
tests but I suspect it's some kind of timing issue.

Let's try waiting for Monaco to be fully initialized before running
tests.
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32584).
* __->__ #32584
* #32583
---
 compiler/apps/playground/__tests__/e2e/page.spec.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts
index 3ba082cf62..e2700e006a 100644
--- a/compiler/apps/playground/__tests__/e2e/page.spec.ts
+++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts
@@ -105,6 +105,9 @@ function nonReactFn() {
 
 test('editor should open successfully', async ({page}) => {
   await page.goto(`/`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(
+    () => typeof window['MonacoEnvironment'] !== 'undefined',
+  );
   await page.screenshot({
     fullPage: true,
     path: 'test-results/00-fresh-page.png',
@@ -120,6 +123,9 @@ 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',
+  );
 
   // User input from hash compiles
   await page.screenshot({
@@ -143,6 +149,9 @@ test('reset button works', async ({page}) => {
   };
   const hash = encodeStore(store);
   await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
+  await page.waitForFunction(
+    () => typeof window['MonacoEnvironment'] !== 'undefined',
+  );
 
   // Reset button works
   page.on('dialog', dialog => dialog.accept());
@@ -166,6 +175,9 @@ 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.screenshot({
       fullPage: true,
       path: `test-results/03-0${idx}-${t.name}.png`,