Add tests for storage UI

Initial tests for the settings' storage management UI.

Testing the UI behavior when simulating message callbacks from the
back-end. The focus of these tests is on the upper part of the storage
page, with global statistics related to the local filesystem.

Other tests for each row of the storage page coming in follow-up CLs.

"totalSize" removed from 'storage-size-stat-changed' callback message.
Its value isn't used on the JS side.

browser_tests --gtest_filter="*OSSettingsDevicePageTest.StorageTest"

Test: 
Bug: 1044495
Change-Id: I2541e563ab0885c87a43800e32e297d5c3abb2ec
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2014629
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735747}

chrome/browser/resources/settings/chromeos/device_page/storage.html

@@ -148,7 +148,7 @@
     </style>
     <template is="dom-if" if="[[isSpaceLow_(sizeStat_.spaceState)]]">
       <div class="settings-box first">
-        <div class="message-area">
+        <div id="lowMessage" class="message-area">
           <iron-icon icon="cr:warning"></iron-icon>
           <div class="message">
             <div class="message-title">$i18n{storageSpaceLowMessageTitle}</div>

chrome/browser/resources/settings/chromeos/device_page/storage.js

@@ -13,7 +13,6 @@ cr.define('settings', function() {
 
   /**
    * @typedef {{
-   *   totalSize: string,
    *   availableSize: string,
    *   usedSize: string,
    *   usedRatio: number,

chrome/browser/ui/webui/settings/chromeos/device_storage_handler.cc

@@ -234,7 +234,6 @@ void StorageHandler::OnGetSizeStat(int64_t* total_size,
                                    int64_t* available_size) {
   int64_t used_size = *total_size - *available_size;
   base::DictionaryValue size_stat;
-  size_stat.SetString("totalSize", ui::FormatBytes(*total_size));
   size_stat.SetString("availableSize", ui::FormatBytes(*available_size));
   size_stat.SetString("usedSize", ui::FormatBytes(used_size));
   size_stat.SetDouble("usedRatio",

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

@@ -11,6 +11,7 @@ cr.define('device_page_tests', function() {
     NightLight: 'night light',
     Pointers: 'pointers',
     Power: 'power',
+    Storage: 'storage',
     Stylus: 'stylus',
   };
 
@@ -1797,6 +1798,114 @@ cr.define('device_page_tests', function() {
             });
       });
     });
+
+    suite(assert(TestNames.Storage), function() {
+      /** @type {!Element} */
+      let storagePage;
+
+      /**
+       * Simulate storage size stat callback.
+       * @param {string} availableSize
+       * @param {string} usedSize
+       * @param {number} usedRatio
+       * @param {number} spaceState
+       */
+      function sendStorageSizeStat(
+          usedSize, availableSize, usedRatio, spaceState) {
+        cr.webUIListenerCallback('storage-size-stat-changed', {
+          usedSize: usedSize,
+          availableSize: availableSize,
+          usedRatio: usedRatio,
+          spaceState: spaceState,
+        });
+        Polymer.dom.flush();
+      }
+
+      /**
+       * @param {?Element} element
+       * @return {boolean}
+       */
+      function isHidden(element) {
+        return !element ||
+            (element.offsetWidth == 0 && element.offsetHeight == 0);
+      }
+
+      suiteSetup(function() {
+        // Disable animations so sub-pages open within one event loop.
+        testing.Test.disableAnimationsAndTransitions();
+      });
+
+      setup(function() {
+        // Avoid unwanted callbacks by disabling storage computations when the
+        // storage page is loaded.
+        registerMessageCallback(
+            'updateStorageInfo', null /* message handler */,
+            () => {} /* callback */);
+
+        return showAndGetDeviceSubpage('storage', settings.routes.STORAGE)
+            .then(function(page) {
+              storagePage = page;
+              storagePage.stopPeriodicUpdate_();
+            });
+      });
+
+      test('storage stats size', async function() {
+        // Low available storage space.
+        sendStorageSizeStat(
+            '9.1 GB', '0.9 GB', 0.91, settings.StorageSpaceState.LOW);
+        assertEquals('91%', storagePage.$.inUseLabelArea.style.width);
+        assertEquals('9%', storagePage.$.availableLabelArea.style.width);
+        assertFalse(isHidden(storagePage.$$('#lowMessage')));
+        assertTrue(isHidden(storagePage.$$('#criticallyLowMessage')));
+        assertTrue(!!storagePage.$$('#bar.space-low'));
+        assertFalse(!!storagePage.$$('#bar.space-critically-low'));
+        assertEquals(
+            '9.1 GB',
+            storagePage.$.inUseLabelArea.querySelector('.storage-size')
+                .innerText);
+        assertEquals(
+            '0.9 GB',
+            storagePage.$.availableLabelArea.querySelector('.storage-size')
+                .innerText);
+
+        // Critically low available storage space.
+        sendStorageSizeStat(
+            '9.7 GB', '0.3 GB', 0.97,
+            settings.StorageSpaceState.CRITICALLY_LOW);
+        assertEquals('97%', storagePage.$.inUseLabelArea.style.width);
+        assertEquals('3%', storagePage.$.availableLabelArea.style.width);
+        assertTrue(isHidden(storagePage.$$('#lowMessage')));
+        assertFalse(isHidden(storagePage.$$('#criticallyLowMessage')));
+        assertFalse(!!storagePage.$$('#bar.space-low'));
+        assertTrue(!!storagePage.$$('#bar.space-critically-low'));
+        assertEquals(
+            '9.7 GB',
+            storagePage.$.inUseLabelArea.querySelector('.storage-size')
+                .innerText);
+        assertEquals(
+            '0.3 GB',
+            storagePage.$.availableLabelArea.querySelector('.storage-size')
+                .innerText);
+
+        // Normal storage usage.
+        sendStorageSizeStat(
+            '2.5 GB', '7.5 GB', 0.25, settings.StorageSpaceState.NORMAL);
+        assertEquals('25%', storagePage.$.inUseLabelArea.style.width);
+        assertEquals('75%', storagePage.$.availableLabelArea.style.width);
+        assertTrue(isHidden(storagePage.$$('#lowMessage')));
+        assertTrue(isHidden(storagePage.$$('#criticallyLowMessage')));
+        assertFalse(!!storagePage.$$('#bar.space-low'));
+        assertFalse(!!storagePage.$$('#bar.space-critically-low'));
+        assertEquals(
+            '2.5 GB',
+            storagePage.$.inUseLabelArea.querySelector('.storage-size')
+                .innerText);
+        assertEquals(
+            '7.5 GB',
+            storagePage.$.availableLabelArea.querySelector('.storage-size')
+                .innerText);
+      });
+    });
   });
 
   return {TestNames: TestNames};

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

@@ -419,6 +419,10 @@ TEST_F('OSSettingsDevicePageTest', 'PowerTest', () => {
   mocha.grep(assert(device_page_tests.TestNames.Power)).run();
 });
 
+TEST_F('OSSettingsDevicePageTest', 'StorageTest', () => {
+  mocha.grep(assert(device_page_tests.TestNames.Storage)).run();
+});
+
 TEST_F('OSSettingsDevicePageTest', 'StylusTest', () => {
   mocha.grep(assert(device_page_tests.TestNames.Stylus)).run();
 });