Create browser tests for chrome://emoji-picker webui.

Currently, there is basic testing of the <emoji-picker> component
to make sure that clicking the tab icons correctly activates and
deactivates the tabs.

Change-Id: I29762bba9dec60fc7260311247df68c44fd22d03
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2631395Reviewed-by: John Palmer <jopalmer@chromium.org>
Reviewed-by: Keith Lee <keithlee@chromium.org>
Commit-Queue: Kenton Lam <kentonlam@google.com>
Cr-Commit-Position: refs/heads/master@{#845517}

chrome/browser/resources/chromeos/emoji_picker/BUILD.gn

@@ -29,6 +29,7 @@ generate_grd("build_grd") {
     "index.html",
     "types.js",
     "events.js",
+    "emoji_test_ordering.json",
   ]
   grdp_files = [
     components_grdp_file,

chrome/browser/resources/chromeos/emoji_picker/emoji_picker.js

@@ -27,7 +27,7 @@ const GROUP_TABS = [
   {icon: 'emoji_picker:flag', group: '8', active: false},
 ];
 
-class EmojiPicker extends PolymerElement {
+export class EmojiPicker extends PolymerElement {
   static get is() {
     return 'emoji-picker';
   }

chrome/browser/ui/webui/chromeos/emoji/emoji_picker.cc

@@ -12,6 +12,7 @@
 #include "chrome/grit/emoji_picker_resources_map.h"
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "ui/resources/grit/webui_generated_resources.h"
 
 #include "chrome/browser/ui/webui/chromeos/emoji/emoji_dialog.h"
 #include "chrome/browser/ui/webui/chromeos/emoji/emoji_handler.h"
@@ -36,6 +37,10 @@ EmojiPicker::EmojiPicker(content::WebUI* web_ui)
       base::make_span(kEmojiPickerResources, kEmojiPickerResourcesSize),
       IDR_EMOJI_PICKER_INDEX_HTML);
 
+  html_source->AddResourcePath("test_loader.js", IDR_WEBUI_JS_TEST_LOADER_JS);
+  html_source->AddResourcePath("test_loader.html",
+                               IDR_WEBUI_HTML_TEST_LOADER_HTML);
+
   // Attach message handler to handle emoji click events.
   web_ui->AddMessageHandler(std::make_unique<EmojiHandler>());
 

chrome/test/data/webui/BUILD.gn

@@ -143,6 +143,7 @@ if (include_js_tests) {
         "chromeos/account_manager/account_manager_browsertest.js",
         "chromeos/edu_coexistence/edu_coexistence_browsertest.js",
         "chromeos/edu_login/edu_login_browsertest.js",
+        "chromeos/emoji_picker/emoji_picker_browsertest.js",
         "chromeos/gaia_action_buttons/gaia_action_buttons_browsertest.js",
         "cr_components/chromeos/cr_components_chromeos_browsertest.js",
         "cr_components/chromeos/cr_components_chromeos_v3_browsertest.js",

chrome/test/data/webui/chromeos/BUILD.gn

@@ -25,6 +25,7 @@ group("closure_compile") {
     public_deps += [
       "account_manager:closure_compile",
       "diagnostics:closure_compile",
+      "emoji_picker:closure_compile",
       "gaia_action_buttons:closure_compile",
       "scanning:closure_compile",
     ]

chrome/test/data/webui/chromeos/emoji_picker/BUILD.gn

+# Copyright 2021 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  closure_flags = default_closure_args + [
+                    "browser_resolver_prefix_replacements=\"chrome://emoji-picker/=../../chrome/browser/resources/chromeos/emoji_picker/\"",
+                    "js_module_root=../../chrome/test/data/webui/",
+                    "js_module_root=./gen/chrome/test/data/webui/",
+                  ]
+  deps = [ ":emoji_picker_test" ]
+}
+
+js_library("emoji_picker_test") {
+  deps = [
+    "//chrome/browser/resources/chromeos/emoji_picker:emoji_picker",
+    "//chrome/browser/resources/chromeos/emoji_picker:emoji_picker",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}

chrome/test/data/webui/chromeos/emoji_picker/emoji_picker_browsertest.js

+// Copyright 2021 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.
+
+/**
+ * Tests for the <emoji-picker> Polymer component.
+ */
+
+GEN_INCLUDE([
+  '//chrome/test/data/webui/polymer_browser_test_base.js',
+]);
+
+GEN('#include "content/public/test/browser_test.h"');
+GEN('#include "chromeos/constants/chromeos_features.h"');
+
+class EmojiPickerBrowserTest extends PolymerTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://emoji-picker';
+  }
+
+  /** @override */
+  get featureList() {
+    return {enabled: ['chromeos::features::kImeSystemEmojiPicker']};
+  }
+}
+
+// this browser test bootstraps the other tests written in javascript.
+
+var EmojiPickerMainTest = class extends EmojiPickerBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://emoji-picker/test_loader.html?module=' +
+        'chromeos/emoji_picker/emoji_picker_test.js';
+  }
+};
+
+
+TEST_F('EmojiPickerMainTest', 'All', function() {
+  mocha.run();
+});
\ No newline at end of file

