Add EDU login flow: JS tests

Add JS tests for edu-login-button component

Bug: 1043108
Change-Id: Id2b17b91afa5f0810b92ea7ab1d827c5daedbeca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2087218
Commit-Queue: Anastasiia Nikolaienko <anastasiian@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Kush Sinha <sinhak@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747652}

chrome/browser/ui/webui/signin/inline_login_ui.cc

@@ -28,6 +28,7 @@
 #if defined(OS_CHROMEOS)
 #include "chrome/browser/ui/webui/chromeos/edu_account_login_handler_chromeos.h"
 #include "chrome/browser/ui/webui/signin/inline_login_handler_chromeos.h"
+#include "ui/resources/grit/webui_resources.h"
 #include "ui/strings/grit/ui_strings.h"
 #else
 #include "chrome/browser/ui/webui/signin/inline_login_handler_impl.h"
@@ -65,6 +66,9 @@ content::WebUIDataSource* CreateWebUIDataSource() {
   source->AddResourcePath("gaia_auth_host.js", IDR_GAIA_AUTH_AUTHENTICATOR_JS);
 
 #if defined(OS_CHROMEOS)
+  source->OverrideContentSecurityPolicyScriptSrc(
+      "script-src chrome://resources chrome://test 'self';");
+
   source->AddResourcePath("edu", IDU_EDU_LOGIN_EDU_LOGIN_HTML);
   source->AddResourcePath("app.js", IDU_EDU_LOGIN_EDU_LOGIN_JS);
   source->AddResourcePath("edu_login_button.js",
@@ -75,6 +79,9 @@ content::WebUIDataSource* CreateWebUIDataSource() {
   source->AddResourcePath("browser_proxy.js", IDR_EDU_LOGIN_BROWSER_PROXY_JS);
   source->AddResourcePath("edu_login_util.js", IDR_EDU_LOGIN_EDU_LOGIN_UTIL_JS);
 
+  source->AddResourcePath("test_loader.js", IDR_WEBUI_JS_TEST_LOADER);
+  source->AddResourcePath("test_loader.html", IDR_WEBUI_HTML_TEST_LOADER);
+
   AddEduStrings(source);
 #endif
 

chrome/test/data/webui/BUILD.gn

@@ -135,6 +135,7 @@ js2gtest("browser_tests_js_webui") {
       "../../../browser/ui/webui/chromeos/certificate_manager_dialog_browsertest.js",
       "../chromeos/oobe_webui_browsertest.js",
       "certificate_viewer_dialog_test.js",
+      "chromeos/edu_login/edu_login_browsertest.js",
       "set_time_dialog_browsertest.js",
       "settings/a11y/crostini_settings_details_a11y_test.js",
       "settings/a11y/crostini_settings_export_import_a11y_test.js",

chrome/test/data/webui/chromeos/edu_login/edu_login_browsertest.js

+// Copyright 2020 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 Runs the EDU login flow tests. */
+
+GEN_INCLUDE(['//chrome/test/data/webui/polymer_browser_test_base.js']);
+
+const EduLoginTest = class extends PolymerTest {
+  /** @override */
+  get browsePreload() {
+    throw 'this is abstract and should be overridden by subclasses';
+  }
+
+  get suiteName() {
+    throw 'this is abstract and should be overridden by subclasses';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return [
+      '//third_party/mocha/mocha.js',
+      '//chrome/test/data/webui/mocha_adapter.js',
+    ];
+  }
+
+  /** @param {string} testName The name of the test to run. */
+  runMochaTest(testName) {
+    runMochaTest(this.suiteName, testName);
+  }
+};
+
+// eslint-disable-next-line no-var
+var EduLoginButtonTest = class extends EduLoginTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://chrome-signin/test_loader.html?module=chromeos/edu_login/edu_login_button_test.js';
+  }
+
+  /** @override */
+  get suiteName() {
+    return edu_login_button_tests.suiteName;
+  }
+};
+
+TEST_F('EduLoginButtonTest', 'OkButtonProperties', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.OkButtonProperties);
+});
+
+TEST_F('EduLoginButtonTest', 'NextButtonProperties', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.NextButtonProperties);
+});
+
+TEST_F('EduLoginButtonTest', 'BackButtonProperties', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.BackButtonProperties);
+});
+
+TEST_F('EduLoginButtonTest', 'OkButtonRtlIcon', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.OkButtonRtlIcon);
+});
+
+TEST_F('EduLoginButtonTest', 'NextButtonRtlIcon', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.NextButtonRtlIcon);
+});
+
+TEST_F('EduLoginButtonTest', 'BackButtonRtlIcon', function() {
+  this.runMochaTest(edu_login_button_tests.TestNames.BackButtonRtlIcon);
+});

