Parents list screen JS tests

Bug: 1043108
Change-Id: Ifff2a6c8951ae53bcd068d5bed3abd54d0fafeb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2094305
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@{#751678}

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

@@ -66,3 +66,32 @@ TEST_F('EduLoginButtonTest', 'NextButtonRtlIcon', function() {
 TEST_F('EduLoginButtonTest', 'BackButtonRtlIcon', function() {
   this.runMochaTest(edu_login_button_tests.TestNames.BackButtonRtlIcon);
 });
+
+// eslint-disable-next-line no-var
+var EduLoginParentsTest = class extends EduLoginTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://chrome-signin/test_loader.html?module=chromeos/edu_login/edu_login_parents_test.js';
+  }
+
+  /** @override */
+  get suiteName() {
+    return edu_login_parents_tests.suiteName;
+  }
+};
+
+TEST_F('EduLoginParentsTest', 'Initialize', function() {
+  this.runMochaTest(edu_login_parents_tests.TestNames.Initialize);
+});
+
+TEST_F('EduLoginParentsTest', 'NextButton', function() {
+  this.runMochaTest(edu_login_parents_tests.TestNames.NextButton);
+});
+
+TEST_F('EduLoginParentsTest', 'GoNext', function() {
+  this.runMochaTest(edu_login_parents_tests.TestNames.GoNext);
+});
+
+TEST_F('EduLoginParentsTest', 'SelectedParent', function() {
+  this.runMochaTest(edu_login_parents_tests.TestNames.SelectedParent);
+});

chrome/test/data/webui/chromeos/edu_login/edu_login_parents_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_parents.js';
+
+import {EduAccountLoginBrowserProxyImpl} from 'chrome://chrome-signin/browser_proxy.js';
+import {ParentAccount} from 'chrome://chrome-signin/edu_login_util.js';
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {TestBrowserProxy} from '../../test_browser_proxy.m.js';
+
+window.edu_login_parents_tests = {};
+edu_login_parents_tests.suiteName = 'EduLoginParentsTest';
+
+/** @enum {string} */
+edu_login_parents_tests.TestNames = {
+  Initialize: 'Expect getParents call on initialize',
+  NextButton: 'Next button is enabled only when parent is selected',
+  GoNext: 'go-next event should be fired when parent is selected',
+  SelectedParent: 'Selected parent',
+};
+
+/**
+ * @param {string} email
+ * @param {string} displayName
+ * @param {string} profileImage
+ * @param {string} obfuscatedGaiaId
+ * @return {ParentAccount}
+ */
+function getFakeParent(email, displayName, profileImage, obfuscatedGaiaId) {
+  return {
+    email: email,
+    displayName: displayName,
+    profileImage: profileImage,
+    obfuscatedGaiaId: obfuscatedGaiaId,
+  };
+}
+
+/** @return {Array<ParentAccount>} */
+function getFakeParentsList() {
+  return [
+    getFakeParent('parent1@gmail.com', 'Parent 1', '', 'parent1gaia'),
+    getFakeParent('parent2@gmail.com', 'Parent 2', '', 'parent2gaia'),
+  ];
+}
+
+suite(edu_login_parents_tests.suiteName, function() {
+  let parentsComponent;
+  let testBrowserProxy;
+
+  /** @implements {EduAccountLoginBrowserProxy} */
+  class TestEduAccountLoginBrowserProxy extends TestBrowserProxy {
+    constructor() {
+      super(['getParents']);
+    }
+
+    /** @override */
+    getParents() {
+      this.methodCalled('getParents');
+      return Promise.resolve(getFakeParentsList());
+    }
+  }
+
+  /** @return {NodeList} */
+  function getAccountListItems() {
+    return parentsComponent.shadowRoot.querySelectorAll('.account-list-item');
+  }
+
+  setup(function() {
+    PolymerTest.clearBody();
+    testBrowserProxy = new TestEduAccountLoginBrowserProxy();
+    EduAccountLoginBrowserProxyImpl.instance_ = testBrowserProxy;
+    parentsComponent = document.createElement('edu-login-parents');
+    document.body.appendChild(parentsComponent);
+    flush();
+  });
+
+  test(assert(edu_login_parents_tests.TestNames.Initialize), function() {
+    assertEquals(1, testBrowserProxy.getCallCount('getParents'));
+  });
+
+  test(assert(edu_login_parents_tests.TestNames.NextButton), function() {
+    testBrowserProxy.whenCalled('getParents').then(function() {
+      flush();
+      assertTrue(
+          parentsComponent.$$('edu-login-button[button-type="next"]').disabled);
+      // Select the first parent from the list.
+      getAccountListItems()[0].click();
+      assertFalse(
+          parentsComponent.$$('edu-login-button[button-type="next"]').disabled);
+    });
+  });
+
+  test(assert(edu_login_parents_tests.TestNames.GoNext), function() {
+    let goNextCalls = 0;
+    parentsComponent.addEventListener('go-next', function() {
+      goNextCalls++;
+    });
+    testBrowserProxy.whenCalled('getParents').then(function() {
+      flush();
+      assertEquals(0, goNextCalls);
+      const accountListItems = getAccountListItems();
+      // Select the first parent from the list.
+      accountListItems[0].click();
+      assertEquals(1, goNextCalls);
+      // If user goes back and selects the same item -'go-next' should be fired.
+      accountListItems[0].click();
+      assertEquals(2, goNextCalls);
+      // If user goes back and selects another item - 'go-next' should be fired.
+      accountListItems[1].click();
+      assertEquals(3, goNextCalls);
+    });
+  });
+
+  test(assert(edu_login_parents_tests.TestNames.SelectedParent), function() {
+    testBrowserProxy.whenCalled('getParents').then(function() {
+      flush();
+      assertDeepEquals(getFakeParentsList(), parentsComponent.parents_);
+      assertEquals(null, parentsComponent.selectedParent);
+      const accountListItems = getAccountListItems();
+      accountListItems.forEach(element => {
+        // No option should be selected.
+        assertEquals('false', element.getAttribute('aria-selected'));
+      });
+      // Select the first parent from the list.
+      accountListItems[0].click();
+      assertDeepEquals(
+          getFakeParentsList()[0], parentsComponent.selectedParent);
+      accountListItems.forEach((element, index) => {
+        assertEquals(
+            index === 0 ? 'true' : 'false',
+            element.getAttribute('aria-selected'));
+      });
+    });
+  });
+});