[playground] Use onMount to check if the editor is available (#32586)
Playground test flakiness seems to be fixed but adding this as an extra precaution
lauren committed
Mar 12, 2025 at 18:27 UTC
5de83dcc0f34dc196664cb200088c6253cb2cd34
3 files changed
+15
-13
compiler/apps/playground/__tests__/e2e/page.spec.ts
+11
-12
@@ -9,6 +9,13 @@ import {expect, test} from '@playwright/test';
9
import {encodeStore, type Store} from '../../lib/stores';
10
import {format} from 'prettier';
11
12
+function isMonacoLoaded(): boolean {
13
+ return (
14
+ typeof window['MonacoEnvironment'] !== 'undefined' &&
15
+ window['__MONACO_LOADED__'] === true
16
+ );
17
+}
18
+
19
function formatPrint(data: Array<string>): Promise<string> {
20
return format(data.join(''), {parser: 'babel'});
21
}
@@ -105,9 +112,7 @@ function nonReactFn() {
112
113
test('editor should open successfully', async ({page}) => {
114
await page.goto(`/`, {waitUntil: 'networkidle'});
108
- await page.waitForFunction(
109
- () => typeof window['MonacoEnvironment'] !== 'undefined',
110
- );
115
+ await page.waitForFunction(isMonacoLoaded);
116
await page.screenshot({
117
fullPage: true,
118
path: 'test-results/00-fresh-page.png',
@@ -123,9 +128,7 @@ test('editor should compile from hash successfully', async ({page}) => {
128
};
129
const hash = encodeStore(store);
130
await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
126
- await page.waitForFunction(
127
- () => typeof window['MonacoEnvironment'] !== 'undefined',
128
- );
131
+ await page.waitForFunction(isMonacoLoaded);
132
133
// User input from hash compiles
134
await page.screenshot({
@@ -149,9 +152,7 @@ test('reset button works', async ({page}) => {
152
};
153
const hash = encodeStore(store);
154
await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
152
- await page.waitForFunction(
153
- () => typeof window['MonacoEnvironment'] !== 'undefined',
154
- );
155
+ await page.waitForFunction(isMonacoLoaded);
156
157
// Reset button works
158
page.on('dialog', dialog => dialog.accept());
@@ -175,9 +176,7 @@ TEST_CASE_INPUTS.forEach((t, idx) =>
176
};
177
const hash = encodeStore(store);
178
await page.goto(`/#${hash}`, {waitUntil: 'networkidle'});
178
- await page.waitForFunction(
179
- () => typeof window['MonacoEnvironment'] !== 'undefined',
180
- );
179
+ await page.waitForFunction(isMonacoLoaded);
180
await page.screenshot({
181
fullPage: true,
182
path: `test-results/03-0${idx}-${t.name}.png`,
compiler/apps/playground/components/Editor/Input.tsx
+3
@@ -89,6 +89,9 @@ export default function Input({errors, language}: Props): JSX.Element {
89
_: editor.IStandaloneCodeEditor,
90
monaco: Monaco,
91
) => void = (_, monaco) => {
92
+ if (typeof window !== 'undefined') {
93
+ window['__MONACO_LOADED__'] = true;
94
+ }
95
setMonaco(monaco);
96
97
const tscOptions = {
compiler/apps/playground/package.json
+1
-1
@@ -12,7 +12,7 @@
12
"vercel-build": "yarn build",
13
"start": "next start",
14
"lint": "next lint",
15
- "test": "playwright test"
15
+ "test": "playwright test --workers=4"
16
},
17
"dependencies": {
18
"@babel/core": "^7.18.9",