chrome/test/data/webui/chromeos/edu_login/edu_login_button_test.js

+// Copyright 2020 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 'chrome://chrome-signin/edu_login_button.js';
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+window.edu_login_button_tests = {};
+edu_login_button_tests.suiteName = 'EduLoginButtonTest';
+
+/** @enum {string} */
+edu_login_button_tests.TestNames = {
+  OkButtonProperties: 'OK button properties',
+  NextButtonProperties: 'Next button properties',
+  BackButtonProperties: 'Back button properties',
+  OkButtonRtlIcon: 'OK button RTL icon',
+  NextButtonRtlIcon: 'Next button RTL icon',
+  BackButtonRtlIcon: 'Back button RTL icon',
+};
+
+/** @param {boolean} isRTL */
+function finishSetup(isRTL) {
+  document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+  flush();
+}
+
+suite(edu_login_button_tests.suiteName, function() {
+  let okButton;
+  let nextButton;
+  let backButton;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    document.body.innerHTML = `
+      <edu-login-button button-type="ok" id="okButton"></edu-login-button>
+      <edu-login-button button-type="next" id="nextButton" disabled>
+      </edu-login-button>
+      <edu-login-button button-type="back" id="backButton"></edu-login-button>
+    `;
+    okButton = document.body.querySelector('#okButton');
+    nextButton = document.body.querySelector('#nextButton');
+    backButton = document.body.querySelector('#backButton');
+  });
+
+  test(assert(edu_login_button_tests.TestNames.OkButtonProperties), function() {
+    finishSetup(false);
+    assertEquals('ok', okButton.buttonType);
+    assertFalse(okButton.disabled);
+    assertEquals(1, okButton.$$('cr-button').classList.length);
+    assertEquals('action-button', okButton.$$('cr-button').classList[0]);
+    assertEquals(
+        loadTimeData.getString('okButton'),
+        okButton.$$('cr-button').textContent.trim());
+    // OK button shouldn't have icon.
+    assertEquals(null, okButton.$$('iron-icon'));
+  });
+
+  test(
+      assert(edu_login_button_tests.TestNames.NextButtonProperties),
+      function() {
+        finishSetup(false);
+        assertEquals('next', nextButton.buttonType);
+        assertTrue(nextButton.disabled);
+        assertEquals(1, nextButton.$$('cr-button').classList.length);
+        assertEquals('action-button', nextButton.$$('cr-button').classList[0]);
+        assertEquals(
+            loadTimeData.getString('nextButton'),
+            nextButton.$$('cr-button').textContent.trim());
+        assertEquals('cr:chevron-right', nextButton.$$('iron-icon').icon);
+      });
+
+  test(
+      assert(edu_login_button_tests.TestNames.BackButtonProperties),
+      function() {
+        finishSetup(false);
+        assertEquals('back', backButton.buttonType);
+        assertFalse(backButton.disabled);
+        assertEquals(0, backButton.$$('cr-button').classList.length);
+        assertEquals(
+            loadTimeData.getString('backButton'),
+            backButton.$$('cr-button').textContent.trim());
+        assertEquals('cr:chevron-left', backButton.$$('iron-icon').icon);
+      });
+
+  test(assert(edu_login_button_tests.TestNames.OkButtonRtlIcon), function() {
+    finishSetup(true);
+    // OK button shouldn't have icon.
+    assertEquals(null, okButton.$$('iron-icon'));
+  });
+
+  test(assert(edu_login_button_tests.TestNames.NextButtonRtlIcon), function() {
+    finishSetup(true);
+    assertEquals('cr:chevron-left', nextButton.$$('iron-icon').icon);
+  });
+
+  test(assert(edu_login_button_tests.TestNames.BackButtonRtlIcon), function() {
+    finishSetup(true);
+    assertEquals('cr:chevron-right', backButton.$$('iron-icon').icon);
+  });
+});