Preload: Make PreloadingView.test.ts work

Before this CL,

```
$ npm run test front_end/panels/application/preloading/PreloadingView.test.ts
```

didn't work. This CL fixes it.

In addition, this CL moves `await this.#getSourceText();` call in
`RuleSetDetailsView.render()`, because it prevents to call
`RenderCoordinator.write()` and `RenderCoordinator.done()` can't wait
the issued rendering correctly.

Bug: none
Change-Id: I13d39413dbda4c1805510a6d5d2663839789434c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6063701
Auto-Submit: Ken Okada <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: kenoss

front_end/panels/application/preloading/PreloadingView.test.ts

@@ -289,6 +289,10 @@ function createSummaryView(target: SDK.Target.Target): Resources.PreloadingView.
 }
 
 describeWithMockConnection('PreloadingRuleSetView', () => {
+  beforeEach(() => {
+    SDK.ChildTargetManager.ChildTargetManager.install();
+  });
+
   it('renders grid and details', async () => {
     const emulator = new NavigationEmulator();
     await emulator.openDevTools();
@@ -494,6 +498,10 @@ describeWithMockConnection('PreloadingRuleSetView', () => {
 });
 
 describeWithMockConnection('PreloadingAttemptView', () => {
+  beforeEach(() => {
+    SDK.ChildTargetManager.ChildTargetManager.install();
+  });
+
   it('renders grid and details', async () => {
     const emulator = new NavigationEmulator();
     await emulator.openDevTools();
@@ -941,6 +949,10 @@ describeWithMockConnection('PreloadingAttemptView', () => {
 });
 
 describeWithMockConnection('PreloadingSummaryView', () => {
+  beforeEach(() => {
+    SDK.ChildTargetManager.ChildTargetManager.install();
+  });
+
   it('shows information of preloading of the last page', async () => {
     const emulator = new NavigationEmulator();
     await emulator.openDevTools();
@@ -1006,6 +1018,10 @@ async function testWarnings(
 }
 
 describeWithMockConnection('PreloadingWarningsView', () => {
+  beforeEach(() => {
+    SDK.ChildTargetManager.ChildTargetManager.install();
+  });
+
   it('shows no warnings if holdback flags are disabled', async () => {
     await testWarnings(
         {

front_end/panels/application/preloading/components/RuleSetDetailsView.test.ts

@@ -32,7 +32,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
     const data = null;
 
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.isNotNull(component.shadowRoot);
     assert.strictEqual(component.shadowRoot.textContent, '');
   });
@@ -54,7 +53,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       backendNodeId: 1 as Protocol.DOM.BackendNodeId,
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
 
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
@@ -79,13 +77,12 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       requestId: 'reqeustId' as Protocol.Network.RequestId,
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
   });
 
-  it('renders invalid rule set', async () => {
+  it('renders invalid rule set, broken JSON', async () => {
     const data: Protocol.Preload.RuleSet = {
       id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,
       loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -100,14 +97,13 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       errorMessage: 'Line: 6, column: 1, Syntax error.',
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(
         component.shadowRoot?.getElementById('error-message-text')?.textContent, 'Line: 6, column: 1, Syntax error.');
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;
     assert.strictEqual(textEditor.state.doc.toString(), data.sourceText);
   });
 
-  it('renders invalid rule set', async () => {
+  it('renders invalid rule set, lacking `urls`', async () => {
     const data: Protocol.Preload.RuleSet = {
       id: 'ruleSetId:1' as Protocol.Preload.RuleSetId,
       loaderId: 'loaderId:1' as Protocol.Network.LoaderId,
@@ -125,7 +121,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       errorMessage: 'A list rule must have a "urls" array.',
     };
     const component = await renderRuleSetDetailsView(data, false);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(
         component.shadowRoot?.getElementById('error-message-text')?.textContent,
         'A list rule must have a "urls" array.');
@@ -141,7 +136,6 @@ describeWithEnvironment('RuleSetDetailsView', () => {
       backendNodeId: 1 as Protocol.DOM.BackendNodeId,
     };
     const component = await renderRuleSetDetailsView(data, true);
-    await coordinator.done({waitForWork: true});
     assert.deepEqual(component.shadowRoot?.getElementById('error-message-text')?.textContent, undefined);
 
     const textEditor = component.shadowRoot?.querySelector('devtools-text-editor') as TextEditor.TextEditor.TextEditor;

front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -45,14 +45,14 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
   }
 
   async #render(): Promise<void> {
-    const sourceText = await this.#getSourceText();
-
-    await coordinator.write('RuleSetDetailsView render', () => {
+    await coordinator.write('RuleSetDetailsView render', async () => {
       if (this.#data === null) {
         LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
         return;
       }
 
+      const sourceText = await this.#getSourceText();
+
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(html`