Merge pull request #4952 from jdfreder/widget-tests

Widget test inconsistencies

add wait_for_widget

IPython/html/tests/casperjs/test_cases/widgets.js

@@ -1,69 +1,67 b''
 // Test the widget framework.
 casper.notebook_test(function () {
     var index;
     
     this.then(function () {
     
         // Check if the WidgetManager class is defined.
         this.test.assert(this.evaluate(function() {
             return IPython.WidgetManager !== undefined; 
         }), 'WidgetManager class is defined');
     });
 
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
-    this.wait(500); // Wait for require.js async callbacks to load dependencies.
-
     this.then(function () {
         // Check if the widget manager has been instantiated.
         this.test.assert(this.evaluate(function() {
             return IPython.notebook.kernel.widget_manager !== undefined; 
         }), 'Notebook widget manager instantiated');
     });
 
+    var textbox = {};
     throttle_index = this.append_cell(
         'import time\n' +
         'textbox = widgets.TextWidget()\n' +
         'display(textbox)\n'+
         'textbox.add_class("my-throttle-textbox")\n' +
         'def handle_change(name, old, new):\n' +
         '    print(len(new))\n' +
         '    time.sleep(0.5)\n' +
         'textbox.on_trait_change(handle_change, "value")\n' +
-        'print("Success")');
+        'print(textbox.model_id)');
     this.execute_cell_then(throttle_index, function(index){
-        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
-            'Test throttling cell executed with correct output');
+        textbox.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.my-throttle-textbox'), 'Textbox exists.');
 
         // Send 20 characters
         this.sendKeys('.my-throttle-textbox', '....................');
     });
 
-    this.wait(2000); // Wait for clicks to execute in kernel
+    this.wait_for_widget(textbox);
 
     this.then(function(){
         var outputs = this.evaluate(function(i) {
             return IPython.notebook.get_cell(i).output_area.outputs;
         }, {i : throttle_index});
 
         // Only 4 outputs should have printed, but because of timing, sometimes
         // 5 outputs will print.  All we need to do is verify num outputs <= 5
         // because that is much less than 20.
         this.test.assert(outputs.length <= 5, 'Messages throttled.');
 
         // We also need to verify that the last state sent was correct.
         var last_state = outputs[outputs.length-1].text;
         this.test.assertEquals(last_state, "20\n", "Last state sent when throttling.");
     });
 });

IPython/html/tests/casperjs/test_cases/widgets_button.js

@@ -1,43 +1,43 b''
 // Test widget button class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var button_index = this.append_cell(
         'button = widgets.ButtonWidget(description="Title")\n' +
         'display(button)\n'+
         'print("Success")\n' +
         'def handle_click(sender):\n' +
         '    print("Clicked")\n' +
         'button.on_click(handle_click)');
     this.execute_cell_then(button_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create button cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea button'),
             'Widget button exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'html')=='Title',
             'Set button description.');
 
         this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'click');
     });
 
-    this.wait(500); // Wait for click to execute in kernel and write output
+    this.wait_for_output(button_index, 1);
 
     this.then(function () {
         this.test.assertEquals(this.get_output_cell(button_index, 1).text, 'Clicked\n', 
             'Button click event fires.');
     });
 });
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_float.js

@@ -1,108 +1,100 b''
 // Test widget float class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
