From 19b30ddd4ba2f6fbe3799cb9e4fc96615f2b4f05 Mon Sep 17 00:00:00 2001 From: rbpotter Date: Mon, 21 Mar 2022 23:48:15 +0000 Subject: [PATCH] Settings: Migrate site_data tests to TypeScript Bug: 1263610 Change-Id: I168e4d4f75063e83752db7237ea5cfc4d0f32d59 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3538466 Reviewed-by: Demetrios Papadopoulos Commit-Queue: Rebekah Potter Cr-Commit-Position: refs/heads/main@{#983559} --- .../browser/resources/settings/lazy_load.ts | 2 + .../settings/site_settings/site_data.ts | 12 +++++- .../site_data_details_subpage.ts | 3 +- chrome/test/data/webui/settings/BUILD.gn | 4 +- ....js => site_data_details_subpage_tests.ts} | 38 +++++++++---------- .../{site_data_test.js => site_data_test.ts} | 29 +++++++------- 6 files changed, 48 insertions(+), 40 deletions(-) rename chrome/test/data/webui/settings/{site_data_details_subpage_tests.js => site_data_details_subpage_tests.ts} (74%) rename chrome/test/data/webui/settings/{site_data_test.js => site_data_test.ts} (86%) diff --git a/chrome/browser/resources/settings/lazy_load.ts b/chrome/browser/resources/settings/lazy_load.ts index 418ff44cc01e1b..3a1bb5d2720614 100644 --- a/chrome/browser/resources/settings/lazy_load.ts +++ b/chrome/browser/resources/settings/lazy_load.ts @@ -180,6 +180,8 @@ export {SettingsEditExceptionDialogElement} from './site_settings/edit_exception export {LocalDataBrowserProxy, LocalDataBrowserProxyImpl, LocalDataItem} from './site_settings/local_data_browser_proxy.js'; export {AppHandlerEntry, AppProtocolEntry, HandlerEntry, ProtocolEntry, ProtocolHandlersElement} from './site_settings/protocol_handlers.js'; export {SettingsCategoryDefaultRadioGroupElement} from './site_settings/settings_category_default_radio_group.js'; +export {SiteDataElement} from './site_settings/site_data.js'; +export {SiteDataDetailsSubpageElement} from './site_settings/site_data_details_subpage.js'; export {SiteDetailsElement} from './site_settings/site_details.js'; export {SiteDetailsPermissionElement} from './site_settings/site_details_permission.js'; export {SiteEntryElement} from './site_settings/site_entry.js'; diff --git a/chrome/browser/resources/settings/site_settings/site_data.ts b/chrome/browser/resources/settings/site_settings/site_data.ts index d6f2cc2dcbdd26..14ca8f757fd01c 100644 --- a/chrome/browser/resources/settings/site_settings/site_data.ts +++ b/chrome/browser/resources/settings/site_settings/site_data.ts @@ -23,6 +23,7 @@ import {assert} from 'chrome://resources/js/assert.m.js'; import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js'; import {ListPropertyUpdateMixin} from 'chrome://resources/js/list_property_update_mixin.js'; import {WebUIListenerMixin} from 'chrome://resources/js/web_ui_listener_mixin.js'; +import {IronListElement} from 'chrome://resources/polymer/v3_0/iron-list/iron-list.js'; import {DomRepeatEvent, microTask, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {BaseMixin} from '../base_mixin.js'; @@ -42,10 +43,11 @@ type SelectedItem = { index: number, }; -interface SiteDataElement { +export interface SiteDataElement { $: { confirmDeleteDialog: CrDialogElement, confirmDeleteThirdPartyDialog: CrDialogElement, + list: IronListElement, removeShowingSites: HTMLElement, removeAllThirdPartyCookies: HTMLElement, }; @@ -54,7 +56,7 @@ interface SiteDataElement { const SiteDataElementBase = ListPropertyUpdateMixin( GlobalScrollTargetMixin(WebUIListenerMixin(BaseMixin(PolymerElement)))); -class SiteDataElement extends SiteDataElementBase { +export class SiteDataElement extends SiteDataElementBase { static get is() { return 'site-data'; } @@ -311,4 +313,10 @@ class SiteDataElement extends SiteDataElementBase { } } +declare global { + interface HTMLElementTagNameMap { + 'site-data': SiteDataElement; + } +} + customElements.define(SiteDataElement.is, SiteDataElement); diff --git a/chrome/browser/resources/settings/site_settings/site_data_details_subpage.ts b/chrome/browser/resources/settings/site_settings/site_data_details_subpage.ts index 6ef174770bc538..82bdeb9de9a3ff 100644 --- a/chrome/browser/resources/settings/site_settings/site_data_details_subpage.ts +++ b/chrome/browser/resources/settings/site_settings/site_data_details_subpage.ts @@ -44,7 +44,8 @@ const SiteDataDetailsSubpageElementBase = RouteObserverMixinInterface }; -class SiteDataDetailsSubpageElement extends SiteDataDetailsSubpageElementBase { +export class SiteDataDetailsSubpageElement extends + SiteDataDetailsSubpageElementBase { static get is() { return 'site-data-details-subpage'; } diff --git a/chrome/test/data/webui/settings/BUILD.gn b/chrome/test/data/webui/settings/BUILD.gn index ee23582d04405e..5dde892ccb6d74 100644 --- a/chrome/test/data/webui/settings/BUILD.gn +++ b/chrome/test/data/webui/settings/BUILD.gn @@ -104,8 +104,8 @@ non_preprocessed_files = [ "settings_subpage_test.ts", "settings_textarea_tests.ts", "settings_ui_tests.ts", - "site_data_details_subpage_tests.js", - "site_data_test.js", + "site_data_details_subpage_tests.ts", + "site_data_test.ts", "site_details_permission_tests.ts", "site_details_tests.ts", "site_entry_tests.ts", diff --git a/chrome/test/data/webui/settings/site_data_details_subpage_tests.js b/chrome/test/data/webui/settings/site_data_details_subpage_tests.ts similarity index 74% rename from chrome/test/data/webui/settings/site_data_details_subpage_tests.js rename to chrome/test/data/webui/settings/site_data_details_subpage_tests.ts index eecd779b25ae58..81093c30d26328 100644 --- a/chrome/test/data/webui/settings/site_data_details_subpage_tests.js +++ b/chrome/test/data/webui/settings/site_data_details_subpage_tests.ts @@ -4,9 +4,10 @@ // clang-format off import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; -import {cookieInfo, LocalDataBrowserProxyImpl} from 'chrome://settings/lazy_load.js'; +import {CookieDetails, cookieInfo, LocalDataBrowserProxyImpl, SiteDataDetailsSubpageElement} from 'chrome://settings/lazy_load.js'; import {MetricsBrowserProxyImpl, PrivacyElementInteractions, Router,routes} from 'chrome://settings/settings.js'; +import {assertEquals} from 'chrome://webui-test/chai_assert.js'; import {flushTasks} from 'chrome://webui-test/test_util.js'; import {TestLocalDataBrowserProxy} from './test_local_data_browser_proxy.js'; @@ -16,17 +17,13 @@ import {TestMetricsBrowserProxy} from './test_metrics_browser_proxy.js'; /** @fileoverview Suite of tests for site-data-details-subpage. */ suite('SiteDataDetailsSubpage', function() { - /** @type {?SiteDataDetailsSubpageElement} */ - let page = null; + let page: SiteDataDetailsSubpageElement; - /** @type {TestLocalDataBrowserProxy} */ - let browserProxy = null; + let browserProxy: TestLocalDataBrowserProxy; - /** @type {!TestMetricsBrowserProxy} */ - let testMetricsBrowserProxy; + let testMetricsBrowserProxy: TestMetricsBrowserProxy; - /** @type {!CookieDetails} */ - const cookieDetails = { + const cookieDetails: CookieDetails&{[key: string]: string | boolean} = { accessibleToScript: 'Yes', content: 'dummy_cookie_contents', created: 'Tuesday, February 7, 2017 at 11:28:45 AM', @@ -39,10 +36,11 @@ suite('SiteDataDetailsSubpage', function() { path: '/', sendfor: 'Any kind of connection', title: 'abcd', + totalUsage: '1kB', type: 'cookie' }; - const site = 'foo.com'; + const site: string = 'foo.com'; setup(function() { browserProxy = new TestLocalDataBrowserProxy(); @@ -50,7 +48,7 @@ suite('SiteDataDetailsSubpage', function() { LocalDataBrowserProxyImpl.setInstance(browserProxy); testMetricsBrowserProxy = new TestMetricsBrowserProxy(); MetricsBrowserProxyImpl.setInstance(testMetricsBrowserProxy); - PolymerTest.clearBody(); + document.body.innerHTML = ''; page = document.createElement('site-data-details-subpage'); Router.getInstance().navigateTo( routes.SITE_SETTINGS_DATA_DETAILS, new URLSearchParams('site=' + site)); @@ -64,23 +62,24 @@ suite('SiteDataDetailsSubpage', function() { test('DetailsShownForCookie', function() { return browserProxy.whenCalled('getCookieDetails') - .then(function(actualSite) { + .then(function(actualSite: string) { assertEquals(site, actualSite); flush(); - const entries = page.root.querySelectorAll('.cr-row'); + const entries = page.shadowRoot!.querySelectorAll('.cr-row'); assertEquals(1, entries.length); - const listItems = page.root.querySelectorAll('.list-item'); + const listItems = page.shadowRoot!.querySelectorAll('.list-item'); // |cookieInfo| is a global var defined in // site_settings/cookie_info.js, and specifies the fields that are // shown for a cookie. - assertEquals(cookieInfo.cookie.length, listItems.length); + assertEquals(cookieInfo['cookie']!.length, listItems.length); // Check that all the cookie information is presented in the DOM. - const cookieDetailValues = page.root.querySelectorAll('.secondary'); - cookieDetailValues.forEach(function(div, i) { - const key = cookieInfo.cookie[i][0]; + const cookieDetailValues = + page.shadowRoot!.querySelectorAll('.secondary'); + cookieDetailValues.forEach(function(div: HTMLElement, i: number) { + const key = cookieInfo['cookie']![i]![0]!; assertEquals(cookieDetails[key], div.textContent); }); }); @@ -89,7 +88,7 @@ suite('SiteDataDetailsSubpage', function() { test('InteractionMetrics', async function() { // Confirm that various page interactions record the appropriate metric. await flushTasks(); - page.shadowRoot.querySelector('.icon-clear').click(); + page.shadowRoot!.querySelector('.icon-clear')!.click(); let metric = await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram'); assertEquals(PrivacyElementInteractions.COOKIE_DETAILS_REMOVE_ITEM, metric); @@ -104,5 +103,4 @@ suite('SiteDataDetailsSubpage', function() { await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram'); assertEquals(PrivacyElementInteractions.COOKIE_DETAILS_REMOVE_ALL, metric); }); - }); diff --git a/chrome/test/data/webui/settings/site_data_test.js b/chrome/test/data/webui/settings/site_data_test.ts similarity index 86% rename from chrome/test/data/webui/settings/site_data_test.js rename to chrome/test/data/webui/settings/site_data_test.ts index 1ec60f317e6509..6d602f987eda87 100644 --- a/chrome/test/data/webui/settings/site_data_test.js +++ b/chrome/test/data/webui/settings/site_data_test.ts @@ -4,8 +4,9 @@ // clang-format off import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; -import {LocalDataBrowserProxyImpl} from 'chrome://settings/lazy_load.js'; +import {LocalDataBrowserProxyImpl, SiteDataElement} from 'chrome://settings/lazy_load.js'; import {MetricsBrowserProxyImpl, PrivacyElementInteractions, Router,routes} from 'chrome://settings/settings.js'; +import {assertEquals, assertTrue} from 'chrome://webui-test/chai_assert.js'; import {eventToPromise, flushTasks} from 'chrome://webui-test/test_util.js'; import {TestLocalDataBrowserProxy} from './test_local_data_browser_proxy.js'; @@ -14,14 +15,11 @@ import {TestMetricsBrowserProxy} from './test_metrics_browser_proxy.js'; // clang-format on suite('SiteDataTest', function() { - /** @type {SiteDataElement} */ - let siteData; + let siteData: SiteDataElement; - /** @type {TestLocalDataBrowserProxy} */ - let testBrowserProxy; + let testBrowserProxy: TestLocalDataBrowserProxy; - /** @type {!TestMetricsBrowserProxy} */ - let testMetricsBrowserProxy; + let testMetricsBrowserProxy: TestMetricsBrowserProxy; setup(function() { Router.getInstance().navigateTo(routes.SITE_SETTINGS); @@ -47,7 +45,9 @@ suite('SiteDataTest', function() { await eventToPromise('site-data-list-complete', siteData); flush(); - const button = siteData.$$('site-data-entry').$$('.icon-delete-gray'); + const button = + siteData.shadowRoot!.querySelector('site-data-entry')!.shadowRoot! + .querySelector('.icon-delete-gray'); assertTrue(!!button); assertEquals('CR-ICON-BUTTON', button.tagName); button.click(); @@ -68,10 +68,10 @@ suite('SiteDataTest', function() { Router.getInstance().navigateTo(routes.SITE_SETTINGS_SITE_DATA); await eventToPromise('site-data-list-complete', siteData); - assertEquals(2, siteData.$.list.items.length); + assertEquals(2, siteData.$.list.items!.length); siteData.filter = 'Hello'; await eventToPromise('site-data-list-complete', siteData); - assertEquals(1, siteData.$.list.items.length); + assertEquals(1, siteData.$.list.items!.length); }); test('calls reloadCookies() when created', async function() { @@ -106,10 +106,10 @@ suite('SiteDataTest', function() { // Check that the remove button correctly records an interaction metric // based on whether the list is filtered or not. document.body.appendChild(siteData); - siteData.$$('#removeShowingSites').click(); + siteData.$.removeShowingSites.click(); flush(); - siteData.$$('.action-button').click(); + siteData.shadowRoot!.querySelector('.action-button')!.click(); let metric = await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram'); assertEquals(PrivacyElementInteractions.SITE_DATA_REMOVE_ALL, metric); @@ -117,10 +117,10 @@ suite('SiteDataTest', function() { // Add a filter and repeat. siteData.filter = 'Test'; - siteData.$$('#removeShowingSites').click(); + siteData.$.removeShowingSites.click(); flush(); - siteData.$$('.action-button').click(); + siteData.shadowRoot!.querySelector('.action-button')!.click(); metric = await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram'); assertEquals(PrivacyElementInteractions.SITE_DATA_REMOVE_FILTERED, metric); @@ -147,5 +147,4 @@ suite('SiteDataTest', function() { filter = await testBrowserProxy.whenCalled('getDisplayList'); assertEquals('Test2', filter); }); - });