510 lines
15 KiB
JavaScript
510 lines
15 KiB
JavaScript
(function ($) {
|
|
|
|
module('general');
|
|
|
|
//Creates a very simple map and returns map's container.
|
|
function simpleMapSetup(params) {
|
|
|
|
var $fixture = $('#qunit-fixture'),
|
|
$div = $('<div id="seat-map">');
|
|
|
|
$fixture.append($div);
|
|
|
|
$div.seatCharts(
|
|
$.extend(true, {}, {
|
|
map: [
|
|
'aa_aa',
|
|
'bbbbb',
|
|
'bbbbb'
|
|
],
|
|
seats: {
|
|
a: {
|
|
classes : 'a1-seat-class a2-seat-class'
|
|
},
|
|
b: {
|
|
classes : ['b1-seat-class', 'b2-seat-class']
|
|
}
|
|
|
|
}
|
|
}, params)
|
|
);
|
|
|
|
return $div;
|
|
}
|
|
|
|
function Counter() {
|
|
this.click = 0;
|
|
this.focus = 0;
|
|
this.blur = 0;
|
|
|
|
this.reset = function () {
|
|
this.click = this.focus = this.blur = 0;
|
|
};
|
|
}
|
|
|
|
test('Testing general structure of a simple map.', function () {
|
|
expect(5);
|
|
|
|
var $seatCharts = simpleMapSetup(),
|
|
$space = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-cell:eq(3)');
|
|
|
|
equal($seatCharts.find('.seatCharts-row').length, 4, 'Number of rows.');
|
|
|
|
ok($space.hasClass('seatCharts-space') && !$space.hasClass('seatCharts-seat'), 'There should be a spacer cell in the first row.')
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat').length, 4, 'Number of columns in row 1.');
|
|
|
|
for (var i = 2; i <= 3; i += 1) {
|
|
equal($seatCharts.find('.seatCharts-row:eq('+(i)+') .seatCharts-seat').length, 5, 'Number of columns in row '+i+'.');
|
|
}
|
|
|
|
});
|
|
|
|
|
|
test('Testing seat classes', function () {
|
|
expect(6);
|
|
|
|
var $seatCharts = simpleMapSetup(),
|
|
$aSeat = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(0)'),
|
|
$bSeat = $seatCharts.find('.seatCharts-row:eq(2) .seatCharts-seat:eq(3)');
|
|
|
|
ok($aSeat.hasClass('a1-seat-class'), 'Seat a has its a1-seat-class assigned using a string.');
|
|
|
|
ok($aSeat.hasClass('a2-seat-class'), 'Seat a has its a2-seat-class assigned using a string.');
|
|
|
|
ok($bSeat.hasClass('b1-seat-class'), 'Seat b has its b1-seat-class assigned using an array.');
|
|
|
|
ok($bSeat.hasClass('b2-seat-class'), 'Seat b has its b2-seat-class assigned using an array.');
|
|
|
|
ok(!($aSeat.hasClass('b1-seat-class') || $aSeat.hasClass('b2-seat-class')), 'Seat a does not have any b seat classes.');
|
|
|
|
ok(!($bSeat.hasClass('a1-seat-class') || $bSeat.hasClass('a2-seat-class')), 'Seat b does not have any a seat classes.');
|
|
|
|
});
|
|
|
|
test('Testing default column & row labels', function () {
|
|
expect(9);
|
|
|
|
var $seatCharts = simpleMapSetup();
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(0) .seatCharts-cell:eq(0)').text(), '', 'Top leftmost cell should be empty.');
|
|
|
|
for (var i = 1; i <= 5; i += 1) {
|
|
equal($seatCharts.find('.seatCharts-row:eq(0) .seatCharts-cell:eq('+i+')').text(), i, 'Column header '+i+' has correct label.');
|
|
}
|
|
|
|
for (var i = 1; i <= 3; i += 1) {
|
|
equal($seatCharts.find('.seatCharts-row:eq('+i+') .seatCharts-cell:eq(0)').text(), i, 'Row header '+i+' has correct label.');
|
|
}
|
|
});
|
|
|
|
test('Testing custom column & row labels', function () {
|
|
expect(3);
|
|
|
|
var $seatCharts = simpleMapSetup({
|
|
naming : {
|
|
columns : ['I', 'II', 'III', 'IV', 'V'],
|
|
rows : ['a', 'b', 'c']
|
|
}
|
|
});
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(0) .seatCharts-cell:eq(0)').text(), '', 'Top leftmost cell should be empty.');
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(0) .seatCharts-cell:eq(3)').text(), 'III', '3rd column header has correct label.');
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(2) .seatCharts-cell:eq(0)').text(), 'b', '2nd row header has correct label.');
|
|
|
|
});
|
|
|
|
test('Testing default seat labels and IDs', function () {
|
|
expect(4);
|
|
|
|
var $seatCharts = simpleMapSetup();
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(0)').text(), '1', 'First seat in the first row label.');
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(2)').text(), '4', 'Third seat in the first row label.');
|
|
|
|
equal($seatCharts.find('#3_5').length, 1, 'Seat with id 3_5 exists.');
|
|
|
|
equal($seatCharts.find('#3_6').length, 0, 'And it is the last seat id.');
|
|
});
|
|
|
|
test('Testing custom seat labels and IDs', function () {
|
|
expect(4);
|
|
|
|
var getIdExecutions = 0,
|
|
getLabelExecutions = 0,
|
|
$seatCharts = simpleMapSetup({
|
|
naming : {
|
|
getId : function (character, row, column) {
|
|
getIdExecutions += 1
|
|
//return all arguments separated with -
|
|
return [].slice.call(arguments).join('-');
|
|
},
|
|
getLabel : function (character, row, column) {
|
|
getLabelExecutions += 1;
|
|
//return all arguments separated with +
|
|
return [].slice.call(arguments).join('+');
|
|
}
|
|
}
|
|
});
|
|
|
|
equal(getIdExecutions, 14, 'getId has been called for each seat.');
|
|
equal(getLabelExecutions, 14, 'getLabel has been called for each seat.');
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(2)').text(), 'a+1+4', 'Correct label assigned.');
|
|
|
|
equal($seatCharts.find('.seatCharts-row:eq(3) .seatCharts-seat:eq(4)').attr('id'), 'b-3-5', 'Correct id assigned.');
|
|
|
|
});
|
|
|
|
test('Testing overriding labels and IDs', function () {
|
|
expect(10);
|
|
|
|
var $seatCharts = simpleMapSetup({
|
|
map: [
|
|
'a[1_A1,A1]a[1_A2,A2]_aa',
|
|
'bbbbb',
|
|
'bb[3_B2]bbb[,B5]'
|
|
]
|
|
}),
|
|
//a[1_A1,A1]
|
|
$seat1 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(0)'),
|
|
//a[1_A2,A2]
|
|
$seat2 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(1)'),
|
|
//a
|
|
$seat3 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(2)'),
|
|
//b[3_B2]
|
|
$seat4 = $seatCharts.find('.seatCharts-row:eq(3) .seatCharts-seat:eq(1)'),
|
|
//b[,B5]
|
|
$seat5 = $seatCharts.find('.seatCharts-row:eq(3) .seatCharts-seat:eq(4)');
|
|
|
|
equal($seat1.text(), 'A1', 'Seat 1 has correct label assigned.');
|
|
equal($seat1.attr('id'), '1_A1', 'Seat 1 has correct id assigned.');
|
|
|
|
equal($seat2.text(), 'A2', 'Seat 2 has correct label assigned.');
|
|
equal($seat2.attr('id'), '1_A2', 'Seat 2 has correct id assigned.');
|
|
|
|
equal($seat3.text(), '4', 'Seat 3 has correct label assigned.');
|
|
equal($seat3.attr('id'), '1_4', 'Seat 3 has correct id assigned.');
|
|
|
|
equal($seat4.text(), '2', 'Seat 4 has correct label assigned.');
|
|
equal($seat4.attr('id'), '3_B2', 'Seat 4 has correct id assigned.');
|
|
|
|
equal($seat5.text(), 'B5', 'Seat 5 has correct label assigned.');
|
|
equal($seat5.attr('id'), '3_5', 'Seat 5 has correct id assigned.');
|
|
});
|
|
|
|
test('Testing overriding+custom labels and IDs', function () {
|
|
expect(12);
|
|
|
|
var getIdExecutions = 0,
|
|
getLabelExecutions = 0,
|
|
$seatCharts = simpleMapSetup({
|
|
naming : {
|
|
getId : function (character, row, column) {
|
|
getIdExecutions += 1
|
|
//return all arguments separated with -
|
|
return [].slice.call(arguments).join('-');
|
|
},
|
|
getLabel : function (character, row, column) {
|
|
getLabelExecutions += 1;
|
|
//return all arguments separated with +
|
|
return [].slice.call(arguments).join('+');
|
|
}
|
|
},
|
|
map: [
|
|
'a[1_A1,A1]a[1_A2,A2]_aa',
|
|
'bbbbb',
|
|
'bb[3_B2]bbb[,B5]'
|
|
]
|
|
}),
|
|
//a[1_A1,A1]
|
|
$seat1 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(0)'),
|
|
//a[1_A2,A2]
|
|
$seat2 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(1)'),
|
|
//a
|
|
$seat3 = $seatCharts.find('.seatCharts-row:eq(1) .seatCharts-seat:eq(2)'),
|
|
//b[3_B2]
|
|
$seat4 = $seatCharts.find('.seatCharts-row:eq(3) .seatCharts-seat:eq(1)'),
|
|
//b[,B5]
|
|
$seat5 = $seatCharts.find('.seatCharts-row:eq(3) .seatCharts-seat:eq(4)');
|
|
|
|
equal(getIdExecutions, 11, 'getId has been called for each seat.');
|
|
equal(getLabelExecutions, 11, 'getLabel has been called for each seat.');
|
|
|
|
equal($seat1.text(), 'A1', 'Seat 1 has correct label assigned.');
|
|
equal($seat1.attr('id'), '1_A1', 'Seat 1 has correct id assigned.');
|
|
|
|
equal($seat2.text(), 'A2', 'Seat 2 has correct label assigned.');
|
|
equal($seat2.attr('id'), '1_A2', 'Seat 2 has correct id assigned.');
|
|
|
|
equal($seat3.text(), 'a+1+4', 'Seat 3 has correct label assigned.');
|
|
equal($seat3.attr('id'), 'a-1-4', 'Seat 3 has correct id assigned.');
|
|
|
|
equal($seat4.text(), 'b+3+2', 'Seat 4 has correct label assigned.');
|
|
equal($seat4.attr('id'), '3_B2', 'Seat 4 has correct id assigned.');
|
|
|
|
equal($seat5.text(), 'B5', 'Seat 5 has correct label assigned.');
|
|
equal($seat5.attr('id'), 'b-3-5', 'Seat 5 has correct id assigned.');
|
|
});
|
|
|
|
test('Testing disabled left & top containers for labels', function () {
|
|
var $seatCharts = simpleMapSetup({
|
|
naming : {
|
|
top: false,
|
|
left: false
|
|
}
|
|
});
|
|
|
|
ok($seatCharts.find('.seatCharts-row:eq(0) .seatCharts-cell:eq(0)').hasClass('seatCharts-seat'), 'Top leftmost cell should contain a seat.');
|
|
})
|
|
|
|
test('Testing legend with container specified', function () {
|
|
expect(4);
|
|
|
|
var $fixture = $('#qunit-fixture'),
|
|
$legend = $('<div>').appendTo($fixture),
|
|
$seatCharts = simpleMapSetup({
|
|
legend : {
|
|
node : $legend,
|
|
items : [
|
|
['a', 'available', 'A seat when available'],
|
|
['b', 'available', 'B seat when available'],
|
|
['a', 'unavailable', 'A seat when unavailable'],
|
|
['b', 'unavailable', 'B seat when unavailable']
|
|
]
|
|
}
|
|
}),
|
|
$item,
|
|
$seat;
|
|
|
|
ok($legend.hasClass('seatCharts-legend'), 'Legend class has been assigned to the container');
|
|
|
|
equal($legend.find('ul.seatCharts-legendList li.seatCharts-legendItem').length, 4, 'There is a list of 4 legend items.');
|
|
|
|
$item = $legend.find('.seatCharts-legendItem:eq(0)');
|
|
$seat = $item.find('div:first');
|
|
|
|
ok($seat.hasClass('seatCharts-seat') && $seat.hasClass('seatCharts-cell') && $seat.hasClass('available') && $seat.hasClass('a1-seat-class') && $seat.hasClass('a2-seat-class'), 'The first legend item has correct classes assigned.');
|
|
|
|
equal($item.find('.seatCharts-legendDescription').text(), 'A seat when available', 'The first item has correct label assigned.');
|
|
|
|
});
|
|
|
|
test('Testing legend without container specified', function () {
|
|
expect(4);
|
|
|
|
var $fixture = $('#qunit-fixture'),
|
|
$seatCharts = simpleMapSetup({
|
|
legend : {
|
|
items : [
|
|
['a', 'available', 'A seat when available'],
|
|
['b', 'available', 'B seat when available'],
|
|
['a', 'unavailable', 'A seat when unavailable'],
|
|
['b', 'unavailable', 'B seat when unavailable']
|
|
]
|
|
}
|
|
}),
|
|
$legend,
|
|
$item,
|
|
$seat;
|
|
|
|
equal($('div.seatCharts-legend').length, 1, 'Legend div has been created.');
|
|
|
|
$legend = $('div.seatCharts-legend:eq(0)');
|
|
|
|
equal($legend.find('ul.seatCharts-legendList li.seatCharts-legendItem').length, 4, 'There is a list of 4 legend items.');
|
|
|
|
$item = $legend.find('.seatCharts-legendItem:eq(0)');
|
|
$seat = $item.find('div:first');
|
|
|
|
ok($seat.hasClass('seatCharts-seat') && $seat.hasClass('seatCharts-cell') && $seat.hasClass('available') && $seat.hasClass('a1-seat-class') && $seat.hasClass('a2-seat-class'), 'The first legend item has correct classes assigned.');
|
|
|
|
equal($item.find('.seatCharts-legendDescription').text(), 'A seat when available', 'The first item has correct label assigned.');
|
|
|
|
});
|
|
|
|
test('Testing map-level callbacks', function () {
|
|
var $seatCharts = simpleMapSetup({
|
|
click : function () {
|
|
executions.click += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'selected';
|
|
} else if (this.status() == 'selected') {
|
|
return 'available';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
focus : function() {
|
|
executions.focus += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'focused';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
blur : function() {
|
|
executions.blur += 1;
|
|
|
|
return this.status();
|
|
}
|
|
}),
|
|
seatCharts = $seatCharts.seatCharts(),
|
|
//simple counter object
|
|
executions = new Counter,
|
|
clickEvent = $.Event('click'),
|
|
mouseenterEvent = $.Event('mouseenter'),
|
|
mouseleaveEvent = $.Event('mouseleave'),
|
|
focusEvent = $.Event('focus'),
|
|
keyEvent = $.Event('keydown');
|
|
|
|
seatCharts.get('2_3').status('unavailable');
|
|
|
|
seatCharts.get('2_1').node().trigger(mouseenterEvent);
|
|
seatCharts.get('2_1').node().trigger(mouseleaveEvent);
|
|
seatCharts.get('2_2').node().trigger(mouseenterEvent);
|
|
seatCharts.get('2_2').node().trigger(mouseleaveEvent);
|
|
seatCharts.get('2_3').node().trigger(mouseenterEvent);
|
|
|
|
propEqual(executions, {
|
|
click : 0,
|
|
focus : 3,
|
|
blur : 4,
|
|
reset : function () {}
|
|
}, 'Blur and focus are correctly triggered.');
|
|
|
|
//start over
|
|
executions.reset();
|
|
|
|
seatCharts.get('3_1').node().trigger(mouseenterEvent);
|
|
|
|
//arrow down
|
|
keyEvent.which = 38;
|
|
seatCharts.get('3_1').node().trigger(keyEvent);
|
|
|
|
//spacebar
|
|
keyEvent.which = 32;
|
|
|
|
seatCharts.get('2_1').node().trigger(keyEvent);
|
|
|
|
propEqual(executions, {
|
|
click : 1,
|
|
focus : 2,
|
|
blur : 3,
|
|
reset : function () {}
|
|
}, 'Blur, focus and click are correctly triggered.');
|
|
});
|
|
|
|
test('Testing seat-level callbacks', function () {
|
|
var $seatCharts = simpleMapSetup({
|
|
seats : {
|
|
a : {
|
|
click : function () {
|
|
executionsA.click += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'selected';
|
|
} else if (this.status() == 'selected') {
|
|
return 'available';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
focus : function() {
|
|
executionsA.focus += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'focused';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
blur : function() {
|
|
executionsA.blur += 1;
|
|
|
|
return this.status();
|
|
}
|
|
},
|
|
b : {
|
|
click : function () {
|
|
executionsB.click += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'selected';
|
|
} else if (this.status() == 'selected') {
|
|
return 'available';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
focus : function() {
|
|
executionsB.focus += 1;
|
|
|
|
if (this.status() == 'available') {
|
|
return 'focused';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
},
|
|
blur : function() {
|
|
executionsB.blur += 1;
|
|
|
|
return this.status();
|
|
}
|
|
}
|
|
}
|
|
|
|
}),
|
|
seatCharts = $seatCharts.seatCharts(),
|
|
//each seat type has its own callbacks and hence different counters
|
|
executionsA = new Counter,
|
|
executionsB = new Counter,
|
|
clickEvent = $.Event('click'),
|
|
mouseenterEvent = $.Event('mouseenter'),
|
|
mouseleaveEvent = $.Event('mouseleave'),
|
|
focusEvent = $.Event('focus'),
|
|
keyEvent = $.Event('keydown');
|
|
|
|
seatCharts.get('2_3').status('unavailable');
|
|
|
|
seatCharts.get('2_1').node().trigger(mouseenterEvent);
|
|
seatCharts.get('2_1').node().trigger(mouseleaveEvent);
|
|
seatCharts.get('2_2').node().trigger(mouseenterEvent);
|
|
seatCharts.get('2_2').node().trigger(mouseleaveEvent);
|
|
seatCharts.get('2_3').node().trigger(mouseenterEvent);
|
|
|
|
propEqual(executionsB, {
|
|
click : 0,
|
|
focus : 3,
|
|
blur : 4,
|
|
reset : function () {}
|
|
}, 'Blur, focus and click are correctly triggered for B seats.');
|
|
|
|
seatCharts.get('1_1').node().trigger(mouseenterEvent);
|
|
|
|
//arrow right
|
|
keyEvent.which = 39;
|
|
seatCharts.get('1_1').node().trigger(keyEvent);
|
|
seatCharts.get('1_2').node().trigger(keyEvent);
|
|
|
|
//spacebar
|
|
keyEvent.which = 32;
|
|
|
|
seatCharts.get('1_4').node().trigger(keyEvent);
|
|
|
|
propEqual(executionsA, {
|
|
click : 1,
|
|
focus : 3,
|
|
blur : 4,
|
|
reset : function () {}
|
|
}, 'Blur, focus and click are correctly triggered for A seats.');
|
|
|
|
});
|
|
|
|
})(jQuery);
|