-    var float_text_query_2 = '.widget-area .widget-subarea .widget-hbox-single .my-second-float-text';
-
-    var float_index = this.append_cell(
+    var float_text = {};
+    float_text.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-float-text';
+    float_text.index = this.append_cell(
         'float_widget = widgets.FloatTextWidget()\n' +
         'display(float_widget)\n' + 
         'float_widget.add_class("my-second-float-text")\n' + 
-        'print("Success")\n');
-    this.execute_cell_then(float_index, function(index){
-
-        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
-            'Create float cell executed with correct output.');
+        'print(float_widget.model_id)\n');
+    this.execute_cell_then(float_text.index, function(index){
+        float_text.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, float_text_query_2),
+        this.test.assert(this.cell_element_exists(index, float_text.query),
             'Widget float textbox exists.');
 
-        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
-        this.sendKeys(float_text_query_2, '1.05');
+        this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
+        this.sendKeys(float_text.query, '1.05');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(float_text);
 
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1.05\n', 
             'Float textbox value set.');
-        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
-        this.sendKeys(float_text_query_2, '123456789.0');
+        this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
+        this.sendKeys(float_text.query, '123456789.0');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(float_text);
 
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '123456789.0\n', 
             'Long float textbox value set (probably triggers throttling).');
-        this.cell_element_function(float_index, float_text_query_2, 'val', ['']);
-        this.sendKeys(float_text_query_2, '12hello');
+        this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
+        this.sendKeys(float_text.query, '12hello');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(float_text);
 
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '12.0\n', 
             'Invald float textbox value caught and filtered.');
     });
     
-    index = this.append_cell(
-        'from IPython.html import widgets\n' + 
-        'from IPython.display import display, clear_output\n' +
-        'print("Success")');
-    this.execute_cell_then(index);
-
-    var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
     var float_text_query = '.widget-area .widget-subarea .widget-hbox-single .widget-numeric-text';
-
-    var floatrange_index = this.append_cell(
+    var slider = {};
+    slider.query = '.widget-area .widget-subarea .widget-hbox-single .slider';
+    slider.index = this.append_cell(
         'floatrange = [widgets.BoundedFloatTextWidget(), \n' +
         '    widgets.FloatSliderWidget()]\n' +
         '[display(floatrange[i]) for i in range(2)]\n' + 
         'print("Success")\n');
-    this.execute_cell_then(floatrange_index, function(index){
+    this.execute_cell_then(slider.index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create float range cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, slider_query),
+        this.test.assert(this.cell_element_exists(index, slider.query),
             'Widget slider exists.');
 
         this.test.assert(this.cell_element_exists(index, float_text_query),
             'Widget float textbox exists.');
     });
 
     index = this.append_cell(
         'for widget in floatrange:\n' +
         '    widget.max = 50.0\n' +
         '    widget.min = -50.0\n' +
         '    widget.value = 25.0\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Float range properties cell executed with correct output.');
 
-        this.test.assert(this.cell_element_exists(floatrange_index, slider_query), 
+        this.test.assert(this.cell_element_exists(slider.index, slider.query), 
             'Widget slider exists.');
 
-        this.test.assert(this.cell_element_function(floatrange_index, slider_query, 
+        this.test.assert(this.cell_element_function(slider.index, slider.query, 
             'slider', ['value']) == 25.0,
             'Slider set to Python value.');
     });
 });
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_int.js

@@ -1,151 +1,148 b''
 // Test widget int class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
-    var int_text_query_2 = '.widget-area .widget-subarea .widget-hbox-single .my-second-int-text';
-
-    var int_index = this.append_cell(
+    var int_text = {}
+    int_text.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-int-text';
+    int_text.index = this.append_cell(
         'int_widget = widgets.IntTextWidget()\n' +
         'display(int_widget)\n' + 
         'int_widget.add_class("my-second-int-text")\n' + 
-        'print("Success")\n');
-    this.execute_cell_then(int_index, function(index){
-
-        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
-            'Create int cell executed with correct output.');
+        'print(int_widget.model_id)\n');
+    this.execute_cell_then(int_text.index, function(index){
+        int_text.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
-        this.test.assert(this.cell_element_exists(index, int_text_query_2),
+        this.test.assert(this.cell_element_exists(index, int_text.query),
             'Widget int textbox exists.');
 
-        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
-        this.sendKeys(int_text_query_2, '1.05');
+        this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
+        this.sendKeys(int_text.query, '1.05');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
             'Int textbox value set.');
-        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
-        this.sendKeys(int_text_query_2, '123456789');
+        this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
+        this.sendKeys(int_text.query, '123456789');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '123456789\n', 
             'Long int textbox value set (probably triggers throttling).');
-        this.cell_element_function(int_index, int_text_query_2, 'val', ['']);
-        this.sendKeys(int_text_query_2, '12hello');
+        this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
+        this.sendKeys(int_text.query, '12hello');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '12\n', 
             'Invald int textbox value caught and filtered.');
     });
     
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
-    var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
-    var int_text_query = '.widget-area .widget-subarea .widget-hbox-single .my-second-num-test-text';
 
