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): Promise { 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",