widgets.js
288 lines
| 11.1 KiB
| application/javascript
|
JavascriptLexer
Jonathan Frederic
|
r14309 | // Test the widget framework. | ||
casper.notebook_test(function () { | ||||
Jonathan Frederic
|
r14435 | var index; | ||
Jonathan Frederic
|
r14436 | |||
Jonathan Frederic
|
r14309 | // Test widget dependencies //////////////////////////////////////////////// | ||
this.then(function () { | ||||
// Check if the WidgetManager class is defined. | ||||
this.test.assert(this.evaluate(function() { | ||||
return IPython.WidgetManager != undefined; | ||||
}), 'WidgetManager class is defined'); | ||||
Jonathan Frederic
|
r14350 | }); | ||
Jonathan Frederic
|
r14436 | index = this.append_cell( | ||
Jonathan Frederic
|
r14435 | 'from IPython.html import widgets\n' + | ||
'from IPython.display import display, clear_output\n' + | ||||
'print("Success")'); | ||||
Jonathan Frederic
|
r14436 | this.execute_cell_then(index); | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14350 | this.wait(500); // Wait for require.js async callbacks to load dependencies. | ||
this.then(function () { | ||||
Jonathan Frederic
|
r14309 | // Check if the widget manager has been instanciated. | ||
this.test.assert(this.evaluate(function() { | ||||
Jonathan Frederic
|
r14350 | return IPython.widget_manager != undefined; | ||
Jonathan Frederic
|
r14309 | }), 'Notebook widget manager instanciated'); | ||
}); | ||||
// Check widget mapping //////////////////////////////////////////////////// | ||||
Jonathan Frederic
|
r14436 | index = this.append_cell( | ||
Jonathan Frederic
|
r14435 | 'names = [name for name in dir(widgets)' + | ||
Jonathan Frederic
|
r14309 | ' if name.endswith("Widget") and name!= "Widget"]\n' + | ||
'for name in names:\n' + | ||||
' print(name)\n'); | ||||
Jonathan Frederic
|
r14436 | this.execute_cell_then(index, function(index){ | ||
Jonathan Frederic
|
r14309 | |||
// Get the widget names that are registered with the widget manager. Assume | ||||
// a 1 to 1 mapping of model and widgets names (model names just have 'model' | ||||
// suffixed). | ||||
var javascript_names = this.evaluate(function () { | ||||
names = []; | ||||
Jonathan Frederic
|
r14350 | for (var name in IPython.widget_manager.widget_model_types) { | ||
Jonathan Frederic
|
r14309 | names.push(name.replace('Model','')); | ||
} | ||||
return names; | ||||
}); | ||||
// Get the widget names registered in python. | ||||
Jonathan Frederic
|
r14435 | var python_names = this.get_output_cell(index).text.split('\n'); | ||
Jonathan Frederic
|
r14309 | |||
// Make sure the two lists have the same items. | ||||
for (var i in javascript_names) { | ||||
var javascript_name = javascript_names[i]; | ||||
var found = false; | ||||
for (var j in python_names) { | ||||
var python_name = python_names[j]; | ||||
if (python_name==javascript_name) { | ||||
found = true; | ||||
break; | ||||
} | ||||
} | ||||
this.test.assert(found, javascript_name + ' exists in python'); | ||||
} | ||||
for (var i in python_names) { | ||||
var python_name = python_names[i]; | ||||
if (python_name.length > 0) { | ||||
var found = false; | ||||
for (var j in javascript_names) { | ||||
var javascript_name = javascript_names[j]; | ||||
if (python_name==javascript_name) { | ||||
found = true; | ||||
break; | ||||
} | ||||
} | ||||
this.test.assert(found, python_name + ' exists in javascript'); | ||||
} | ||||
} | ||||
Jonathan Frederic
|
r14434 | }); | ||
Jonathan Frederic
|
r14433 | |||
Jonathan Frederic
|
r14437 | // Test bool widget //////////////////////////////////////////////////////// | ||
var bool_index = this.append_cell( | ||||
Jonathan Frederic
|
r14438 | 'bool_widget = widgets.BoolWidget(description="Title", value=True)\n' + | ||
Jonathan Frederic
|
r14437 | 'display(bool_widget)\n'+ | ||
'display(bool_widget, view_name="ToggleButtonView")\n' + | ||||
'print("Success")'); | ||||
this.execute_cell_then(bool_index, function(index){ | ||||
Jonathan Frederic
|
r14440 | this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||
Jonathan Frederic
|
r14437 | 'Create bool 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'), | ||||
'Checkbox exists.'); | ||||
Jonathan Frederic
|
r14438 | this.test.assert(this.cell_element_function(index, | ||
Jonathan Frederic
|
r14439 | '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']), | ||
Jonathan Frederic
|
r14438 | 'Checkbox is checked.'); | ||
Jonathan Frederic
|
r14437 | this.test.assert(this.cell_element_exists(index, | ||
'.widget-area .widget-subarea .widget-hbox-single .widget-hlabel'), | ||||
'Checkbox label exists.'); | ||||
this.test.assert(this.cell_element_function(index, | ||||
'.widget-area .widget-subarea .widget-hbox-single .widget-hlabel', 'html')=="Title", | ||||
'Checkbox labeled correctly.'); | ||||
this.test.assert(this.cell_element_exists(index, | ||||
'.widget-area .widget-subarea div button'), | ||||
'Toggle button exists.'); | ||||
this.test.assert(this.cell_element_function(index, | ||||
'.widget-area .widget-subarea div button', 'html')=="Title", | ||||
'Toggle button labeled correctly.'); | ||||
Jonathan Frederic
|
r14438 | this.test.assert(this.cell_element_function(index, | ||
'.widget-area .widget-subarea div button', 'hasClass', ['active']), | ||||
'Toggle button is toggled.'); | ||||
Jonathan Frederic
|
r14437 | }); | ||
Jonathan Frederic
|
r14439 | index = this.append_cell( | ||
'bool_widget.value = False\n' + | ||||
'print("Success")'); | ||||
this.execute_cell_then(index, function(index){ | ||||
Jonathan Frederic
|
r14440 | this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||
Jonathan Frederic
|
r14439 | 'Change bool widget value cell executed with correct output.'); | ||
Jonathan Frederic
|
r14440 | this.test.assert(! this.cell_element_function(bool_index, | ||
Jonathan Frederic
|
r14439 | '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']), | ||
'Checkbox is not checked. (1)'); | ||||
Jonathan Frederic
|
r14440 | this.test.assert(! this.cell_element_function(bool_index, | ||
Jonathan Frederic
|
r14439 | '.widget-area .widget-subarea div button', 'hasClass', ['active']), | ||
'Toggle button is not toggled. (1)'); | ||||
// Try toggling the bool by clicking on the toggle button. | ||||
this.cell_element_function(bool_index, '.widget-area .widget-subarea div button', 'click'); | ||||
this.test.assert(this.cell_element_function(bool_index, | ||||
'.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']), | ||||
'Checkbox is checked. (2)'); | ||||
this.test.assert(this.cell_element_function(bool_index, | ||||
'.widget-area .widget-subarea div button', 'hasClass', ['active']), | ||||
'Toggle button is toggled. (2)'); | ||||
// Try toggling the bool by clicking on the checkbox. | ||||
this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox-single input', 'click'); | ||||
Jonathan Frederic
|
r14440 | this.test.assert(! this.cell_element_function(bool_index, | ||
Jonathan Frederic
|
r14439 | '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']), | ||
'Checkbox is not checked. (3)'); | ||||
Jonathan Frederic
|
r14440 | this.test.assert(! this.cell_element_function(bool_index, | ||
Jonathan Frederic
|
r14439 | '.widget-area .widget-subarea div button', 'hasClass', ['active']), | ||
'Toggle button is not toggled. (3)'); | ||||
}); | ||||
Jonathan Frederic
|
r14434 | // Test button widget ////////////////////////////////////////////////////// | ||
Jonathan Frederic
|
r14436 | var button_index = this.append_cell( | ||
Jonathan Frederic
|
r14435 | 'button = widgets.ButtonWidget(description="Title")\n' + | ||
Jonathan Frederic
|
r14434 | 'display(button)\n'+ | ||
'print("Success")\n' + | ||||
'def handle_click(sender):\n' + | ||||
' print("Clicked")\n' + | ||||
'button.on_click(handle_click)'); | ||||
Jonathan Frederic
|
r14436 | this.execute_cell_then(button_index, function(index){ | ||
Jonathan Frederic
|
r14433 | |||
Jonathan Frederic
|
r14440 | this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||
Jonathan Frederic
|
r14437 | 'Create button cell executed with correct output.'); | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14436 | this.test.assert(this.cell_element_exists(index, | ||
Jonathan Frederic
|
r14435 | '.widget-area .widget-subarea'), | ||
Jonathan Frederic
|
r14437 | 'Widget subarea exists.'); | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14436 | this.test.assert(this.cell_element_exists(index, | ||
Jonathan Frederic
|
r14435 | '.widget-area .widget-subarea button'), | ||
Jonathan Frederic
|
r14437 | 'Widget button exists.'); | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14436 | this.test.assert(this.cell_element_function(index, | ||
Jonathan Frederic
|
r14435 | '.widget-area .widget-subarea button', 'html')=='Title', | ||
'Set button description.'); | ||||
Jonathan Frederic
|
r14436 | this.cell_element_function(index, | ||
Jonathan Frederic
|
r14435 | '.widget-area .widget-subarea button', 'click'); | ||
Jonathan Frederic
|
r14434 | }); | ||
Jonathan Frederic
|
r14433 | |||
Jonathan Frederic
|
r14435 | this.wait(500); // Wait for click to execute in kernel and write output | ||
Jonathan Frederic
|
r14433 | |||
Jonathan Frederic
|
r14434 | this.then(function () { | ||
Jonathan Frederic
|
r14436 | this.test.assert(this.get_output_cell(button_index, 1).text == 'Clicked\n', | ||
Jonathan Frederic
|
r14435 | 'Button click event fires.'); | ||
Jonathan Frederic
|
r14309 | }); | ||
Jonathan Frederic
|
r14436 | index = this.append_cell( | ||
Jonathan Frederic
|
r14435 | 'button.close()\n'+ | ||
Jonathan Frederic
|
r14440 | 'print("Success")'); | ||
Jonathan Frederic
|
r14436 | this.execute_cell_then(index, function(index){ | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14440 | this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||
Jonathan Frederic
|
r14437 | 'Close button cell executed with correct output.'); | ||
Jonathan Frederic
|
r14435 | |||
Jonathan Frederic
|
r14436 | this.test.assert(! this.cell_element_exists(button_index, | ||
Jonathan Frederic
|
r14435 | '.widget-area .widget-subarea button'), | ||
Jonathan Frederic
|
r14437 | 'Widget button doesn\'t exists.'); | ||
Jonathan Frederic
|
r14435 | }); | ||
Jonathan Frederic
|
r14440 | |||
// Test container widget /////////////////////////////////////////////////// | ||||
var container_index = this.append_cell( | ||||
'container = widgets.ContainerWidget()\n' + | ||||
'button = widgets.ButtonWidget(parent=container)\n'+ | ||||
'display(container)\n'+ | ||||
'container.add_class("my-test-class")\n'+ | ||||
'print("Success")\n'); | ||||
this.execute_cell_then(container_index, function(index){ | ||||
this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||||
'Create container 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-container'), | ||||
'Widget container exists.'); | ||||
this.test.assert(this.cell_element_exists(index, | ||||
'.widget-area .widget-subarea .my-test-class'), | ||||
'add_class works.'); | ||||
this.test.assert(this.cell_element_exists(index, | ||||
'.widget-area .widget-subarea .my-test-class button'), | ||||
'Container parent/child relationship works.'); | ||||
}); | ||||
index = this.append_cell( | ||||
'container.set_css("display", "none")\n'+ | ||||
'print("Success")\n'); | ||||
this.execute_cell_then(index, function(index){ | ||||
this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||||
'Set container class CSS cell executed with correct output.'); | ||||
this.test.assert(this.cell_element_function(container_index, | ||||
'.widget-area .widget-subarea .my-test-class', 'css', ['display'])=='none', | ||||
'set_css works.'); | ||||
}); | ||||
index = this.append_cell( | ||||
'container.remove_class("my-test-class")\n'+ | ||||
'print("Success")\n'); | ||||
this.execute_cell_then(index, function(index){ | ||||
this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||||
'Remove container class cell executed with correct output.'); | ||||
this.test.assert(! this.cell_element_exists(container_index, | ||||
'.widget-area .widget-subarea .my-test-class'), | ||||
'remove_class works.'); | ||||
}); | ||||
index = this.append_cell( | ||||
'display(button)\n'+ | ||||
'print("Success")\n'); | ||||
this.execute_cell_then(index, function(index){ | ||||
this.test.assert(this.get_output_cell(index).text == 'Success\n', | ||||
'Display container child executed with correct output.'); | ||||
this.test.assert(! this.cell_element_exists(index, | ||||
'.widget-area .widget-subarea .widget-container'), | ||||
'Parent container not displayed.'); | ||||
Jonathan Frederic
|
r14442 | this.test.assert(this.cell_element_exists(index, | ||
'.widget-area .widget-subarea button'), | ||||
'Child displayed.'); | ||||
Jonathan Frederic
|
r14440 | }); | ||
Jonathan Frederic
|
r14309 | }); | ||