1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
(function($) {
var grid, // The SlickGrid instance
cols = [ // The column definitions
{ name: "Short", field: "short", width: 100 },
{ name: "Medium", field: "medium", width: 100 },
{ name: "Long", field: "long", width: 100 },
{ name: "Mixed", field: "mixed", width: 100 },
{ name: "Long header creates tooltip", field: "header", width: 50 },
{ name: "Long header with predefined tooltip", field: "tooltipHeader", width: 50, tooltip: "Already have a tooltip!" }
],
data = [], // The grid data
LONG_VALUE = "looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong",
MEDIUM_VALUE = "mediummmmmmm"
SHORT_VALUE = "short",
TOOLTIP = "tooltip",
TRUNCATED_VALUE = LONG_VALUE.substr(0, 17) + "...",
$container = $("#container");
// Create data
for (var i = 0; i < 10; i++) {
data.push({
"id": "row" + i,
"short": SHORT_VALUE,
"medium": MEDIUM_VALUE,
"long": LONG_VALUE,
"mixed": ( i % 2 == 0 ? SHORT_VALUE : LONG_VALUE ),
"header": i,
"tooltipHeader": i
});
}
function setupGrid(pluginOptions) {
$('<div id="grid" />').appendTo($container);
grid = new Slick.Grid("#grid", data, cols);
grid.registerPlugin(new Slick.AutoTooltips(pluginOptions));
grid.render();
}
function teardownGrid() {
$container.empty();
}
function getCell(columnIndex) {
return $("#grid .slick-cell.l" + columnIndex).eq(0);
}
function getHeaderCell(columnIndex) {
return $("#grid .slick-header-column").eq(columnIndex);
}
module("plugins - autotooltips - defaults", {
setup: function () {
setupGrid({});
},
teardown: teardownGrid
});
test("title is empty when cell text has enough room", function () {
var $cell = getCell(0); // Grab a cell
$cell.trigger("mouseenter"); // Trigger hover on a cell in grid
strictEqual($cell.attr("title"), "", "title is not present");
});
test("title is present when cell text is cut off", function () {
var $cell = getCell(2); // Grab a cell
$cell.trigger("mouseenter"); // Trigger hover on a cell in grid
strictEqual($cell.attr("title"), LONG_VALUE, "title equals cell text");
});
module("plugins - autotooltips - header", {
setup: function () {
setupGrid({ enableForHeaderCells: true });
},
teardown: teardownGrid
});
test("title is empty when header column has enough width", function () {
var $headerCell = getHeaderCell(0); // Grab the requested header cell
$headerCell.trigger("mouseenter"); // Trigger hover on a header cell
strictEqual($headerCell.attr("title"), "", "title is not present");
});
test("title is present when header column is cut off", function () {
var $headerCell = getHeaderCell(4); // Grab the requested header cell
$headerCell.trigger("mouseenter"); // Trigger hover on a header cell
strictEqual($headerCell.attr("title"), "Long header creates tooltip", "title equals column name");
});
test("title is not overridden when header column has pre-defined tooltip", function() {
var $headerCell = getHeaderCell(5); // Grab the requested header cell
$headerCell.trigger("mouseenter"); // Trigger hover on a header cell
strictEqual($headerCell.attr("title"), "Long header with predefined tooltip", "title is not overridden");
});
// ******************************** //
// Tests for maximum tooltip length //
// ******************************** //
module("plugins - autotooltips - max tooltip", {
setup: function () {
setupGrid({ maxToolTipLength: 20 });
},
teardown: teardownGrid
});
test("title is empty when cell text has enough room", function () {
var $cell = getCell(0); // Grab a cell
$cell.trigger("mouseenter"); // Trigger hover on a cell in grid
strictEqual($cell.attr("title"), "", "title is not present");
});
test("title is present and not truncated when cell text is cut off but not too long", function () {
var $cell = getCell(1); // Grab a cell
$cell.trigger("mouseenter"); // Trigger hover on a cell in grid
strictEqual($cell.attr("title"), MEDIUM_VALUE, "title equals truncated text");
});
test("title is present and truncated when cell text is cut off and too long", function () {
var $cell = getCell(2); // Grab a cell
$cell.trigger("mouseenter"); // Trigger hover on a cell in grid
strictEqual($cell.attr("title"), TRUNCATED_VALUE, "title equals truncated text");
});
})(jQuery);
|