-    var intrange_index = this.append_cell(
+    var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
+    var int_text2 = {};
+    int_text2.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-num-test-text';
+    int_text2.index = this.append_cell(
         'intrange = [widgets.BoundedIntTextWidget(),\n' +
         '    widgets.IntSliderWidget()]\n' +
         '[display(intrange[i]) for i in range(2)]\n' +
         'intrange[0].add_class("my-second-num-test-text")\n' +  
-        'print("Success")\n');
-    this.execute_cell_then(intrange_index, function(index){
-
-        this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
-            'Create int range cell executed with correct output.');
+        'print(intrange[0].model_id)\n');
+    this.execute_cell_then(int_text2.index, function(index){
+        int_text2.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, slider_query),
             'Widget slider exists.');
 
-        this.test.assert(this.cell_element_exists(index, int_text_query),
+        this.test.assert(this.cell_element_exists(index, int_text2.query),
             'Widget int textbox exists.');
     });
 
     index = this.append_cell(
         'for widget in intrange:\n' +
         '    widget.max = 50\n' +
         '    widget.min = -50\n' +
         '    widget.value = 25\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Int range properties cell executed with correct output.');
 
-        this.test.assert(this.cell_element_exists(intrange_index, slider_query), 
+        this.test.assert(this.cell_element_exists(int_text2.index, slider_query), 
             'Widget slider exists.');
 
-        this.test.assert(this.cell_element_function(intrange_index, slider_query, 
+        this.test.assert(this.cell_element_function(int_text2.index, slider_query, 
             'slider', ['value']) == 25,
             'Slider set to Python value.');
 
-        this.test.assert(this.cell_element_function(intrange_index, int_text_query,
+        this.test.assert(this.cell_element_function(int_text2.index, int_text2.query,
             'val') == 25, 'Int textbox set to Python value.');
 
         // Clear the int textbox value and then set it to 1 by emulating
         // keyboard presses.
-        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
-        this.sendKeys(int_text_query, '1');
+        this.cell_element_function(int_text2.index, int_text2.query, 'val', ['']);
+        this.sendKeys(int_text2.query, '1');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
             'Int textbox set int range value');
 
         // Clear the int textbox value and then set it to 120 by emulating
         // keyboard presses.
-        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
-        this.sendKeys(int_text_query, '120');
+        this.cell_element_function(int_text2.index, int_text2.query, 'val', ['']);
+        this.sendKeys(int_text2.query, '120');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
             'Int textbox value bound');
 
         // Clear the int textbox value and then set it to 'hello world' by 
         // emulating keyboard presses.  'hello world' should get filtered...
-        this.cell_element_function(intrange_index, int_text_query, 'val', ['']);
-        this.sendKeys(int_text_query, 'hello world');
+        this.cell_element_function(int_text2.index, int_text2.query, 'val', ['']);
+        this.sendKeys(int_text2.query, 'hello world');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
             'Invalid int textbox characters ignored');
     });    
 });
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_multicontainer.js

