Refactor BounceTrackingMitigationsView's tests

Finish fixing UI Engineering Vision violations in the tests by
separating view and presenter tests.

Bug: 407749385
Change-Id: I0017a1adb303524b113d26ba375515048d1cba48
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7229143
Reviewed-by: Danil Somsikov <[email protected]>
Auto-Submit: Piotr Paulski <[email protected]>
Commit-Queue: Piotr Paulski <[email protected]>

Author: Piotr Paulski

front_end/panels/application/components/BounceTrackingMitigationsView.test.ts

@@ -2,154 +2,153 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {getValuesOfAllBodyRows} from '../../../testing/DataGridHelpers.js';
 import {
   assertScreenshot,
-  dispatchClickEvent,
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 import {createTarget} from '../../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
   setMockConnectionResponseHandler,
 } from '../../../testing/MockConnection.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import {createViewFunctionStub} from '../../../testing/ViewFunctionHelpers.js';
 
 import * as ApplicationComponents from './components.js';
-
-async function renderBounceTrackingMitigationsView():
-    Promise<ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView> {
-  const element = document.createElement('div');
-  element.style.display = 'block';
-  element.style.width = '640px';
-  element.style.height = '480px';
-  const component = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView(element);
-  renderElementIntoDOM(component);
-
-  await component.updateComplete;
-  // The data-grid's renderer is scheduled, so we need to wait until the coordinator
-  // is done before we can test against it.
-  await RenderCoordinator.done();
-
-  return component;
-}
-
-function getInternalDataGridShadowRoot(
-    component: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView): ShadowRoot {
-  const dataGrid = component.element.shadowRoot!.querySelector('devtools-data-grid')!;
-  assert.isNotNull(dataGrid.shadowRoot);
-  return dataGrid.shadowRoot;
-}
+const {BounceTrackingMitigationsView, DEFAULT_VIEW, ScreenStatusType} =
+    ApplicationComponents.BounceTrackingMitigationsView;
 
 describeWithMockConnection('BounceTrackingMitigationsView', () => {
   it('shows no message or table if the force run button has not been clicked', async () => {
     createTarget();
     setMockConnectionResponseHandler('SystemInfo.getFeatureState', () => ({featureEnabled: true}));
     setMockConnectionResponseHandler('Storage.runBounceTrackingMitigations', () => ({deletedSites: []}));
 
-    const component = await renderBounceTrackingMitigationsView();
-    await RenderCoordinator.done();
-    await component.updateComplete;
-
-    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
-    assert.isNull(nullGridElement);
-
-    await assertScreenshot('application/bounce-tracking-mitigations-view-initial.png');
+    const view = createViewFunctionStub(BounceTrackingMitigationsView);
+    new BounceTrackingMitigationsView(undefined, view);
 
-    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
-    const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
-    const expected = [
-      'Force run',
-      'Learn more: Bounce Tracking Mitigations',
-    ];
+    await view.nextInput;
 
-    assert.deepEqual(sectionsText, expected);
+    assert.strictEqual(view.input.screenStatus, ScreenStatusType.RESULT);
+    assert.isFalse(view.input.seenButtonClick);
+    assert.lengthOf(view.input.trackingSites, 0);
   });
 
   it('shows a message indicating that Bounce Tracking Mitigations are disabled', async () => {
     createTarget();
     setMockConnectionResponseHandler('SystemInfo.getFeatureState', () => ({featureEnabled: false}));
 
-    const component = await renderBounceTrackingMitigationsView();
-    await RenderCoordinator.done();
-    await component.updateComplete;
-
-    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
-    assert.isNull(nullGridElement);
-
-    await assertScreenshot('application/bounce-tracking-mitigations-view-disabled.png');
+    const view = createViewFunctionStub(BounceTrackingMitigationsView);
+    new BounceTrackingMitigationsView(undefined, view);
 
-    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
-    const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
-    const expected = [
-      'Bounce tracking mitigations are disabled.',
-    ];
+    await view.nextInput;
 
-    assert.deepEqual(sectionsText, expected);
+    assert.strictEqual(view.input.screenStatus, ScreenStatusType.DISABLED);
+    assert.isFalse(view.input.seenButtonClick);
+    assert.lengthOf(view.input.trackingSites, 0);
   });
 
-  it('hides deleted sites table and shows explanation message when there are no deleted tracking sites', async () => {
+  async function testForceRunClick(deletedSites: string[]) {
+    const {promise: lock, resolve: freeLock} = Promise.withResolvers();
     createTarget();
     setMockConnectionResponseHandler('SystemInfo.getFeatureState', () => ({featureEnabled: true}));
     const runBounceTrackingMitigationsPromise = new Promise(resolve => {
-      setMockConnectionResponseHandler('Storage.runBounceTrackingMitigations', () => {
+      setMockConnectionResponseHandler('Storage.runBounceTrackingMitigations', async () => {
+        await lock;
         resolve(undefined);
-        return {deletedSites: []};
+        return {deletedSites};
       });
     });
 
-    const component = await renderBounceTrackingMitigationsView();
-    await RenderCoordinator.done();
-    await component.updateComplete;
+    const view = createViewFunctionStub(BounceTrackingMitigationsView);
+    new BounceTrackingMitigationsView(undefined, view);
 
-    const forceRunButton = component.element.shadowRoot!.querySelector('[aria-label="Force run"]');
-    assert.instanceOf(forceRunButton, HTMLElement);
-    dispatchClickEvent(forceRunButton);
-    await runBounceTrackingMitigationsPromise;
+    await view.nextInput;
 
-    await RenderCoordinator.done();
-    await component.updateComplete;
+    assert.isFunction(view.input.runMitigations);
 
-    await assertScreenshot('application/bounce-tracking-mitigations-view-empty.png');
+    const runMitigationsPromise = view.input.runMitigations();
+    await view.nextInput;
+
+    assert.strictEqual(view.input.screenStatus, ScreenStatusType.RUNNING);
 
-    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
-    assert.isNull(nullGridElement);
+    freeLock(undefined);
+    await Promise.all([runMitigationsPromise, runBounceTrackingMitigationsPromise]);
+    await view.nextInput;
 
-    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
-    const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
-    const expected = [
-      'Force run',
-      'State was not cleared for any potential bounce tracking sites. Either none were identified or third-party cookies are not blocked.',
-      'Learn more: Bounce Tracking Mitigations',
-    ];
+    assert.strictEqual(view.input.screenStatus, ScreenStatusType.RESULT);
+    assert.isTrue(view.input.seenButtonClick);
+    assert.deepEqual(view.input.trackingSites, deletedSites);
+  }
 
-    assert.deepEqual(sectionsText, expected);
+  it('hides deleted sites table and shows explanation message when there are no deleted tracking sites', async () => {
+    await testForceRunClick([]);
   });
 
   it('renders deleted sites in a table', async () => {
-    createTarget();
-    setMockConnectionResponseHandler('SystemInfo.getFeatureState', () => ({featureEnabled: true}));
-    setMockConnectionResponseHandler(
-        'Storage.runBounceTrackingMitigations', () => ({deletedSites: ['tracker-1.example', 'tracker-2.example']}));
+    await testForceRunClick(['tracker-1.example', 'tracker-2.example']);
+  });
 
-    const component = await renderBounceTrackingMitigationsView();
-    await RenderCoordinator.done();
-    await component.updateComplete;
+  const createElement = () => {
+    const element = document.createElement('div');
+    element.style.display = 'block';
+    element.style.width = '640px';
+    element.style.height = '480px';
+    renderElementIntoDOM(element);
+
+    return element;
+  };
+
+  const INITIAL_INPUT = {
+    screenStatus: ScreenStatusType.INITIALIZING,
+    trackingSites: [],
+    seenButtonClick: false,
+    runMitigations: () => Promise.resolve(),
+  };
+
+  it('renders initial state', async () => {
+    DEFAULT_VIEW(
+        {
+          ...INITIAL_INPUT,
+          screenStatus: ScreenStatusType.RESULT,
+        },
+        undefined, createElement());
 
-    const forceRunButton = component.element.shadowRoot!.querySelector('[aria-label="Force run"]');
-    assert.instanceOf(forceRunButton, HTMLElement);
-    dispatchClickEvent(forceRunButton);
+    await assertScreenshot('application/bounce-tracking-mitigations-view-initial.png');
+  });
 
-    await RenderCoordinator.done({waitForWork: true});
-    await component.updateComplete;
+  it('renders disabled state', async () => {
+    DEFAULT_VIEW(
+        {
+          ...INITIAL_INPUT,
+          screenStatus: ScreenStatusType.DISABLED,
+        },
+        undefined, createElement());
 
-    await assertScreenshot('application/bounce-tracking-mitigations-view-populated.png');
+    await assertScreenshot('application/bounce-tracking-mitigations-view-disabled.png');
+  });
 
-    const dataGridShadowRoot = getInternalDataGridShadowRoot(component);
-    const rowValues = getValuesOfAllBodyRows(dataGridShadowRoot);
-    assert.deepEqual(rowValues, [
-      ['tracker-1.example'],
-      ['tracker-2.example'],
-    ]);
+  it('renders empty state', async () => {
+    DEFAULT_VIEW(
+        {
+          ...INITIAL_INPUT,
+          screenStatus: ScreenStatusType.RESULT,
+          seenButtonClick: true,
+        },
+        undefined, createElement());
+
+    await assertScreenshot('application/bounce-tracking-mitigations-view-empty.png');
+  });
+
+  it('renders populated state', async () => {
+    DEFAULT_VIEW(
+        {
+          ...INITIAL_INPUT,
+          screenStatus: ScreenStatusType.RESULT,
+          trackingSites: ['tracker-1.example', 'tracker-2.example'],
+          seenButtonClick: true,
+        },
+        undefined, createElement());
+
+    await assertScreenshot('application/bounce-tracking-mitigations-view-populated.png');
   });
 });

front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -57,7 +57,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BounceTrackingMitigationsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const enum ScreenStatusType {
+export const enum ScreenStatusType {
   INITIALIZING = 'Initializing',
   RUNNING = 'Running',
   RESULT = 'Result',