[Local NTP Voice] JavaScript browser tests: Text module.

Adds JavaScript browser tests for the text module
of Voice Search on the Local NTP. Tests are ported from
text_view_test.js of the remote NTP's Voice Search module.

Bug: 583291
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ieb403144460d3a8e327d341855ca8e692fee6ede
Reviewed-on: https://chromium-review.googlesource.com/638332
Commit-Queue: Ondrej Škopek <[email protected]>
Reviewed-by: Marc Treib <[email protected]>
Cr-Commit-Position: refs/heads/master@{#499512}

chrome/browser/resources/local_ntp/voice.css

@@ -216,7 +216,6 @@
 /* TEXT */
 /* Classes:
  *   - voice-text - Text area style class
- *   - voice-text-area - Link style class
  *   - voice-text-2l - 2 line style class
  *   - voice-text-3l - 3 line style class
  *   - voice-text-4l - 4 line style class
@@ -279,7 +278,7 @@
 }
 
 /* Text area links. */
-#voice-text-area {
+.voice-text-link {
   color: var(--text_link_color);
   cursor: pointer;
   font-size: 18px;

chrome/browser/resources/local_ntp/voice.js

@@ -834,13 +834,18 @@ speech.toggleStartStop = function() {
  * Handles click events during speech recognition.
  * @param {boolean} shouldSubmit True if a query should be submitted.
  * @param {boolean} shouldRetry True if the interface should be restarted.
+ * @param {boolean} navigatingAway True if the browser is navigating away
+ *     from the NTP.
  * @private
  */
-speech.onClick_ = function(shouldSubmit, shouldRetry) {
+speech.onClick_ = function(shouldSubmit, shouldRetry, navigatingAway) {
   if (speech.finalResult_ && shouldSubmit) {
     speech.submitFinalResult_();
   } else if (speech.currentState_ == speech.State_.STOPPED && shouldRetry) {
     speech.restart();
+  } else if (speech.currentState_ == speech.State_.STOPPED && navigatingAway) {
+    // If the user clicks on a "Learn more" or "Details" support page link
+    // from an error message, do nothing, and let Chrome navigate to that page.
   } else {
     speech.abort_();
   }
@@ -865,10 +870,24 @@ let text = {};
 
 
 /**
- * ID for the link shown in error output.
+ * ID for the "Try Again" link shown in error output.
  * @const
  */
-text.ERROR_LINK_ID = 'voice-text-area';
+text.RETRY_LINK_ID = 'voice-retry-link';
+
+
+/**
+ * ID for the Voice Search support site link shown in error output.
+ * @const
+ */
+text.SUPPORT_LINK_ID = 'voice-support-link';
+
+
+/**
+ * Class for the links shown in error output.
+ * @const
+ */
+text.ERROR_LINK_CLASS_ = 'voice-text-link';
 
 
 /**
@@ -993,21 +1012,22 @@ text.updateTextArea = function(interimText, opt_finalText) {
 
 
 /**
- * Sets the text view to the initializing state.
+ * Sets the text view to the initializing state. The initializing message
+ * shown while waiting for permission is not displayed immediately, but after
+ * a short timeout. The reason for this is that the "Waiting..." message would
+ * still appear ("blink") every time a user opens Voice Search, even if they
+ * have already granted and persisted microphone permission for the NTP,
+ * and could therefore directly proceed to the "Speak now" message.
  */
 text.showInitializingMessage = function() {
+  text.interim_.textContent = '';
+  text.final_.textContent = '';
+
   const displayMessage = function() {
-    if (text.interim_.innerText == '') {
+    if (text.interim_.textContent == '') {
       text.updateTextArea(speech.messages.waiting);
     }
   };
-
-  text.interim_.textContent = '';
-  text.final_.textContent = '';
-
-  // We give the interface some time to get the permission. Once permission
-  // is obtained, the ready message is displayed, in which case the
-  // initializing message won't be shown.
   text.initializingTimer_ =
       window.setTimeout(displayMessage, text.INITIALIZING_TIMEOUT_MS_);
 };
@@ -1024,6 +1044,7 @@ text.showReadyMessage = function() {
 
 
 /**
+ * Display an error message in the text area for the given error.
  * @param {RecognitionError} error The error that occured.
  */
 text.showErrorMessage = function(error) {
@@ -1071,21 +1092,24 @@ text.getErrorMessage_ = function(error) {
  */
 text.getErrorLink_ = function(error) {
   let linkElement = document.createElement('a');
-  linkElement.id = text.ERROR_LINK_ID;
+  linkElement.className = text.ERROR_LINK_CLASS_;
 
   switch (error) {
     case RecognitionError.NO_MATCH:
+      linkElement.id = text.RETRY_LINK_ID;
       linkElement.textContent = speech.messages.tryAgain;
       linkElement.onclick = speech.restart;
       return linkElement;
     case RecognitionError.NO_SPEECH:
     case RecognitionError.AUDIO_CAPTURE:
+      linkElement.id = text.SUPPORT_LINK_ID;
       linkElement.href = text.SUPPORT_LINK_BASE_ + getChromeUILanguage();
       linkElement.textContent = speech.messages.learnMore;
       linkElement.target = '_blank';
       return linkElement;
     case RecognitionError.NOT_ALLOWED:
     case RecognitionError.SERVICE_NOT_ALLOWED:
+      linkElement.id = text.SUPPORT_LINK_ID;
       linkElement.href = text.SUPPORT_LINK_BASE_ + getChromeUILanguage();
       linkElement.textContent = speech.messages.details;
       linkElement.target = '_blank';
@@ -1100,6 +1124,8 @@ text.getErrorLink_ = function(error) {
  * Clears the text elements.
  */
 text.clear = function() {
+  text.updateTextArea('');
+
   text.cancelListeningTimeout();
   window.clearTimeout(text.initializingTimer_);
 
@@ -1152,7 +1178,9 @@ text.getTextClassName_ = function() {
  */
 text.startListeningMessageAnimation_ = function() {
   const animateListeningText = function() {
-    if (text.interim_.innerText == speech.messages.ready) {
+    // TODO(oskopek): Substitute the fragile string comparison with a correct
+    // state condition.
+    if (text.interim_.textContent == speech.messages.ready) {
       text.updateTextArea(speech.messages.listening);
       text.interim_.classList.add(text.LISTENING_ANIMATION_CLASS_);
     }
@@ -1327,13 +1355,6 @@ view.OVERLAY_HIDDEN_CLASS_ = 'overlay-hidden';
 view.BACKGROUND_ID_ = 'voice-overlay';
 
 
-/**
- * ID of the close (x) button.
- * @const @private
- */
-view.CLOSE_BUTTON_ID_ = 'voice-close-button';
-
-
 /**
  * ID for the speech output container.
  * @const @private
@@ -1550,12 +1571,14 @@ view.onWindowClick_ = function(event) {
   if (!view.isVisible_) {
     return;
   }
-  const targetId = event.target.id;
-  const shouldRetry = (targetId == microphone.RED_BUTTON_ID ||
-                       targetId == text.ERROR_LINK_ID) &&
-      view.isNoMatchShown_;
-  const submitQuery =
-      targetId == microphone.RED_BUTTON_ID && !view.isNoMatchShown_;
-  view.onClick_(submitQuery, shouldRetry);
+  const retryLinkClicked = event.target.id === text.RETRY_LINK_ID;
+  const supportLinkClicked = event.target.id === text.SUPPORT_LINK_ID;
+  const micIconClicked = event.target.id === microphone.RED_BUTTON_ID;
+
+  const submitQuery = micIconClicked && !view.isNoMatchShown_;
+  const shouldRetry =
+      retryLinkClicked || (micIconClicked && view.isNoMatchShown_);
+  const navigatingAway = supportLinkClicked;
+  view.onClick_(submitQuery, shouldRetry, navigatingAway);
 };
 /* END VIEW */

chrome/browser/ui/search/local_ntp_browsertest.cc

@@ -350,6 +350,17 @@ IN_PROC_BROWSER_TEST_F(LocalNTPVoiceJavascriptTest, MicrophoneTests) {
   EXPECT_TRUE(success);
 }
 
+IN_PROC_BROWSER_TEST_F(LocalNTPVoiceJavascriptTest, TextTests) {
+  content::WebContents* active_tab =
+      OpenNewTab(browser(), GURL(chrome::kChromeUINewTabURL));
+
+  // Run the tests.
+  bool success = false;
+  ASSERT_TRUE(instant_test_utils::GetBoolFromJS(
+      active_tab, "!!runSimpleTests('text')", &success));
+  EXPECT_TRUE(success);
+}
+
 namespace {
 
 // Returns the RenderFrameHost corresponding to the most visited iframe in the

chrome/test/data/local_ntp/voice_browsertest.html

@@ -9,6 +9,7 @@
   <script src="test_utils.js"></script>
   <!-- Browser test script files for individual modules: -->
   <script src="voice_microphone_browsertest.js"></script>
+  <script src="voice_text_browsertest.js"></script>
   <!-- Templates: (keep in sync with local_ntp.html) -->
   <template id="voice-microphone-template">
     <div id="voice-button-container" class="button-container">
@@ -21,6 +22,14 @@
       </span>
     </div>
   </template>
+  <template id="voice-text-template">
+    <div class="text-container">
+      <!-- Low confidence text underneath high confidence text. -->
+      <span id="voice-text-i" class="voice-text"></span>
+      <!-- High confidence text on top of low confidence text. -->
+      <span id="voice-text-f" class="voice-text"></span>
+    </div>
+  </template>
 </head>
 <body>
 </body>