chrome/test/data/webui/repeating_button_test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Repeater</title>
   5   <script src="mock_timer.js"></script>
   6 </head>
   7 <body>
   8 <script>
   9
  10   /**
  11    * Controller for mocking behavior or timer-based callbacks.
  12    * @type {!MockTimer}
  13    */
  14   var mockTimer;
  15
  16   /**
  17    * Number of callbacks fired during simulated button press.
  18    * @type {number}
  19    */
  20   var buttonHeldCount;
  21
  22   /**
  23    * Repeating button.  The button automatically refires is long-pressed.
  24    * @type {!Element}
  25    */
  26   var button;
  27
  28   /**
  29    * Inital delay before the first refire during a button press.
  30    * @type {number}
  31    */
  32   var repeatDelay;
  33
  34   /**
  35    * Interval between refires during a button press.
  36    * @type {number}
  37    */
  38   var repeatInterval;
  39
  40   /** Prepare running the tests. */
  41   function setUp() {
  42     mockTimer = new MockTimer();
  43     mockTimer.install();
  44     button = new cr.ui.RepeatingButton();
  45     repeatDelay = button.repeatDelay;
  46     repeatInterval = button.repeatInterval;
  47     button.addEventListener(
  48         cr.ui.RepeatingButton.Event.BUTTON_HELD,
  49         function(e) {
  50           buttonHeldCount++;
  51         });
  52   }
  53
  54   /**
  55    * Post-test cleanup.
  56    */
  57   function tearDown() {
  58     mockTimer.uninstall();
  59   }
  60
  61   /**
  62    * Simulates a mouse or touch event to the repeating button.
  63    * @param {string} type The type of event.
  64    */
  65   function mockEvent(type) {
  66     cr.dispatchSimpleEvent(button, type);
  67   }
  68
  69   /**
  70    * Simulates a sequence of events.
  71    * @param {!Array.<string>} events List of event types.
  72    * @param {!Array.<number>} timeIncrements List of time increments between
  73    *     events.
  74    * @param {number} expectedValue Expected result.
  75    */
  76   function mockEventSequence(events, timeIncrements, expectedValue) {
  77     assertEquals(events.length, timeIncrements.length);
  78     buttonHeldCount = 0;
  79     for (var i = 0; i < events.length; i++) {
  80       mockEvent(events[i]);
  81       mockTimer.tick(timeIncrements[i]);
  82     }
  83     assertEquals(expectedValue, buttonHeldCount);
  84     // Ensure that the button stops repeated firing at the end of the event
  85     // sequence.
  86     mockTimer.tick(repeatDelay);
  87     assertEquals(expectedValue, buttonHeldCount);
  88   }
  89
  90   /**
  91    * Simulates a tap or touch and hold gesture.
  92    * @param {number} time Duration of the hold.
  93    * @param {number} expectedValue Expected result.
  94    */
  95   function mockTouchHold(time, expectedValue) {
  96     mockEventSequence(['touchstart', 'touchend'], [time, 0], expectedValue);
  97   }
  98
  99   /**
 100    * Simulates a mouse click or mouse press and hold.
 101    * @param {number} time Duration of the hold.
 102    * @param {number} expectedValue Expected result.
 103    */
 104   function mockMouseHold(time, expectedValue) {
 105     mockEventSequence(['mousedown', 'mouseup', 'mouseclick'],
 106                       [time, 0, 0],
 107                       expectedValue);
 108   }
 109
 110   /**
 111    * Simulates a mouse press and drag off of the button.
 112    * @param {number} time1 Duration that the mouse button is pressed and the
 113    *     mouse is over the button.
 114    * @param {number} time2 Duration that the mouse button is pressed but the
 115    *     mouse is outside the boundary of the button.
 116    * @param {number} expectedValue Expected result.
 117    */
 118   function mockMouseOut(time1, time2, expectedValue) {
 119     mockEventSequence(['mousedown', 'mouseout', 'mouseup'],
 120                       [time1, time2, 0],
 121                       expectedValue);
 122   }
 123
 124   /**
 125    * Runs a series of tests with increasing button hold time.
 126    * @param {!Function} fn Testing function.
 127    * @param {number=} opt_secondaryDelay Optional additional delay used in
 128    *    tests that simulate a secondary delay after the initial button press
 129    *    and hold time.
 130    */
 131   function runButtonTests(fn, opt_secondaryDelay) {
 132     var holdTime = repeatDelay - repeatInterval / 2;
 133
 134     for (var i = 0; i < 3; i++, holdTime += repeatInterval) {
 135       // One or two time delays followed by the expected click count.
 136       var args = [holdTime, i + 1];
 137       if (opt_secondaryDelay)
 138         args.splice(1, 0, opt_secondaryDelay);
 139       fn.apply(this, args);
 140     }
 141   }
 142
 143   /**
 144    * Simulates a short tap on the button.
 145    */
 146   function testTap() {
 147     mockTouchHold(repeatDelay / 2, 1);
 148   }
 149
 150   /**
 151    * Simulates a long press of the button.
 152    */
 153   function testTouchHold() {
 154     runButtonTests(mockTouchHold);
 155   }
 156
 157   /**
 158    * Simulates a quick mouse click of the button.
 159    */
 160   function testClick() {
 161     mockMouseHold(repeatDelay / 2, 1);
 162   }
 163
 164   /**
 165    * Simulates a mouse press and hold on the button.
 166    */
 167   function testMousePressHold() {
 168     runButtonTests(mockMouseHold);
 169   }
 170
 171   /**
 172    * Simulates draging the mouse off of the button while pressed.
 173    */
 174   function testMouseOut() {
 175     runButtonTests(mockMouseOut, repeatDelay);
 176   }
 177
 178   /**
 179    * Repeat tests with new delay and interval times.
 180    */
 181   function testUpdateDelayTimes() {
 182     var oldDelay = repeatDelay;
 183     var oldInterval = repeatInterval;
 184     repeatDelay = button.repeatDelay = 2 * repeatDelay;
 185     repeatInterval = button.repeatInterval = 2 * repeatInterval;
 186     testTouchHold();
 187     testMousePressHold();
 188     testMouseOut();
 189     testClick();
 190     testTap();
 191     repeatDelay = button.repeatDelay = oldDelay;
 192     repeatInterval = button.repeatInterval = oldInterval;
 193   }
 194
 195   /**
 196    * Runs mouse and touch hold tests with a repeat interval that is longer
 197    * than the initial repeat delay.
 198    */
 199   function testLongRepeat() {
 200     var oldInterval = repeatInterval;
 201     repeatInterval = button.repeatInterval = 3 * button.repeatDelay;
 202     testTouchHold();
 203     testMousePressHold();
 204     repeatInterval = button.repeatInterval = oldInterval;
 205   }
 206 </script>
 207 </body>
 208 </html>