@@ -1,108 +1,108 b''
 // Test multicontainer class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     // Test tab view
     var multicontainer1_query = '.widget-area .widget-subarea div div.nav-tabs';
     var multicontainer1_index = this.append_cell(
         'multicontainer = widgets.TabWidget()\n' +
         'page1 = widgets.TextWidget()\n' +
         'page2 = widgets.TextWidget()\n' +
         'page3 = widgets.TextWidget()\n' +
         'multicontainer.children = [page1, page2, page3]\n' +
         'display(multicontainer)\n' +
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer1_index, function(index){
         
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (1)');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer1_query),
             'Widget tab list exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer1_query),
             'First widget tab list exists.');
 
         // JQuery selector is 1 based
         this.click(multicontainer1_query + ' li:nth-child(2) a');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_idle();
 
     index = this.append_cell(
         'print(multicontainer.selected_index)\n' +
         'multicontainer.selected_index = 2'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
             'selected_index property updated with tab change.');
 
         // JQuery selector is 1 based
         this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(1)', 'hasClass', ['active']),
                 "Tab 1 is not selected.");
         this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(2)', 'hasClass', ['active']),
                 "Tab 2 is not selected.");
         this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(3)', 'hasClass', ['active']),
                 "Tab 3 is selected.");
     });
 
     index = this.append_cell('multicontainer.set_title(1, "hello")\nprint("Success")'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query +
             ' li:nth-child(2) a', 'html') == 'hello',
             'Tab page title set (after display).');
     });
 
     // Test accordion view
     var multicontainer2_query = '.widget-area .widget-subarea .accordion';
     var multicontainer2_index = this.append_cell(
         'multicontainer = widgets.AccordionWidget()\n' +
         'page1 = widgets.TextWidget()\n' +
         'page2 = widgets.TextWidget()\n' +
         'page3 = widgets.TextWidget()\n' +
         'multicontainer.children = [page1, page2, page3]\n' +
         'multicontainer.set_title(2, "good")\n' +
         'display(multicontainer)\n' +
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer2_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (2)');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer2_query),
             'Widget accordion exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer2_query + 
             ' .accordion-group:nth-child(1) .accordion-body'),
             'First accordion page exists.');
 
         // JQuery selector is 1 based
         this.test.assert(this.cell_element_function(index, multicontainer2_query + 
             ' .accordion-group:nth-child(3) .accordion-heading .accordion-toggle', 
             'html')=='good', 'Accordion page title set (before display).');
 
         // JQuery selector is 1 based
         this.click(multicontainer2_query + ' .accordion-group:nth-child(2) .accordion-heading .accordion-toggle');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_idle();
 
     index = this.append_cell('print(multicontainer.selected_index)'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
             'selected_index property updated with tab change.');
     });
 });
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_selection.js

@@ -1,133 +1,133 b''
 // Test selection class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn';
     var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]';
     var radio_selector = '.widget-area .widget-subarea .widget-hbox .vbox';
     var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox';
 
     var selection_index;
     var selection_values = 'abcd';
     var check_state = function(context, index, state){
         if (0 <= index && index < selection_values.length) {
             var multibtn_state = context.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(' + (index + 1) + ')', 'hasClass', ['active']);
             var radio_state = context.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(' + (index + 1) + ') input', 'prop', ['checked']);
             var list_val = context.cell_element_function(selection_index, list_selector, 'val');
             var combo_val = context.cell_element_function(selection_index, combo_selector, 'html');
             
             var val = selection_values.charAt(index);
             var list_state = (val == list_val);
             var combo_state = (val == combo_val);
 
             return multibtn_state == state &&
                 radio_state == state &&
                 list_state == state &&
                 combo_state == state;
         }
         return true;
     };
 
     var verify_selection = function(context, index){
         for (var i = 0; i < selection_values.length; i++) {
             if (!check_state(context, i, i==index)) {
                 return false;
             }
         }
         return true;
     };
 
 //values=["' + selection_values + '"[i] for i in range(4)]
     selection_index = this.append_cell(
         'values=["' + selection_values + '"[i] for i in range(4)]\n' +
         'selection = [widgets.DropdownWidget(values=values),\n' +
         '    widgets.ToggleButtonsWidget(values=values),\n' +
         '    widgets.RadioButtonsWidget(values=values),\n' +
         '    widgets.SelectWidget(values=values)]\n' +
         '[display(selection[i]) for i in range(4)]\n' +
         'for widget in selection:\n' +
         '    def handle_change(name,old,new):\n' +
         '        for other_widget in selection:\n' +
         '            other_widget.value = new\n' +
         '    widget.on_trait_change(handle_change, "value")\n' +
         'print("Success")\n');
     this.execute_cell_then(selection_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create selection cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, combo_selector),
              'Widget combobox exists.');
 
         this.test.assert(this.cell_element_exists(index, multibtn_selector),
             'Widget multibutton exists.');
 
         this.test.assert(this.cell_element_exists(index, radio_selector),
             'Widget radio buttons exists.');
 
         this.test.assert(this.cell_element_exists(index, list_selector),
             'Widget list exists.');
 
         // Verify that no items are selected.
         this.test.assert(verify_selection(this, -1), 'No items selected.');
     });
 
     index = this.append_cell(
         'for widget in selection:\n' +
         '    widget.value = "a"\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Python select item executed with correct output.');
 
         // Verify that the first item is selected.
         this.test.assert(verify_selection(this, 0), 'Python selected');
 
         // Verify that selecting a radio button updates all of the others.
         this.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(2) input', 'click');
     });
