Add tests for pretty-printing Json subtypes

Bug: 406900
Change-Id: I12a1fcf00cf9381964e36325373647a318c51ec9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4712053
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Ioana Forfotă <iforfota@google.com>

test/e2e/helpers/network-helpers.ts

@@ -132,3 +132,11 @@ export async function getTextFromHeadersRow(row: puppeteer.ElementHandle<Element
 
   return [headerNameText.trim(), headerValueText];
 }
+
+export async function elementContainsTextWithSelector(
+    element: puppeteer.ElementHandle<Element>, textContent: string, selector: string): Promise<boolean> {
+  const selectedElements = await element.evaluate((node, selector) => {
+    return [...node.querySelectorAll(selector)].map(node => node.textContent || '') || [];
+  }, selector);
+  return selectedElements.includes(textContent);
+}

test/e2e/helpers/sources-helpers.ts

@@ -871,3 +871,9 @@ export async function retrieveCodeMirrorEditorContent(): Promise<Array<string>>
 export async function waitForLines(lineCount: number): Promise<void> {
   await waitFor(new Array(lineCount).fill('.cm-line').join(' ~ '));
 }
+
+export async function isPrettyPrinted(): Promise<boolean> {
+  const prettyButton = await waitFor('[aria-label="Pretty print"]');
+  const isPretty = await prettyButton.evaluate(e => e.ariaPressed);
+  return isPretty === 'true';
+}

test/e2e/network/BUILD.gn

