From 5fc835305a053c9802e3b53ce0568bd2150bbf7d Mon Sep 17 00:00:00 2001
From: Matt Bierner <matb@microsoft.com>
Date: Fri, 1 Oct 2021 12:32:29 -0700
Subject: [PATCH] Re-enable webview tests on web (#134300)

* Enable webview tests on web

These tests pass fine on Chrome and webkit. On Firefox, the two about loading resources currently fail

I spent a while trying to debug what is going on with these tests. It seems like the service workers is registered properly but `fetch` is never called on it. Skipping these for now

* Remove only

* Fix test
---
 .../src/singlefolder-tests/webview.test.ts    | 25 +++++++++++++------
 .../contrib/webview/browser/pre/main.js       |  3 +--
 test/integration/browser/src/index.ts         | 24 ++++++++++++++++++
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/extensions/vscode-api-tests/src/singlefolder-tests/webview.test.ts b/extensions/vscode-api-tests/src/singlefolder-tests/webview.test.ts
index e4063e315b6..86d3c8c22f3 100644
--- a/extensions/vscode-api-tests/src/singlefolder-tests/webview.test.ts
+++ b/extensions/vscode-api-tests/src/singlefolder-tests/webview.test.ts
@@ -17,8 +17,8 @@ function workspaceFile(...segments: string[]) {
 
 const testDocument = workspaceFile('bower.json');
 
-// Disable webview tests on web
-(vscode.env.uiKind === vscode.UIKind.Web ? suite.skip : suite)('vscode API - webview', () => {
+
+suite('vscode API - webview', () => {
 	const disposables: vscode.Disposable[] = [];
 
 	function _register<T extends vscode.Disposable>(disposable: T) {
@@ -263,15 +263,18 @@ const testDocument = workspaceFile('bower.json');
 					document.body.appendChild(img);
 				});
 
-				vscode.postMessage({ type: 'ready' });
+				vscode.postMessage({ type: 'ready', userAgent: window.navigator.userAgent });
 			</script>`);
 
 		const ready = getMessage(webview);
-		await ready;
+		if ((await ready).userAgent.indexOf('Firefox') >= 0) {
+			// Skip on firefox web for now.
+			// Firefox service workers never seem to get any 'fetch' requests here. Other browsers work fine
+			return;
+		}
 
 		{
 			const imagePath = webview.webview.asWebviewUri(workspaceFile('image.png'));
-			console.log(imagePath);
 			const response = await sendRecieveMessage(webview, { src: imagePath.toString() });
 			assert.strictEqual(response.value, true);
 		}
@@ -339,14 +342,22 @@ const testDocument = workspaceFile('bower.json');
 			<img src="${imagePath}">
 			<script>
 				const vscode = acquireVsCodeApi();
+				vscode.postMessage({ type: 'ready', userAgent: window.navigator.userAgent });
+
 				const img = document.getElementsByTagName('img')[0];
 				img.addEventListener('load', () => { vscode.postMessage({ value: true }); });
 				img.addEventListener('error', () => { vscode.postMessage({ value: false }); });
 			</script>`);
 
-		const firstResponse = getMessage(webview);
+		const ready = getMessage(webview);
+		if ((await ready).userAgent.indexOf('Firefox') >= 0) {
+			// Skip on firefox web for now.
+			// Firefox service workers never seem to get any 'fetch' requests here. Other browsers work fine
+			return;
+		}
+		const firstResponse = await sendRecieveMessage(webview, { src: imagePath.toString() });
 
-		assert.strictEqual((await firstResponse).value, true);
+		assert.strictEqual(firstResponse.value, true);
 	});
 
 	test('webviews should have real view column after they are created, #56097', async () => {
diff --git a/src/vs/workbench/contrib/webview/browser/pre/main.js b/src/vs/workbench/contrib/webview/browser/pre/main.js
index b11b2168e37..618837df8e2 100644
--- a/src/vs/workbench/contrib/webview/browser/pre/main.js
+++ b/src/vs/workbench/contrib/webview/browser/pre/main.js
@@ -198,7 +198,7 @@ function getVsCodeApiScript(allowMultipleAPIAcquire, state) {
 }
 
 /** @type {Promise<void>} */
-const workerReady = new Promise(async (resolve, reject) => {
+const workerReady = new Promise((resolve, reject) => {
 	if (!areServiceWorkersEnabled()) {
 		return reject(new Error('Service Workers are not enabled. Webviews will not work. Try disabling private/incognito mode.'));
 	}
@@ -752,7 +752,6 @@ onDomReady(() => {
 	let updateId = 0;
 	hostMessaging.onMessage('content', async (_event, /** @type {ContentUpdateData} */ data) => {
 		const currentUpdateId = ++updateId;
-
 		try {
 			await workerReady;
 		} catch (e) {
diff --git a/test/integration/browser/src/index.ts b/test/integration/browser/src/index.ts
index 31aa5523f7d..f188756f838 100644
--- a/test/integration/browser/src/index.ts
+++ b/test/integration/browser/src/index.ts
@@ -45,6 +45,16 @@ async function runTestsInBrowser(browserType: BrowserType, endpoint: url.UrlWith
 			console.error(`Playwright ERROR: HTTP status ${response.status()} for ${response.url()}`);
 		}
 	});
+	page.on('console', async msg => {
+		try {
+			consoleLogFn(msg)(msg.text(), await Promise.all(msg.args().map(async arg => await arg.jsonValue())));
+		} catch (err) {
+			console.error('Error logging console', err);
+		}
+	});
+	page.on('requestfailed', e => {
+		console.error('Request Failed', e.url(), e.failure()?.errorText);
+	});
 
 	const host = endpoint.host;
 	const protocol = 'vscode-remote';
@@ -82,6 +92,20 @@ async function runTestsInBrowser(browserType: BrowserType, endpoint: url.UrlWith
 	});
 }
 
+function consoleLogFn(msg) {
+	const type = msg.type();
+	const candidate = console[type];
+	if (candidate) {
+		return candidate;
+	}
+
+	if (type === 'warning') {
+		return console.warn;
+	}
+
+	return console.log;
+}
+
 function pkill(pid: number): Promise<void> {
 	return new Promise((c, e) => {
 		kill(pid, error => error ? e(error) : c());