-    this.wait(500);
+    this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 1), 'Radio button selection updated view states correctly.');
 
         // Verify that selecting a list option updates all of the others.
         this.cell_element_function(selection_index, list_selector + ' option:nth-child(3)', 'click');
     });
-    this.wait(500);
+    this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 2), 'List selection updated view states correctly.');
 
         // Verify that selecting a multibutton option updates all of the others.
         this.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(4)', 'click');
     });
-    this.wait(500);
+    this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 3), 'Multibutton selection updated view states correctly.');
 
         // Verify that selecting a combobox option updates all of the others.
         this.cell_element_function(selection_index, '.widget-area .widget-subarea .widget-hbox-single .btn-group ul.dropdown-menu li:nth-child(3) a', 'click');
     });
-    this.wait(500);
+    this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 2), 'Combobox selection updated view states correctly.');
     });
 
-    this.wait(500); // Wait for change to execute in kernel
+    this.wait_for_idle();
 
     index = this.append_cell(
         'for widget in selection:\n' +
         '    widget.values = list(widget.values) + ["z"]\n' +
         'selection[0].value = "z"');
     this.execute_cell_then(index, function(index){
 
         // Verify that selecting a combobox option updates all of the others.
         this.test.assert(verify_selection(this, 4), 'Item added to selection widget.');
     });
 });
  No newline at end of file

IPython/html/tests/casperjs/test_cases/widgets_string.js

@@ -1,52 +1,45 b''
 // Test widget string class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var string_index = this.append_cell(
         'string_widget = [widgets.TextWidget(value = "xyz"),\n' +
         '    widgets.TextareaWidget(value = "xyz"),\n' +
         '    widgets.HTMLWidget(value = "xyz"),\n' +
         '    widgets.LatexWidget(value = "$\\\\LaTeX{}$")]\n' +
         '[display(widget) for widget in string_widget]\n'+
         'print("Success")');
     this.execute_cell_then(string_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create string widget cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox-single input[type=text]'),
             'Textbox exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox textarea'),
             'Textarea exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox textarea', 'val')=='xyz',
             'Python set textarea value.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'val')=='xyz',
             'Python set textbox value.');
 
-    });
-
-    this.wait(500); // Wait for change to execute in kernel
-
-    index = this.append_cell('print(string_widget.value)');
-    this.execute_cell_then(index, function(index){
-
         this.test.assert(this.cell_element_exists(string_index, 
             '.widget-area .widget-subarea div span.MathJax_Preview'),
             'MathJax parsed the LaTeX successfully.');
     });
 });
  No newline at end of file

IPython/html/tests/casperjs/util.js

