MD WebUI: Add tests for cr-toolbar-search-field

chrome/test/data/webui/cr_elements_browsertest.js

+// 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.
+
+/** @fileoverview Suite of tests for cr elements. */

[dpapad, 2016/05/27 01:31:12]

Nit: Mention the exact element being tested here.

[tsergeant, 2016/05/27 03:07:36]

Done.

+
+/** @const {string} Path to source root. */
+var ROOT_PATH = '../../../../';
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
+
+/**
+ * Test fixture for cr elements
+ * @constructor
+ * @extends {PolymerTest}
+ */
+function CrElementsBrowserTest() {}
+
+CrElementsBrowserTest.prototype = {
+  __proto__: PolymerTest.prototype,
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
+};
+
+TEST_F('CrElementsBrowserTest', 'CrToolbarSearchFieldTest', function() {
+  suite('cr-toolbar-search-field', function() {
+    /** @type {CrToolbarSearchFieldElement} */
+    var field;

[dpapad, 2016/05/27 01:31:12]

Let's either instantiate both field and delegate to null, or leave both of them
undefined, for consistency. Also, let's add "?" in front of the types to be more
explicit.

[tsergeant, 2016/05/27 03:07:36]

Done.

+    /** @type {MockSearchFieldDelegate} */
+    var delegate = null;
+
+    /** @param {string} term */
+    function simulateSearch(term) {
+      field.$.searchInput.bindValue = term;
+      field.onSearchTermSearch_();
+    }
+
+    /**
+     * @constructor
+     * @implements {SearchFieldDelegate}
+     */
+    function MockSearchFieldDelegate() {
+      /** @type {!Array<string>} */
+      this.searches = [];
+    }
+
+    MockSearchFieldDelegate.prototype = {
+      onSearchTermSearch: function(term) {

[dpapad, 2016/05/27 01:31:12]

Nit: @override

[tsergeant, 2016/05/27 03:07:36]

Done.

+        this.searches.push(term);
+      }
+    };
+
+    suiteSetup(function() {
+      return PolymerTest.importHtml(
+          'chrome://resources/cr_elements/cr_toolbar/' +
+          'cr_toolbar_search_field.html');
+    });
+
+    setup(function() {
+      PolymerTest.clearBody();
+      // Constructing a new delegate resets the list of searches.
+      delegate = new MockSearchFieldDelegate();
+      field = document.createElement('cr-toolbar-search-field');
+      field.setDelegate(delegate);
+      document.body.appendChild(field);
+    });
+
+    teardown(function() {
+      field.remove();
+      field = null;
+      delegate = null;
+    });
+
+    test('opens and closes correctly', function() {
+      assertFalse(field.showingSearch);
+      MockInteractions.tap(field);
+      assertTrue(field.showingSearch);
+      assertEquals(field.$.searchInput, field.root.activeElement);
+
+      MockInteractions.blur(field.$.searchInput);
+      assertFalse(field.showingSearch);
+
+      MockInteractions.tap(field);
+      assertEquals(field.$.searchInput, field.root.activeElement);
+
+      MockInteractions.pressAndReleaseKeyOn(
+          field.$.searchInput, 27, '', 'Escape');
+      assertFalse(field.showingSearch, 'Pressing escape closes field.');
+      assertNotEquals(field.$.searchInput, field.root.activeElement);
+    });
+
+    test('passes searches correctly', function() {
+      MockInteractions.tap(field);
+      simulateSearch('test');
+      assertEquals('test', field.getValue());
+
+      MockInteractions.tap(field.$.clearSearch);
+      assertFalse(field.showingSearch);
+      assertEquals('', field.getValue());
+
+      assertEquals(2, delegate.searches.length);

[dpapad, 2016/05/27 01:31:12]

Nit: You can replace all three assertions with a single one

assertEquals(['test', ''].join(), delegate.searches.join());

[tsergeant, 2016/05/27 03:07:36]

Done.

+      assertEquals('test', delegate.searches[0]);
+      assertEquals('', delegate.searches[1]);
+    });
+
+    test('blur does not close field when a search is active', function() {
+      MockInteractions.tap(field);
+      simulateSearch('test');
+      MockInteractions.blur(field.$.searchInput);
+
+      assertTrue(field.showingSearch);
+    });
+  });
+
+  mocha.run();
+});