@@ -6,6 +6,7 @@ import("../../../third_party/typescript/typescript.gni")
 
 node_ts_library("network") {
   sources = [
+    "can-pretty-print-network_test.ts",
     "network-conditions_test.ts",
     "network-datagrid_test.ts",
     "network-filter_test.ts",

test/e2e/network/can-pretty-print-network_test.ts

@@ -0,0 +1,90 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+
+import {
+  click,
+  step,
+  waitFor,
+} from '../../shared/helper.js';
+import {
+  elementContainsTextWithSelector,
+  navigateToNetworkTab,
+  selectRequestByName,
+  waitForSomeRequestsToAppear,
+} from '../helpers/network-helpers.js';
+import {
+  isPrettyPrinted,
+  retrieveCodeMirrorEditorContent,
+} from '../helpers/sources-helpers.js';
+
+const PRETTY_PRINT_BUTTON = '[aria-label="Pretty print"]';
+
+describe('The Network Tab', function() {
+  it('can pretty print an inline json subtype file', async () => {
+    await navigateToNetworkTab('code-with-json-subtype-request.html');
+    await waitForSomeRequestsToAppear(2);
+    await selectRequestByName('json-subtype-ld.rawresponse');
+
+    const networkView = await waitFor('.network-item-view');
+    await click('#tab-headersComponent', {
+      root: networkView,
+    });
+
+    await click('[aria-label=Response][role="tab"]', {
+      root: networkView,
+    });
+    await waitFor('[aria-label=Response][role=tab][aria-selected=true]', networkView);
+
+    const editor = await waitFor('[aria-label="Code editor"]');
+
+    await step('can pretty-print a json subtype', async () => {
+      const textFromResponse = await retrieveCodeMirrorEditorContent();
+
+      const expectedTextFromResponse = [
+        '{',
+        '    "Keys": [',
+        '        {',
+        '            "Key1": "Value1",',
+        '            "Key2": "Value2",',
+        '            "Key3": true',
+        '        },',
+        '        {',
+        '            "Key1": "Value1",',
+        '            "Key2": "Value2",',
+        '            "Key3": false',
+        '        }',
+        '    ]',
+        '}',
+      ];
+
+      assert.deepStrictEqual(textFromResponse, expectedTextFromResponse);
+    });
+
+    await step('can highlight the pretty-printed text', async () => {
+      assert.isTrue(await isPrettyPrinted());
+      assert.isTrue(await elementContainsTextWithSelector(editor, '"Value1"', '.token-string'));
+
+      assert.isTrue(await elementContainsTextWithSelector(editor, 'true', '.token-atom'));
+    });
+
+    await click(PRETTY_PRINT_BUTTON);
+
+    await step('can un-pretty-print a json subtype', async () => {
+      const actualNotPrettyText = await retrieveCodeMirrorEditorContent();
+      const expectedNotPrettyText =
+          '{"Keys": [{"Key1": "Value1","Key2": "Value2","Key3": true},{"Key1": "Value1","Key2": "Value2","Key3": false}]}';
+
+      assert.strictEqual(expectedNotPrettyText, actualNotPrettyText.toString());
+    });
+
+    await step('can highlight the un-pretty-printed text', async () => {
+      assert.isFalse(await isPrettyPrinted());
+      assert.isTrue(await elementContainsTextWithSelector(editor, '"Value1"', '.token-string'));
+
+      assert.isTrue(await elementContainsTextWithSelector(editor, 'true', '.token-atom'));
+    });
+  });
+});

test/e2e/resources/network/BUILD.gn

@@ -9,6 +9,7 @@ copy_to_gen("network") {
     "cacheable.rawresponse",
     "chunked.txt",
     "chunked_sync.html",
+    "code-with-json-subtype-request.html",
     "coffees.json",
     "csp-report-only.rawresponse",
     "embedded_requests.html",
@@ -18,6 +19,7 @@ copy_to_gen("network") {
     "hello.html",
     "image.svg",
     "infinite-requests.html",
+    "json-subtype-ld.rawresponse",
     "last-modified.html",
     "last-modified.rawresponse",
     "requests.html",

test/e2e/resources/network/code-with-json-subtype-request.html

@@ -0,0 +1,8 @@
+<!--
+  Copyright 2023 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<script>
+  fetch("json-subtype-ld.rawresponse");
+</script>

test/e2e/resources/network/json-subtype-ld.rawresponse

@@ -0,0 +1,6 @@
+200
+Date: Sun, 10 Oct 2010 23:26:07 GMT
+Connection: close
+Content-Type: application/ld+json; charset=utf-8
+
+{"Keys": [{"Key1": "Value1","Key2": "Value2","Key3": true},{"Key1": "Value1","Key2": "Value2","Key3": false}]}

test/e2e/sources/can-pretty-print-sourcecode_test.ts

@@ -16,9 +16,11 @@ import {
   waitForNone,
 } from '../../shared/helper.js';
 import {beforeEach, describe, it} from '../../shared/mocha-extensions.js';
+import {elementContainsTextWithSelector} from '../helpers/network-helpers.js';
 import {openGoToLineQuickOpen} from '../helpers/quick_open-helpers.js';
 import {
   addBreakpointForLine,
+  isPrettyPrinted,
   openSourceCodeEditorForFile,
   retrieveCodeMirrorEditorContent,
   retrieveTopCallFrameScriptLocation,
@@ -88,6 +90,54 @@ describe('The Sources Tab', function() {
     });
   });
 
+  it('can pretty print an inline json subtype file', async () => {
+    await openSourceCodeEditorForFile('json-subtype-ld.rawresponse', '../network/json-subtype-ld.rawresponse');
+    const editor = await waitFor('[aria-label="Code editor"]');
+
+    await step('can pretty-print a json subtype', async () => {
+      const expectedPrettyLines = [
+        '{',
+        '    "Keys": [',
+        '        {',
+        '            "Key1": "Value1",',
+        '            "Key2": "Value2",',
+        '            "Key3": true',
+        '        },',
+        '        {',
+        '            "Key1": "Value1",',
+        '            "Key2": "Value2",',
+        '            "Key3": false',
+        '        }',
+        '    ]',
+        '}',
+      ];
+      const actualPrettyText = await retrieveCodeMirrorEditorContent();
+      assert.deepStrictEqual(expectedPrettyLines, actualPrettyText);
+    });
+
+    await step('can highlight the pretty-printed text', async () => {
+      assert.isTrue(await isPrettyPrinted());
+      assert.isTrue(await elementContainsTextWithSelector(editor, '"Value1"', '.token-string'));
+
+      assert.isTrue(await elementContainsTextWithSelector(editor, 'true', '.token-atom'));
+    });
+
+    await step('can un-pretty-print a json subtype file', async () => {
+      await click(PRETTY_PRINT_BUTTON);
+      const expectedNotPrettyLines =
+          '{"Keys": [{"Key1": "Value1","Key2": "Value2","Key3": true},{"Key1": "Value1","Key2": "Value2","Key3": false}]}';
+      const actualNotPrettyText = await retrieveCodeMirrorEditorContent();
+      assert.strictEqual(expectedNotPrettyLines, actualNotPrettyText.toString());
+    });
+
+    await step('can highlight the un-pretty-printed text', async () => {
+      assert.isFalse(await isPrettyPrinted());
+      assert.isTrue(await elementContainsTextWithSelector(editor, '"Value1"', '.token-string'));
+
+      assert.isTrue(await elementContainsTextWithSelector(editor, 'true', '.token-atom'));
+    });
+  });
+
   it('can show error icons for pretty-printed file', async () => {
     await openSourceCodeEditorForFile('minified-errors.js', 'minified-errors.html');