From 1efe6bfa0e906ee3890ea64c8ef35bf91209cc86 Mon Sep 17 00:00:00 2001 From: ioana forfota Date: Wed, 16 Aug 2023 13:01:56 +0000 Subject: [PATCH] Add tests for pretty-printing Json subtypes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug: 406900 Change-Id: I12a1fcf00cf9381964e36325373647a318c51ec9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4712053 Reviewed-by: Wolfgang Beyer Commit-Queue: Ioana Forfotă --- test/e2e/helpers/network-helpers.ts | 8 ++ test/e2e/helpers/sources-helpers.ts | 6 ++ test/e2e/network/BUILD.gn | 1 + .../network/can-pretty-print-network_test.ts | 90 +++++++++++++++++++ test/e2e/resources/network/BUILD.gn | 2 + .../code-with-json-subtype-request.html | 8 ++ .../network/json-subtype-ld.rawresponse | 6 ++ .../can-pretty-print-sourcecode_test.ts | 50 +++++++++++ 8 files changed, 171 insertions(+) create mode 100644 test/e2e/network/can-pretty-print-network_test.ts create mode 100644 test/e2e/resources/network/code-with-json-subtype-request.html create mode 100644 test/e2e/resources/network/json-subtype-ld.rawresponse diff --git a/test/e2e/helpers/network-helpers.ts b/test/e2e/helpers/network-helpers.ts index c929c6b85a..03c4f0aa25 100644 --- a/test/e2e/helpers/network-helpers.ts +++ b/test/e2e/helpers/network-helpers.ts @@ -132,3 +132,11 @@ export async function getTextFromHeadersRow(row: puppeteer.ElementHandle, textContent: string, selector: string): Promise { + const selectedElements = await element.evaluate((node, selector) => { + return [...node.querySelectorAll(selector)].map(node => node.textContent || '') || []; + }, selector); + return selectedElements.includes(textContent); +} diff --git a/test/e2e/helpers/sources-helpers.ts b/test/e2e/helpers/sources-helpers.ts index 8a8709af80..1ebd636a81 100644 --- a/test/e2e/helpers/sources-helpers.ts +++ b/test/e2e/helpers/sources-helpers.ts @@ -871,3 +871,9 @@ export async function retrieveCodeMirrorEditorContent(): Promise> export async function waitForLines(lineCount: number): Promise { await waitFor(new Array(lineCount).fill('.cm-line').join(' ~ ')); } + +export async function isPrettyPrinted(): Promise { + const prettyButton = await waitFor('[aria-label="Pretty print"]'); + const isPretty = await prettyButton.evaluate(e => e.ariaPressed); + return isPretty === 'true'; +} diff --git a/test/e2e/network/BUILD.gn b/test/e2e/network/BUILD.gn index 5a76b7f09b..7c4ad892a1 100644 --- a/test/e2e/network/BUILD.gn +++ b/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", diff --git a/test/e2e/network/can-pretty-print-network_test.ts b/test/e2e/network/can-pretty-print-network_test.ts new file mode 100644 index 0000000000..09f15491b0 --- /dev/null +++ b/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')); + }); + }); +}); diff --git a/test/e2e/resources/network/BUILD.gn b/test/e2e/resources/network/BUILD.gn index e6adfdec7e..41c6c36f64 100644 --- a/test/e2e/resources/network/BUILD.gn +++ b/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", diff --git a/test/e2e/resources/network/code-with-json-subtype-request.html b/test/e2e/resources/network/code-with-json-subtype-request.html new file mode 100644 index 0000000000..6d96923e74 --- /dev/null +++ b/test/e2e/resources/network/code-with-json-subtype-request.html @@ -0,0 +1,8 @@ + + diff --git a/test/e2e/resources/network/json-subtype-ld.rawresponse b/test/e2e/resources/network/json-subtype-ld.rawresponse new file mode 100644 index 0000000000..23d2f65b7b --- /dev/null +++ b/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}]} \ No newline at end of file diff --git a/test/e2e/sources/can-pretty-print-sourcecode_test.ts b/test/e2e/sources/can-pretty-print-sourcecode_test.ts index e99c5f1c84..65333fbbd6 100644 --- a/test/e2e/sources/can-pretty-print-sourcecode_test.ts +++ b/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');