Add Gaia native navigation buttons

In "Add account" flow "Next" button is currently displayed by Gaia,
inside the webview, but "Back" button is displayed by us.
Since "GaiaActionButtons" feature in OOBE is enabled by default, we will
display native action buttons in "Add account" (Chrome OS only) and
"Add EDU account" flows too.

Add "gaia-action-buttons" component and use "setPrimaryActionLabel",
"setSecondaryActionLabel" etc. events to show navigation buttons.

Bug: 1031534
Change-Id: Ibe89fe719362e17fe32e194e5913d733e3f4995b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2279817Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Anastasiia N <anastasiian@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795420}

chrome/browser/BUILD.gn

@@ -5867,6 +5867,7 @@ grit("resources") {
       "//chrome/browser/resources/chromeos/crostini_upgrader:polymer3_elements",
       "//chrome/browser/resources/chromeos/edu_login:polymer3_elements",
       "//chrome/browser/resources/chromeos/emulator:polymer3_elements",
+      "//chrome/browser/resources/chromeos/gaia_action_buttons:web_components",
       "//chrome/browser/resources/chromeos/set_time_dialog:polymer3_elements",
       "//chrome/browser/resources/chromeos/smb_shares:polymer3_elements",
       "//chrome/browser/supervised_user:supervised_user_unscaled_resources",

chrome/browser/browser_resources.grd

@@ -246,6 +246,9 @@
           <include name="IDR_ACCOUNT_MANAGER_WELCOME_2X_PNG" file="resources\chromeos\account_manager\account_manager_welcome_2x.png" type="BINDATA" compress="gzip" />
           <include name="IDR_ACCOUNT_MANAGER_WELCOME_GOOGLE_LOGO_SVG" file="resources\chromeos\googleg.svg" type="BINDATA" />
         </if>
+
+        <include name="IDR_GAIA_ACTION_BUTTONS_JS" file="${root_gen_dir}\chrome\browser\resources\chromeos\gaia_action_buttons\gaia_action_buttons.js" use_base_dir="false" type ="BINDATA" />
+
         <include name="IDR_PASSWORD_CHANGE_HTML" file="resources\chromeos\password_change\password_change.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_PASSWORD_CHANGE_JS" file="resources\chromeos\password_change\password_change.js" flattenhtml="true" type="BINDATA" />
         <include name="IDR_PASSWORD_CHANGE_CSS" file="resources\chromeos\password_change\password_change.css" flattenhtml="true" type="BINDATA" />

chrome/browser/resources/chromeos/BUILD.gn

@@ -46,6 +46,7 @@ group("closure_compile") {
     "crostini_installer:closure_compile",
     "edu_login:closure_compile",
     "emulator:closure_compile",
+    "gaia_action_buttons:closure_compile",
     "internet_config_dialog:closure_compile",
     "internet_detail_dialog:closure_compile",
     "login:closure_compile",

chrome/browser/resources/chromeos/edu_login/edu_login_signin.html

@@ -29,6 +29,10 @@
   paper-spinner-lite[active] {
     display: inline-block;
   }
+
+  .action-buttons {
+    margin-inline-start: auto;
+  }
 </style>
 <edu-login-template>
   <span slot="main">
@@ -42,5 +46,9 @@
   <span slot="buttons">
     <edu-login-button button-type="back" on-go-back="handleGoBack_">
     </edu-login-button>
+    <div class="action-buttons" hidden$="[[!enableGaiaActionButtons_]]">
+      <gaia-action-buttons authenticator="[[authExtHost_]]">
+      </gaia-action-buttons>
+    </div>
   </span>
 </edu-login-template>

chrome/browser/resources/chromeos/edu_login/edu_login_signin.js

@@ -6,6 +6,7 @@ import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 import './edu_login_css.js';
 import './edu_login_template.js';
 import './edu_login_button.js';
+import './gaia_action_buttons.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
@@ -38,17 +39,20 @@ Polymer({
       type: Boolean,
       value: true,
     },
-  },
 
-  /**
-   * The auth extension host instance.
-   * @private {?Authenticator}
-   */
-  authExtHost_: null,
+    /**
+     * The auth extension host instance.
+     * @private {?Authenticator}
+     */
+    authExtHost_: Object,
+  },
 
   /** @private {?EduAccountLoginBrowserProxy} */
   browserProxy_: null,
 
+  /** @private {boolean} */
+  enableGaiaActionButtons_: false,
+
   /** @override */
   created() {
     this.browserProxy_ = EduAccountLoginBrowserProxyImpl.getInstance();
@@ -133,6 +137,7 @@ Polymer({
   loadAuthExtension_(data) {
     this.authExtHost_.load(data.authMode, data);
     this.loading_ = true;
+    this.enableGaiaActionButtons_ = data.enableGaiaActionButtons;
   },
 
   /**

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

+# 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("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/html_to_js.gni")
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  closure_flags =
+      default_closure_args + [
+        "js_module_root=../../chrome/browser/resources/gaia_auth_host/",
+        "js_module_root=./gen/chrome/browser/resources/gaia_auth_host/",
+      ]
+  deps = [ ":gaia_action_buttons" ]
+}
+
+js_library("gaia_action_buttons") {
+  deps = [
+    "//chrome/browser/resources/gaia_auth_host:authenticator.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+  ]
+}
+
+html_to_js("web_components") {
+  js_files = [ "gaia_action_buttons.js" ]
+}

chrome/browser/resources/chromeos/gaia_action_buttons/OWNERS

+sinhak@chromium.org
+anastasiian@chromium.org

chrome/browser/resources/chromeos/gaia_action_buttons/gaia_action_buttons.html

+<style>
+  .secondary-button {
+    margin-inline-end: 20px;
+  }
+</style>
+
+<cr-button
+    class="secondary-button"
+    on-click="onSecondaryActionButtonClicked_"
+    aria-label$="[[data_.secondaryActionButtonLabel]]"
+    hidden="[[!data_.secondaryActionButtonLabel]]"
+    disabled="[[!data_.secondaryActionButtonEnabled]]">
+    [[data_.secondaryActionButtonLabel]]
+</cr-button>
+<cr-button
+    class="action-button"
+    on-click="onPrimaryActionButtonClicked_"
+    aria-label$="[[data_.primaryActionButtonLabel]]"
+    hidden="[[!data_.primaryActionButtonLabel]]"
+    disabled="[[!data_.primaryActionButtonEnabled]]">
+  [[data_.primaryActionButtonLabel]]
+</cr-button>

chrome/browser/resources/chromeos/gaia_action_buttons/gaia_action_buttons.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://resources/cr_elements/cr_button/cr_button.m.js';
+
+import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {Authenticator} from '../../gaia_auth_host/authenticator.m.js';
+
+/**
+ * @typedef {{
+ *    primaryActionButtonLabel: string,
+ *    primaryActionButtonEnabled: boolean,
+ *    secondaryActionButtonLabel: string,
+ *    secondaryActionButtonEnabled: boolean,
+ * }}
+ */
+let ActionButtonsData;
+
+/**
+ * Event listeners for the events triggered by the authenticator.
+ * @type {!Array<!{event: string, field: string}>}
+ */
+const authenticatorEventListeners = [
+  {event: 'setPrimaryActionLabel', field: 'primaryActionButtonLabel'},
+  {event: 'setPrimaryActionEnabled', field: 'primaryActionButtonEnabled'},
+  {event: 'setSecondaryActionLabel', field: 'secondaryActionButtonLabel'},
+  {event: 'setSecondaryActionEnabled', field: 'secondaryActionButtonEnabled'},
+];
+
+Polymer({
+  is: 'gaia-action-buttons',
+
+  _template: html`{__html_template__}`,
+
+  properties: {
+    /**
+     * The auth extension host instance.
+     * @type {?Authenticator}
+     */
+    authenticator: {
+      type: Object,
+      observer: 'authenticatorChanged_',
+    },
+
+    /**
+     * Controls label and availability on the action buttons.
+     * @private {!ActionButtonsData}
+     */
+    data_: {
+      type: Object,
+      value() {
+        return {
+          primaryActionButtonLabel: '',
+          primaryActionButtonEnabled: true,
+          secondaryActionButtonLabel: '',
+          secondaryActionButtonEnabled: true,
+        };
+      }
+    },
+  },
+
+  /** @private */
+  authenticatorChanged_() {
+    if (this.authenticator) {
+      this.addAuthExtHostListeners_();
+    }
+  },
+
+  /** @private */
+  addAuthExtHostListeners_() {
+    authenticatorEventListeners.forEach(listenParams => {
+      this.authenticator.addEventListener(listenParams.event, e => {
+        this.set(`data_.${listenParams.field}`, e.detail);
+      });
+    });
+    this.authenticator.addEventListener(
+        'setAllActionsEnabled',
+        e => this.onSetAllActionsEnabled_(
+            /** @type {!CustomEvent<boolean>} */ (e)));
+  },
+
+  /**
+   * Invoked when the auth host emits 'setAllActionsEnabled' event
+   * @param {!CustomEvent<boolean>} e
+   * @private
+   */
+  onSetAllActionsEnabled_(e) {
+    this.set('data_.primaryActionButtonEnabled', e.detail);
+    this.set('data_.secondaryActionButtonEnabled', e.detail);
+  },
+
+  /**
+   * Handles clicks on "PrimaryAction" button.
+   * @private
+   */
+  onPrimaryActionButtonClicked_() {
+    this.authenticator.sendMessageToWebview('primaryActionHit');
+  },
+
+  /**
+   * Handles clicks on "SecondaryAction" button.
+   * @private
+   */
+  onSecondaryActionButtonClicked_() {
+    this.authenticator.sendMessageToWebview('secondaryActionHit');
+  },
+
+  /** @param {Object} authExtHost */
+  setAuthExtHostForTest(authExtHost) {
+    this.authenticator = /** @type {Authenticator} */ (authExtHost);
+    this.addAuthExtHostListeners_();
+  },
+});

chrome/browser/resources/gaia_auth_host/authenticator.js

@@ -861,7 +861,7 @@ cr.define('cr.login', function() {
 
     /**
      * Invoked to send a HTML5 message to the webview element.
-     * @param {Object} payload Payload of the HTML5 message.
+     * @param {*} payload Payload of the HTML5 message.
      */
     sendMessageToWebview(payload) {
       const currentUrl = this.webview_.src;

chrome/browser/resources/inline_login/inline_login_app.html

@@ -32,9 +32,14 @@
   }
 
   .buttons {
+    display: flex;
     padding: 0 32px 32px;
   }
 
+  .action-buttons {
+    margin-inline-start: auto;
+  }
+
   paper-spinner-lite {
     --spinner-size: 24px;
     display: none;
@@ -46,19 +51,26 @@
     display: inline-block;
   }
 </style>
+
 <div class="container">
   <webview id="signinFrame" name="signin-frame" class="signin-frame"
       hidden$="[[loading_]]" allowscaling></webview>
   <paper-spinner-lite active="[[loading_]]">
   </paper-spinner-lite>
 </div>
+
 <if expr="chromeos">
-  <div class="buttons">
+  <div class="buttons" hidden$="[[loading_]]">
     <cr-button class="back-button"
         aria-label="$i18n{accessibleBackButtonLabel}"
         on-tap="handleGoBack_">
       <iron-icon icon="[[getBackButtonIcon_()]]"></iron-icon>
       $i18n{accessibleBackButtonLabel}
     </cr-button>
+
+    <div class="action-buttons" hidden$="[[!enableGaiaActionButtons_]]">
+      <gaia-action-buttons authenticator="[[authExtHost_]]">
+      </gaia-action-buttons>
+    </div>
   </div>
 </if>

chrome/browser/resources/inline_login/inline_login_app.js

@@ -7,6 +7,10 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
+// <if expr="chromeos">
+import './gaia_action_buttons.js';
+// </if>
+
 import {isRTL} from 'chrome://resources/js/util.m.js';
 import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -35,13 +39,16 @@ Polymer({
       type: Boolean,
       value: true,
     },
-  },
 
-  /**
-   * The auth extension host instance.
-   * @private {?Authenticator}
-   */
-  authExtHost_: null,
+    /**
+     * The auth extension host instance.
+     * @private {?Authenticator}
+     */
+    authExtHost_: {
+      type: Object,
+      value: null,
+    },
+  },
 
   /** @private {?InlineLoginBrowserProxy} */
   browserProxy_: null,
@@ -52,6 +59,9 @@ Polymer({
    */
   isLoginPrimaryAccount_: false,
 
+  /** @private {boolean} */
+  enableGaiaActionButtons_: false,
+
   /** @override */
   created() {
     this.browserProxy_ = InlineLoginBrowserProxyImpl.getInstance();
@@ -155,6 +165,7 @@ Polymer({
     this.authExtHost_.load(data.authMode, data);
     this.loading_ = true;
     this.isLoginPrimaryAccount_ = data.isLoginPrimaryAccount;
+    this.enableGaiaActionButtons_ = data.enableGaiaActionButtons;
   },
 
   /**

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

@@ -38,6 +38,10 @@ namespace {
 constexpr char kCrosAddAccountFlow[] = "crosAddAccount";
 constexpr char kCrosAddAccountEduFlow[] = "crosAddAccountEdu";
 
+bool GaiaActionButtonsEnabled() {
+  return base::FeatureList::IsEnabled(chromeos::features::kGaiaActionButtons);
+}
+
 // Returns a base64-encoded hash code of "signin_scoped_device_id:gaia_id".
 std::string GetAccountDeviceId(const std::string& signin_scoped_device_id,
                                const std::string& gaia_id) {
@@ -263,6 +267,7 @@ void InlineLoginHandlerChromeOS::SetExtraInitParams(
                             Profile::FromWebUI(web_ui()),
                             params.FindStringKey("email"))));
   params.SetBoolean("dontResizeNonEmbeddedPages", true);
+  params.SetBoolean("enableGaiaActionButtons", GaiaActionButtonsEnabled());
 
   // For in-session login flows, request Gaia to ignore third party SAML IdP SSO
   // redirection policies (and redirect to SAML IdPs by default), otherwise some

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

@@ -112,6 +112,7 @@ content::WebUIDataSource* CreateWebUIDataSource() {
     {"inline_login_app.js", IDR_INLINE_LOGIN_APP_JS},
     {"inline_login_browser_proxy.js", IDR_INLINE_LOGIN_BROWSER_PROXY_JS},
 #if defined(OS_CHROMEOS)
+    {"gaia_action_buttons.js", IDR_GAIA_ACTION_BUTTONS_JS},
     {"error_screen.js", IDR_ACCOUNT_MANAGER_COMPONENTS_ERROR_SCREEN_JS},
     {"edu", IDR_EDU_LOGIN_EDU_LOGIN_HTML},
     {"app.js", IDR_EDU_LOGIN_EDU_LOGIN_JS},

chrome/test/data/webui/BUILD.gn

@@ -133,6 +133,7 @@ if (include_js_tests) {
         "../../../browser/ui/webui/chromeos/certificate_manager_dialog_browsertest.js",
         "../chromeos/oobe_webui_browsertest.js",
         "chromeos/edu_login/edu_login_browsertest.js",
+        "chromeos/gaia_action_buttons/gaia_action_buttons_browsertest.js",
         "nearby_share/shared/nearby_shared_browsertest.js",
         "set_time_dialog_browsertest.js",
         "settings/chromeos/a11y/crostini_settings_details_a11y_test.js",
@@ -396,6 +397,9 @@ group("closure_compile") {
 
     # TODO(crbug.com/1000989): Add page specific targets here.
   ]
+  if (is_chromeos) {
+    deps += [ "chromeos/gaia_action_buttons:closure_compile" ]
+  }
   if (enable_tab_search) {
     deps += [ "tab_search/test:closure_compile" ]
   }

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

+# 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("//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://chrome-signin/=../../chrome/browser/resources/chromeos/gaia_action_buttons/\"",
+                    "js_module_root=../../chrome/test/data/webui/",
+                    "js_module_root=./gen/chrome/test/data/webui/",
+                    "js_module_root=../../chrome/browser/resources/gaia_auth_host/",
+                    "js_module_root=./gen/chrome/browser/resources/gaia_auth_host/",
+                  ]
+  deps = [ ":gaia_action_buttons_test" ]
+}
+
+js_library("gaia_action_buttons_test") {
+  deps = [
+    "../..:chai_assert",
+    "//chrome/browser/resources/chromeos/gaia_action_buttons:gaia_action_buttons",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}

chrome/test/data/webui/chromeos/gaia_action_buttons/gaia_action_buttons_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 Tests for the Gaia action buttons.
+ */
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(['//chrome/test/data/webui/polymer_browser_test_base.js']);
+
+GEN('#include "content/public/test/browser_test.h"');
+
+// eslint-disable-next-line no-var
+var GaiaActionButtonsTest = class extends PolymerTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://chrome-signin/test_loader.html?module=chromeos/gaia_action_buttons/gaia_action_buttons_test.js';
+  }
+
+  get suiteName() {
+    return gaia_action_buttons_test.suiteName;
+  }
+
+  /** @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);
+  }
+};
+
+TEST_F('GaiaActionButtonsTest', 'ButtonLabels', function() {
+  this.runMochaTest(gaia_action_buttons_test.TestNames.ButtonLabels);
+});
+
+TEST_F('GaiaActionButtonsTest', 'EnabledEvents', function() {
+  this.runMochaTest(gaia_action_buttons_test.TestNames.EnabledEvents);
+});

chrome/test/data/webui/chromeos/gaia_action_buttons/gaia_action_buttons_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/gaia_action_buttons.js';
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
+
+window.gaia_action_buttons_test = {};
+const gaia_action_buttons_test = window.gaia_action_buttons_test;
+gaia_action_buttons_test.suiteName = 'GaiaActionButtonsTest';
+
+/** @enum {string} */
+gaia_action_buttons_test.TestNames = {
+  ButtonLabels: 'Button labels and visibility',
+  EnabledEvents: '"set...ActionEnabled" events',
+};
+
+const primaryActionLabel = 'fakePrimaryActionLabel';
+const secondaryActionLabel = 'fakeSecondaryActionLabel';
+
+class TestAuthenticator extends EventTarget {
+  constructor() {
+    super();
+    /** @type {*} */
+    this.webviewMessage = null;
+  }
+
+  /** @param {*} payload Payload of the HTML5 message. */
+  sendMessageToWebview(payload) {
+    this.webviewMessage = payload;
+  }
+}
+
+/**
+ * @param {HTMLElement} button
+ * @param {string} label
+ */
+function assertVisibleButtonWithLabel(button, label) {
+  assertFalse(button.hidden);
+  assertEquals(label, button.textContent.trim());
+}
+
+suite(gaia_action_buttons_test.suiteName, () => {
+  /** @type {GaiaActionButtonsElement} */
+  let actionButtonsComponent;
+  /** @type {TestAuthenticator} */
+  let testAuthenticator;
+  /** @type {CrButtonElement} */
+  let primaryButton;
+  /** @type {CrButtonElement} */
+  let secondaryButton;
+
+  setup(() => {
+    document.body.innerHTML = '';
+    actionButtonsComponent = /** @type {!GaiaActionButtonsElement} */ (
+        document.createElement('gaia-action-buttons'));
+    document.body.appendChild(actionButtonsComponent);
+    testAuthenticator = new TestAuthenticator();
+    actionButtonsComponent.setAuthExtHostForTest(testAuthenticator);
+    flush();
+    primaryButton = /** @type {!CrButtonElement} */ (
+        actionButtonsComponent.$$('.action-button'));
+    secondaryButton = /** @type {!CrButtonElement} */ (
+        actionButtonsComponent.$$('.secondary-button'));
+  });
+
+  test(assert(gaia_action_buttons_test.TestNames.ButtonLabels), () => {
+    // Buttons are hidden by default.
+    assertTrue(primaryButton.hidden);
+    assertTrue(secondaryButton.hidden);
+
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setPrimaryActionLabel', {detail: primaryActionLabel}));
+    assertVisibleButtonWithLabel(primaryButton, primaryActionLabel);
+    assertTrue(secondaryButton.hidden);
+
+    testAuthenticator.dispatchEvent(new CustomEvent(
+        'setSecondaryActionLabel', {detail: secondaryActionLabel}));
+    assertVisibleButtonWithLabel(primaryButton, primaryActionLabel);
+    assertVisibleButtonWithLabel(secondaryButton, secondaryActionLabel);
+
+    // Empty label means that button should be hidden.
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setPrimaryActionLabel', {detail: ''}));
+    assertTrue(primaryButton.hidden);
+
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setSecondaryActionLabel', {detail: ''}));
+    assertTrue(secondaryButton.hidden);
+  });
+
+  test(assert(gaia_action_buttons_test.TestNames.EnabledEvents), () => {
+    // Show both buttons.
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setPrimaryActionLabel', {detail: primaryActionLabel}));
+    testAuthenticator.dispatchEvent(new CustomEvent(
+        'setSecondaryActionLabel', {detail: secondaryActionLabel}));
+    assertVisibleButtonWithLabel(primaryButton, primaryActionLabel);
+    assertVisibleButtonWithLabel(secondaryButton, secondaryActionLabel);
+
+    // Buttons should be enabled by default.
+    assertFalse(primaryButton.disabled);
+    assertFalse(secondaryButton.disabled);
+
+    // Send setPrimaryActionEnabled event with 'false' value.
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setPrimaryActionEnabled', {detail: false}));
+    // Primary button should be disabled.
+    assertTrue(primaryButton.disabled);
+    assertFalse(secondaryButton.disabled);
+
+    // Send setSecondaryActionEnabled event with 'false' value.
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setSecondaryActionEnabled', {detail: false}));
+    // Secondary button should be disabled.
+    assertTrue(primaryButton.disabled);
+    assertTrue(secondaryButton.disabled);
+
+    // Send setAllActionsEnabled event with 'true' value.
+    testAuthenticator.dispatchEvent(
+        new CustomEvent('setAllActionsEnabled', {detail: true}));
+    // Both buttons should be enabled.
+    assertFalse(primaryButton.disabled);
+    assertFalse(secondaryButton.disabled);
+  });
+});