Make some secure DNS setting tests interactive to fix flakiness.

Most tests involving the dropdown or custom input field have been moved
to the new secure_dns_interactive_test.js as they involve testing for
focus.

This cl also re-enables CrSettingsSecureDnsTest.All, which was disabled
when the flakiness was observed.

Bug: 1040145,1057504
Change-Id: I7813849295ddf6a3ddc283a9cdd9416db64b8f2b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2083760Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Katharine Daly <dalyk@google.com>
Cr-Commit-Position: refs/heads/master@{#746591}

chrome/browser/resources/settings/privacy_page/secure_dns_input.html

@@ -22,7 +22,7 @@
     <cr-input id="input" value="{{value}}"
         placeholder="$i18n{secureDnsCustomPlaceholder}" invalid="[[showError_]]"
         error-message="[[errorText_]]" maxlength="102400" spellcheck="false"
-        on-input="onInput_" on-blur="onBlur_">
+        on-input="onInput_" on-blur="validate">
     </cr-input>
   </template>
   <script src="secure_dns_input.js"></script>

chrome/browser/resources/settings/privacy_page/secure_dns_input.js

@@ -51,9 +51,8 @@ Polymer({
    * When the custom input field loses focus, validate the current value and
    * trigger an event with the result. Show an error message if the validated
    * value is still the most recent value, is invalid, and is non-empty.
-   * @private
    */
-  onBlur_: function() {
+  validate: function() {
     const valueToValidate = this.value;
     this.browserProxy_.validateCustomDnsEntry(valueToValidate).then(valid => {
       this.showError_ =

chrome/test/data/webui/settings/cr_settings_browsertest.js

@@ -1025,8 +1025,7 @@ CrSettingsSecureDnsTest.prototype = {
   ]),
 };
 
-// Disabled due to flakiness: https://crbug.com/1057504.
-TEST_F('CrSettingsSecureDnsTest', 'DISABLED_All', function() {
+TEST_F('CrSettingsSecureDnsTest', 'All', function() {
   mocha.run();
 });
 

chrome/test/data/webui/settings/cr_settings_interactive_ui_tests.js

@@ -72,3 +72,29 @@ CrSettingsAnimatedPagesTest.prototype = {
 TEST_F('CrSettingsAnimatedPagesTest', 'All', function() {
   mocha.run();
 });
+
+
+/**
+ * @constructor
+ * @extends {CrSettingsBrowserTest}
+ */
+function CrSettingsSecureDnsTest() {}
+
+CrSettingsSecureDnsTest.prototype = {
+  __proto__: CrSettingsInteractiveUITest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://settings/privacy_page/secure_dns.html',
+
+  /** @override */
+  extraLibraries: CrSettingsInteractiveUITest.prototype.extraLibraries.concat([
+    '../test_util.js',
+    '../test_browser_proxy.js',
+    'test_privacy_page_browser_proxy.js',
+    'secure_dns_interactive_test.js',
+  ]),
+};
+
+TEST_F('CrSettingsSecureDnsTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/settings/secure_dns_interactive_test.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Suite of tests for settings-secure-dns and
+ * secure-dns-input interactively.
+ */
+
+suite('SettingsSecureDnsInputInteractive', function() {
+  /** @type {SecureDnsInputElement} */
+  let testElement;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    testElement = document.createElement('secure-dns-input');
+    document.body.appendChild(testElement);
+    Polymer.dom.flush();
+  });
+
+  teardown(function() {
+    testElement.remove();
+  });
+
+  test('SecureDnsInputFocus', function() {
+    const crInput = testElement.$$('#input');
+    assertFalse(crInput.hasAttribute('focused_'));
+    testElement.focus();
+    assertTrue(crInput.hasAttribute('focused_'));
+    testElement.blur();
+    assertFalse(crInput.hasAttribute('focused_'));
+  });
+});
+
+suite('SettingsSecureDnsInteractive', function() {
+  /** @type {settings.TestPrivacyPageBrowserProxy} */
+  let testBrowserProxy;
+
+  /** @type {SettingsSecureDnsElement} */
+  let testElement;
+
+  /** @type {SettingsToggleButtonElement} */
+  let secureDnsToggle;
+
+  /** @type {CrRadioGroupElement} */
+  let secureDnsRadioGroup;
+
+  /** @type {!Array<!settings.ResolverOption>} */
+  const resolverList = [
+    {name: 'Custom', value: 'custom', policy: ''},
+    {
+      name: 'resolver1',
+      value: 'resolver1_template',
+      policy: 'https://resolver1_policy.com/'
+    },
+    {
+      name: 'resolver2',
+      value: 'resolver2_template',
+      policy: 'https://resolver2_policy.com/'
+    },
+    {
+      name: 'resolver3',
+      value: 'resolver3_template',
+      policy: 'https://resolver3_policy.com/'
+    },
+  ];
+
+  suiteSetup(function() {
+    loadTimeData.overrideValues({showSecureDnsSetting: true});
+  });
+
+  setup(async function() {
+    testBrowserProxy = new TestPrivacyPageBrowserProxy();
+    testBrowserProxy.setResolverList(resolverList);
+    settings.PrivacyPageBrowserProxyImpl.instance_ = testBrowserProxy;
+    PolymerTest.clearBody();
+    testElement = document.createElement('settings-secure-dns');
+    testElement.prefs = {
+      dns_over_https: {
+        mode: {value: settings.SecureDnsMode.AUTOMATIC},
+        templates: {value: ''}
+      },
+    };
+    document.body.appendChild(testElement);
+
+    await testBrowserProxy.whenCalled('getSecureDnsSetting');
+    await test_util.flushTasks();
+    secureDnsToggle = testElement.$$('#secureDnsToggle');
+    secureDnsRadioGroup = testElement.$$('#secureDnsRadioGroup');
+  });
+
+  teardown(function() {
+    testElement.remove();
+  });
+
+  test('SecureDnsModeChange', async function() {
+    // Start in automatic mode.
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.AUTOMATIC,
+      templates: [],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+
+    // Click on the secure dns toggle to disable secure dns.
+    secureDnsToggle.click();
+    assertEquals(
+        settings.SecureDnsMode.OFF,
+        testElement.prefs.dns_over_https.mode.value);
+
+    // Click on the secure dns toggle to go back to automatic mode.
+    secureDnsToggle.click();
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC,
+        testElement.prefs.dns_over_https.mode.value);
+
+    // Change the radio button to secure mode. The focus should be on the
+    // custom text field and the mode pref should still be 'automatic'.
+    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
+    const secureDnsInput = testElement.$$('#secureDnsInput');
+    assertTrue(secureDnsInput.matches(':focus-within'));
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC,
+        testElement.prefs.dns_over_https.mode.value);
+
+    // Enter a correctly formatted template in the custom text field and
+    // click outside the text field. The mode pref should be updated to
+    // 'secure'.
+    secureDnsInput.focus();
+    secureDnsInput.value = 'https://example.doh.server/dns-query';
+    testBrowserProxy.setIsEntryValid(true);
+    secureDnsInput.blur();
+    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+
+    // Click on the secure dns toggle to disable secure dns.
+    secureDnsToggle.click();
+    assertEquals(
+        settings.SecureDnsMode.OFF,
+        testElement.prefs.dns_over_https.mode.value);
+
+    // Click on the secure dns toggle. Focus should be on the custom text field
+    // and the mode pref should remain 'off' until the text field is blurred.
+    secureDnsToggle.click();
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertTrue(secureDnsInput.matches(':focus-within'));
+    assertEquals('https://example.doh.server/dns-query', secureDnsInput.value);
+    assertEquals(
+        settings.SecureDnsMode.OFF,
+        testElement.prefs.dns_over_https.mode.value);
+    secureDnsInput.blur();
+    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+  });
+
+  test('SecureDnsDropdown', function() {
+    const options =
+        testElement.$$('#secureResolverSelect').querySelectorAll('option');
+    assertEquals(4, options.length);
+
+    for (let i = 0; i < options.length; i++) {
+      assertEquals(resolverList[i].name, options[i].text);
+      assertEquals(resolverList[i].value, options[i].value);
+    }
+  });
+
+  test('SecureDnsDropdownCustom', function() {
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.SECURE,
+      templates: ['custom'],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertEquals(0, testElement.$$('#secureResolverSelect').selectedIndex);
+    assertTrue(testElement.$$('#privacyPolicy').hasAttribute('hidden'));
+    assertFalse(testElement.$$('#secureDnsInput').hasAttribute('hidden'));
+    assertFalse(testElement.$$('#secureDnsInput').matches(':focus-within'));
+    assertEquals('custom', testElement.$$('#secureDnsInput').value);
+  });
+
+  test('SecureDnsDropdownChangeInSecureMode', function() {
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.SECURE,
+      templates: [resolverList[1].value],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+
+    const dropdownMenu = testElement.$$('#secureResolverSelect');
+    const privacyPolicyLine = testElement.$$('#privacyPolicy');
+    const secureDnsInput = testElement.$$('#secureDnsInput');
+
+    assertEquals(1, dropdownMenu.selectedIndex);
+    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        resolverList[1].policy, privacyPolicyLine.querySelector('a').href);
+
+    // Change to resolver2
+    dropdownMenu.value = resolverList[2].value;
+    dropdownMenu.dispatchEvent(new Event('change'));
+    assertEquals(2, dropdownMenu.selectedIndex);
+    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        resolverList[2].policy, privacyPolicyLine.querySelector('a').href);
+    assertEquals(
+        resolverList[2].value,
+        testElement.prefs.dns_over_https.templates.value);
+
+    // Change to custom
+    dropdownMenu.value = 'custom';
+    dropdownMenu.dispatchEvent(new Event('change'));
+    assertEquals(0, dropdownMenu.selectedIndex);
+    assertTrue(privacyPolicyLine.hasAttribute('hidden'));
+    assertTrue(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals(
+        resolverList[2].value,
+        testElement.prefs.dns_over_https.templates.value);
+
+    // Input a custom template and make sure it is still there after
+    // manipulating the dropdown.
+    secureDnsInput.value = 'some_input';
+    dropdownMenu.value = resolverList[1].value;
+    dropdownMenu.dispatchEvent(new Event('change'));
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals(
+        resolverList[1].value,
+        testElement.prefs.dns_over_https.templates.value);
+    dropdownMenu.value = 'custom';
+    dropdownMenu.dispatchEvent(new Event('change'));
+    assertEquals('some_input', secureDnsInput.value);
+  });
+
+  test('SecureDnsDropdownChangeInAutomaticMode', function() {
+    testElement.prefs.dns_over_https.templates.value = 'resolver1_template';
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.AUTOMATIC,
+      templates: [resolverList[1].value],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
+
+    const dropdownMenu = testElement.$$('#secureResolverSelect');
+    const privacyPolicyLine = testElement.$$('#privacyPolicy');
+
+    // Select resolver3. This change should not be reflected in prefs.
+    assertNotEquals(3, dropdownMenu.selectedIndex);
+    dropdownMenu.value = resolverList[3].value;
+    dropdownMenu.dispatchEvent(new Event('change'));
+    assertEquals(3, dropdownMenu.selectedIndex);
+    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
+    assertEquals(
+        'resolver1_template', testElement.prefs.dns_over_https.templates.value);
+
+    // Click on the secure dns toggle to disable secure dns.
+    secureDnsToggle.click();
+    assertTrue(secureDnsRadioGroup.hidden);
+    assertEquals(
+        settings.SecureDnsMode.OFF,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals('', testElement.prefs.dns_over_https.templates.value);
+
+    // Get another event enabling automatic mode.
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.AUTOMATIC,
+      templates: [resolverList[1].value],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertFalse(secureDnsRadioGroup.hidden);
+    assertEquals(3, dropdownMenu.selectedIndex);
+    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
+
+    // Click on secure mode radio button.
+    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
+    assertFalse(secureDnsRadioGroup.hidden);
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertEquals(3, dropdownMenu.selectedIndex);
+    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
+    assertEquals(
+        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals(
+        'resolver3_template', testElement.prefs.dns_over_https.templates.value);
+  });
+
+  test('SecureDnsInputChange', async function() {
+    // Start in secure mode with a custom valid template
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.SECURE,
+      templates: ['https://dns.example/dns-query'],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    const secureDnsRadioGroup = testElement.$$('#secureDnsRadioGroup');
+    const secureDnsInput = testElement.$$('#secureDnsInput');
+    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals('https://dns.example/dns-query', secureDnsInput.value);
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+
+    // Make the template invalid and check that the mode pref changes to
+    // 'automatic'.
+    secureDnsInput.focus();
+    secureDnsInput.value = 'invalid_template';
+    testBrowserProxy.setIsEntryValid(false);
+    secureDnsInput.blur();
+    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertTrue(secureDnsInput.isInvalid());
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals('', testElement.prefs.dns_over_https.templates.value);
+
+    // Receive a pref update and make sure the custom input field is not
+    // cleared.
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.AUTOMATIC,
+      templates: [],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertTrue(secureDnsInput.isInvalid());
+    assertEquals('invalid_template', secureDnsInput.value);
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
+
+    // Make the template valid but don't change the radio button yet.
+    secureDnsInput.focus();
+    secureDnsInput.value =
+        'https://dns.ex/dns-query  invalid  https://dns.ex.another/dns-query';
+    testBrowserProxy.setIsEntryValid(true);
+    secureDnsInput.blur();
+    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
+
+    // Select the secure radio button and blur the input field.
+    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
+    assertTrue(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertEquals(
+        settings.SecureDnsMode.AUTOMATIC,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals('', testElement.prefs.dns_over_https.templates.value);
+    secureDnsInput.blur();
+    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+    assertEquals(
+        settings.SecureDnsMode.SECURE,
+        testElement.prefs.dns_over_https.mode.value);
+    assertEquals(
+        'https://dns.ex/dns-query  invalid  https://dns.ex.another/dns-query',
+        testElement.prefs.dns_over_https.templates.value);
+
+    // Make sure the input field updates with a change in the underlying
+    // templates pref in secure mode.
+    cr.webUIListenerCallback('secure-dns-setting-changed', {
+      mode: settings.SecureDnsMode.SECURE,
+      templates: [
+        'https://manage.ex/dns-query',
+        'https://manage.ex.another/dns-query{?dns}'
+      ],
+      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
+    });
+    Polymer.dom.flush();
+    assertFalse(secureDnsInput.hasAttribute('hidden'));
+    assertFalse(secureDnsInput.matches(':focus-within'));
+    assertFalse(secureDnsInput.isInvalid());
+    assertEquals(
+        'https://manage.ex/dns-query https://manage.ex.another/dns-query{?dns}',
+        secureDnsInput.value);
+    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
+  });
+});

chrome/test/data/webui/settings/secure_dns_test.js

@@ -43,8 +43,7 @@ suite('SettingsSecureDnsInput', function() {
 
     // Trigger validation on an empty input.
     testBrowserProxy.setIsEntryValid(false);
-    testElement.focus();
-    testElement.blur();
+    testElement.validate();
     await testBrowserProxy.whenCalled('validateCustomDnsEntry');
     assertFalse(crInput.invalid);
     assertFalse(testElement.isInvalid());
@@ -52,8 +51,7 @@ suite('SettingsSecureDnsInput', function() {
     // Enter a valid input and trigger validation.
     testElement.value = 'https://example.server/dns-query';
     testBrowserProxy.setIsEntryValid(true);
-    testElement.focus();
-    testElement.blur();
+    testElement.validate();
     await testBrowserProxy.whenCalled('validateCustomDnsEntry');
     assertFalse(crInput.invalid);
     assertFalse(testElement.isInvalid());
@@ -61,8 +59,7 @@ suite('SettingsSecureDnsInput', function() {
     // Enter an invalid input and trigger validation.
     testElement.value = 'invalid_template';
     testBrowserProxy.setIsEntryValid(false);
-    testElement.focus();
-    testElement.blur();
+    testElement.validate();
     await testBrowserProxy.whenCalled('validateCustomDnsEntry');
     assertTrue(crInput.invalid);
     assertTrue(testElement.isInvalid());
@@ -74,15 +71,6 @@ suite('SettingsSecureDnsInput', function() {
     assertFalse(testElement.isInvalid());
     assertEquals('invalid_template', testElement.value);
   });
-
-  test('SecureDnsInputFocus', function() {
-    const crInput = testElement.$$('#input');
-    assertFalse(crInput.hasAttribute('focused_'));
-    testElement.focus();
-    assertTrue(crInput.hasAttribute('focused_'));
-    testElement.blur();
-    assertFalse(crInput.hasAttribute('focused_'));
-  });
 });
 
 suite('SettingsSecureDns', function() {
@@ -101,21 +89,6 @@ suite('SettingsSecureDns', function() {
   /** @type {!Array<!settings.ResolverOption>} */
   const resolverList = [
     {name: 'Custom', value: 'custom', policy: ''},
-    {
-      name: 'resolver1',
-      value: 'resolver1_template',
-      policy: 'https://resolver1_policy.com/'
-    },
-    {
-      name: 'resolver2',
-      value: 'resolver2_template',
-      policy: 'https://resolver2_policy.com/'
-    },
-    {
-      name: 'resolver3',
-      value: 'resolver3_template',
-      policy: 'https://resolver3_policy.com/'
-    },
   ];
 
   // Possible subtitle overrides.
@@ -268,316 +241,4 @@ suite('SettingsSecureDns', function() {
                     .$$('cr-tooltip-icon')
                     .hidden);
   });
-
-  test('SecureDnsModeChange', async function() {
-    // Start in automatic mode.
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.AUTOMATIC,
-      templates: [],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-
-    // Click on the secure dns toggle to disable secure dns.
-    secureDnsToggle.click();
-    assertEquals(
-        settings.SecureDnsMode.OFF,
-        testElement.prefs.dns_over_https.mode.value);
-
-    // Click on the secure dns toggle to go back to automatic mode.
-    secureDnsToggle.click();
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC,
-        testElement.prefs.dns_over_https.mode.value);
-
-    // Change the radio button to secure mode. The focus should be on the
-    // custom text field and the mode pref should still be 'automatic'.
-    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
-    const secureDnsInput = testElement.$$('#secureDnsInput');
-    assertTrue(secureDnsInput.matches(':focus-within'));
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC,
-        testElement.prefs.dns_over_https.mode.value);
-
-    // Enter a correctly formatted template in the custom text field and
-    // click outside the text field. The mode pref should be updated to
-    // 'secure'.
-    secureDnsInput.value = 'https://example.doh.server/dns-query';
-    testBrowserProxy.setIsEntryValid(true);
-    secureDnsInput.blur();
-    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-
-    // Click on the secure dns toggle to disable secure dns.
-    secureDnsToggle.click();
-    assertEquals(
-        settings.SecureDnsMode.OFF,
-        testElement.prefs.dns_over_https.mode.value);
-
-    // Click on the secure dns toggle. Focus should be on the custom text field
-    // and the mode pref should remain 'off' until the text field is blurred.
-    secureDnsToggle.click();
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertTrue(secureDnsInput.matches(':focus-within'));
-    assertEquals('https://example.doh.server/dns-query', secureDnsInput.value);
-    assertEquals(
-        settings.SecureDnsMode.OFF,
-        testElement.prefs.dns_over_https.mode.value);
-    secureDnsInput.blur();
-    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-  });
-
-  test('SecureDnsDropdown', function() {
-    const options =
-        testElement.$$('#secureResolverSelect').querySelectorAll('option');
-    assertEquals(4, options.length);
-
-    for (let i = 0; i < options.length; i++) {
-      assertEquals(resolverList[i].name, options[i].text);
-      assertEquals(resolverList[i].value, options[i].value);
-    }
-  });
-
-  test('SecureDnsDropdownCustom', function() {
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.SECURE,
-      templates: ['custom'],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertRadioButtonsShown();
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertEquals(0, testElement.$$('#secureResolverSelect').selectedIndex);
-    assertTrue(testElement.$$('#privacyPolicy').hasAttribute('hidden'));
-    assertFalse(testElement.$$('#secureDnsInput').hasAttribute('hidden'));
-    assertFalse(testElement.$$('#secureDnsInput').matches(':focus-within'));
-    assertEquals('custom', testElement.$$('#secureDnsInput').value);
-  });
-
-  test('SecureDnsDropdownChangeInSecureMode', function() {
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.SECURE,
-      templates: [resolverList[1].value],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertRadioButtonsShown();
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-
-    const dropdownMenu = testElement.$$('#secureResolverSelect');
-    const privacyPolicyLine = testElement.$$('#privacyPolicy');
-    const secureDnsInput = testElement.$$('#secureDnsInput');
-
-    assertEquals(1, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
-    assertEquals(
-        resolverList[1].policy, privacyPolicyLine.querySelector('a').href);
-
-    // Change to resolver2
-    dropdownMenu.value = resolverList[2].value;
-    dropdownMenu.dispatchEvent(new Event('change'));
-    assertEquals(2, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
-    assertEquals(
-        resolverList[2].policy, privacyPolicyLine.querySelector('a').href);
-    assertEquals(
-        resolverList[2].value,
-        testElement.prefs.dns_over_https.templates.value);
-
-    // Change to custom
-    dropdownMenu.value = 'custom';
-    dropdownMenu.dispatchEvent(new Event('change'));
-    assertEquals(0, dropdownMenu.selectedIndex);
-    assertTrue(privacyPolicyLine.hasAttribute('hidden'));
-    assertTrue(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals(
-        resolverList[2].value,
-        testElement.prefs.dns_over_https.templates.value);
-
-    // Input a custom template and make sure it is still there after
-    // manipulating the dropdown.
-    secureDnsInput.value = 'some_input';
-    dropdownMenu.value = resolverList[1].value;
-    dropdownMenu.dispatchEvent(new Event('change'));
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals(
-        resolverList[1].value,
-        testElement.prefs.dns_over_https.templates.value);
-    dropdownMenu.value = 'custom';
-    dropdownMenu.dispatchEvent(new Event('change'));
-    assertEquals('some_input', secureDnsInput.value);
-  });
-
-  test('SecureDnsDropdownChangeInAutomaticMode', function() {
-    testElement.prefs.dns_over_https.templates.value = 'resolver1_template';
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.AUTOMATIC,
-      templates: [resolverList[1].value],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertRadioButtonsShown();
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
-
-    const dropdownMenu = testElement.$$('#secureResolverSelect');
-    const privacyPolicyLine = testElement.$$('#privacyPolicy');
-
-    // Select resolver3. This change should not be reflected in prefs.
-    assertNotEquals(3, dropdownMenu.selectedIndex);
-    dropdownMenu.value = resolverList[3].value;
-    dropdownMenu.dispatchEvent(new Event('change'));
-    assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
-    assertEquals(
-        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
-    assertEquals(
-        'resolver1_template', testElement.prefs.dns_over_https.templates.value);
-
-    // Click on the secure dns toggle to disable secure dns.
-    secureDnsToggle.click();
-    assertTrue(secureDnsRadioGroup.hidden);
-    assertEquals(
-        settings.SecureDnsMode.OFF,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals('', testElement.prefs.dns_over_https.templates.value);
-
-    // Get another event enabling automatic mode.
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.AUTOMATIC,
-      templates: [resolverList[1].value],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertFalse(secureDnsRadioGroup.hidden);
-    assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
-    assertEquals(
-        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
-
-    // Click on secure mode radio button.
-    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
-    assertFalse(secureDnsRadioGroup.hidden);
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertEquals(3, dropdownMenu.selectedIndex);
-    assertFalse(privacyPolicyLine.hasAttribute('hidden'));
-    assertEquals(
-        resolverList[3].policy, privacyPolicyLine.querySelector('a').href);
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals(
-        'resolver3_template', testElement.prefs.dns_over_https.templates.value);
-  });
-
-  test('SecureDnsInputChange', async function() {
-    // Start in secure mode with a custom valid template
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.SECURE,
-      templates: ['https://dns.example/dns-query'],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    const secureDnsInput = testElement.$$('#secureDnsInput');
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals('https://dns.example/dns-query', secureDnsInput.value);
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-
-    // Make the template invalid and check that the mode pref changes to
-    // 'automatic'.
-    secureDnsInput.focus();
-    secureDnsInput.value = 'invalid_template';
-    testBrowserProxy.setIsEntryValid(false);
-    secureDnsInput.blur();
-    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertTrue(secureDnsInput.isInvalid());
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals('', testElement.prefs.dns_over_https.templates.value);
-
-    // Receive a pref update and make sure the custom input field is not
-    // cleared.
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.AUTOMATIC,
-      templates: [],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertTrue(secureDnsInput.isInvalid());
-    assertEquals('invalid_template', secureDnsInput.value);
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
-
-    // Make the template valid but don't change the radio button yet.
-    secureDnsInput.focus();
-    secureDnsInput.value =
-        'https://dns.ex/dns-query  invalid  https://dns.ex.another/dns-query';
-    testBrowserProxy.setIsEntryValid(true);
-    secureDnsInput.blur();
-    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC, secureDnsRadioGroup.selected);
-
-    // Select the secure radio button and blur the input field.
-    secureDnsRadioGroup.querySelectorAll('cr-radio-button')[1].click();
-    assertTrue(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertEquals(
-        settings.SecureDnsMode.AUTOMATIC,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals('', testElement.prefs.dns_over_https.templates.value);
-    secureDnsInput.blur();
-    await testBrowserProxy.whenCalled('validateCustomDnsEntry');
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-    assertEquals(
-        settings.SecureDnsMode.SECURE,
-        testElement.prefs.dns_over_https.mode.value);
-    assertEquals(
-        'https://dns.ex/dns-query  invalid  https://dns.ex.another/dns-query',
-        testElement.prefs.dns_over_https.templates.value);
-
-    // Make sure the input field updates with a change in the underlying
-    // templates pref in secure mode.
-    cr.webUIListenerCallback('secure-dns-setting-changed', {
-      mode: settings.SecureDnsMode.SECURE,
-      templates: [
-        'https://manage.ex/dns-query',
-        'https://manage.ex.another/dns-query{?dns}'
-      ],
-      managementMode: settings.SecureDnsUiManagementMode.NO_OVERRIDE,
-    });
-    Polymer.dom.flush();
-    assertFalse(secureDnsInput.hasAttribute('hidden'));
-    assertFalse(secureDnsInput.matches(':focus-within'));
-    assertFalse(secureDnsInput.isInvalid());
-    assertEquals(
-        'https://manage.ex/dns-query https://manage.ex.another/dns-query{?dns}',
-        secureDnsInput.value);
-    assertEquals(settings.SecureDnsMode.SECURE, secureDnsRadioGroup.selected);
-  });
 });