Port application/storage_test to non-hosted

Bug: 347114248, 416404745
Change-Id: I572f24e6be556acf34158a9146a45279cca7cf0a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6616883
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Liviu Rau <liviurau@chromium.org>

Author: Liviu Rau

test/e2e/application/BUILD.gn

@@ -8,7 +8,6 @@ node_ts_library("application") {
   sources = [
     "frame-tree_test.ts",
     "shared-storage_test.ts",
-    "storage_test.ts",
     "window-controls_test.ts",
   ]
 

test/e2e/helpers/application-helpers.ts

@@ -8,10 +8,8 @@ import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js'
 import {
   $$,
   click,
-  getBrowserAndPages,
   getTestServerPort,
   waitFor,
-  waitForFunction,
 } from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
@@ -61,14 +59,16 @@ export async function navigateToManifestInApplicationTab(testName: string) {
   await click(MANIFEST_SELECTOR);
 }
 
-export async function navigateToStorage() {
+export async function navigateToStorage(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
   const STORAGE_SELECTOR = '[aria-label="Storage"]';
-  await click(STORAGE_SELECTOR);
-  await waitFor('.clear-storage-button');
-  await expectVeEvents([
-    veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: application > TreeItem: storage'),
-    veImpressionsUnder('Panel: resources', [veImpressionForStorageOverview()]),
-  ]);
+  await devToolsPage.click(STORAGE_SELECTOR);
+  await devToolsPage.waitFor('.clear-storage-button');
+  await expectVeEvents(
+      [
+        veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: application > TreeItem: storage'),
+        veImpressionsUnder('Panel: resources', [veImpressionForStorageOverview()]),
+      ],
+      undefined, devToolsPage);
 }
 
 export async function navigateToOpenedWindows() {
@@ -318,17 +318,17 @@ export async function selectCookieByName(name: string, devToolsPage = getBrowser
       [veClick('Panel: resources > Pane: cookies-data > TableRow > TableCell: name')], undefined, devToolsPage);
 }
 
-export async function waitForQuotaUsage(p: (quota: number) => boolean) {
-  const {frontend} = getBrowserAndPages();
-  await frontend.bringToFront();
-  await waitForFunction(async () => {
-    const usedQuota = await getQuotaUsage();
+export async function waitForQuotaUsage(
+    p: (quota: number) => boolean, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await devToolsPage.bringToFront();
+  await devToolsPage.waitForFunction(async () => {
+    const usedQuota = await getQuotaUsage(devToolsPage);
     return p(usedQuota);
   });
 }
 
-export async function getQuotaUsage() {
-  const storageRow = await waitFor('.quota-usage-row');
+export async function getQuotaUsage(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const storageRow = await devToolsPage.waitFor('.quota-usage-row');
   const quotaString = await storageRow.evaluate(el => el.textContent || '');
   const [usedQuotaText, modifier] =
       quotaString.replaceAll(',', '').replace(/^\D*([\d.]+)\D*(kM?)B.used.out.of\D*\d+\D*.?B.*$/, '$1 $2').split(' ');
@@ -341,8 +341,8 @@ export async function getQuotaUsage() {
   return usedQuota;
 }
 
-export async function getPieChartLegendRows() {
-  const pieChartLegend = await waitFor('.pie-chart-legend');
+export async function getPieChartLegendRows(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const pieChartLegend = await devToolsPage.waitFor('.pie-chart-legend');
   const rows = await pieChartLegend.evaluate(legend => {
     const rows = [];
     for (const tableRow of legend.children) {

test/e2e_non_hosted/application/BUILD.gn

@@ -12,6 +12,7 @@ ts_e2e_library("application") {
     "service-worker-network_test.ts",
     "service-worker-update_test.ts",
     "session-storage_test.ts",
+    "storage_test.ts",
   ]
 
   deps = [

test/e2e/application/storage_test.ts …e_non_hosted/application/storage_test.tstest/e2e/application/storage_test.ts renamed to test/e2e_non_hosted/application/storage_test.ts test/e2e/application/storage_test.ts renamed to test/e2e_non_hosted/application/storage_test.ts

@@ -4,31 +4,34 @@
 
 import {assert} from 'chai';
 
-import {click, getBrowserAndPages, waitForFunction} from '../../shared/helper.js';
 import {
   getPieChartLegendRows,
   getQuotaUsage,
   navigateToApplicationTab,
   navigateToStorage,
   waitForQuotaUsage,
-} from '../helpers/application-helpers.js';
+} from '../../e2e/helpers/application-helpers.js';
+import type {DevToolsPage} from '../shared/frontend-helper.js';
+import type {InspectedPage} from '../shared/target-helper.js';
 
 // The parent suffix makes sure we wait for the Cookies item to have children before trying to click it.
 const CLEAR_SITE_DATA_BUTTON_SELECTOR = '#storage-view-clear-button';
 
+async function navigateToAppStorage(devToolsPage: DevToolsPage, inspectedPage: InspectedPage) {
+  await navigateToApplicationTab('storage-quota', devToolsPage, inspectedPage);
+  await navigateToStorage(devToolsPage);
+}
+
 describe('The Application Tab', () => {
   describe('contains a Storage pane', function() {
-    // The tests in this suite are particularly slow, as they perform a lot of actions
-    this.timeout(20000);
-    beforeEach(async () => {
-      await navigateToApplicationTab('storage-quota');
-      await navigateToStorage();
-    });
+    // TODO (liviurau): Update navigateToApplicationTab helper to work in docked
+    // mode and remove the setup below.
+    setup({dockingMode: 'undocked'});
 
-    it('which clears storage correctly using the clear button', async () => {
-      const {target} = getBrowserAndPages();
-      await target.bringToFront();
-      await target.evaluate(async () => {
+    it('which clears storage correctly using the clear button', async ({devToolsPage, inspectedPage}) => {
+      await navigateToAppStorage(devToolsPage, inspectedPage);
+      await inspectedPage.bringToFront();
+      await inspectedPage.evaluate(async () => {
         const array: number[] = [];
         for (let i = 0; i < 20000; i++) {
           array.push(i % 10);
@@ -41,23 +44,21 @@ describe('The Application Tab', () => {
         await new Promise(resolve => addIDBValue(resolve, 'Database1', 'Store1', {key: 1, value: array}, ''));
       });
 
-      await waitForQuotaUsage(quota => quota > 800);
+      await waitForQuotaUsage(quota => quota > 800, devToolsPage);
 
       // We may click too early. If the total quota exceeds 2999, some remaining
       // quota may show. Instead,
       // try to click another time, if necessary.
-      await waitForFunction(async () => {
-        await click(CLEAR_SITE_DATA_BUTTON_SELECTOR, {clickOptions: {delay: 250}});
-        const quota = await getQuotaUsage();
+      await devToolsPage.waitForFunction(async () => {
+        await devToolsPage.click(CLEAR_SITE_DATA_BUTTON_SELECTOR, {clickOptions: {delay: 250}});
+        const quota = await getQuotaUsage(devToolsPage);
         return quota === 0;
       });
     });
 
-    // Fails because backend does not report IndexedDb quoate after clearing site data.
-    it.skip('[crbug.com/347114248] which reports storage correctly, including the pie chart legend', async () => {
-      const {target} = getBrowserAndPages();
-
-      await target.evaluate(async () => {
+    it('which reports storage correctly, including the pie chart legend', async ({devToolsPage, inspectedPage}) => {
+      await navigateToAppStorage(devToolsPage, inspectedPage);
+      await inspectedPage.evaluate(async () => {
         const array: number[] = [];
         for (let i = 0; i < 20000; i++) {
           array.push(i % 10);
@@ -70,9 +71,9 @@ describe('The Application Tab', () => {
         await new Promise(resolve => addIDBValue(resolve, 'Database1', 'Store1', {key: 1, value: array}, ''));
       });
 
-      await waitForQuotaUsage(quota => quota > 800);
+      await waitForQuotaUsage(quota => quota > 800, devToolsPage);
 
-      const rows = await getPieChartLegendRows();
+      const rows = await getPieChartLegendRows(devToolsPage);
       // Only assert that the legend entries are correct.
       assert.lengthOf(rows, 2);
       assert.strictEqual(rows[0][2], 'IndexedDB');