SplitSettings: Port settings main page tests for OS settings page

Ports most of //c/test/data/webui/settings/settings_main_test.js to
the OS settings page.

Initializes CrOncStrings in the test because the test does not load
os_settings_ui.js, but the global must exist for the network page.

Adds assertions for CrOncStrings to make this failure more obvious
in the future (otherwise the error is just "reading property of
undefined" without a useful line number).

Bug: 967910
Test: browser_tests

Change-Id: Ia86483a2c204d82387a6c771a02075f76acc3681
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1642249Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: James Cook <jamescook@chromium.org>
Cr-Commit-Position: refs/heads/master@{#666308}

chrome/browser/resources/settings/internet_page/network_summary_item.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_siminfo.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">

chrome/browser/resources/settings/internet_page/network_summary_item.js

@@ -367,6 +367,7 @@ Polymer({
    * @private
    */
   getTitleText_: function() {
+    assert(CrOncStrings);
     return this.networkTitleText ||
         CrOncStrings['OncType' + this.activeNetworkState.Type];
   },

chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js

@@ -70,6 +70,29 @@ TEST_F('OSSettingsSmbPageTest', 'MAYBE_All', function() {
   mocha.run();
 });
 
+// Test fixture for the main settings page.
+// eslint-disable-next-line no-var
+var OSSettingsMainTest = class extends OSSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return super.browsePreload +
+        'chromeos/os_settings_main/os_settings_main.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      BROWSER_SETTINGS_PATH + 'test_util.js',
+      BROWSER_SETTINGS_PATH + '../test_browser_proxy.js',
+      'os_settings_main_test.js',
+    ]);
+  }
+};
+
+TEST_F('OSSettingsMainTest', 'MAYBE_All', function() {
+  mocha.run();
+});
+
 // Tests for the side-nav menu.
 // eslint-disable-next-line no-var
 var OSSettingsMenuTest = class extends OSSettingsBrowserTest {

chrome/test/data/webui/settings/chromeos/os_settings_main_test.js

+// Copyright 2019 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.
+
+cr.define('settings_main_page', function() {
+  /**
+   * Extending TestBrowserProxy even though SearchManager is not a browser proxy
+   * itself. Essentially TestBrowserProxy can act as a "proxy" for any external
+   * dependency, not just "browser proxies" (and maybe should be renamed to
+   * TestProxy).
+   *
+   * @implements {SearchManager}
+   */
+  class TestSearchManager extends TestBrowserProxy {
+    constructor() {
+      super([
+        'search',
+      ]);
+
+      /** @private {boolean} */
+      this.matchesFound_ = true;
+
+      /** @private {?settings.SearchRequest} */
+      this.searchRequest_ = null;
+    }
+
+    /**
+     * @param {boolean} matchesFound
+     */
+    setMatchesFound(matchesFound) {
+      this.matchesFound_ = matchesFound;
+    }
+
+    /** @override */
+    search(text, page) {
+      this.methodCalled('search', text);
+
+      if (this.searchRequest_ == null || !this.searchRequest_.isSame(text)) {
+        this.searchRequest_ = new settings.SearchRequest(text);
+        this.searchRequest_.finished = true;
+        this.searchRequest_.updateMatches(this.matchesFound_);
+        this.searchRequest_.resolver.resolve(this.searchRequest_);
+      }
+      return this.searchRequest_.resolver.promise;
+    }
+  }
+
+  let settingsPrefs = null;
+
+  suiteSetup(function() {
+    // Init CrOncStrings because os_settings_ui.js isn't loaded in this test.
+    CrOncStrings = {};
+
+    settingsPrefs = document.createElement('settings-prefs');
+    return CrSettingsPrefs.initialized;
+  });
+
+  suite('MainPageTests', function() {
+    /** @type {?TestSearchManager} */
+    let searchManager = null;
+
+    /** @type {?SettingsMainElement} */
+    let settingsMain = null;
+
+    setup(function() {
+      settings.navigateTo(settings.routes.BASIC);
+      searchManager = new TestSearchManager();
+      settings.setSearchManagerForTesting(searchManager);
+      PolymerTest.clearBody();
+      settingsMain = document.createElement('os-settings-main');
+      settingsMain.prefs = settingsPrefs.prefs;
+      settingsMain.toolbarSpinnerActive = false;
+      settingsMain.pageVisibility = settings.pageVisibility;
+      document.body.appendChild(settingsMain);
+    });
+
+    teardown(function() {
+      settingsMain.remove();
+    });
+
+    test('searchContents() triggers SearchManager', function() {
+      Polymer.dom.flush();
+
+      const expectedQuery1 = 'foo';
+      const expectedQuery2 = 'bar';
+      const expectedQuery3 = '';
+
+      return settingsMain.searchContents(expectedQuery1)
+          .then(function() {
+            return searchManager.whenCalled('search');
+          })
+          .then(function(query) {
+            assertEquals(expectedQuery1, query);
+
+            searchManager.resetResolver('search');
+            return settingsMain.searchContents(expectedQuery2);
+          })
+          .then(function() {
+            return searchManager.whenCalled('search');
+          })
+          .then(function(query) {
+            assertEquals(expectedQuery2, query);
+
+            searchManager.resetResolver('search');
+            return settingsMain.searchContents(expectedQuery3);
+          })
+          .then(function() {
+            return searchManager.whenCalled('search');
+          })
+          .then(function(query) {
+            assertEquals(expectedQuery3, query);
+          });
+    });
+
+    function showManagedHeader() {
+      return settingsMain.showManagedHeader_(
+          settingsMain.inSearchMode_, settingsMain.showingSubpage_,
+          settingsMain.showPages_.about);
+    }
+
+    test('managed header hides when searching', function() {
+      Polymer.dom.flush();
+
+      assertTrue(showManagedHeader());
+
+      searchManager.setMatchesFound(false);
+      return settingsMain.searchContents('Query1')
+          .then(() => {
+            assertFalse(showManagedHeader());
+
+            searchManager.setMatchesFound(true);
+            return settingsMain.searchContents('Query2');
+          })
+          .then(() => {
+            assertFalse(showManagedHeader());
+          });
+    });
+
+    test('managed header hides when showing subpage', function() {
+      Polymer.dom.flush();
+
+      assertTrue(showManagedHeader());
+
+      const page = settingsMain.$$('os-settings-page');
+      page.fire('subpage-expand', {});
+
+      assertFalse(showManagedHeader());
+    });
+
+    test('managed header hides when showing about page', function() {
+      Polymer.dom.flush();
+
+      assertTrue(showManagedHeader());
+      settings.navigateTo(settings.routes.ABOUT);
+
+      assertFalse(showManagedHeader());
+    });
+
+    /** @return {!HTMLElement} */
+    function getToggleContainer() {
+      const page = settingsMain.$$('os-settings-page');
+      assertTrue(!!page);
+      const toggleContainer = page.$$('#toggleContainer');
+      assertTrue(!!toggleContainer);
+      return toggleContainer;
+    }
+
+    /**
+     * Asserts that the Advanced toggle container exists in the combined
+     * settings page and asserts whether it should be visible.
+     * @param {boolean} expectedVisible
+     */
+    function assertToggleContainerVisible(expectedVisible) {
+      const toggleContainer = getToggleContainer();
+      if (expectedVisible) {
+        assertNotEquals('none', toggleContainer.style.display);
+      } else {
+        assertEquals('none', toggleContainer.style.display);
+      }
+    }
+
+    test('no results page shows and hides', function() {
+      Polymer.dom.flush();
+      const noSearchResults = settingsMain.$.noSearchResults;
+      assertTrue(!!noSearchResults);
+      assertTrue(noSearchResults.hidden);
+
+      assertToggleContainerVisible(true);
+
+      searchManager.setMatchesFound(false);
+      return settingsMain.searchContents('Query1')
+          .then(function() {
+            assertFalse(noSearchResults.hidden);
+            assertToggleContainerVisible(false);
+
+            searchManager.setMatchesFound(true);
+            return settingsMain.searchContents('Query2');
+          })
+          .then(function() {
+            assertTrue(noSearchResults.hidden);
+          });
+    });
+
+    // Ensure that when the user clears the search box, the "no results" page
+    // is hidden and the "advanced page toggle" is visible again.
+    test('no results page hides on clear', function() {
+      Polymer.dom.flush();
+      const noSearchResults = settingsMain.$.noSearchResults;
+      assertTrue(!!noSearchResults);
+      assertTrue(noSearchResults.hidden);
+
+      assertToggleContainerVisible(true);
+
+      searchManager.setMatchesFound(false);
+      // Clearing the search box is effectively a search for the empty string.
+      return settingsMain.searchContents('').then(function() {
+        Polymer.dom.flush();
+        assertTrue(noSearchResults.hidden);
+        assertToggleContainerVisible(true);
+      });
+    });
+
+    /**
+     * Asserts the visibility of the basic and advanced pages.
+     * @param {string} Expected 'display' value for the basic page.
+     * @param {string} Expected 'display' value for the advanced page.
+     * @return {!Promise}
+     */
+    function assertPageVisibility(expectedBasic, expectedAdvanced) {
+      Polymer.dom.flush();
+      const page = settingsMain.$$('os-settings-page');
+      assertEquals(
+          expectedBasic, getComputedStyle(page.$$('#basicPage')).display);
+
+      return page.$$('#advancedPageTemplate')
+          .get()
+          .then(function(advancedPage) {
+            assertEquals(
+                expectedAdvanced, getComputedStyle(advancedPage).display);
+          });
+    }
+
+    /**
+     * Asserts the visibility of the basic and advanced pages after exiting
+     * search mode.
+     * @param {string} Expected 'display' value for the advanced page.
+     * @return {!Promise}
+     */
+    function assertAdvancedVisibilityAfterSearch(expectedAdvanced) {
+      searchManager.setMatchesFound(true);
+      return settingsMain.searchContents('Query1')
+          .then(function() {
+            searchManager.setMatchesFound(false);
+            return settingsMain.searchContents('');
+          })
+          .then(function() {
+            // Imitate behavior of clearing search.
+            settings.navigateTo(settings.routes.BASIC);
+            Polymer.dom.flush();
+            return assertPageVisibility('block', expectedAdvanced);
+          });
+    }
+
+    test('exiting search mode, advanced collapsed', function() {
+      // Simulating searching while the advanced page is collapsed.
+      settingsMain.currentRouteChanged(settings.routes.BASIC);
+      Polymer.dom.flush();
+      return assertAdvancedVisibilityAfterSearch('none');
+    });
+
+    // Ensure that clearing the search results restores both "basic" and
+    // "advanced" page, when the search has been initiated from a subpage
+    // whose parent is the "advanced" page.
+    test('exiting search mode, advanced expanded', function() {
+      // Trigger basic page to be rendered once.
+      settings.navigateTo(settings.routes.DEVICE);
+      Polymer.dom.flush();
+
+      // Navigate to an "advanced" subpage.
+      settings.navigateTo(settings.routes.DATETIME);
+      Polymer.dom.flush();
+      return assertAdvancedVisibilityAfterSearch('block');
+    });
+
+    // Ensure that searching, then entering a subpage, then going back
+    // lands the user in a page where both basic and advanced sections are
+    // visible, because the page is still in search mode.
+    test('returning from subpage to search results', function() {
+      settings.navigateTo(settings.routes.BASIC);
+      Polymer.dom.flush();
+
+      searchManager.setMatchesFound(true);
+      return settingsMain.searchContents('Query1').then(function() {
+        // Simulate navigating into a subpage.
+        settings.navigateTo(settings.routes.DISPLAY);
+        settingsMain.$$('os-settings-page').fire('subpage-expand');
+        Polymer.dom.flush();
+
+        // Simulate clicking the left arrow to go back to the search results.
+        settings.navigateTo(settings.routes.BASIC);
+        return assertPageVisibility('block', 'block');
+      });
+    });
+
+    test('navigating to a basic page does not collapse advanced', function() {
+      settings.navigateTo(settings.routes.DATETIME);
+      Polymer.dom.flush();
+
+      assertToggleContainerVisible(true);
+
+      settings.navigateTo(settings.routes.DEVICE);
+      Polymer.dom.flush();
+
+      return assertPageVisibility('block', 'block');
+    });
+
+    test('verify showChangePassword value', function() {
+      settings.navigateTo(settings.routes.BASIC);
+      Polymer.dom.flush();
+      const basicPage = settingsMain.$$('os-settings-page');
+      assertTrue(!!basicPage);
+      assertFalse(basicPage.showChangePassword);
+      assertFalse(!!basicPage.$$('settings-change-password-page'));
+
+      cr.webUIListenerCallback('change-password-visibility', true);
+      Polymer.dom.flush();
+      assertTrue(basicPage.showChangePassword);
+      assertTrue(!!basicPage.$$('settings-change-password-page'));
+
+      cr.webUIListenerCallback('change-password-visibility', false);
+      Polymer.dom.flush();
+      assertFalse(basicPage.showChangePassword);
+      assertFalse(!!basicPage.$$('settings-change-password-page'));
+    });
+
+    test('updates the title based on current route', function() {
+      settings.navigateTo(settings.routes.BASIC);
+      assertEquals(document.title, loadTimeData.getString('settings'));
+
+      settings.navigateTo(settings.routes.ABOUT);
+      assertEquals(
+          document.title,
+          loadTimeData.getStringF(
+              'settingsAltPageTitle',
+              loadTimeData.getString('aboutPageTitle')));
+    });
+  });
+});

ui/webui/resources/cr_elements/chromeos/network/cr_onc_types.js

@@ -475,6 +475,7 @@ CrOnc.getNetworkName = function(properties) {
   const name = CrOnc.getStateOrActiveString(properties.Name);
   const type = CrOnc.getStateOrActiveString(properties.Type);
   if (!name) {
+    assert(CrOncStrings);
     return CrOncStrings['OncType' + type];
   }
   if (type == 'VPN' && properties.VPN) {