chrome/test/data/webui/chromeos/emoji_picker/emoji_picker_test.js

+// Copyright 2021 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.
+
+import {EmojiPicker} from 'chrome://emoji-picker/emoji_picker.js';
+import {DATA_LOADED_EVENT} from 'chrome://emoji-picker/events.js';
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {deepQuerySelector} from './emoji_picker_test_util.js';
+
+suite('<emoji-picker>', () => {
+  /** @type {EmojiPicker} */
+  let emojiPicker;
+  let findInEmojiPicker;
+
+  setup(() => {
+    // Reset DOM state.
+    document.body.innerHTML = '';
+    emojiPicker =
+        /** @type {EmojiPicker} */ (document.createElement('emoji-picker'));
+    emojiPicker.emojiDataUrl = '/emoji_test_ordering.json';
+
+    findInEmojiPicker = (path) => deepQuerySelector(emojiPicker, path);
+
+    // Wait until emoji data is loaded before executing tests.
+    return new Promise((resolve, reject) => {
+      emojiPicker.addEventListener(DATA_LOADED_EVENT, resolve);
+      document.body.appendChild(emojiPicker);
+      flush();
+    });
+  });
+
+  test('custom element should be defined', () => {
+    assert(customElements.get('emoji-picker') != null);
+  });
+
+  test('first tab should be active by default', () => {
+    const button =
+        findInEmojiPicker(['emoji-group-button:first-child', 'button']);
+    assert(button.classList.contains('active'));
+  });
+
+  test('second tab should be inactive by default', () => {
+    const button =
+        findInEmojiPicker(['emoji-group-button:nth-child(2)', 'button']);
+    assert(!button.classList.contains('active'));
+  });
+
+  test('clicking second tab should activate it and deactivate others', () => {
+    const firstButton =
+        findInEmojiPicker(['emoji-group-button:nth-child(1)', 'button']);
+    const secondButton =
+        findInEmojiPicker(['emoji-group-button:nth-child(2)', 'button']);
+    secondButton.click();
+    assert(secondButton.classList.contains('active'));
+    assert(!firstButton.classList.contains('active'));
+  });
+});

chrome/test/data/webui/chromeos/emoji_picker/emoji_picker_test_util.js

+// Copyright 2021 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.
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+
+/**
+ * Queries for an element through a path of custom elements.
+ * This is needed because querySelector() does not query into
+ * custom elements' shadow roots.
+ *
+ * @param {!Element} root element to start searching from.
+ * @param {!Array<string>} path array of query selectors. each selector should
+ *     correspond to one shadow root.
+ * @returns {HTMLElement|null} element or null if not found.
+ */
+export function deepQuerySelector(root, path) {
+  assert(root, 'deepQuerySelector called with null root');
+
+  let el = root.shadowRoot || root;
+
+  for (const part of path) {
+    el = el.querySelector(part);
+    if (!el) {
+      break;
+    }
+    if (el.shadowRoot) {
+      el = el.shadowRoot;
+    }
+  }
+
+  return el;
+}