18c6f8e5ae93a0294d07e4282736db0dca34d491 - chromium/src
140 views
Skip to first unread message
dpa...@chromium.org
Dec 1, 2021, 3:44:11 AM12/1/21
to chromium...@chromium.org
commit 18c6f8e5ae93a0294d07e4282736db0dca34d491
Author: dpapad <dpa...@chromium.org>
AuthorDate: Wed Dec 01 08:42:38 2021
Commit: Chromium LUCI CQ <chromiu...@luci-project-accounts.iam.gserviceaccount.com>
CommitDate: Wed Dec 01 08:42:38 2021
Settings: Migrate autofill_page/ tests to TypeScript, part 2.
Migrating
- autofill_page_tests.js
- payments_section_test.js
Bug: 1263610
Change-Id: I7f38917503e3e0e46326572951416ffe8d264531
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3307773
Auto-Submit: Demetrios Papadopoulos <dpa...@chromium.org>
Reviewed-by: Viktor Semeniuk <vsem...@google.com>
Commit-Queue: Demetrios Papadopoulos <dpa...@chromium.org>
Cr-Commit-Position: refs/heads/main@{#946905}
diff --git a/chrome/browser/resources/settings/autofill_page/autofill_page.ts b/chrome/browser/resources/settings/autofill_page/autofill_page.ts
index d48c6882..c5ff980 100644
--- a/chrome/browser/resources/settings/autofill_page/autofill_page.ts
+++ b/chrome/browser/resources/settings/autofill_page/autofill_page.ts
@@ -28,7 +28,8 @@
const SettingsAutofillPageElementBase =
PrefsMixin(PasswordCheckMixin(BaseMixin(PolymerElement)));
-class SettingsAutofillPageElement extends SettingsAutofillPageElementBase {
+export class SettingsAutofillPageElement extends
+ SettingsAutofillPageElementBase {
static get is() {
return 'settings-autofill-page';
}
@@ -101,5 +102,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-autofill-page': SettingsAutofillPageElement;
+ }
+}
+
customElements.define(
SettingsAutofillPageElement.is, SettingsAutofillPageElement);
diff --git a/chrome/browser/resources/settings/autofill_page/autofill_section.ts b/chrome/browser/resources/settings/autofill_page/autofill_section.ts
index e6a49ba..19ede76 100644
--- a/chrome/browser/resources/settings/autofill_page/autofill_section.ts
+++ b/chrome/browser/resources/settings/autofill_page/autofill_section.ts
@@ -43,7 +43,7 @@
};
}
-interface SettingsAutofillSectionElement {
+export interface SettingsAutofillSectionElement {
$: {
addressSharedMenu: CrActionMenuElement,
addAddress: HTMLElement,
@@ -52,7 +52,7 @@
const SettingsAutofillSectionElementBase = I18nMixin(PolymerElement);
-class SettingsAutofillSectionElement extends
+export class SettingsAutofillSectionElement extends
SettingsAutofillSectionElementBase {
static get is() {
return 'settings-autofill-section';
@@ -219,5 +219,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-autofill-section': SettingsAutofillSectionElement;
+ }
+}
+
customElements.define(
SettingsAutofillSectionElement.is, SettingsAutofillSectionElement);
diff --git a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
index e61d210..6993d35 100644
--- a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
+++ b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
@@ -16,6 +16,7 @@
import '../settings_shared_css.js';
import '../settings_vars_css.js';
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
import {html, microTask, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -34,9 +35,11 @@
}
}
-interface SettingsCreditCardEditDialogElement {
+export interface SettingsCreditCardEditDialogElement {
$: {
+ cancelButton: CrButtonElement,
dialog: CrDialogElement,
+ saveButton: CrButtonElement,
month: HTMLSelectElement,
year: HTMLSelectElement,
};
@@ -44,7 +47,7 @@
const SettingsCreditCardEditDialogElementBase = I18nMixin(PolymerElement);
-class SettingsCreditCardEditDialogElement extends
+export class SettingsCreditCardEditDialogElement extends
SettingsCreditCardEditDialogElementBase {
static get is() {
return 'settings-credit-card-edit-dialog';
@@ -274,6 +277,12 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-credit-card-edit-dialog': SettingsCreditCardEditDialogElement;
+ }
+}
+
customElements.define(
SettingsCreditCardEditDialogElement.is,
SettingsCreditCardEditDialogElement);
diff --git a/chrome/browser/resources/settings/autofill_page/payments_section.ts b/chrome/browser/resources/settings/autofill_page/payments_section.ts
index d563a0b..fcc334a 100644
--- a/chrome/browser/resources/settings/autofill_page/payments_section.ts
+++ b/chrome/browser/resources/settings/autofill_page/payments_section.ts
@@ -21,6 +21,7 @@
import './payments_list.js';
import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
@@ -45,16 +46,23 @@
}
}
-interface SettingsPaymentsSectionElement {
+export interface SettingsPaymentsSectionElement {
$: {
+ addCreditCard: CrButtonElement,
+ autofillCreditCardToggle: SettingsToggleButtonElement,
+ canMakePaymentToggle: SettingsToggleButtonElement,
creditCardSharedMenu: CrActionMenuElement,
- addCreditCard: HTMLElement,
+ menuClearCreditCard: HTMLElement,
+ menuEditCreditCard: HTMLElement,
+ menuRemoveCreditCard: HTMLElement,
+ migrateCreditCards: HTMLElement,
+ paymentsList: HTMLElement,
};
}
const SettingsPaymentsSectionElementBase = I18nMixin(PolymerElement);
-class SettingsPaymentsSectionElement extends
+export class SettingsPaymentsSectionElement extends
SettingsPaymentsSectionElementBase {
static get is() {
return 'settings-payments-section';
@@ -66,6 +74,8 @@
static get properties() {
return {
+ prefs: Object,
+
/**
* An array of all saved credit cards.
*/
@@ -114,6 +124,7 @@
};
}
+ prefs: {[key: string]: any};
creditCards: Array<chrome.autofillPrivate.CreditCardEntry>;
upiIds: Array<string>;
private userIsFidoVerifiable_: boolean;
@@ -343,5 +354,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-payments-section': SettingsPaymentsSectionElement;
+ }
+}
+
customElements.define(
SettingsPaymentsSectionElement.is, SettingsPaymentsSectionElement);
diff --git a/chrome/browser/resources/settings/lazy_load.ts b/chrome/browser/resources/settings/lazy_load.ts
index d3f7dd1..9915f8f 100644
--- a/chrome/browser/resources/settings/lazy_load.ts
+++ b/chrome/browser/resources/settings/lazy_load.ts
@@ -67,15 +67,18 @@
export {FontsBrowserProxy, FontsBrowserProxyImpl, FontsData} from './appearance_page/fonts_browser_proxy.js';
export {CountryDetailManagerImpl} from './autofill_page/address_edit_dialog.js';
export {AutofillManagerImpl, AutofillManagerProxy, PersonalDataChangedListener} from './autofill_page/autofill_manager_proxy.js';
+export {SettingsAutofillSectionElement} from './autofill_page/autofill_section.js';
// <if expr="chromeos or lacros">
export {BlockingRequestManager} from './autofill_page/blocking_request_manager.js';
// </if>
+export {SettingsCreditCardEditDialogElement} from './autofill_page/credit_card_edit_dialog.js';
export {PasswordEditDialogElement} from './autofill_page/password_edit_dialog.js';
export {PasswordListItemElement} from './autofill_page/password_list_item.js';
export {PasswordMoveMultiplePasswordsToAccountDialogElement} from './autofill_page/password_move_multiple_passwords_to_account_dialog.js';
export {PasswordsExportDialogElement} from './autofill_page/passwords_export_dialog.js';
export {PasswordsSectionElement} from './autofill_page/passwords_section.js';
export {PaymentsManagerImpl, PaymentsManagerProxy} from './autofill_page/payments_manager_proxy.js';
+export {SettingsPaymentsSectionElement} from './autofill_page/payments_section.js';
// <if expr="_google_chrome and is_win">
export {ChromeCleanupIdleReason} from './chrome_cleanup_page/chrome_cleanup_page.js';
export {ChromeCleanupProxy, ChromeCleanupProxyImpl} from './chrome_cleanup_page/chrome_cleanup_proxy.js';
diff --git a/chrome/browser/resources/settings/settings.ts b/chrome/browser/resources/settings/settings.ts
index 106e14d..1bf00a7 100644
--- a/chrome/browser/resources/settings/settings.ts
+++ b/chrome/browser/resources/settings/settings.ts
@@ -15,6 +15,7 @@
export {AppearanceBrowserProxy, AppearanceBrowserProxyImpl} from './appearance_page/appearance_browser_proxy.js';
export {SettingsAppearancePageElement} from './appearance_page/appearance_page.js';
export {HomeUrlInputElement} from './appearance_page/home_url_input.js';
+export {SettingsAutofillPageElement} from './autofill_page/autofill_page.js';
export {MultiStoreExceptionEntry} from './autofill_page/multi_store_exception_entry.js';
export {MultiStorePasswordUiEntry} from './autofill_page/multi_store_password_ui_entry.js';
export {AccountStorageOptInStateChangedListener, CredentialsChangedListener, PasswordCheckInteraction, PasswordCheckReferrer, PasswordCheckStatusChangedListener, PasswordExceptionListChangedListener, PasswordManagerImpl, PasswordManagerProxy, PasswordsFileExportProgressListener, SavedPasswordListChangedListener} from './autofill_page/password_manager_proxy.js';
diff --git a/chrome/test/data/webui/settings/BUILD.gn b/chrome/test/data/webui/settings/BUILD.gn
index 27fe6abe..e7e4cd9d 100644
--- a/chrome/test/data/webui/settings/BUILD.gn
+++ b/chrome/test/data/webui/settings/BUILD.gn
@@ -36,7 +36,7 @@
"advanced_page_test.js",
"all_sites_tests.ts",
"appearance_fonts_page_test.ts",
- "autofill_page_test.js",
+ "autofill_page_test.ts",
"autofill_section_test.js",
"avatar_icon_test.ts",
"basic_page_test.js",
@@ -70,7 +70,7 @@
"passwords_export_test.js",
"passwords_section_test.js",
"payments_section_interactive_test.js",
- "payments_section_test.js",
+ "payments_section_test.ts",
"people_page_sync_controls_test.js",
"people_page_sync_page_interactive_test.js",
"people_page_sync_page_test.js",
diff --git a/chrome/test/data/webui/settings/autofill_page_test.js b/chrome/test/data/webui/settings/autofill_page_test.ts
similarity index 67%
rename from chrome/test/data/webui/settings/autofill_page_test.js
rename to chrome/test/data/webui/settings/autofill_page_test.ts
index 582019b..e30af1c7 100644
--- a/chrome/test/data/webui/settings/autofill_page_test.js
+++ b/chrome/test/data/webui/settings/autofill_page_test.ts
@@ -3,9 +3,10 @@
// found in the LICENSE file.
// clang-format off
-import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {AutofillManagerImpl, PaymentsManagerImpl} from 'chrome://settings/lazy_load.js';
-import {CrSettingsPrefs, MultiStoreExceptionEntry, MultiStorePasswordUiEntry, OpenWindowProxyImpl, PasswordManagerImpl, Router, routes, SettingsPluralStringProxyImpl} from 'chrome://settings/settings.js';
+import {DomIf, flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {AutofillManagerImpl, PasswordsSectionElement, PaymentsManagerImpl, SettingsAutofillSectionElement, SettingsPaymentsSectionElement} from 'chrome://settings/lazy_load.js';
+import {CrSettingsPrefs, MultiStoreExceptionEntry, MultiStorePasswordUiEntry, OpenWindowProxyImpl, PasswordManagerImpl, SettingsAutofillPageElement, SettingsPluralStringProxyImpl, SettingsPrefsElement} from 'chrome://settings/settings.js';
+import {assertDeepEquals, assertEquals, assertNotEquals} from 'chrome://webui-test/chai_assert.js';
import {TestPluralStringProxy} from 'chrome://webui-test/test_plural_string_proxy.js';
import {FakeSettingsPrivate} from './fake_settings_private.js';
@@ -19,64 +20,64 @@
suite('PasswordsAndForms', function() {
/**
* Creates a new passwords and forms element.
- * @return {!Object}
*/
- function createAutofillElement(prefsElement) {
+ function createAutofillElement(prefsElement: SettingsPrefsElement):
+ SettingsAutofillPageElement {
const element = document.createElement('settings-autofill-page');
element.prefs = prefsElement.prefs;
document.body.appendChild(element);
- element.shadowRoot.querySelector('dom-if[route-path="/passwords"]').if =
- true;
- element.shadowRoot.querySelector('dom-if[route-path="/payments"]').if =
- true;
- element.shadowRoot.querySelector('dom-if[route-path="/addresses"]').if =
- true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/passwords"]')!.if = true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/payments"]')!.if = true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/addresses"]')!.if = true;
flush();
return element;
}
/**
- * @pram {boolean} autofill Whether autofill is enabled or not.
- * @param {boolean} passwords Whether passwords are enabled or not.
- * @return {!Promise<!Element>} The |prefs| element.
+ * @param autofill Whether autofill is enabled or not.
+ * @param passwords Whether passwords are enabled or not.
*/
- function createPrefs(autofill, passwords) {
+ function createPrefs(
+ autofill: boolean, passwords: boolean): Promise<SettingsPrefsElement> {
return new Promise(function(resolve) {
CrSettingsPrefs.deferInitialization = true;
const prefs = document.createElement('settings-prefs');
prefs.initialize(new FakeSettingsPrivate([
- {
- key: 'autofill.enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: autofill,
- },
- {
- key: 'autofill.profile_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'autofill.credit_card_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'credentials_enable_service',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: passwords,
- },
- {
- key: 'credentials_enable_autosignin',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'payments.can_make_payment_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- }
- ]));
+ {
+ key: 'autofill.enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: autofill,
+ },
+ {
+ key: 'autofill.profile_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'autofill.credit_card_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'credentials_enable_service',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: passwords,
+ },
+ {
+ key: 'credentials_enable_autosignin',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'payments.can_make_payment_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ }
+ ]) as unknown as typeof chrome.settingsPrivate);
CrSettingsPrefs.initialized.then(function() {
resolve(prefs);
@@ -86,9 +87,9 @@
/**
* Cleans up prefs so tests can continue to run.
- * @param {!Element} prefs The prefs element.
+ * @param prefs The prefs element.
*/
- function destroyPrefs(prefs) {
+ function destroyPrefs(prefs: SettingsPrefsElement) {
CrSettingsPrefs.resetForTesting();
CrSettingsPrefs.deferInitialization = false;
prefs.resetForTesting();
@@ -97,9 +98,8 @@
/**
* Creates PasswordManagerExpectations with the values expected after first
* creating the element.
- * @return {!PasswordManagerExpectations}
*/
- function basePasswordExpectations() {
+ function basePasswordExpectations(): PasswordManagerExpectations {
const expected = new PasswordManagerExpectations();
expected.requested.passwords = 1;
expected.requested.exceptions = 1;
@@ -113,9 +113,8 @@
/**
* Creates AutofillManagerExpectations with the values expected after first
* creating the element.
- * @return {!AutofillManagerExpectations}
*/
- function baseAutofillExpectations() {
+ function baseAutofillExpectations(): AutofillManagerExpectations {
const expected = new AutofillManagerExpectations();
expected.requestedAddresses = 1;
expected.listeningAddresses = 1;
@@ -125,22 +124,21 @@
/**
* Creates PaymentsManagerExpectations with the values expected after first
* creating the element.
- * @return {!PaymentsManagerExpectations}
*/
- function basePaymentsExpectations() {
+ function basePaymentsExpectations(): PaymentsManagerExpectations {
const expected = new PaymentsManagerExpectations();
expected.requestedCreditCards = 1;
expected.listeningCreditCards = 1;
return expected;
}
- let passwordManager;
- let autofillManager;
- let paymentsManager;
+ let passwordManager: TestPasswordManagerProxy;
+ let autofillManager: TestAutofillManager;
+ let paymentsManager: TestPaymentsManager;
setup(async function() {
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
// Override the PasswordManagerImpl for testing.
passwordManager = new TestPasswordManagerProxy();
@@ -195,12 +193,14 @@
createPasswordEntry({url: 'two.com', username: 'user1', id: 1})
];
- passwordManager.lastCallback.addSavedPasswordListChangedListener(list);
+ passwordManager.lastCallback.addSavedPasswordListChangedListener!(list);
flush();
assertDeepEquals(
list.map(entry => new MultiStorePasswordUiEntry(entry)),
- element.shadowRoot.querySelector('#passwordSection').savedPasswords);
+ element.shadowRoot!
+ .querySelector<PasswordsSectionElement>(
+ '#passwordSection')!.savedPasswords);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -220,13 +220,14 @@
createExceptionEntry({url: 'one.com', id: 0}),
createExceptionEntry({url: 'two.com', id: 1})
];
- passwordManager.lastCallback.addExceptionListChangedListener(list);
+ passwordManager.lastCallback.addExceptionListChangedListener!(list);
flush();
assertDeepEquals(
list.map(entry => new MultiStoreExceptionEntry(entry)),
- element.shadowRoot.querySelector('#passwordSection')
- .passwordExceptions);
+ element.shadowRoot!
+ .querySelector<PasswordsSectionElement>(
+ '#passwordSection')!.passwordExceptions);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -244,13 +245,15 @@
const addressList = [createAddressEntry(), createAddressEntry()];
const cardList = [createCreditCardEntry(), createCreditCardEntry()];
- autofillManager.lastCallback.setPersonalDataManagerListener(
- addressList, cardList);
+ autofillManager.lastCallback.setPersonalDataManagerListener!
+ (addressList, cardList);
flush();
assertEquals(
addressList,
- element.shadowRoot.querySelector('#autofillSection').addresses);
+ element.shadowRoot!
+ .querySelector<SettingsAutofillSectionElement>(
+ '#autofillSection')!.addresses);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -268,13 +271,15 @@
const addressList = [createAddressEntry(), createAddressEntry()];
const cardList = [createCreditCardEntry(), createCreditCardEntry()];
- paymentsManager.lastCallback.setPersonalDataManagerListener(
- addressList, cardList);
+ paymentsManager.lastCallback.setPersonalDataManagerListener!
+ (addressList, cardList);
flush();
assertEquals(
cardList,
- element.shadowRoot.querySelector('#paymentsSection').creditCards);
+ element.shadowRoot!
+ .querySelector<SettingsPaymentsSectionElement>(
+ '#paymentsSection')!.creditCards);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -295,19 +300,17 @@
password_manager_leak_detection: {},
},
};
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
document.body.appendChild(autofillPage);
flush();
return autofillPage;
}
suite('PasswordsUITest', function() {
- /** @type {SettingsAutofillPageElement} */
- let autofillPage = null;
- /** @type {OpenWindowProxy} */
- let openWindowProxy = null;
- let passwordManager;
- let pluralString;
+ let autofillPage: SettingsAutofillPageElement;
+ let openWindowProxy: TestOpenWindowProxy;
+ let passwordManager: TestPasswordManagerProxy;
+ let pluralString: TestPluralStringProxy;
setup(function() {
openWindowProxy = new TestOpenWindowProxy();
@@ -329,12 +332,15 @@
// Check if sublabel is empty
assertEquals(
'',
- autofillPage.shadowRoot.querySelector('#passwordManagerSubLabel')
- .innerText.trim());
+ autofillPage.shadowRoot!
+ .querySelector<HTMLElement>(
+ '#passwordManagerSubLabel')!.innerText.trim());
// Simulate one compromised password
const leakedPasswords = [
- makeCompromisedCredential('google.com', 'jdoerrie', 'LEAKED'),
+ makeCompromisedCredential(
+ 'google.com', 'jdoerrie',
+ chrome.passwordsPrivate.CompromiseType.LEAKED),
];
passwordManager.data.leakedCredentials = leakedPasswords;
@@ -347,7 +353,8 @@
// With compromised credentials sublabel should have text
assertNotEquals(
'',
- autofillPage.shadowRoot.querySelector('#passwordManagerSubLabel')
- .innerText.trim());
+ autofillPage.shadowRoot!
+ .querySelector<HTMLElement>(
+ '#passwordManagerSubLabel')!.innerText.trim());
});
});
diff --git a/chrome/test/data/webui/settings/payments_section_test.js b/chrome/test/data/webui/settings/payments_section_test.ts
similarity index 70%
rename from chrome/test/data/webui/settings/payments_section_test.js
rename to chrome/test/data/webui/settings/payments_section_test.ts
index 4b759fd..8540d27 100644
--- a/chrome/test/data/webui/settings/payments_section_test.js
+++ b/chrome/test/data/webui/settings/payments_section_test.ts
@@ -5,9 +5,10 @@
// clang-format off
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {PaymentsManagerImpl} from 'chrome://settings/lazy_load.js';
-import {MetricsBrowserProxyImpl, PrivacyElementInteractions} from 'chrome://settings/settings.js';
-import {eventToPromise, isVisible, whenAttributeIs} from 'chrome://webui-test/test_util.js';
+import {PaymentsManagerImpl, SettingsCreditCardEditDialogElement, SettingsPaymentsSectionElement} from 'chrome://settings/lazy_load.js';
+import {MetricsBrowserProxyImpl, PrivacyElementInteractions, SettingsToggleButtonElement} from 'chrome://settings/settings.js';
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {eventToPromise, whenAttributeIs} from 'chrome://webui-test/test_util.js';
import {createCreditCardEntry, createEmptyCreditCardEntry,TestPaymentsManager} from './passwords_and_autofill_fake_data.js';
import {TestMetricsBrowserProxy} from './test_metrics_browser_proxy.js';
@@ -24,7 +25,7 @@
document.body.appendChild(section);
assertFalse(
- !!section.shadowRoot.querySelector('#autofillExtensionIndicator'));
+ !!section.shadowRoot!.querySelector('#autofillExtensionIndicator'));
section.set('prefs.autofill.credit_card_enabled.extensionId', 'test-id-1');
section.set(
'prefs.autofill.credit_card_fido_auth_enabled.extensionId',
@@ -32,13 +33,13 @@
flush();
assertTrue(
- !!section.shadowRoot.querySelector('#autofillExtensionIndicator'));
+ !!section.shadowRoot!.querySelector('#autofillExtensionIndicator'));
});
});
suite('PaymentsSection', function() {
setup(function() {
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
loadTimeData.overrideValues({
migrationEnabled: true,
});
@@ -46,12 +47,11 @@
/**
* Creates the payments autofill section for the given list.
- * @param {!Array<!chrome.autofillPrivate.CreditCardEntry>} creditCards
- * @param {!Array<!string>} upiIds
* @param {!Object} prefValues
- * @return {!Object}
*/
- function createPaymentsSection(creditCards, upiIds, prefValues) {
+ function createPaymentsSection(
+ creditCards: chrome.autofillPrivate.CreditCardEntry[], upiIds: string[],
+ prefValues: any): SettingsPaymentsSectionElement {
// Override the PaymentsManagerImpl for testing.
const paymentsManager = new TestPaymentsManager();
paymentsManager.data.creditCards = creditCards;
@@ -68,10 +68,10 @@
/**
* Creates the Edit Credit Card dialog.
- * @param {!chrome.autofillPrivate.CreditCardEntry} creditCardItem
- * @return {!Object}
*/
- function createCreditCardDialog(creditCardItem) {
+ function createCreditCardDialog(
+ creditCardItem: chrome.autofillPrivate.CreditCardEntry):
+ SettingsCreditCardEditDialogElement {
const section = document.createElement('settings-credit-card-edit-dialog');
section.creditCard = creditCardItem;
document.body.appendChild(section);
@@ -82,51 +82,45 @@
// Fakes the existence of a platform authenticator.
function addFakePlatformAuthenticator() {
if (!window.PublicKeyCredential) {
- window.PublicKeyCredential = {};
+ (window.PublicKeyCredential as PublicKeyCredential) = {} as
+ PublicKeyCredential;
}
window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable =
function() {
- return new Promise(callback => {
- callback(true);
- });
+ return Promise.resolve(true);
};
}
/**
* Returns an array containing the local and server credit card items.
- * @return {!Array<!chrome.autofillPrivate.CreditCardEntry>}
*/
function getLocalAndServerCreditCardListItems() {
- return document.body.querySelector('settings-payments-section')
- .shadowRoot.querySelector('#paymentsList')
- .shadowRoot.querySelectorAll('settings-credit-card-list-entry');
+ return document.body.querySelector('settings-payments-section')!.shadowRoot!
+ .querySelector('#paymentsList')!.shadowRoot!.querySelectorAll(
+ 'settings-credit-card-list-entry')!;
}
/**
* Returns the shadow root of the card row from the specified list of
* payment methods.
- * @param {!HTMLElement} paymentsList
- * @return {?HTMLElement}
*/
- function getCardRowShadowRoot(paymentsList) {
- const row = paymentsList.shadowRoot.querySelector(
+ function getCardRowShadowRoot(paymentsList: HTMLElement): ShadowRoot {
+ const row = paymentsList.shadowRoot!.querySelector(
'settings-credit-card-list-entry');
assertTrue(!!row);
- return row.shadowRoot;
+ return row!.shadowRoot!;
}
/**
* Returns the shadow root of the UPI ID row from the specified list of
* payment methods.
- * @param {!HTMLElement} paymentsList
- * @return {?HTMLElement}
*/
- function getUPIRowShadowRoot(paymentsList) {
+ function getUPIRowShadowRoot(paymentsList: HTMLElement): ShadowRoot {
const row =
- paymentsList.shadowRoot.querySelector('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelector('settings-upi-id-list-entry');
assertTrue(!!row);
- return row.shadowRoot;
+ return row!.shadowRoot!;
}
test('verifyNoCreditCards', function() {
@@ -134,18 +128,17 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- const creditCardList = section.shadowRoot.querySelector('#paymentsList');
+ const creditCardList = section.$.paymentsList;
assertTrue(!!creditCardList);
assertEquals(0, getLocalAndServerCreditCardListItems().length);
assertFalse(
- creditCardList.shadowRoot.querySelector('#noPaymentMethodsLabel')
- .hidden);
- assertTrue(
- creditCardList.shadowRoot.querySelector('#creditCardsHeading').hidden);
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertFalse(section.shadowRoot.querySelector('#addCreditCard').disabled);
+ creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#noPaymentMethodsLabel')!.hidden);
+ assertTrue(creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#creditCardsHeading')!.hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertFalse(section.$.addCreditCard.disabled);
});
test('verifyCreditCardsDisabled', function() {
@@ -153,9 +146,8 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: false}});
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertTrue(section.shadowRoot.querySelector('#addCreditCard').hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertTrue(section.$.addCreditCard.hidden);
});
test('verifyCreditCardCount', function() {
@@ -170,42 +162,41 @@
const section = createPaymentsSection(
creditCards, /*upiIds=*/[], {credit_card_enabled: {value: true}});
- const creditCardList = section.shadowRoot.querySelector('#paymentsList');
+ const creditCardList = section.$.paymentsList;
assertTrue(!!creditCardList);
assertEquals(
creditCards.length, getLocalAndServerCreditCardListItems().length);
- assertTrue(creditCardList.shadowRoot.querySelector('#noPaymentMethodsLabel')
- .hidden);
- assertFalse(
- creditCardList.shadowRoot.querySelector('#creditCardsHeading').hidden);
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertFalse(section.shadowRoot.querySelector('#addCreditCard').disabled);
+ assertTrue(
+ creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#noPaymentMethodsLabel')!.hidden);
+ assertFalse(creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#creditCardsHeading')!.hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertFalse(section.$.addCreditCard.disabled);
});
test('verifyCreditCardFields', function() {
const creditCard = createCreditCardEntry();
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertEquals(
- creditCard.metadata.summaryLabel,
- rowShadowRoot.querySelector('#creditCardLabel').textContent);
+ creditCard.metadata!.summaryLabel,
+ rowShadowRoot.querySelector<HTMLElement>(
+ '#creditCardLabel')!.textContent);
assertEquals(
creditCard.expirationMonth + '/' + creditCard.expirationYear,
- rowShadowRoot.querySelector('#creditCardExpiration')
- .textContent.trim());
+ rowShadowRoot.querySelector<HTMLElement>(
+ '#creditCardExpiration')!.textContent!.trim());
});
test('verifyCreditCardRowButtonIsDropdownWhenLocal', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = true;
+ creditCard.metadata!.isLocal = true;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
assertTrue(!!menuButton);
const outlinkButton =
@@ -215,11 +206,10 @@
test('verifyCreditCardRowButtonIsOutlinkWhenRemote', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
+ creditCard.metadata!.isLocal = false;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
assertFalse(!!menuButton);
const outlinkButton =
@@ -233,9 +223,15 @@
const oldCreditCard = createCreditCardEntry();
const oldCreditCardDialog = createCreditCardDialog(oldCreditCard);
- assertNotEquals(oldCreditCardDialog.title_, newCreditCardDialog.title_);
- assertNotEquals('', newCreditCardDialog.title_);
- assertNotEquals('', oldCreditCardDialog.title_);
+ function getTitle(dialog: SettingsCreditCardEditDialogElement) {
+ return dialog.shadowRoot!.querySelector('[slot=title]')!.textContent;
+ }
+
+ const oldTitle = getTitle(oldCreditCardDialog);
+ const newTitle = getTitle(newCreditCardDialog);
+ assertNotEquals(oldTitle, newTitle);
+ assertNotEquals('', oldTitle);
+ assertNotEquals('', newTitle);
// Wait for dialogs to open before finishing test.
return Promise.all([
@@ -259,10 +255,10 @@
const maxYear = now.getFullYear() + 19;
const yearOptions = creditCardDialog.$.year.options;
- assertEquals('2015', yearOptions[0].textContent.trim());
+ assertEquals('2015', yearOptions[0]!.textContent!.trim());
assertEquals(
maxYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -283,10 +279,11 @@
const yearOptions = creditCardDialog.$.year.options;
assertEquals(
- now.getFullYear().toString(), yearOptions[0].textContent.trim());
+ now.getFullYear().toString(),
+ yearOptions[0]!.textContent!.trim());
assertEquals(
farFutureYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -308,10 +305,11 @@
const yearOptions = creditCardDialog.$.year.options;
assertEquals(
- now.getFullYear().toString(), yearOptions[0].textContent.trim());
+ now.getFullYear().toString(),
+ yearOptions[0]!.textContent!.trim());
assertEquals(
maxYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -326,7 +324,7 @@
// Not expired, but still can't be saved, because there's no
// name.
const expiredError =
- creditCardDialog.shadowRoot.querySelector('#expired-error');
+ creditCardDialog.shadowRoot!.querySelector('#expired-error')!;
assertEquals('hidden', getComputedStyle(expiredError).visibility);
assertTrue(creditCardDialog.$.saveButton.disabled);
@@ -373,78 +371,73 @@
const creditCard = createCreditCardEntry();
// When credit card is local, |isCached| will be undefined.
- creditCard.metadata.isLocal = true;
- creditCard.metadata.isCached = undefined;
+ creditCard.metadata!.isLocal = true;
+ creditCard.metadata!.isCached = undefined;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// Local credit cards will show the overflow menu.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertFalse(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
- const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
+ const menuButton =
+ rowShadowRoot.querySelector<HTMLElement>('#creditCardMenu');
assertTrue(!!menuButton);
- menuButton.click();
+ menuButton!.click();
flush();
- const menu = section.$.creditCardSharedMenu;
-
// Menu should have 2 options.
- assertFalse(menu.querySelector('#menuEditCreditCard').hidden);
- assertFalse(menu.querySelector('#menuRemoveCreditCard').hidden);
- assertTrue(menu.querySelector('#menuClearCreditCard').hidden);
+ assertFalse(section.$.menuEditCreditCard.hidden);
+ assertFalse(section.$.menuRemoveCreditCard.hidden);
+ assertTrue(section.$.menuClearCreditCard.hidden);
- menu.close();
+ section.$.creditCardSharedMenu.close();
flush();
});
test('verifyCachedCreditCardMenu', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
- creditCard.metadata.isCached = true;
+ creditCard.metadata!.isLocal = false;
+ creditCard.metadata!.isCached = true;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// Cached remote CCs will show overflow menu.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertFalse(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
- const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
+ const menuButton =
+ rowShadowRoot.querySelector<HTMLElement>('#creditCardMenu');
assertTrue(!!menuButton);
- menuButton.click();
+ menuButton!.click();
flush();
- const menu = section.$.creditCardSharedMenu;
-
// Menu should have 2 options.
- assertFalse(menu.querySelector('#menuEditCreditCard').hidden);
- assertTrue(menu.querySelector('#menuRemoveCreditCard').hidden);
- assertFalse(menu.querySelector('#menuClearCreditCard').hidden);
+ assertFalse(section.$.menuEditCreditCard.hidden);
+ assertTrue(section.$.menuRemoveCreditCard.hidden);
+ assertFalse(section.$.menuClearCreditCard.hidden);
- menu.close();
+ section.$.creditCardSharedMenu.close();
flush();
});
test('verifyNotCachedCreditCardMenu', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
- creditCard.metadata.isCached = false;
+ creditCard.metadata!.isLocal = false;
+ creditCard.metadata!.isCached = false;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// No overflow menu when not cached.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertTrue(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
assertFalse(!!rowShadowRoot.querySelector('#creditCardMenu'));
});
@@ -455,43 +448,43 @@
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonNotShownIfCreditCardDisabled', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
// Mock credit card save toggle is turned off by users.
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: false}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonNotShownIfNoCardIsMigratable', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
// Mock credit card is not valid.
- creditCard.metadata.isMigratable = false;
+ creditCard.metadata!.isMigratable = false;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonShown', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertFalse(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertFalse(section.$.migrateCreditCards.hidden);
});
test('verifyFIDOAuthToggleShownIfUserIsVerifiable', function() {
@@ -502,7 +495,7 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- assertTrue(!!section.shadowRoot.querySelector(
+ assertTrue(!!section.shadowRoot!.querySelector(
'#autofillCreditCardFIDOAuthToggle'));
});
@@ -513,7 +506,7 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- assertFalse(!!section.shadowRoot.querySelector(
+ assertFalse(!!section.shadowRoot!.querySelector(
'#autofillCreditCardFIDOAuthToggle'));
});
@@ -525,9 +518,9 @@
credit_card_enabled: {value: true},
credit_card_fido_auth_enabled: {value: true}
});
- assertTrue(
- section.shadowRoot.querySelector('#autofillCreditCardFIDOAuthToggle')
- .checked);
+ assertTrue(section.shadowRoot!
+ .querySelector<SettingsToggleButtonElement>(
+ '#autofillCreditCardFIDOAuthToggle')!.checked);
});
test('verifyFIDOAuthToggleUncheckedIfOptedOut', function() {
@@ -538,9 +531,9 @@
credit_card_enabled: {value: true},
credit_card_fido_auth_enabled: {value: false}
});
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardFIDOAuthToggle')
- .checked);
+ assertFalse(section.shadowRoot!
+ .querySelector<SettingsToggleButtonElement>(
+ '#autofillCreditCardFIDOAuthToggle')!.checked);
});
test('verifyUpiIdRow', function() {
@@ -548,11 +541,10 @@
const section = createPaymentsSection(
/*creditCards=*/[], ['vpa@indianbank'], /*prefValues=*/ {});
- const rowShadowRoot =
- getUPIRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getUPIRowShadowRoot(section.$.paymentsList);
assertTrue(!!rowShadowRoot);
assertEquals(
- rowShadowRoot.querySelector('#upiIdLabel').textContent,
+ rowShadowRoot.querySelector<HTMLElement>('#upiIdLabel')!.textContent,
'vpa@indianbank');
});
@@ -562,9 +554,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(0, upiRows.length);
});
@@ -576,9 +568,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], upiIds, /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(upiIds.length, upiRows.length);
});
@@ -591,9 +583,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], upiIds, /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(0, upiRows.length);
});
@@ -605,7 +597,7 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
- section.shadowRoot.querySelector('#canMakePaymentToggle').click();
+ section.$.canMakePaymentToggle.click();
const result =
await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram');
Author: dpapad <dpa...@chromium.org>
AuthorDate: Wed Dec 01 08:42:38 2021
Commit: Chromium LUCI CQ <chromiu...@luci-project-accounts.iam.gserviceaccount.com>
CommitDate: Wed Dec 01 08:42:38 2021
Settings: Migrate autofill_page/ tests to TypeScript, part 2.
Migrating
- autofill_page_tests.js
- payments_section_test.js
Bug: 1263610
Change-Id: I7f38917503e3e0e46326572951416ffe8d264531
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3307773
Auto-Submit: Demetrios Papadopoulos <dpa...@chromium.org>
Reviewed-by: Viktor Semeniuk <vsem...@google.com>
Commit-Queue: Demetrios Papadopoulos <dpa...@chromium.org>
Cr-Commit-Position: refs/heads/main@{#946905}
diff --git a/chrome/browser/resources/settings/autofill_page/autofill_page.ts b/chrome/browser/resources/settings/autofill_page/autofill_page.ts
index d48c6882..c5ff980 100644
--- a/chrome/browser/resources/settings/autofill_page/autofill_page.ts
+++ b/chrome/browser/resources/settings/autofill_page/autofill_page.ts
@@ -28,7 +28,8 @@
const SettingsAutofillPageElementBase =
PrefsMixin(PasswordCheckMixin(BaseMixin(PolymerElement)));
-class SettingsAutofillPageElement extends SettingsAutofillPageElementBase {
+export class SettingsAutofillPageElement extends
+ SettingsAutofillPageElementBase {
static get is() {
return 'settings-autofill-page';
}
@@ -101,5 +102,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-autofill-page': SettingsAutofillPageElement;
+ }
+}
+
customElements.define(
SettingsAutofillPageElement.is, SettingsAutofillPageElement);
diff --git a/chrome/browser/resources/settings/autofill_page/autofill_section.ts b/chrome/browser/resources/settings/autofill_page/autofill_section.ts
index e6a49ba..19ede76 100644
--- a/chrome/browser/resources/settings/autofill_page/autofill_section.ts
+++ b/chrome/browser/resources/settings/autofill_page/autofill_section.ts
@@ -43,7 +43,7 @@
};
}
-interface SettingsAutofillSectionElement {
+export interface SettingsAutofillSectionElement {
$: {
addressSharedMenu: CrActionMenuElement,
addAddress: HTMLElement,
@@ -52,7 +52,7 @@
const SettingsAutofillSectionElementBase = I18nMixin(PolymerElement);
-class SettingsAutofillSectionElement extends
+export class SettingsAutofillSectionElement extends
SettingsAutofillSectionElementBase {
static get is() {
return 'settings-autofill-section';
@@ -219,5 +219,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-autofill-section': SettingsAutofillSectionElement;
+ }
+}
+
customElements.define(
SettingsAutofillSectionElement.is, SettingsAutofillSectionElement);
diff --git a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
index e61d210..6993d35 100644
--- a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
+++ b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.ts
@@ -16,6 +16,7 @@
import '../settings_shared_css.js';
import '../settings_vars_css.js';
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
import {html, microTask, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -34,9 +35,11 @@
}
}
-interface SettingsCreditCardEditDialogElement {
+export interface SettingsCreditCardEditDialogElement {
$: {
+ cancelButton: CrButtonElement,
dialog: CrDialogElement,
+ saveButton: CrButtonElement,
month: HTMLSelectElement,
year: HTMLSelectElement,
};
@@ -44,7 +47,7 @@
const SettingsCreditCardEditDialogElementBase = I18nMixin(PolymerElement);
-class SettingsCreditCardEditDialogElement extends
+export class SettingsCreditCardEditDialogElement extends
SettingsCreditCardEditDialogElementBase {
static get is() {
return 'settings-credit-card-edit-dialog';
@@ -274,6 +277,12 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-credit-card-edit-dialog': SettingsCreditCardEditDialogElement;
+ }
+}
+
customElements.define(
SettingsCreditCardEditDialogElement.is,
SettingsCreditCardEditDialogElement);
diff --git a/chrome/browser/resources/settings/autofill_page/payments_section.ts b/chrome/browser/resources/settings/autofill_page/payments_section.ts
index d563a0b..fcc334a 100644
--- a/chrome/browser/resources/settings/autofill_page/payments_section.ts
+++ b/chrome/browser/resources/settings/autofill_page/payments_section.ts
@@ -21,6 +21,7 @@
import './payments_list.js';
import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
+import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
@@ -45,16 +46,23 @@
}
}
-interface SettingsPaymentsSectionElement {
+export interface SettingsPaymentsSectionElement {
$: {
+ addCreditCard: CrButtonElement,
+ autofillCreditCardToggle: SettingsToggleButtonElement,
+ canMakePaymentToggle: SettingsToggleButtonElement,
creditCardSharedMenu: CrActionMenuElement,
- addCreditCard: HTMLElement,
+ menuClearCreditCard: HTMLElement,
+ menuEditCreditCard: HTMLElement,
+ menuRemoveCreditCard: HTMLElement,
+ migrateCreditCards: HTMLElement,
+ paymentsList: HTMLElement,
};
}
const SettingsPaymentsSectionElementBase = I18nMixin(PolymerElement);
-class SettingsPaymentsSectionElement extends
+export class SettingsPaymentsSectionElement extends
SettingsPaymentsSectionElementBase {
static get is() {
return 'settings-payments-section';
@@ -66,6 +74,8 @@
static get properties() {
return {
+ prefs: Object,
+
/**
* An array of all saved credit cards.
*/
@@ -114,6 +124,7 @@
};
}
+ prefs: {[key: string]: any};
creditCards: Array<chrome.autofillPrivate.CreditCardEntry>;
upiIds: Array<string>;
private userIsFidoVerifiable_: boolean;
@@ -343,5 +354,11 @@
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'settings-payments-section': SettingsPaymentsSectionElement;
+ }
+}
+
customElements.define(
SettingsPaymentsSectionElement.is, SettingsPaymentsSectionElement);
diff --git a/chrome/browser/resources/settings/lazy_load.ts b/chrome/browser/resources/settings/lazy_load.ts
index d3f7dd1..9915f8f 100644
--- a/chrome/browser/resources/settings/lazy_load.ts
+++ b/chrome/browser/resources/settings/lazy_load.ts
@@ -67,15 +67,18 @@
export {FontsBrowserProxy, FontsBrowserProxyImpl, FontsData} from './appearance_page/fonts_browser_proxy.js';
export {CountryDetailManagerImpl} from './autofill_page/address_edit_dialog.js';
export {AutofillManagerImpl, AutofillManagerProxy, PersonalDataChangedListener} from './autofill_page/autofill_manager_proxy.js';
+export {SettingsAutofillSectionElement} from './autofill_page/autofill_section.js';
// <if expr="chromeos or lacros">
export {BlockingRequestManager} from './autofill_page/blocking_request_manager.js';
// </if>
+export {SettingsCreditCardEditDialogElement} from './autofill_page/credit_card_edit_dialog.js';
export {PasswordEditDialogElement} from './autofill_page/password_edit_dialog.js';
export {PasswordListItemElement} from './autofill_page/password_list_item.js';
export {PasswordMoveMultiplePasswordsToAccountDialogElement} from './autofill_page/password_move_multiple_passwords_to_account_dialog.js';
export {PasswordsExportDialogElement} from './autofill_page/passwords_export_dialog.js';
export {PasswordsSectionElement} from './autofill_page/passwords_section.js';
export {PaymentsManagerImpl, PaymentsManagerProxy} from './autofill_page/payments_manager_proxy.js';
+export {SettingsPaymentsSectionElement} from './autofill_page/payments_section.js';
// <if expr="_google_chrome and is_win">
export {ChromeCleanupIdleReason} from './chrome_cleanup_page/chrome_cleanup_page.js';
export {ChromeCleanupProxy, ChromeCleanupProxyImpl} from './chrome_cleanup_page/chrome_cleanup_proxy.js';
diff --git a/chrome/browser/resources/settings/settings.ts b/chrome/browser/resources/settings/settings.ts
index 106e14d..1bf00a7 100644
--- a/chrome/browser/resources/settings/settings.ts
+++ b/chrome/browser/resources/settings/settings.ts
@@ -15,6 +15,7 @@
export {AppearanceBrowserProxy, AppearanceBrowserProxyImpl} from './appearance_page/appearance_browser_proxy.js';
export {SettingsAppearancePageElement} from './appearance_page/appearance_page.js';
export {HomeUrlInputElement} from './appearance_page/home_url_input.js';
+export {SettingsAutofillPageElement} from './autofill_page/autofill_page.js';
export {MultiStoreExceptionEntry} from './autofill_page/multi_store_exception_entry.js';
export {MultiStorePasswordUiEntry} from './autofill_page/multi_store_password_ui_entry.js';
export {AccountStorageOptInStateChangedListener, CredentialsChangedListener, PasswordCheckInteraction, PasswordCheckReferrer, PasswordCheckStatusChangedListener, PasswordExceptionListChangedListener, PasswordManagerImpl, PasswordManagerProxy, PasswordsFileExportProgressListener, SavedPasswordListChangedListener} from './autofill_page/password_manager_proxy.js';
diff --git a/chrome/test/data/webui/settings/BUILD.gn b/chrome/test/data/webui/settings/BUILD.gn
index 27fe6abe..e7e4cd9d 100644
--- a/chrome/test/data/webui/settings/BUILD.gn
+++ b/chrome/test/data/webui/settings/BUILD.gn
@@ -36,7 +36,7 @@
"advanced_page_test.js",
"all_sites_tests.ts",
"appearance_fonts_page_test.ts",
- "autofill_page_test.js",
+ "autofill_page_test.ts",
"autofill_section_test.js",
"avatar_icon_test.ts",
"basic_page_test.js",
@@ -70,7 +70,7 @@
"passwords_export_test.js",
"passwords_section_test.js",
"payments_section_interactive_test.js",
- "payments_section_test.js",
+ "payments_section_test.ts",
"people_page_sync_controls_test.js",
"people_page_sync_page_interactive_test.js",
"people_page_sync_page_test.js",
diff --git a/chrome/test/data/webui/settings/autofill_page_test.js b/chrome/test/data/webui/settings/autofill_page_test.ts
similarity index 67%
rename from chrome/test/data/webui/settings/autofill_page_test.js
rename to chrome/test/data/webui/settings/autofill_page_test.ts
index 582019b..e30af1c7 100644
--- a/chrome/test/data/webui/settings/autofill_page_test.js
+++ b/chrome/test/data/webui/settings/autofill_page_test.ts
@@ -3,9 +3,10 @@
// found in the LICENSE file.
// clang-format off
-import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {AutofillManagerImpl, PaymentsManagerImpl} from 'chrome://settings/lazy_load.js';
-import {CrSettingsPrefs, MultiStoreExceptionEntry, MultiStorePasswordUiEntry, OpenWindowProxyImpl, PasswordManagerImpl, Router, routes, SettingsPluralStringProxyImpl} from 'chrome://settings/settings.js';
+import {DomIf, flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {AutofillManagerImpl, PasswordsSectionElement, PaymentsManagerImpl, SettingsAutofillSectionElement, SettingsPaymentsSectionElement} from 'chrome://settings/lazy_load.js';
+import {CrSettingsPrefs, MultiStoreExceptionEntry, MultiStorePasswordUiEntry, OpenWindowProxyImpl, PasswordManagerImpl, SettingsAutofillPageElement, SettingsPluralStringProxyImpl, SettingsPrefsElement} from 'chrome://settings/settings.js';
+import {assertDeepEquals, assertEquals, assertNotEquals} from 'chrome://webui-test/chai_assert.js';
import {TestPluralStringProxy} from 'chrome://webui-test/test_plural_string_proxy.js';
import {FakeSettingsPrivate} from './fake_settings_private.js';
@@ -19,64 +20,64 @@
suite('PasswordsAndForms', function() {
/**
* Creates a new passwords and forms element.
- * @return {!Object}
*/
- function createAutofillElement(prefsElement) {
+ function createAutofillElement(prefsElement: SettingsPrefsElement):
+ SettingsAutofillPageElement {
const element = document.createElement('settings-autofill-page');
element.prefs = prefsElement.prefs;
document.body.appendChild(element);
- element.shadowRoot.querySelector('dom-if[route-path="/passwords"]').if =
- true;
- element.shadowRoot.querySelector('dom-if[route-path="/payments"]').if =
- true;
- element.shadowRoot.querySelector('dom-if[route-path="/addresses"]').if =
- true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/passwords"]')!.if = true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/payments"]')!.if = true;
+ element.shadowRoot!.querySelector<DomIf>(
+ 'dom-if[route-path="/addresses"]')!.if = true;
flush();
return element;
}
/**
- * @pram {boolean} autofill Whether autofill is enabled or not.
- * @param {boolean} passwords Whether passwords are enabled or not.
- * @return {!Promise<!Element>} The |prefs| element.
+ * @param autofill Whether autofill is enabled or not.
+ * @param passwords Whether passwords are enabled or not.
*/
- function createPrefs(autofill, passwords) {
+ function createPrefs(
+ autofill: boolean, passwords: boolean): Promise<SettingsPrefsElement> {
return new Promise(function(resolve) {
CrSettingsPrefs.deferInitialization = true;
const prefs = document.createElement('settings-prefs');
prefs.initialize(new FakeSettingsPrivate([
- {
- key: 'autofill.enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: autofill,
- },
- {
- key: 'autofill.profile_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'autofill.credit_card_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'credentials_enable_service',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: passwords,
- },
- {
- key: 'credentials_enable_autosignin',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- },
- {
- key: 'payments.can_make_payment_enabled',
- type: chrome.settingsPrivate.PrefType.BOOLEAN,
- value: true,
- }
- ]));
+ {
+ key: 'autofill.enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: autofill,
+ },
+ {
+ key: 'autofill.profile_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'autofill.credit_card_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'credentials_enable_service',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: passwords,
+ },
+ {
+ key: 'credentials_enable_autosignin',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ },
+ {
+ key: 'payments.can_make_payment_enabled',
+ type: chrome.settingsPrivate.PrefType.BOOLEAN,
+ value: true,
+ }
+ ]) as unknown as typeof chrome.settingsPrivate);
CrSettingsPrefs.initialized.then(function() {
resolve(prefs);
@@ -86,9 +87,9 @@
/**
* Cleans up prefs so tests can continue to run.
- * @param {!Element} prefs The prefs element.
+ * @param prefs The prefs element.
*/
- function destroyPrefs(prefs) {
+ function destroyPrefs(prefs: SettingsPrefsElement) {
CrSettingsPrefs.resetForTesting();
CrSettingsPrefs.deferInitialization = false;
prefs.resetForTesting();
@@ -97,9 +98,8 @@
/**
* Creates PasswordManagerExpectations with the values expected after first
* creating the element.
- * @return {!PasswordManagerExpectations}
*/
- function basePasswordExpectations() {
+ function basePasswordExpectations(): PasswordManagerExpectations {
const expected = new PasswordManagerExpectations();
expected.requested.passwords = 1;
expected.requested.exceptions = 1;
@@ -113,9 +113,8 @@
/**
* Creates AutofillManagerExpectations with the values expected after first
* creating the element.
- * @return {!AutofillManagerExpectations}
*/
- function baseAutofillExpectations() {
+ function baseAutofillExpectations(): AutofillManagerExpectations {
const expected = new AutofillManagerExpectations();
expected.requestedAddresses = 1;
expected.listeningAddresses = 1;
@@ -125,22 +124,21 @@
/**
* Creates PaymentsManagerExpectations with the values expected after first
* creating the element.
- * @return {!PaymentsManagerExpectations}
*/
- function basePaymentsExpectations() {
+ function basePaymentsExpectations(): PaymentsManagerExpectations {
const expected = new PaymentsManagerExpectations();
expected.requestedCreditCards = 1;
expected.listeningCreditCards = 1;
return expected;
}
- let passwordManager;
- let autofillManager;
- let paymentsManager;
+ let passwordManager: TestPasswordManagerProxy;
+ let autofillManager: TestAutofillManager;
+ let paymentsManager: TestPaymentsManager;
setup(async function() {
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
// Override the PasswordManagerImpl for testing.
passwordManager = new TestPasswordManagerProxy();
@@ -195,12 +193,14 @@
createPasswordEntry({url: 'two.com', username: 'user1', id: 1})
];
- passwordManager.lastCallback.addSavedPasswordListChangedListener(list);
+ passwordManager.lastCallback.addSavedPasswordListChangedListener!(list);
flush();
assertDeepEquals(
list.map(entry => new MultiStorePasswordUiEntry(entry)),
- element.shadowRoot.querySelector('#passwordSection').savedPasswords);
+ element.shadowRoot!
+ .querySelector<PasswordsSectionElement>(
+ '#passwordSection')!.savedPasswords);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -220,13 +220,14 @@
createExceptionEntry({url: 'one.com', id: 0}),
createExceptionEntry({url: 'two.com', id: 1})
];
- passwordManager.lastCallback.addExceptionListChangedListener(list);
+ passwordManager.lastCallback.addExceptionListChangedListener!(list);
flush();
assertDeepEquals(
list.map(entry => new MultiStoreExceptionEntry(entry)),
- element.shadowRoot.querySelector('#passwordSection')
- .passwordExceptions);
+ element.shadowRoot!
+ .querySelector<PasswordsSectionElement>(
+ '#passwordSection')!.passwordExceptions);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -244,13 +245,15 @@
const addressList = [createAddressEntry(), createAddressEntry()];
const cardList = [createCreditCardEntry(), createCreditCardEntry()];
- autofillManager.lastCallback.setPersonalDataManagerListener(
- addressList, cardList);
+ autofillManager.lastCallback.setPersonalDataManagerListener!
+ (addressList, cardList);
flush();
assertEquals(
addressList,
- element.shadowRoot.querySelector('#autofillSection').addresses);
+ element.shadowRoot!
+ .querySelector<SettingsAutofillSectionElement>(
+ '#autofillSection')!.addresses);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -268,13 +271,15 @@
const addressList = [createAddressEntry(), createAddressEntry()];
const cardList = [createCreditCardEntry(), createCreditCardEntry()];
- paymentsManager.lastCallback.setPersonalDataManagerListener(
- addressList, cardList);
+ paymentsManager.lastCallback.setPersonalDataManagerListener!
+ (addressList, cardList);
flush();
assertEquals(
cardList,
- element.shadowRoot.querySelector('#paymentsSection').creditCards);
+ element.shadowRoot!
+ .querySelector<SettingsPaymentsSectionElement>(
+ '#paymentsSection')!.creditCards);
// The callback is coming from the manager, so the element shouldn't
// have additional calls to the manager after the base expectations.
@@ -295,19 +300,17 @@
password_manager_leak_detection: {},
},
};
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
document.body.appendChild(autofillPage);
flush();
return autofillPage;
}
suite('PasswordsUITest', function() {
- /** @type {SettingsAutofillPageElement} */
- let autofillPage = null;
- /** @type {OpenWindowProxy} */
- let openWindowProxy = null;
- let passwordManager;
- let pluralString;
+ let autofillPage: SettingsAutofillPageElement;
+ let openWindowProxy: TestOpenWindowProxy;
+ let passwordManager: TestPasswordManagerProxy;
+ let pluralString: TestPluralStringProxy;
setup(function() {
openWindowProxy = new TestOpenWindowProxy();
@@ -329,12 +332,15 @@
// Check if sublabel is empty
assertEquals(
'',
- autofillPage.shadowRoot.querySelector('#passwordManagerSubLabel')
- .innerText.trim());
+ autofillPage.shadowRoot!
+ .querySelector<HTMLElement>(
+ '#passwordManagerSubLabel')!.innerText.trim());
// Simulate one compromised password
const leakedPasswords = [
- makeCompromisedCredential('google.com', 'jdoerrie', 'LEAKED'),
+ makeCompromisedCredential(
+ 'google.com', 'jdoerrie',
+ chrome.passwordsPrivate.CompromiseType.LEAKED),
];
passwordManager.data.leakedCredentials = leakedPasswords;
@@ -347,7 +353,8 @@
// With compromised credentials sublabel should have text
assertNotEquals(
'',
- autofillPage.shadowRoot.querySelector('#passwordManagerSubLabel')
- .innerText.trim());
+ autofillPage.shadowRoot!
+ .querySelector<HTMLElement>(
+ '#passwordManagerSubLabel')!.innerText.trim());
});
});
diff --git a/chrome/test/data/webui/settings/payments_section_test.js b/chrome/test/data/webui/settings/payments_section_test.ts
similarity index 70%
rename from chrome/test/data/webui/settings/payments_section_test.js
rename to chrome/test/data/webui/settings/payments_section_test.ts
index 4b759fd..8540d27 100644
--- a/chrome/test/data/webui/settings/payments_section_test.js
+++ b/chrome/test/data/webui/settings/payments_section_test.ts
@@ -5,9 +5,10 @@
// clang-format off
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {PaymentsManagerImpl} from 'chrome://settings/lazy_load.js';
-import {MetricsBrowserProxyImpl, PrivacyElementInteractions} from 'chrome://settings/settings.js';
-import {eventToPromise, isVisible, whenAttributeIs} from 'chrome://webui-test/test_util.js';
+import {PaymentsManagerImpl, SettingsCreditCardEditDialogElement, SettingsPaymentsSectionElement} from 'chrome://settings/lazy_load.js';
+import {MetricsBrowserProxyImpl, PrivacyElementInteractions, SettingsToggleButtonElement} from 'chrome://settings/settings.js';
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {eventToPromise, whenAttributeIs} from 'chrome://webui-test/test_util.js';
import {createCreditCardEntry, createEmptyCreditCardEntry,TestPaymentsManager} from './passwords_and_autofill_fake_data.js';
import {TestMetricsBrowserProxy} from './test_metrics_browser_proxy.js';
@@ -24,7 +25,7 @@
document.body.appendChild(section);
assertFalse(
- !!section.shadowRoot.querySelector('#autofillExtensionIndicator'));
+ !!section.shadowRoot!.querySelector('#autofillExtensionIndicator'));
section.set('prefs.autofill.credit_card_enabled.extensionId', 'test-id-1');
section.set(
'prefs.autofill.credit_card_fido_auth_enabled.extensionId',
@@ -32,13 +33,13 @@
flush();
assertTrue(
- !!section.shadowRoot.querySelector('#autofillExtensionIndicator'));
+ !!section.shadowRoot!.querySelector('#autofillExtensionIndicator'));
});
});
suite('PaymentsSection', function() {
setup(function() {
- PolymerTest.clearBody();
+ document.body.innerHTML = '';
loadTimeData.overrideValues({
migrationEnabled: true,
});
@@ -46,12 +47,11 @@
/**
* Creates the payments autofill section for the given list.
- * @param {!Array<!chrome.autofillPrivate.CreditCardEntry>} creditCards
- * @param {!Array<!string>} upiIds
* @param {!Object} prefValues
- * @return {!Object}
*/
- function createPaymentsSection(creditCards, upiIds, prefValues) {
+ function createPaymentsSection(
+ creditCards: chrome.autofillPrivate.CreditCardEntry[], upiIds: string[],
+ prefValues: any): SettingsPaymentsSectionElement {
// Override the PaymentsManagerImpl for testing.
const paymentsManager = new TestPaymentsManager();
paymentsManager.data.creditCards = creditCards;
@@ -68,10 +68,10 @@
/**
* Creates the Edit Credit Card dialog.
- * @param {!chrome.autofillPrivate.CreditCardEntry} creditCardItem
- * @return {!Object}
*/
- function createCreditCardDialog(creditCardItem) {
+ function createCreditCardDialog(
+ creditCardItem: chrome.autofillPrivate.CreditCardEntry):
+ SettingsCreditCardEditDialogElement {
const section = document.createElement('settings-credit-card-edit-dialog');
section.creditCard = creditCardItem;
document.body.appendChild(section);
@@ -82,51 +82,45 @@
// Fakes the existence of a platform authenticator.
function addFakePlatformAuthenticator() {
if (!window.PublicKeyCredential) {
- window.PublicKeyCredential = {};
+ (window.PublicKeyCredential as PublicKeyCredential) = {} as
+ PublicKeyCredential;
}
window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable =
function() {
- return new Promise(callback => {
- callback(true);
- });
+ return Promise.resolve(true);
};
}
/**
* Returns an array containing the local and server credit card items.
- * @return {!Array<!chrome.autofillPrivate.CreditCardEntry>}
*/
function getLocalAndServerCreditCardListItems() {
- return document.body.querySelector('settings-payments-section')
- .shadowRoot.querySelector('#paymentsList')
- .shadowRoot.querySelectorAll('settings-credit-card-list-entry');
+ return document.body.querySelector('settings-payments-section')!.shadowRoot!
+ .querySelector('#paymentsList')!.shadowRoot!.querySelectorAll(
+ 'settings-credit-card-list-entry')!;
}
/**
* Returns the shadow root of the card row from the specified list of
* payment methods.
- * @param {!HTMLElement} paymentsList
- * @return {?HTMLElement}
*/
- function getCardRowShadowRoot(paymentsList) {
- const row = paymentsList.shadowRoot.querySelector(
+ function getCardRowShadowRoot(paymentsList: HTMLElement): ShadowRoot {
+ const row = paymentsList.shadowRoot!.querySelector(
'settings-credit-card-list-entry');
assertTrue(!!row);
- return row.shadowRoot;
+ return row!.shadowRoot!;
}
/**
* Returns the shadow root of the UPI ID row from the specified list of
* payment methods.
- * @param {!HTMLElement} paymentsList
- * @return {?HTMLElement}
*/
- function getUPIRowShadowRoot(paymentsList) {
+ function getUPIRowShadowRoot(paymentsList: HTMLElement): ShadowRoot {
const row =
- paymentsList.shadowRoot.querySelector('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelector('settings-upi-id-list-entry');
assertTrue(!!row);
- return row.shadowRoot;
+ return row!.shadowRoot!;
}
test('verifyNoCreditCards', function() {
@@ -134,18 +128,17 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- const creditCardList = section.shadowRoot.querySelector('#paymentsList');
+ const creditCardList = section.$.paymentsList;
assertTrue(!!creditCardList);
assertEquals(0, getLocalAndServerCreditCardListItems().length);
assertFalse(
- creditCardList.shadowRoot.querySelector('#noPaymentMethodsLabel')
- .hidden);
- assertTrue(
- creditCardList.shadowRoot.querySelector('#creditCardsHeading').hidden);
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertFalse(section.shadowRoot.querySelector('#addCreditCard').disabled);
+ creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#noPaymentMethodsLabel')!.hidden);
+ assertTrue(creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#creditCardsHeading')!.hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertFalse(section.$.addCreditCard.disabled);
});
test('verifyCreditCardsDisabled', function() {
@@ -153,9 +146,8 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: false}});
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertTrue(section.shadowRoot.querySelector('#addCreditCard').hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertTrue(section.$.addCreditCard.hidden);
});
test('verifyCreditCardCount', function() {
@@ -170,42 +162,41 @@
const section = createPaymentsSection(
creditCards, /*upiIds=*/[], {credit_card_enabled: {value: true}});
- const creditCardList = section.shadowRoot.querySelector('#paymentsList');
+ const creditCardList = section.$.paymentsList;
assertTrue(!!creditCardList);
assertEquals(
creditCards.length, getLocalAndServerCreditCardListItems().length);
- assertTrue(creditCardList.shadowRoot.querySelector('#noPaymentMethodsLabel')
- .hidden);
- assertFalse(
- creditCardList.shadowRoot.querySelector('#creditCardsHeading').hidden);
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardToggle').disabled);
- assertFalse(section.shadowRoot.querySelector('#addCreditCard').disabled);
+ assertTrue(
+ creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#noPaymentMethodsLabel')!.hidden);
+ assertFalse(creditCardList.shadowRoot!
+ .querySelector<HTMLElement>('#creditCardsHeading')!.hidden);
+ assertFalse(section.$.autofillCreditCardToggle.disabled);
+ assertFalse(section.$.addCreditCard.disabled);
});
test('verifyCreditCardFields', function() {
const creditCard = createCreditCardEntry();
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertEquals(
- creditCard.metadata.summaryLabel,
- rowShadowRoot.querySelector('#creditCardLabel').textContent);
+ creditCard.metadata!.summaryLabel,
+ rowShadowRoot.querySelector<HTMLElement>(
+ '#creditCardLabel')!.textContent);
assertEquals(
creditCard.expirationMonth + '/' + creditCard.expirationYear,
- rowShadowRoot.querySelector('#creditCardExpiration')
- .textContent.trim());
+ rowShadowRoot.querySelector<HTMLElement>(
+ '#creditCardExpiration')!.textContent!.trim());
});
test('verifyCreditCardRowButtonIsDropdownWhenLocal', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = true;
+ creditCard.metadata!.isLocal = true;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
assertTrue(!!menuButton);
const outlinkButton =
@@ -215,11 +206,10 @@
test('verifyCreditCardRowButtonIsOutlinkWhenRemote', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
+ creditCard.metadata!.isLocal = false;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
assertFalse(!!menuButton);
const outlinkButton =
@@ -233,9 +223,15 @@
const oldCreditCard = createCreditCardEntry();
const oldCreditCardDialog = createCreditCardDialog(oldCreditCard);
- assertNotEquals(oldCreditCardDialog.title_, newCreditCardDialog.title_);
- assertNotEquals('', newCreditCardDialog.title_);
- assertNotEquals('', oldCreditCardDialog.title_);
+ function getTitle(dialog: SettingsCreditCardEditDialogElement) {
+ return dialog.shadowRoot!.querySelector('[slot=title]')!.textContent;
+ }
+
+ const oldTitle = getTitle(oldCreditCardDialog);
+ const newTitle = getTitle(newCreditCardDialog);
+ assertNotEquals(oldTitle, newTitle);
+ assertNotEquals('', oldTitle);
+ assertNotEquals('', newTitle);
// Wait for dialogs to open before finishing test.
return Promise.all([
@@ -259,10 +255,10 @@
const maxYear = now.getFullYear() + 19;
const yearOptions = creditCardDialog.$.year.options;
- assertEquals('2015', yearOptions[0].textContent.trim());
+ assertEquals('2015', yearOptions[0]!.textContent!.trim());
assertEquals(
maxYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -283,10 +279,11 @@
const yearOptions = creditCardDialog.$.year.options;
assertEquals(
- now.getFullYear().toString(), yearOptions[0].textContent.trim());
+ now.getFullYear().toString(),
+ yearOptions[0]!.textContent!.trim());
assertEquals(
farFutureYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -308,10 +305,11 @@
const yearOptions = creditCardDialog.$.year.options;
assertEquals(
- now.getFullYear().toString(), yearOptions[0].textContent.trim());
+ now.getFullYear().toString(),
+ yearOptions[0]!.textContent!.trim());
assertEquals(
maxYear.toString(),
- yearOptions[yearOptions.length - 1].textContent.trim());
+ yearOptions[yearOptions.length - 1]!.textContent!.trim());
assertEquals(
creditCard.expirationYear, creditCardDialog.$.year.value);
});
@@ -326,7 +324,7 @@
// Not expired, but still can't be saved, because there's no
// name.
const expiredError =
- creditCardDialog.shadowRoot.querySelector('#expired-error');
+ creditCardDialog.shadowRoot!.querySelector('#expired-error')!;
assertEquals('hidden', getComputedStyle(expiredError).visibility);
assertTrue(creditCardDialog.$.saveButton.disabled);
@@ -373,78 +371,73 @@
const creditCard = createCreditCardEntry();
// When credit card is local, |isCached| will be undefined.
- creditCard.metadata.isLocal = true;
- creditCard.metadata.isCached = undefined;
+ creditCard.metadata!.isLocal = true;
+ creditCard.metadata!.isCached = undefined;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// Local credit cards will show the overflow menu.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertFalse(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
- const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
+ const menuButton =
+ rowShadowRoot.querySelector<HTMLElement>('#creditCardMenu');
assertTrue(!!menuButton);
- menuButton.click();
+ menuButton!.click();
flush();
- const menu = section.$.creditCardSharedMenu;
-
// Menu should have 2 options.
- assertFalse(menu.querySelector('#menuEditCreditCard').hidden);
- assertFalse(menu.querySelector('#menuRemoveCreditCard').hidden);
- assertTrue(menu.querySelector('#menuClearCreditCard').hidden);
+ assertFalse(section.$.menuEditCreditCard.hidden);
+ assertFalse(section.$.menuRemoveCreditCard.hidden);
+ assertTrue(section.$.menuClearCreditCard.hidden);
- menu.close();
+ section.$.creditCardSharedMenu.close();
flush();
});
test('verifyCachedCreditCardMenu', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
- creditCard.metadata.isCached = true;
+ creditCard.metadata!.isLocal = false;
+ creditCard.metadata!.isCached = true;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// Cached remote CCs will show overflow menu.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertFalse(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
- const menuButton = rowShadowRoot.querySelector('#creditCardMenu');
+ const menuButton =
+ rowShadowRoot.querySelector<HTMLElement>('#creditCardMenu');
assertTrue(!!menuButton);
- menuButton.click();
+ menuButton!.click();
flush();
- const menu = section.$.creditCardSharedMenu;
-
// Menu should have 2 options.
- assertFalse(menu.querySelector('#menuEditCreditCard').hidden);
- assertTrue(menu.querySelector('#menuRemoveCreditCard').hidden);
- assertFalse(menu.querySelector('#menuClearCreditCard').hidden);
+ assertFalse(section.$.menuEditCreditCard.hidden);
+ assertTrue(section.$.menuRemoveCreditCard.hidden);
+ assertFalse(section.$.menuClearCreditCard.hidden);
- menu.close();
+ section.$.creditCardSharedMenu.close();
flush();
});
test('verifyNotCachedCreditCardMenu', function() {
const creditCard = createCreditCardEntry();
- creditCard.metadata.isLocal = false;
- creditCard.metadata.isCached = false;
+ creditCard.metadata!.isLocal = false;
+ creditCard.metadata!.isCached = false;
const section =
createPaymentsSection([creditCard], /*upiIds=*/[], /*prefValues=*/ {});
assertEquals(1, getLocalAndServerCreditCardListItems().length);
// No overflow menu when not cached.
- const rowShadowRoot =
- getCardRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getCardRowShadowRoot(section.$.paymentsList);
assertTrue(!!rowShadowRoot.querySelector('#remoteCreditCardLink'));
assertFalse(!!rowShadowRoot.querySelector('#creditCardMenu'));
});
@@ -455,43 +448,43 @@
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonNotShownIfCreditCardDisabled', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
// Mock credit card save toggle is turned off by users.
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: false}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonNotShownIfNoCardIsMigratable', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
// Mock credit card is not valid.
- creditCard.metadata.isMigratable = false;
+ creditCard.metadata!.isMigratable = false;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertTrue(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertTrue(section.$.migrateCreditCards.hidden);
});
test('verifyMigrationButtonShown', function() {
// Add one migratable credit card.
const creditCard = createCreditCardEntry();
- creditCard.metadata.isMigratable = true;
+ creditCard.metadata!.isMigratable = true;
const section = createPaymentsSection(
[creditCard], /*upiIds=*/[], {credit_card_enabled: {value: true}});
- assertFalse(section.shadowRoot.querySelector('#migrateCreditCards').hidden);
+ assertFalse(section.$.migrateCreditCards.hidden);
});
test('verifyFIDOAuthToggleShownIfUserIsVerifiable', function() {
@@ -502,7 +495,7 @@
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- assertTrue(!!section.shadowRoot.querySelector(
+ assertTrue(!!section.shadowRoot!.querySelector(
'#autofillCreditCardFIDOAuthToggle'));
});
@@ -513,7 +506,7 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[],
{credit_card_enabled: {value: true}});
- assertFalse(!!section.shadowRoot.querySelector(
+ assertFalse(!!section.shadowRoot!.querySelector(
'#autofillCreditCardFIDOAuthToggle'));
});
@@ -525,9 +518,9 @@
credit_card_enabled: {value: true},
credit_card_fido_auth_enabled: {value: true}
});
- assertTrue(
- section.shadowRoot.querySelector('#autofillCreditCardFIDOAuthToggle')
- .checked);
+ assertTrue(section.shadowRoot!
+ .querySelector<SettingsToggleButtonElement>(
+ '#autofillCreditCardFIDOAuthToggle')!.checked);
});
test('verifyFIDOAuthToggleUncheckedIfOptedOut', function() {
@@ -538,9 +531,9 @@
credit_card_enabled: {value: true},
credit_card_fido_auth_enabled: {value: false}
});
- assertFalse(
- section.shadowRoot.querySelector('#autofillCreditCardFIDOAuthToggle')
- .checked);
+ assertFalse(section.shadowRoot!
+ .querySelector<SettingsToggleButtonElement>(
+ '#autofillCreditCardFIDOAuthToggle')!.checked);
});
test('verifyUpiIdRow', function() {
@@ -548,11 +541,10 @@
const section = createPaymentsSection(
/*creditCards=*/[], ['vpa@indianbank'], /*prefValues=*/ {});
- const rowShadowRoot =
- getUPIRowShadowRoot(section.shadowRoot.querySelector('#paymentsList'));
+ const rowShadowRoot = getUPIRowShadowRoot(section.$.paymentsList);
assertTrue(!!rowShadowRoot);
assertEquals(
- rowShadowRoot.querySelector('#upiIdLabel').textContent,
+ rowShadowRoot.querySelector<HTMLElement>('#upiIdLabel')!.textContent,
'vpa@indianbank');
});
@@ -562,9 +554,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(0, upiRows.length);
});
@@ -576,9 +568,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], upiIds, /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(upiIds.length, upiRows.length);
});
@@ -591,9 +583,9 @@
const section = createPaymentsSection(
/*creditCards=*/[], upiIds, /*prefValues=*/ {});
- const paymentsList = section.shadowRoot.querySelector('#paymentsList');
+ const paymentsList = section.$.paymentsList;
const upiRows =
- paymentsList.shadowRoot.querySelectorAll('settings-upi-id-list-entry');
+ paymentsList.shadowRoot!.querySelectorAll('settings-upi-id-list-entry');
assertEquals(0, upiRows.length);
});
@@ -605,7 +597,7 @@
const section = createPaymentsSection(
/*creditCards=*/[], /*upiIds=*/[], /*prefValues=*/ {});
- section.shadowRoot.querySelector('#canMakePaymentToggle').click();
+ section.$.canMakePaymentToggle.click();
const result =
await testMetricsBrowserProxy.whenCalled('recordSettingsPageHistogram');
Reply all
Reply to author
Forward
0 new messages