Fix functional tests for ipywidgets and download just chrome b… (#11093)

For #11092

playwright downloads other browsers, we need just one chrome (as this is closest to what VSCode is built upon)

Author: DonJayamanne

package-lock.json

@@ -3184,7 +3184,7 @@
         "node-has-native-dependencies": "^1.0.2",
         "node-html-parser": "^1.1.13",
         "nyc": "^15.0.0",
-        "playwright": "^0.11.1",
+        "playwright-chromium": "^0.13.0",
         "postcss": "^7.0.27",
         "postcss-cssnext": "^3.1.0",
         "postcss-import": "^12.0.1",

package.json

@@ -105,6 +105,7 @@ import { ProductService } from '../../client/common/installer/productService';
 import { IInstallationChannelManager, IProductPathService, IProductService } from '../../client/common/installer/types';
 import { InterpreterPathService } from '../../client/common/interpreterPathService';
 import { BrowserService } from '../../client/common/net/browser';
+import { HttpClient } from '../../client/common/net/httpClient';
 import { IS_WINDOWS } from '../../client/common/platform/constants';
 import { PathUtils } from '../../client/common/platform/pathUtils';
 import { RegistryImplementation } from '../../client/common/platform/registry';
@@ -145,6 +146,7 @@ import {
     IExperimentsManager,
     IExtensionContext,
     IExtensions,
+    IHttpClient,
     IInstaller,
     IInterpreterPathService,
     IMemento,
@@ -192,6 +194,7 @@ import { InteractiveWindow } from '../../client/datascience/interactive-window/i
 import { InteractiveWindowCommandListener } from '../../client/datascience/interactive-window/interactiveWindowCommandListener';
 import { IPyWidgetHandler } from '../../client/datascience/ipywidgets/ipywidgetHandler';
 import { IPyWidgetMessageDispatcherFactory } from '../../client/datascience/ipywidgets/ipyWidgetMessageDispatcherFactory';
+import { IPyWidgetScriptSource } from '../../client/datascience/ipywidgets/ipyWidgetScriptSource';
 import { JupyterCommandFactory } from '../../client/datascience/jupyter/interpreter/jupyterCommand';
 import { JupyterCommandFinder } from '../../client/datascience/jupyter/interpreter/jupyterCommandFinder';
 import { JupyterCommandInterpreterDependencyService } from '../../client/datascience/jupyter/interpreter/jupyterCommandInterpreterDependencyService';
@@ -535,6 +538,8 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
         when(this.webPanelProvider.create(anything())).thenCall(this.onCreateWebPanel.bind(this));
         if (this.uiTest) {
             this.serviceManager.addSingleton<IWebPanelProvider>(IWebPanelProvider, WebBrowserPanelProvider);
+            this.serviceManager.add<IInteractiveWindowListener>(IInteractiveWindowListener, IPyWidgetScriptSource);
+            this.serviceManager.addSingleton<IHttpClient>(IHttpClient, HttpClient);
         } else {
             this.serviceManager.addSingletonInstance<IWebPanelProvider>(
                 IWebPanelProvider,
@@ -622,6 +627,7 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
         );
         const mockExtensionContext = TypeMoq.Mock.ofType<IExtensionContext>();
         mockExtensionContext.setup((m) => m.globalStoragePath).returns(() => os.tmpdir());
+        mockExtensionContext.setup((m) => m.extensionPath).returns(() => os.tmpdir());
         this.serviceManager.addSingletonInstance<IExtensionContext>(IExtensionContext, mockExtensionContext.object);
 
         const mockServerSelector = mock(JupyterServerSelector);
@@ -1403,7 +1409,7 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
             variableQueries: [],
             jupyterCommandLineArguments: [],
             disableJupyterAutoStart: true,
-            widgetScriptSources: []
+            widgetScriptSources: ['jsdelivr.com', 'unpkg.com']
         };
         pythonSettings.jediEnabled = false;
         pythonSettings.downloadLanguageServer = false;

src/test/datascience/dataScienceIocContainer.ts

@@ -4,7 +4,7 @@
 
 import * as fs from 'fs-extra';
 import * as path from 'path';
-import * as playwright from 'playwright';
+import * as playwright from 'playwright-chromium';
 import { IAsyncDisposable, IDisposable } from '../../../client/common/types';
 import { createDeferred } from '../../../client/common/utils/async';
 import { InteractiveWindowMessages } from '../../../client/datascience/interactive-common/interactiveWindowTypes';
@@ -35,7 +35,7 @@ const maxWaitTimeForMessage = 75_000;
  * UI could take a while to update, could be slower on CI server.
  * (500ms is generally enough, but increasing to 3s to avoid flaky CI tests).
  */
-export const waitTimeForUIToUpdate = 5_000;
+export const waitTimeForUIToUpdate = 10_000;
 
 export class BaseWebUI implements IAsyncDisposable {
     public page?: playwright.Page;

src/test/datascience/uiTests/helpers.ts

@@ -441,12 +441,12 @@ use(chaiAsPromised);
 
                 // Confirm canvas is rendered.
                 await retryIfFail(async () => {
-                    const cellOutputHtml = await notebookUI.getCellOutputHTML(3);
+                    let cellOutputHtml = await notebookUI.getCellOutputHTML(3);
                     assert.include(cellOutputHtml, '<canvas ');
                     // Last cell is flakey. Can take too long to render. We need some way
                     // to know when a widget is done rendering.
-                    // cellOutputHtml = await notebookUI.getCellOutputHTML(8);
-                    // assert.include(cellOutputHtml, '<canvas ');
+                    cellOutputHtml = await notebookUI.getCellOutputHTML(8);
+                    assert.include(cellOutputHtml, '<canvas ');
                 });
             });
             test('Render beakerx', async () => {
@@ -478,13 +478,13 @@ use(chaiAsPromised);
                 });
 
                 // This last part if flakey. BeakerX can fail itself loading settings
-                // await notebookUI.executeCell(3);
-                // await retryIfFail(async () => {
-                //     // Confirm form with fields have been rendered.
-                //     const cellOutput = await notebookUI.getCellOutput(3);
-                //     const textAreas = await cellOutput.$$('div.widget-textarea');
-                //     assert.isAtLeast(textAreas.length, 1);
-                // });
+                await notebookUI.executeCell(3);
+                await retryIfFail(async () => {
+                    // Confirm form with fields have been rendered.
+                    const cellOutput = await notebookUI.getCellOutput(3);
+                    const textAreas = await cellOutput.$$('div.widget-textarea');
+                    assert.isAtLeast(textAreas.length, 1);
+                });
             });
             test('Render bqplot', async () => {
                 const { notebookUI } = await openBqplotIpynb();

src/test/datascience/uiTests/ipywidget.ui.functional.test.ts

@@ -4,7 +4,7 @@
 'use strict';
 
 import { assert } from 'chai';
-import { ElementHandle } from 'playwright';
+import { ElementHandle } from 'playwright-chromium';
 import { InteractiveWindowMessages } from '../../../client/datascience/interactive-common/interactiveWindowTypes';
 import { CommonActionType } from '../../../datascience-ui/interactive-common/redux/reducers/types';
 import { BaseWebUI } from './helpers';