@@ -1,243 +1,264 b''
 //
 // Utility functions for the HTML notebook's CasperJS tests.
 //
 
 // Get the URL of a notebook server on which to run tests.
 casper.get_notebook_server = function () {
     port = casper.cli.get("port")
     port = (typeof port === 'undefined') ? '8888' : port;
     return 'http://127.0.0.1:' + port
 };
 
 // Create and open a new notebook.
 casper.open_new_notebook = function () {
     var baseUrl = this.get_notebook_server();
     this.start(baseUrl);
     this.thenClick('button#new_notebook');
     this.waitForPopup('');
 
     this.withPopup('', function () {this.waitForSelector('.CodeMirror-code');});
     this.then(function () {
         this.open(this.popups[0].url);
     });
 
     // Make sure the kernel has started
     this.waitFor( this.kernel_running  );
     // track the IPython busy/idle state
     this.thenEvaluate(function () {
         $([IPython.events]).on('status_idle.Kernel',function () {
             IPython._status = 'idle';
         });
         $([IPython.events]).on('status_busy.Kernel',function () {
             IPython._status = 'busy';
         });
     });
 };
 
 // Return whether or not the kernel is running.
 casper.kernel_running = function kernel_running() {
     return this.evaluate(function kernel_running() {
         return IPython.notebook.kernel.running;
     });
 };
 
 // Shut down the current notebook's kernel.
 casper.shutdown_current_kernel = function () {
     this.thenEvaluate(function() {
         IPython.notebook.kernel.kill();
     });
     // We close the page right after this so we need to give it time to complete.
     this.wait(1000);
 };
 
 // Delete created notebook.
 casper.delete_current_notebook = function () {
     // For some unknown reason, this doesn't work?!?
     this.thenEvaluate(function() {
         IPython.notebook.delete();
     });
 };
 
 casper.wait_for_busy = function () {
     this.waitFor(function () {
         return this.evaluate(function () {
             return IPython._status == 'busy';
         });
     });
 };
 
 casper.wait_for_idle = function () {
     this.waitFor(function () {
         return this.evaluate(function () {
             return IPython._status == 'idle';
         });
     });
 };
 
 // wait for the nth output in a given cell
 casper.wait_for_output = function (cell_num, out_num) {
     this.wait_for_idle();
     out_num = out_num || 0;
     this.then(function() {
         this.waitFor(function (c, o) {
             return this.evaluate(function get_output(c, o) {
                 var cell = IPython.notebook.get_cell(c);
                 return cell.output_area.outputs.length > o;
             },
             // pass parameter from the test suite js to the browser code js
             {c : cell_num, o : out_num});
         });
     },
     function then() { },
     function timeout() {
         this.echo("wait_for_output timed out!");
     });
 };
 
