Add automated test for the edit search engine dialog.

chrome/browser/resources/edit_search_engine_dialog.js

 // Copyright (c) 2011 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.
 
 cr.define('editSearchEngineDialog', function() {
   'use strict';
 
   /**
+   * Flag inidicating if we are in the process of validating input. While

[flackr, 2011/11/30 16:30:24]

s/inidicating/indicating

[kevers, 2011/11/30 21:27:29]

Done.

+   * validating, the validity of the inputs is indeterminate.
+   * @type {boolean}
+   * @private
+   */
+  var isValidating_ = false;
+
+  /**
+   * Accessor for in entry field in the search engine dialog.

[flackr, 2011/11/30 16:30:24]

s/for in/for an

[kevers, 2011/11/30 21:27:29]

Done.

+   * @param {string} baseName Name of the field, which servers as a base name

[flackr, 2011/11/30 16:30:24]

s/servers/serves

[kevers, 2011/11/30 21:27:29]

Done.

+   *     for the text input field and icon.
+   * @constructor
+   */
+  function SearchEngineDialogEntryField(baseName) {
+    this.name_ = baseName;
+    this.text_ = $(baseName + '-text');
+    this.icon_ = $(baseName + '-icon');
+    this.text_.oninput = validate;
+    return this;
+  }
+
+  SearchEngineDialogEntryField.prototype = {
+
+    /*
+     * Getter for the name of the field.
+     * @type {string} Descriptive name of the field.
+     */
+    get name() {
+      return this.name_;
+    },
+
+    /*
+     * Getter for the content of the input field.
+     * @type {string} Text content in the input field.
+     */
+    get value() {
+      return this.text_.value;
+    },
+
+    /**
+     * Setter for the content of the input field.  The validity of the input is
+     * not automatically revalidated.
+     * @type {string}  New content for the input field.
+     */
+    set value(text) {
+      this.text_.value = text;

[flackr, 2011/11/30 16:30:24]

This could invalidate the field, or if not setting the className to invalid just
remove the 'valid' className so as to not suggest the input is still valid.

[kevers, 2011/11/30 21:27:29]

Done.

+    },
+
+    /**
+     * Getter for the validity of an input field.
+     * @type {boolean} True if the text input is valid, otherwise false.
+     */
+    get valid() {
+      return this.icon_.className == 'valid';
+    },
+
+    /**
+     * Setter for the input field validily.
+     * @type {boolean} True if the input field is valid, false for invalid.
+     */
+    set valid(state) {
+      this.icon_.className = state ? 'valid' : 'invalid';
+    },
+
+    /**
+     * Creates a text representation of the class containing the name,
+     * text field contents and validity.
+     * @return {string} Text representation.
+     */
+    toString: function() {
+      return this.name_ + ': \'' + this.text_.value + '\' (' +
+          this.icon_.className + ')';
+    }
+  };
+
+  /**
+   * Accessors for entry fields in the search engine dialog. Initialized after
+   * content is loaded.
+   * @type{Object.<string,SearchEngineDialogEntryField>}
+   */
+  var inputFields = {};
+
+  /**
    * Disables the controls while the dialog is busy.
    */
   function disableControls() {
     $('cancel').disabled = true;
     $('save').disabled = true;
   }
 
   /**
    * Close the dialog and pass a result value to the dialog close handler.
    * @param {{description: string, details: string, url: string}=} opt_result
    *     The value to pass to the dialog close handler.
    */
   function closeWithResult(opt_result) {
     disableControls();
     var json = JSON.stringify(opt_result ? [opt_result] : []);
     chrome.send('DialogClose', [json]);
   }
 
   /**
   * Sets the text of the dialog's editable text boxes.
   * @param {{description: string, details: string, url: string}} details Values
   *     for corresponding text fields.
   */
   function setDetails(details) {

[flackr, 2011/11/30 16:30:24]

It seems really odd that we send details from the C++ side only to request
validation of those details from the C++ side. I realize this isn't necessary as
part of this change but perhaps leave a TODO for validating the inputs prior to
passing them in and pass in validity or assume that passed in values are valid?

[kevers, 2011/11/30 21:27:29]

Added a TODO at the end of the initialize method.

-    $('description-text').value = details.description;
-    $('keyword-text').value = details.keyword;
-    $('url-text').value = details.url;
+    inputFields.description.value = details.description;
+    inputFields.keyword.value = details.keyword;
+    inputFields.url.value = details.url;
     validate();
   }
 
   /**
-   * Updates the validity icon element by changing its style.
-   * @param {Object} element The element to change.
-   * @param {boolean} valid True if the data is valid.
-   */
-  function setValidImage(element, valid) {
-    element.className = valid ? 'valid' : 'invalid';
-  }
-
-  /**
    * Sends all strings to Chrome for validation.  Chrome is expected to respond
    * by calling setValidation.
    */
   function validate() {
-    chrome.send('requestValidation', [$('description-text').value,
-                $('keyword-text').value, $('url-text').value]);
+    isValidating_ = true;
+    chrome.send('requestValidation', [inputFields.description.value,
+                inputFields.keyword.value, inputFields.url.value]);
   }
 
   /**
    * Sets dialog state given the results of the validation of input by Chrome.
-   * @param {{description: boolean, details: boolean, url: boolean, ok:boolean}}
-   *     details A dictionary of booleans indicating the validation results of
-   *     various parts of the UI.  |description|, |details| and |url| indicate
-   *     the validity of the respective text fields, and |ok| indicates whether
+   * @param {{description: boolean,
+              keyword: boolean,
+              url: boolean,
+              ok: boolean}} details
+   *     A dictionary of booleans indicating the validation results of various
+   *     parts of the UI.  |description|, |keyword| and |url| indicate the
+   *     validity of the respective text fields, and |ok| indicates whether
    *     the OK/Save button can be pressed.
    */
   function setValidation(details) {
-    setValidImage($('description-icon'), details.description);
-    setValidImage($('keyword-icon'), details.keyword);
-    setValidImage($('url-icon'), details.url);
+    inputFields.description.valid = details.description;
+    inputFields.keyword.valid = details.keyword;
+    inputFields.url.valid = details.url;
     $('save').disabled = !details.ok;
+    isValidating_ = false;
   }
 
   /**
    * Reverses the order of child nodes.
    * @param {HTMLElement} parent The parent node whose children are to be
    *     reversed.
    */
   function reverseChildren(parent) {
     var childNodes = parent.childNodes;
     for (var i = childNodes.length - 1; i >= 0; i--)
       parent.appendChild(childNodes[i]);
-  };
+  }
 
   var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
 
   /**
    * Inserts translated strings on loading.
    */
   function initialize() {
     i18nTemplate.process(document, templateData);
 
+    inputFields.description = new SearchEngineDialogEntryField('description');
+    inputFields.keyword = new SearchEngineDialogEntryField('keyword');
+    inputFields.url = new SearchEngineDialogEntryField('url');
+
     document.title = chrome.dialogArguments == 'add' ? templateData.titleNew :
         templateData.titleEdit;
 
     $('cancel').onclick = function() {
       closeWithResult();
-    }
+    };
 
     $('save').onclick = function() {
-      closeWithResult({description: $('description-text').value,
-                       keyword: $('keyword-text').value,
-                       url: $('url-text').value});
-    }
-
-    $('description-text').oninput = validate;
-    $('keyword-text').oninput = validate;
-    $('url-text').oninput = validate;
+      closeWithResult({description: inputFields.description.value,
+                       keyword: inputFields.keyword.value,
+                       url: inputFields.url.value});
+    };
 
     setValidation({description: false, keyword: false, url: false});
     if (cr.isViews)
       forEach(document.querySelectorAll('.button-strip'), reverseChildren);
-    chrome.send('requestDetails')
+    // Mark that we are in the process of validating, since the 'send' call
+    // is asynchronous.  Until the next call to 'setValidation' complete, the
+    // validity of the inputs is in an indeterminate state.
+    isValidating_ = true;
+    chrome.send('requestDetails');

[flackr, 2011/11/30 16:30:24]

We should pass all of these details in as dialog arguments. This would avoid the
back and forth message passing and having the dialog not ready immediately.
Leave a TODO for this?

[kevers, 2011/11/30 21:27:29]

Done.

+  }
+
+  /**
+   * Indicates if we are in the process of validating input.
+   * @return {boolean} True if validation is in progress.
+   */
+  function isValidating() {
+    return isValidating_;
+  }
+
+  /**
+   * Retrieves the save button element.
+   * @return {Element}
+   */
+  function getSave() {
+    return $('save');
   }
 
   document.addEventListener('DOMContentLoaded', initialize);
 
   return {
+    inputFields: inputFields,
+    isValidating: isValidating,
+    getSave: getSave,
     setDetails: setDetails,
     setValidation: setValidation,
+    validate: validate
   };
 });