Migrate test/e2e/application/shared-storage_test.ts

Fixed: 416405361, 40282697
Change-Id: Ic0ccefdbfef99483483df48f2584a63b0299a50c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6870372
Commit-Queue: Liviu Rau <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: Liviu Rau

test/e2e/BUILD.gn

@@ -15,7 +15,6 @@ group("e2e") {
 
 node_ts_library("tests") {
   deps = [
-    "application",
     "console",
     "extensions",
     "lighthouse",

test/e2e/application/BUILD.gn

@@ -3,14 +3,10 @@
 // found in the LICENSE file.
 
 import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
-import {
-  click,
-  getTestServerPort,
-  waitFor,
-} from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 import {getDataGridRows} from './datagrid-helpers.js';
+import {openCommandMenu} from './quick_open-helpers.js';
 import {expectVeEvents, veChange, veClick, veImpression, veImpressionsUnder} from './visual-logging-helpers.js';
 
 export async function navigateToApplicationTab(
@@ -21,12 +17,13 @@ export async function navigateToApplicationTab(
   await inspectedPage.bringToFront();
   await inspectedPage.goToResource(`application/${testName}.html`);
   await devToolsPage.bringToFront();
-  await devToolsPage.click('#tab-resources');
+  await openCommandMenu(devToolsPage);
+  await devToolsPage.typeText('Application');
+  await devToolsPage.page.keyboard.press('Enter');
+  await devToolsPage.waitFor('#tab-resources');
   // Make sure the application navigation list is shown
   await devToolsPage.waitFor('.storage-group-list-item');
-  await expectVeEvents(
-      [veClick('Toolbar: main > PanelTabHeader: resources'), veImpressionForApplicationPanel()], undefined,
-      devToolsPage);
+  await expectVeEvents([veImpressionForApplicationPanel()], undefined, devToolsPage);
 }
 
 export async function navigateToServiceWorkers(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
@@ -52,12 +49,6 @@ export async function navigateToFrame(name: string, devToolsPage: DevToolsPage)
       undefined, devToolsPage);
 }
 
-export async function navigateToManifestInApplicationTab(testName: string) {
-  const MANIFEST_SELECTOR = '[aria-label="Manifest"]';
-  await navigateToApplicationTab(testName);
-  await click(MANIFEST_SELECTOR);
-}
-
 export async function navigateToStorage(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
   const STORAGE_SELECTOR = '[aria-label="Storage"]';
   await devToolsPage.click(STORAGE_SELECTOR);
@@ -178,25 +169,32 @@ export async function navigateToSessionStorageForTopDomain(
 
 const SHARED_STORAGE_SELECTOR = '[aria-label="Shared storage"].parent';
 
-export async function navigateToSharedStorage() {
-  await doubleClickTreeItem(SHARED_STORAGE_SELECTOR);
-  await waitFor('devtools-shared-storage-access-grid');
-  await expectVeEvents([
-    veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage'),
-    veImpressionsUnder(
-        'Panel: resources', [veImpression('Pane', 'shared-storage-events', [veImpression('Section', 'events-table')])]),
-  ]);
+export async function navigateToSharedStorage(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await doubleClickTreeItem(SHARED_STORAGE_SELECTOR, devToolsPage);
+  await devToolsPage.waitFor('.empty-state');
+
+  await expectVeEvents(
+      [
+        veImpressionsUnder(
+            'Panel: resources', [veImpression('Pane', 'manifest', [veImpression('Section', 'empty-view')])]),
+      ],
+      undefined, devToolsPage);
 }
 
-export async function navigateToSharedStorageForTopDomain() {
-  await navigateToSharedStorage();
-  const DOMAIN_SELECTOR = `${SHARED_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`;
-  await doubleClickTreeItem(DOMAIN_SELECTOR);
-  await expectVeEvents([
-    veClick(
-        'Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage > TreeItem: shared-storage-instance'),
-    veImpressionsUnder('Panel: resources', [veImpressionForSharedStorageView()]),
-  ]);
+export async function navigateToSharedStorageForTopDomain(
+    devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
+    inspectedPage = getBrowserAndPagesWrappers().inspectedPage,
+) {
+  await navigateToSharedStorage(devToolsPage);
+  const DOMAIN_SELECTOR = `${SHARED_STORAGE_SELECTOR} + ol > [aria-label="${inspectedPage.domain()}"]`;
+  await doubleClickTreeItem(DOMAIN_SELECTOR, devToolsPage);
+  await expectVeEvents(
+      [
+        veClick(
+            'Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage > TreeItem: shared-storage-instance'),
+        veImpressionsUnder('Panel: resources', [veImpressionForSharedStorageView()]),
+      ],
+      undefined, devToolsPage);
 }
 
 async function doubleClickTreeItem(selector: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
@@ -239,7 +237,7 @@ export async function getFrameTreeTitles(devToolsPage: DevToolsPage) {
 export async function getStorageItemsData(
     columns: string[], leastExpected = 1, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
   const gridData = await devToolsPage.waitForFunction(async () => {
-    const values = await getDataGridData('.storage-view table', columns, devToolsPage);
+    const values = await getDataGridData('.data-grid table', columns, devToolsPage);
     if (values.length >= leastExpected) {
       return values;
     }
@@ -480,7 +478,7 @@ function veImpressionForSharedStorageView() {
     veImpression('TableHeader', 'key'),
     veImpression('TableHeader', 'value'),
     veImpression('Action', 'reset-entropy-budget'),
-    veImpression('Pane', 'preview', [veImpression('Section', 'json-view')]),
+    veImpression('Pane', 'preview', [veImpression('Section', 'empty-view')]),
   ]);
 }
 

test/e2e/application/DIR_METADATA

@@ -13,6 +13,7 @@ ts_e2e_library("application") {
     "service-worker-network_test.ts",
     "service-worker-update_test.ts",
     "session-storage_test.ts",
+    "shared-storage_test.ts",
     "storage_test.ts",
     "window-controls_test.ts",
   ]

test/e2e/application/shared-storage_test.ts

@@ -0,0 +1,96 @@
+// Copyright 2022 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 {expectError} from '../../conductor/events.js';
+import {
+  getStorageItemsData,
+  getTrimmedTextContent,
+  navigateToApplicationTab,
+  navigateToSharedStorage,
+  navigateToSharedStorageForTopDomain,
+} from '../../e2e/helpers/application-helpers.js';
+import {
+  getDataGrid,
+  getDataGridRows,
+  getInnerTextOfDataGridCells,
+} from '../../e2e/helpers/datagrid-helpers.js';
+
+const SITE = 'https://localhost';
+
+describe('The Application Tab', () => {
+  it('shows Shared Storage events', async ({devToolsPage, inspectedPage}) => {
+    await navigateToApplicationTab('shared-storage', devToolsPage, inspectedPage);
+
+    await navigateToSharedStorage(devToolsPage);
+
+    await inspectedPage.goToResource('application/shared-storage.html');
+
+    const dataGrid = await getDataGrid(undefined, devToolsPage);
+    const innerText = await getInnerTextOfDataGridCells(dataGrid, 3, false, devToolsPage);
+
+    assert.strictEqual(innerText[0][1], 'window');
+    assert.strictEqual(innerText[0][2], 'clear');
+    assert.strictEqual(innerText[0][3], inspectedPage.domain());
+    assert.strictEqual(innerText[0][4], SITE);
+    assert.strictEqual(innerText[0][5], '{}');
+    assert.strictEqual(innerText[1][1], 'window');
+    assert.strictEqual(innerText[1][2], 'set');
+    assert.strictEqual(innerText[1][3], inspectedPage.domain());
+    assert.strictEqual(innerText[1][4], SITE);
+    assert.strictEqual(innerText[1][5], '{"key":"firstKey","value":"firstValue","ignoreIfPresent":false}');
+    assert.strictEqual(innerText[2][1], 'window');
+    assert.strictEqual(innerText[2][2], 'append');
+    assert.strictEqual(innerText[2][3], inspectedPage.domain());
+    assert.strictEqual(innerText[2][4], SITE);
+    assert.strictEqual(
+        innerText[2][5], '{"key":"secondKey","value":"{\\"field\\":\\"complexValue\\",\\"primitive\\":2}"}');
+
+    const rows = await getDataGridRows(3, dataGrid, false, devToolsPage);
+    await devToolsPage.clickElement(rows[rows.length - 1][0]);
+
+    const jsonView = await devToolsPage.waitFor('.json-view');
+    const jsonViewText = await jsonView.evaluate(el => (el as HTMLElement).innerText);
+    const accessTimeString = jsonViewText.substring('{accessTime: '.length, jsonViewText.indexOf(', scope:'));
+    assert.strictEqual(jsonViewText, `{accessTime: ${accessTimeString}, scope: "window", method: "append",…}`);
+  });
+
+  it('shows Shared Storage metadata', async ({devToolsPage, inspectedPage}) => {
+    await navigateToApplicationTab('shared-storage', devToolsPage, inspectedPage);
+
+    await navigateToSharedStorageForTopDomain(devToolsPage, inspectedPage);
+
+    const fieldValues = await getTrimmedTextContent('devtools-report-value', devToolsPage);
+    const timeString = fieldValues[1];
+    assert.deepEqual(fieldValues, [inspectedPage.domain(), timeString, '2', '130', '12']);
+  });
+
+  it('shows Shared Storage keys and values', async ({devToolsPage, inspectedPage}) => {
+    await navigateToApplicationTab('shared-storage', devToolsPage, inspectedPage);
+
+    await navigateToSharedStorageForTopDomain(devToolsPage, inspectedPage);
+
+    const dataGridRowValues = await getStorageItemsData(['key', 'value'], 2, devToolsPage);
+    assert.deepEqual(dataGridRowValues, [
+      {
+        key: 'firstKey',
+        value: 'firstValue',
+      },
+      {
+        key: 'secondKey',
+        value: '{"field":"complexValue","primitive":2}',
+      },
+    ]);
+
+    const dataGrid = await getDataGrid(undefined, devToolsPage);
+    const rows = await getDataGridRows(3, dataGrid, false, devToolsPage);
+    await devToolsPage.clickElement(rows[1][0]);
+
+    const jsonView = await devToolsPage.waitFor('.json-view');
+    const jsonViewText = await jsonView.evaluate(el => (el as HTMLElement).innerText);
+    assert.strictEqual(jsonViewText, '{key: "secondKey", value: "{"field":"complexValue","primitive":2}"}');
+    expectError('Request CacheStorage.requestCacheNames failed. {"code":-32602,"message":"Invalid security origin"}');
+  });
+});

test/e2e/helpers/application-helpers.ts

@@ -68,7 +68,7 @@ export class StateProvider {
     }
 
     if (!browser?.connected) {
-      browser = await Launcher.browserSetup(browserSettings);
+      browser = await Launcher.browserSetup(browserSettings, StateProvider.serverPort);
       this.#settingToBrowser.set(browserKey, browser);
     }
     this.#suiteToBrowser.set(suite, browser);