Use the view function in the unit tests

Bug: 407749531
Change-Id: Ib0cf3f79aafe0447d5cd034d8036f7850248d147
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7228243
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>

Author: danilsomsikov

front_end/panels/application/AppManifestView.test.ts

@@ -2,13 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createViewFunctionStub, type ViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
@@ -21,18 +21,15 @@ describeWithMockConnection('AppManifestView', () => {
   const FIXTURES_640X320_URL = `${new URL('./fixtures/640x320.png', import.meta.url)}`;
 
   let target: SDK.Target.Target;
-  let emptyView: UI.EmptyWidget.EmptyWidget;
-  let reportView: UI.ReportView.ReportView;
-  let throttler: Common.Throttler.Throttler;
   let view: Application.AppManifestView.AppManifestView;
+  let viewFunction: ViewFunctionStub<typeof Application.AppManifestView.AppManifestView>;
+
   beforeEach(() => {
     stubNoopSettings();
     const tabTarget = createTarget({type: SDK.Target.Type.TAB});
     createTarget({parentTarget: tabTarget, subtype: 'prerender'});
     target = createTarget({parentTarget: tabTarget});
-    emptyView = new UI.EmptyWidget.EmptyWidget('', '');
-    reportView = new UI.ReportView.ReportView('');
-    throttler = new Common.Throttler.Throttler(0);
+    viewFunction = createViewFunctionStub(Application.AppManifestView.AppManifestView);
   });
 
   afterEach(() => {
@@ -51,28 +48,22 @@ describeWithMockConnection('AppManifestView', () => {
     sinon.stub(resourceTreeModel, 'getInstallabilityErrors').resolves([]);
     sinon.stub(resourceTreeModel, 'getAppId').resolves({} as Protocol.Page.GetAppIdResponse);
 
-    view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
+    view = new Application.AppManifestView.AppManifestView(viewFunction);
     renderElementIntoDOM(view);
 
-    await new Promise(resolve => {
-      view.addEventListener(Application.AppManifestView.Events.MANIFEST_DETECTED, resolve, {once: true});
-    });
-    assert.isTrue(emptyView.isShowing());
-    assert.isFalse(reportView.isShowing());
+    await viewFunction.nextInput;
+    assert.isTrue(viewFunction.input.emptyView.isShowing());
+    assert.isFalse(viewFunction.input.reportView.isShowing());
 
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.DOMContentLoaded, 42);
-    await new Promise(resolve => {
-      view.addEventListener(Application.AppManifestView.Events.MANIFEST_DETECTED, resolve, {once: true});
-    });
-    assert.isTrue(emptyView.isShowing());
-    assert.isFalse(reportView.isShowing());
+    await viewFunction.nextInput;
+    assert.isTrue(viewFunction.input.emptyView.isShowing());
+    assert.isFalse(viewFunction.input.reportView.isShowing());
 
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.DOMContentLoaded, 42);
-    await new Promise(resolve => {
-      view.addEventListener(Application.AppManifestView.Events.MANIFEST_DETECTED, resolve, {once: true});
-    });
-    assert.isFalse(emptyView.isShowing());
-    assert.isTrue(reportView.isShowing());
+    await viewFunction.nextInput;
+    assert.isFalse(viewFunction.input.emptyView.isShowing());
+    assert.isTrue(viewFunction.input.reportView.isShowing());
   });
 
   it('shows pwa wco if available', async () => {
@@ -86,21 +77,17 @@ describeWithMockConnection('AppManifestView', () => {
     sinon.stub(resourceTreeModel, 'getInstallabilityErrors').resolves([]);
     sinon.stub(resourceTreeModel, 'getAppId').resolves({} as Protocol.Page.GetAppIdResponse);
 
-    view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
+    view = new Application.AppManifestView.AppManifestView(viewFunction);
     renderElementIntoDOM(view);
 
     resourceTreeModel.dispatchEventToListeners(SDK.ResourceTreeModel.Events.DOMContentLoaded, 42);
-    await new Promise(resolve => {
-      view.addEventListener(Application.AppManifestView.Events.MANIFEST_RENDERED, resolve, {once: true});
-    });
+    const {windowControlsData} = await viewFunction.nextInput;
 
-    const manifestSections = view.getStaticSections();
-    const values = getCleanTextContentFromElements(manifestSections[4].getFieldElement(), '.wco');
-    assert.deepEqual(values, ['window-controls-overlay']);
+    assert.isTrue(windowControlsData?.hasWco);
   });
 
   it('can parse ‘sizes’-field', async () => {
-    view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
+    view = new Application.AppManifestView.AppManifestView(viewFunction);
     const parsed =
         view.parseSizes('512x512', 'Icon' as Platform.UIString.LocalizedString, 'https://web.dev/image.html', []);
     const expected = [{
@@ -112,7 +99,7 @@ describeWithMockConnection('AppManifestView', () => {
   });
 
   it('can handle missing ‘sizes’-field', async () => {
-    view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
+    view = new Application.AppManifestView.AppManifestView(viewFunction);
     const parsed = view.parseSizes(
         undefined as unknown as string, 'Icon' as Platform.UIString.LocalizedString, 'https://web.dev/image.html', []);
     assert.deepEqual(parsed, []);
@@ -141,18 +128,12 @@ describeWithMockConnection('AppManifestView', () => {
       }
     });
 
-    view = new Application.AppManifestView.AppManifestView(emptyView, reportView, throttler);
+    view = new Application.AppManifestView.AppManifestView(viewFunction);
     renderElementIntoDOM(view);
 
-    await new Promise(resolve => {
-      view.addEventListener(Application.AppManifestView.Events.MANIFEST_RENDERED, resolve, {once: true});
-    });
+    const {warnings, errors, imageErrors} = await viewFunction.nextInput;
 
-    const warningSection = reportView.element.shadowRoot?.querySelector('.report-section');
-    assert.exists(warningSection);
-    const warnings = warningSection.querySelectorAll<HTMLDivElement>('.report-row');
-    assert.exists(warnings);
-    return Array.from(warnings).map(warning => warning.textContent || '');
+    return [...warnings ?? [], ...errors?.map(error => error.message) ?? [], ...imageErrors ?? []];
   }
 
   it('displays warnings for too many shortcuts and not enough screenshots', async () => {
@@ -307,21 +288,38 @@ describeWithMockConnection('AppManifestView', () => {
   });
 
   it('displays "form-factor", "platform" and "label" properties for screenshots', async () => {
-    await renderWithWarnings(`{
-        "screenshots": [
-          {
-            "src": "${FIXTURES_320X320_URL}",
-            "type": "image/png",
-            "sizes": "320x320",
-            "form_factor": "wide",
-            "label": "Dummy Screenshot",
-            "platform": "windows"
+    const emptyView = new UI.EmptyWidget.EmptyWidget('', '');
+    const reportView = new UI.ReportView.ReportView('');
+    const viewInput = {
+      reportView,
+      emptyView,
+      screenshotsSections: [],
+      screenshotsData: {
+        screenshots: [{
+          screenshot: {
+            src: FIXTURES_320X320_URL,
+            type: 'image/png',
+            sizes: '320x320',
+            form_factor: 'wide',
+            label: 'Dummy Screenshot',
+            platform: 'windows'
+          },
+          processedImage: {
+            imageResourceErrors: [],
+            squareSizedIconAvailable: true,
+            naturalWidth: 320,
+            naturalHeight: 320,
+            title: '320×320px\nimage/png',
+            imageSrc: '',
+            imageUrl: FIXTURES_320X320_URL,
           }
-        ]
-      }`);
-
-    const screenshotSection =
-        reportView.element.shadowRoot?.querySelectorAll<HTMLDivElement>('.report-section')[7] || null;
+        }],
+        imageResourceErrors: [],
+        warnings: [],
+      }
+    };
+    Application.AppManifestView.DEFAULT_VIEW(viewInput, undefined, viewInput.reportView.element);
+    const screenshotSection = reportView.element.shadowRoot?.querySelector<HTMLDivElement>('.report-section') || null;
     assert.instanceOf(screenshotSection, HTMLDivElement);
     assert.deepEqual(
         getCleanTextContentFromElements(screenshotSection, '.report-field-name').slice(0, 3),

front_end/panels/application/AppManifestView.ts

@@ -22,6 +22,19 @@ import appManifestViewStyles from './appManifestView.css.js';
 import * as ApplicationComponents from './components/components.js';
 
 const UIStrings = {
+  /**
+   * @description Text in App Manifest View of the Application panel
+   */
+  noManifestDetected: 'No manifest detected',
+  /**
+   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
+   */
+  manifestDescription:
+      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
+  /**
+   * @description Text in App Manifest View of the Application panel
+   */
+  appManifest: 'Manifest',
   /**
    * @description Text in App Manifest View of the Application panel
    */
@@ -1047,7 +1060,7 @@ interface ViewInput {
 
 type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-const DEFAULT_VIEW: View = (input, _output, _target) => {
+export const DEFAULT_VIEW: View = (input, _output, _target) => {
   const {
     reportView,
     errorsSection,
@@ -1117,7 +1130,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly protocolHandlersSection: UI.ReportView.Section;
   private readonly shortcutSections: UI.ReportView.Section[];
   private readonly screenshotsSections: UI.ReportView.Section[];
-  private readonly throttler: Common.Throttler.Throttler;
   private registeredListeners: Common.EventTarget.EventDescriptor[];
   private target?: SDK.Target.Target;
   private resourceTreeModel?: SDK.ResourceTreeModel.ResourceTreeModel|null;
@@ -1132,9 +1144,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private wcoToolbarEnabled = false;
   private readonly view: View;
 
-  constructor(
-      emptyView: UI.EmptyWidget.EmptyWidget, reportView: UI.ReportView.ReportView,
-      throttler: Common.Throttler.Throttler, view: View = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.pane('manifest')}`,
       useShadowDom: true,
@@ -1144,13 +1154,14 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     this.contentElement.classList.add('manifest-container');
 
-    this.emptyView = emptyView;
+    this.emptyView = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
     this.emptyView.link = 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString;
 
     this.emptyView.show(this.contentElement);
     this.emptyView.hideWidget();
 
-    this.reportView = reportView;
+    this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
     this.reportView.registerRequiredCSS(appManifestViewStyles);
     this.reportView.element.classList.add('manifest-view-header');
     this.reportView.show(this.contentElement);
@@ -1173,7 +1184,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.shortcutSections = [];
     this.screenshotsSections = [];
 
-    this.throttler = throttler;
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
     this.registeredListeners = [];
 
@@ -1357,8 +1367,6 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
           onToggleWcoToolbar,
         },
         undefined, this.contentElement);
-
-    this.dispatchEventToListeners(Events.MANIFEST_RENDERED);
   }
 
   private stringProperty(parsedManifest: Manifest, name: keyof Manifest): string {
@@ -1765,10 +1773,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
 export const enum Events {
   MANIFEST_DETECTED = 'ManifestDetected',
-  MANIFEST_RENDERED = 'ManifestRendered',
 }
 
 export interface EventTypes {
   [Events.MANIFEST_DETECTED]: boolean;
-  [Events.MANIFEST_RENDERED]: void;
 }

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -176,19 +176,6 @@ const UIStrings = {
    * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  noManifestDetected: 'No manifest detected',
-  /**
-   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
-   */
-  manifestDescription:
-      'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
-  /**
-   * @description Text in App Manifest View of the Application panel
-   */
-  appManifest: 'Manifest',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -1156,10 +1143,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    const emptyView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
-    const reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
-    this.view = new AppManifestView(emptyView, reportView, new Common.Throttler.Throttler(1000));
+    this.view = new AppManifestView();
     UI.ARIAUtils.setLabel(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));
     const handleExpansion = (hasManifest: boolean): void => {
       this.setExpandable(hasManifest);