MD Settings: add empty list message for spell-check edit page.

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

Index: chrome/test/data/webui/settings/edit_dictionary_page_test.js
diff --git a/chrome/test/data/webui/settings/edit_dictionary_page_test.js b/chrome/test/data/webui/settings/edit_dictionary_page_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..a74989fcd22304614679bdade6ba196942b1dba5
--- /dev/null
+++ b/chrome/test/data/webui/settings/edit_dictionary_page_test.js
@@ -0,0 +1,111 @@
+// Copyright 2016 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-edit-dictionary-page', function() {
+

[dpapad, 2017/02/15 20:36:37]

Nit (optional): Remove unnecessary blank line?

[scottchen, 2017/02/22 21:42:25]

Done.

+  suite('settings-edit-dictionary-page', function() {
+
+    function getFakePrefs() {
+      var fakePrefs = [{
+        key: 'intl.app_locale',
+        type: chrome.settingsPrivate.PrefType.STRING,
+        value: 'en-US',
+      }, {
+        key: 'intl.accept_languages',
+        type: chrome.settingsPrivate.PrefType.STRING,
+        value: 'en-US,sw',
+      }, {
+        key: 'spellcheck.dictionaries',
+        type: chrome.settingsPrivate.PrefType.LIST,
+        value: ['en-US'],
+      }, {
+        key: 'translate_blocked_languages',
+        type: chrome.settingsPrivate.PrefType.LIST,
+        value: ['en-US'],
+      }];
+      if (cr.isChromeOS) {
+        fakePrefs.push({
+          key: 'settings.language.preferred_languages',
+          type: chrome.settingsPrivate.PrefType.STRING,
+          value: 'en-US,sw',
+        });
+        fakePrefs.push({
+          key: 'settings.language.preload_engines',
+          type: chrome.settingsPrivate.PrefType.STRING,
+          value: '_comp_ime_fgoepimhcoialccpbmpnnblemnepkkaoxkb:us::eng,' +
+                 '_comp_ime_fgoepimhcoialccpbmpnnblemnepkkaoxkb:us:dvorak:eng',
+        });
+        fakePrefs.push({
+          key: 'settings.language.enabled_extension_imes',
+          type: chrome.settingsPrivate.PrefType.STRING,
+          value: '',
+        });
+      }
+      return fakePrefs;
+    }
+
+    var editDictPage;
+    var languageSettingsPrivate;
+    var settingsPrefs;
+
+    suiteSetup(function() {
+      CrSettingsPrefs.deferInitialization = true;
+    });
+
+    setup(function() {
+      PolymerTest.clearBody();
+      settingsPrefs = document.createElement('settings-prefs');
+      var settingsPrivate = new settings.FakeSettingsPrivate(getFakePrefs());
+      settingsPrefs.initialize(settingsPrivate);
+
+      languageSettingsPrivate = new settings.FakeLanguageSettingsPrivate();
+      languageSettingsPrivate.setSettingsPrefs(settingsPrefs);
+      settings.languageSettingsPrivateApiForTest = languageSettingsPrivate;
+
+      editDictPage = document.createElement('settings-edit-dictionary-page');
+
+      // Prefs would normally be data-bound to settings-languages.
+      document.body.appendChild(editDictPage);
+    });
+
+    teardown(function(){
+      editDictPage.remove();
+    });
+
+    test('add word validation', function() {
+      // Check addWord enable/disable logic
+      var addWordButton = editDictPage.$.addWord;
+      assertTrue(!!addWordButton);
+      editDictPage.$.newWord.value = '';
+      assertTrue(addWordButton.disabled);
+      editDictPage.$.newWord.value = 'valid word';
+      assertFalse(addWordButton.disabled);
+      assertFalse(window.getComputedStyle(addWordButton)['pointer-events']
+          === 'none'); // Make sure add-word button actually clickable.

[dpapad, 2017/02/15 20:36:37]

https://google.github.io/styleguide/jsguide.html#formatting-where-to-break

Line break should be after the operator.

[scottchen, 2017/02/22 21:42:25]

Done.

+    });
+
+    test('spellcheck edit dictionary page message when empty', function() {
+      assertTrue(!!editDictPage);
+      editDictPage.words_ = [];

[dpapad, 2017/02/15 20:36:37]

Can we improve this test? Currently it is accessing private state, as well as
shortcutting code that should be tested.

Inside the ready() lifecycle method a call to getSpellcheckWords() is made. We
should our fake languagePrivate implementation provide the empty list, instead
of assigning to words_ directly. So this way the ready() callback is tested
itself. TestBrowserProxy can be used to notify the test when a method was
walled, something as follows (assuming that fakePrivateApi extends
TestBrowserProxy).

test('mytest', function() {
 // setup fake data
 fakePrivateApi.setWords([]);
 // attach element to DOM ...
 
 // Wait for the |getSpellheckWords| method to be called.
 return fakePrivateApi.whenCalled('getSpellcheckWords').then(function() {
   // Do assertions here.
 });
});

[scottchen, 2017/02/22 21:42:25]

Done.

+      Polymer.dom.flush();
+
+      assertTrue(!!editDictPage.root.querySelector('#noWordsLabel'));
+      assertFalse(!!editDictPage.root.querySelector('#list'));
+    });
+
+    test('spellcheck edit dictionary page list has words', function() {
+      var addWordButton = editDictPage.root.querySelector('#addWord');
+      editDictPage.$.newWord.value = "valid word";
+      MockInteractions.tap(addWordButton);
+      editDictPage.$.newWord.value = "valid word2";
+      MockInteractions.tap(addWordButton);
+      Polymer.dom.flush();
+
+      assertFalse(!!editDictPage.root.querySelector('#noWordsLabel'));
+      assertTrue(!!editDictPage.root.querySelector('#list'));
+      assertEquals(2, editDictPage.root.querySelector('#list').items.length);
+    });
+
+  });
+});