+// wait for a widget msg que to reach 0
+//
+// Parameters
+// ----------
+// widget_info : object
+//      Object which contains info related to the widget.  The model_id property
+//      is used to identify the widget.
+casper.wait_for_widget = function (widget_info) {
+    this.waitFor(function () {
+        var pending = this.evaluate(function (m) {
+            return IPython.notebook.kernel.widget_manager.get_model(m).pending_msgs;
+        }, {m: widget_info.model_id});
+
+        if (pending == 0) {
+            return true;
+        } else {
+            return false;
+        }
+    });
+}
+
 // return an output of a given cell
 casper.get_output_cell = function (cell_num, out_num) {
     out_num = out_num || 0;
     var result = casper.evaluate(function (c, o) {
         var cell = IPython.notebook.get_cell(c);
         return cell.output_area.outputs[o];
     },
     {c : cell_num, o : out_num});
     if (!result) {
         var num_outputs = casper.evaluate(function (c) {
             var cell = IPython.notebook.get_cell(c);
             return cell.output_area.outputs.length;
         },
         {c : cell_num});
         this.test.assertTrue(false,
             "Cell " + cell_num + " has no output #" + out_num + " (" + num_outputs + " total)"
         );
     } else {
         return result;
     }
 };
 
 // return the number of cells in the notebook
 casper.get_cells_length = function () {
     var result = casper.evaluate(function () {
         return IPython.notebook.get_cells().length;
     })
     return result;
 };
 
 // Set the text content of a cell.
 casper.set_cell_text = function(index, text){
     this.evaluate(function (index, text) {
         var cell = IPython.notebook.get_cell(index);
         cell.set_text(text);
     }, index, text);
 };
 
 // Inserts a cell at the bottom of the notebook
 // Returns the new cell's index.
 casper.insert_cell_at_bottom = function(cell_type){
     cell_type = cell_type || 'code';
 
     return this.evaluate(function (cell_type) {
         var cell = IPython.notebook.insert_cell_at_bottom(cell_type);
         return IPython.notebook.find_cell_index(cell);
     }, cell_type);
 };
 
 // Insert a cell at the bottom of the notebook and set the cells text.
 // Returns the new cell's index.
 casper.append_cell = function(text, cell_type) { 
     var index = this.insert_cell_at_bottom(cell_type);
     if (text !== undefined) {
         this.set_cell_text(index, text);
     }
     return index;
 };
 
 // Asynchronously executes a cell by index.
 // Returns the cell's index.
 casper.execute_cell = function(index){
     var that = this;
     this.then(function(){
         that.evaluate(function (index) {
             var cell = IPython.notebook.get_cell(index);
             cell.execute();
         }, index);
     });
     return index;
 };
 
 // Synchronously executes a cell by index.
 // Optionally accepts a then_callback parameter.  then_callback will get called
 // when the cell  has finished executing.
 // Returns the cell's index.
 casper.execute_cell_then = function(index, then_callback) {
     var return_val = this.execute_cell(index);
 
     this.wait_for_idle();
 
     var that = this;
     this.then(function(){ 
         if (then_callback!==undefined) {
             then_callback.apply(that, [index]);
         }
     });        
 
     return return_val;
 };
 
 // Utility function that allows us to easily check if an element exists 
 // within a cell.  Uses JQuery selector to look for the element.
 casper.cell_element_exists = function(index, selector){
     return casper.evaluate(function (index, selector) {
         var $cell = IPython.notebook.get_cell(index).element;
         return $cell.find(selector).length > 0;
     }, index, selector);
 };
 
 // Utility function that allows us to execute a jQuery function on an 
 // element within a cell.
 casper.cell_element_function = function(index, selector, function_name, function_args){
     return casper.evaluate(function (index, selector, function_name, function_args) {
         var $cell = IPython.notebook.get_cell(index).element;
         var $el = $cell.find(selector);
         return $el[function_name].apply($el, function_args);
     }, index, selector, function_name, function_args);
 };
 
 // Wrap a notebook test to reduce boilerplate.
 casper.notebook_test = function(test) {
     this.open_new_notebook();
     this.then(test);
 
     // Kill the kernel and delete the notebook.
     this.shutdown_current_kernel();
     // This is still broken but shouldn't be a problem for now.
     // this.delete_current_notebook();
     
     // This is required to clean up the page we just finished with. If we don't call this
     // casperjs will leak file descriptors of all the open WebSockets in that page. We
     // have to set this.page=null so that next time casper.start runs, it will create a
     // new page from scratch.
     this.then(function () {
         this.page.close();
         this.page = null;
     });
     
     // Run the browser automation.
     this.run(function() {
         this.test.done();
     });
 };
 
 casper.options.waitTimeout=10000
 casper.on('waitFor.timeout', function onWaitForTimeout(timeout) {
     this.echo("Timeout for " + casper.get_notebook_server());
     this.echo("Is the notebook server running?");
 });
 
 // Pass `console.log` calls from page JS to casper.
 casper.printLog = function () {
     this.on('remote.message', function(msg) {
         this.echo('Remote message caught: ' + msg);
     });
 };