/wwwroot/widgets/whiteboard/test_uce.whiteboard.js

  1module("uce.whiteboard", {teardown: function() {
  2    $('#whiteboard').whiteboard('destroy');
  3}});
  4
  5test("create some elements, and destroy", function() {
  6    $('#whiteboard').whiteboard();
  7    equals($('#whiteboard .ui-widget-header-title').text(), 'Whiteboard');
  8    equals($('#whiteboard .ui-widget-content .ui-whiteboard-drawing > canvas').size(), 1);
  9    equals($('#whiteboard .ui-whiteboard-toolbar > *').size(), 8);
 10    ok($('#whiteboard').hasClass('ui-widget'), 'should have class ui-widget');
 11    ok($('#whiteboard').hasClass('ui-whiteboard'), 'should have class ui-whiteboard');
 12    $('#whiteboard').whiteboard('destroy');
 13    equals($('#whiteboard > *').size(), 0);
 14    ok(!$('#whiteboard').hasClass('ui-widget'), 'should have class ui-widget');
 15    ok(!$('#whiteboard').hasClass('ui-whiteboard'), 'should have class ui-whiteboard');
 16});
 17
 18test("can set width/height of main canvas on contruct", function() {
 19     $('#whiteboard').whiteboard({width   : 200,
 20                                  height  : 150});
 21    equals($('#whiteboard .ui-whiteboard-drawing > canvas').attr("height"), 150);
 22    equals($('#whiteboard .ui-whiteboard-drawing > canvas').attr("width"), 200);
 23});
 24
 25test("hide/show controls after init", function() {
 26    $('#whiteboard').whiteboard();
 27    equals($('#whiteboard .ui-whiteboard-toolbar').css('display'), 'block');
 28    $('#whiteboard').whiteboard('hideControls');
 29    equals($('#whiteboard .ui-whiteboard-toolbar').css('display'), 'none');
 30    $('#whiteboard').whiteboard('showControls');
 31    equals($('#whiteboard .ui-whiteboard-toolbar').css('display'), 'block');
 32});
 33
 34jackTest("bind event handler", function() {
 35    var ucemeeting = jack.create("ucemeeting", ['on']);
 36    jack.expect("ucemeeting.on")
 37        .exactly("2 times");
 38    $('#whiteboard').whiteboard({ucemeeting: ucemeeting});
 39});
 40
 41function emptyCanvas() {
 42    var canvas = document.createElement("canvas");
 43    canvas.setAttribute('height', 240);
 44    canvas.setAttribute('width', 300);
 45    return canvas;
 46}
 47
 48jackTest("when performing action, send event to ucengine", function() {
 49    expect(9);
 50    var ucemeeting = jack.create("ucemeeting", ['push', 'on']);
 51    jack.expect("ucemeeting.push")
 52        .exactly("1 time")
 53        .mock(function(type, metadata, callback) {
 54            equals(type, "whiteboard.shape.draw");
 55            ok(metadata.tool);
 56            ok(metadata.color);
 57            ok(metadata.x1);
 58            ok(metadata.y1);
 59            ok(metadata.x2);
 60            ok(metadata.y2);
 61            ok($('#whiteboard canvas').get(0).toDataURL("image/png") ==
 62               emptyCanvas().toDataURL("image/png"), "should be a empty canvas");
 63        });
 64    $('#whiteboard').whiteboard({
 65        ucemeeting : ucemeeting,
 66        width : 300,
 67        height: 240
 68    });
 69    $('#whiteboard canvas').triggerSyn("mousedown", {});
 70    $('#whiteboard canvas').triggerSyn("mousemove", {});
 71});
 72
 73jackTest("on clear, send special event to ucengine", function() {
 74    var ucemeeting = jack.create("ucemeeting", ['push', 'on']);
 75    jack.expect("ucemeeting.push")
 76        .exactly("1 time")
 77        .mock(function(type, metadata, callback) {
 78            equals(type, "whiteboard.drawing.clear");
 79        });
 80    $('#whiteboard').whiteboard({
 81        ucemeeting : ucemeeting
 82    });
 83    $('#whiteboard .ui-icon-trash').click();
 84});
 85
 86test("handle draw/clear events", function() {
 87    expect(3);
 88    $('#whiteboard').whiteboard({width: 300, height: 240});
 89    ok(($('#whiteboard canvas').get(0).toDataURL("image/png") ==
 90        emptyCanvas().toDataURL("image/png")), "should be a empty canvas");
 91    $('#whiteboard').whiteboard("triggerUceEvent", {type: "whiteboard.shape.draw",
 92                                                    metadata: {'tool': 'pencil',
 93                                                               'color': '#000000',
 94                                                               'x1': '1',
 95                                                               'y1': '1',
 96                                                               'x2': '2',
 97                                                               'y2': '2'}});
 98    ok(!($('#whiteboard canvas').get(0).toDataURL("image/png") ==
 99         emptyCanvas().toDataURL("image/png")), "should not be a empty canvas");
100    $('#whiteboard').whiteboard("triggerUceEvent", {type: "whiteboard.drawing.clear", metadata: {}});
101    ok(($('#whiteboard canvas').get(0).toDataURL("image/png") ==
102        emptyCanvas().toDataURL("image/png")), "should be a empty canvas");
103});
104
105test("clear method", function() {
106    $('#whiteboard').whiteboard({width: 300, height: 240});
107
108    $('#whiteboard').whiteboard("triggerUceEvent", {type: "whiteboard.shape.draw",
109                                                    metadata: {'tool': 'pencil',
110                                                               'color': '#000000',
111                                                               'x1': '1',
112                                                               'y1': '1',
113                                                               'x2': '2',
114                                                               'y2': '2'}});
115
116    $('#whiteboard').whiteboard("triggerUceEvent", {type: "whiteboard.drawing.clear", metadata: {}});
117    ok(($('#whiteboard canvas').get(0).toDataURL("image/png") ==
118        emptyCanvas().toDataURL("image/png")), "should be a empty canvas");
119
120    $('#whiteboard').whiteboard("triggerUceEvent", {type: "whiteboard.shape.draw",
121                                                    metadata: {'tool': 'pencil',
122                                                               'color': '#000000',
123                                                               'x1': '1',
124                                                               'y1': '1',
125                                                               'x2': '2',
126                                                               'y2': '2'}});
127
128    $('#whiteboard').whiteboard("clear");
129    ok(($('#whiteboard canvas').get(0).toDataURL("image/png") ==
130        emptyCanvas().toDataURL("image/png")), "should be a empty canvas");
131});
132
133jackTest("when disabled, no event are send to ucengine", function() {
134    var ucemeeting = jack.create("ucemeeting", ['push', 'on']);
135    jack.expect("ucemeeting.push")
136        .exactly("0 time");
137    $('#whiteboard').whiteboard({
138        ucemeeting : ucemeeting,
139        disabled   : true
140    });
141    $('#whiteboard .ui-icon-trash').click();
142    $('#whiteboard canvas').triggerSyn("mousedown", {});
143    $('#whiteboard canvas').triggerSyn("mousemove", {});
144});
145
146jackTest("dynanic disabled, no event are send to ucengine", function() {
147    var ucemeeting = jack.create("ucemeeting", ['push', 'on']);
148    jack.expect("ucemeeting.push")
149        .exactly("0 time");
150    $('#whiteboard').whiteboard({
151        ucemeeting : ucemeeting
152    });
153    $('#whiteboard').whiteboard("option", "disabled", true);
154    $('#whiteboard .ui-icon-trash').click();
155    $('#whiteboard canvas').triggerSyn("mousedown", {});
156    $('#whiteboard canvas').triggerSyn("mousemove", {});
157});
158