]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | $(function () { |
2 | 'use strict' | |
3 | ||
4 | QUnit.module('popover plugin') | |
5 | ||
6 | QUnit.test('should be defined on jquery object', function (assert) { | |
7 | assert.expect(1) | |
8 | assert.ok($(document.body).popover, 'popover method is defined') | |
9 | }) | |
10 | ||
11 | QUnit.module('popover', { | |
12 | beforeEach: function () { | |
13 | // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode | |
14 | $.fn.bootstrapPopover = $.fn.popover.noConflict() | |
15 | }, | |
16 | afterEach: function () { | |
17 | $.fn.popover = $.fn.bootstrapPopover | |
18 | delete $.fn.bootstrapPopover | |
19 | $('.popover').remove() | |
20 | } | |
21 | }) | |
22 | ||
23 | QUnit.test('should provide no conflict', function (assert) { | |
24 | assert.expect(1) | |
25 | assert.strictEqual($.fn.popover, undefined, 'popover was set back to undefined (org value)') | |
26 | }) | |
27 | ||
28 | QUnit.test('should throw explicit error on undefined method', function (assert) { | |
29 | assert.expect(1) | |
30 | var $el = $('<div/>') | |
31 | $el.bootstrapPopover() | |
32 | try { | |
33 | $el.bootstrapPopover('noMethod') | |
34 | } | |
35 | catch (err) { | |
36 | assert.strictEqual(err.message, 'No method named "noMethod"') | |
37 | } | |
38 | }) | |
39 | ||
40 | QUnit.test('should return jquery collection containing the element', function (assert) { | |
41 | assert.expect(2) | |
42 | var $el = $('<div/>') | |
43 | var $popover = $el.bootstrapPopover() | |
44 | assert.ok($popover instanceof $, 'returns jquery collection') | |
45 | assert.strictEqual($popover[0], $el[0], 'collection contains element') | |
46 | }) | |
47 | ||
48 | QUnit.test('should render popover element', function (assert) { | |
49 | assert.expect(2) | |
50 | var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>') | |
51 | .appendTo('#qunit-fixture') | |
52 | .bootstrapPopover('show') | |
53 | ||
54 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
55 | $popover.bootstrapPopover('hide') | |
56 | assert.strictEqual($('.popover').length, 0, 'popover removed') | |
57 | }) | |
58 | ||
59 | QUnit.test('should store popover instance in popover data object', function (assert) { | |
60 | assert.expect(1) | |
61 | var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover() | |
62 | ||
63 | assert.ok($popover.data('bs.popover'), 'popover instance exists') | |
64 | }) | |
65 | ||
66 | QUnit.test('should store popover trigger in popover instance data object', function (assert) { | |
67 | assert.expect(1) | |
68 | var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>') | |
69 | .appendTo('#qunit-fixture') | |
70 | .bootstrapPopover() | |
71 | ||
72 | $popover.bootstrapPopover('show') | |
73 | ||
74 | assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data') | |
75 | }) | |
76 | ||
77 | QUnit.test('should get title and content from options', function (assert) { | |
78 | assert.expect(4) | |
79 | var $popover = $('<a href="#">@fat</a>') | |
80 | .appendTo('#qunit-fixture') | |
81 | .bootstrapPopover({ | |
82 | title: function () { | |
83 | return '@fat' | |
84 | }, | |
85 | content: function () { | |
86 | return 'loves writing tests (╯°□°)╯︵ ┻━┻' | |
87 | } | |
88 | }) | |
89 | ||
90 | $popover.bootstrapPopover('show') | |
91 | ||
92 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
93 | assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted') | |
94 | assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted') | |
95 | ||
96 | $popover.bootstrapPopover('hide') | |
97 | ||
98 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
99 | }) | |
100 | ||
101 | QUnit.test('should allow DOMElement title and content (html: true)', function (assert) { | |
102 | assert.expect(5) | |
103 | var title = document.createTextNode('@glebm <3 writing tests') | |
104 | var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) | |
105 | var $popover = $('<a href="#" rel="tooltip"/>') | |
106 | .appendTo('#qunit-fixture') | |
107 | .bootstrapPopover({ html: true, title: title, content: content }) | |
108 | ||
109 | $popover.bootstrapPopover('show') | |
110 | ||
111 | assert.notEqual($('.popover').length, 0, 'popover inserted') | |
112 | assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted') | |
113 | assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied') | |
114 | // toLowerCase because IE8 will return <I>...</I> | |
115 | assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted') | |
116 | assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied') | |
117 | }) | |
118 | ||
119 | QUnit.test('should allow DOMElement title and content (html: false)', function (assert) { | |
120 | assert.expect(5) | |
121 | var title = document.createTextNode('@glebm <3 writing tests') | |
122 | var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) | |
123 | var $popover = $('<a href="#" rel="tooltip"/>') | |
124 | .appendTo('#qunit-fixture') | |
125 | .bootstrapPopover({ title: title, content: content }) | |
126 | ||
127 | $popover.bootstrapPopover('show') | |
128 | ||
129 | assert.notEqual($('.popover').length, 0, 'popover inserted') | |
130 | assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted') | |
131 | assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved') | |
132 | assert.strictEqual($('.popover .popover-content').html(), '¯\\_(ツ)_/¯', 'content inserted') | |
133 | assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved') | |
134 | }) | |
135 | ||
136 | ||
137 | QUnit.test('should not duplicate HTML object', function (assert) { | |
138 | assert.expect(6) | |
139 | var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻') | |
140 | ||
141 | var $popover = $('<a href="#">@fat</a>') | |
142 | .appendTo('#qunit-fixture') | |
143 | .bootstrapPopover({ | |
144 | html: true, | |
145 | content: function () { | |
146 | return $div | |
147 | } | |
148 | }) | |
149 | ||
150 | $popover.bootstrapPopover('show') | |
151 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
152 | assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted') | |
153 | ||
154 | $popover.bootstrapPopover('hide') | |
155 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
156 | ||
157 | $popover.bootstrapPopover('show') | |
158 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
159 | assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted') | |
160 | ||
161 | $popover.bootstrapPopover('hide') | |
162 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
163 | }) | |
164 | ||
165 | QUnit.test('should get title and content from attributes', function (assert) { | |
166 | assert.expect(4) | |
167 | var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>') | |
168 | .appendTo('#qunit-fixture') | |
169 | .bootstrapPopover() | |
170 | .bootstrapPopover('show') | |
171 | ||
172 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
173 | assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted') | |
174 | assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') | |
175 | ||
176 | $popover.bootstrapPopover('hide') | |
177 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
178 | }) | |
179 | ||
180 | QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) { | |
181 | assert.expect(4) | |
182 | var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>') | |
183 | .appendTo('#qunit-fixture') | |
184 | .bootstrapPopover({ | |
185 | title: 'ignored title option', | |
186 | content: 'ignored content option' | |
187 | }) | |
188 | .bootstrapPopover('show') | |
189 | ||
190 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
191 | assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted') | |
192 | assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') | |
193 | ||
194 | $popover.bootstrapPopover('hide') | |
195 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
196 | }) | |
197 | ||
198 | QUnit.test('should respect custom template', function (assert) { | |
199 | assert.expect(3) | |
200 | var $popover = $('<a href="#">@fat</a>') | |
201 | .appendTo('#qunit-fixture') | |
202 | .bootstrapPopover({ | |
203 | title: 'Test', | |
204 | content: 'Test', | |
205 | template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>' | |
206 | }) | |
207 | ||
208 | $popover.bootstrapPopover('show') | |
209 | ||
210 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
211 | assert.ok($('.popover').hasClass('foobar'), 'custom class is present') | |
212 | ||
213 | $popover.bootstrapPopover('hide') | |
214 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
215 | }) | |
216 | ||
217 | QUnit.test('should destroy popover', function (assert) { | |
218 | assert.expect(7) | |
219 | var $popover = $('<div/>') | |
220 | .bootstrapPopover({ | |
221 | trigger: 'hover' | |
222 | }) | |
223 | .on('click.foo', $.noop) | |
224 | ||
225 | assert.ok($popover.data('bs.popover'), 'popover has data') | |
226 | assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event') | |
227 | assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event') | |
228 | ||
229 | $popover.bootstrapPopover('show') | |
230 | $popover.bootstrapPopover('dispose') | |
231 | ||
232 | assert.ok(!$popover.hasClass('show'), 'popover is hidden') | |
233 | assert.ok(!$popover.data('popover'), 'popover does not have data') | |
234 | assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo') | |
235 | assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events') | |
236 | }) | |
237 | ||
238 | QUnit.test('should render popover element using delegated selector', function (assert) { | |
239 | assert.expect(2) | |
240 | var $div = $('<div><a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a></div>') | |
241 | .appendTo('#qunit-fixture') | |
242 | .bootstrapPopover({ | |
243 | selector: 'a', | |
244 | trigger: 'click' | |
245 | }) | |
246 | ||
247 | $div.find('a').trigger('click') | |
248 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
249 | ||
250 | $div.find('a').trigger('click') | |
251 | assert.strictEqual($('.popover').length, 0, 'popover was removed') | |
252 | }) | |
253 | ||
254 | QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) { | |
255 | assert.expect(1) | |
256 | var $content = $('<div class="content-with-handler"><a class="btn btn-warning">Button with event handler</a></div>').appendTo('#qunit-fixture') | |
257 | ||
258 | var handlerCalled = false | |
259 | $('.content-with-handler .btn').on('click', function () { | |
260 | handlerCalled = true | |
261 | }) | |
262 | ||
263 | var $div = $('<div><a href="#">Show popover</a></div>') | |
264 | .appendTo('#qunit-fixture') | |
265 | .bootstrapPopover({ | |
266 | html: true, | |
267 | trigger: 'manual', | |
268 | container: 'body', | |
269 | content: function () { | |
270 | return $content | |
271 | } | |
272 | }) | |
273 | ||
274 | var done = assert.async() | |
275 | $div | |
276 | .one('shown.bs.popover', function () { | |
277 | $div | |
278 | .one('hidden.bs.popover', function () { | |
279 | $div | |
280 | .one('shown.bs.popover', function () { | |
281 | $('.content-with-handler .btn').trigger('click') | |
282 | $div.bootstrapPopover('dispose') | |
283 | assert.ok(handlerCalled, 'content\'s event handler still present') | |
284 | done() | |
285 | }) | |
286 | .bootstrapPopover('show') | |
287 | }) | |
288 | .bootstrapPopover('hide') | |
289 | }) | |
290 | .bootstrapPopover('show') | |
291 | }) | |
292 | ||
293 | QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) { | |
294 | assert.expect(1) | |
295 | ||
296 | var $popover = $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>') | |
297 | .appendTo('#qunit-fixture') | |
298 | .on('hidden.bs.popover shown.bs.popover', function () { | |
299 | assert.ok(false, 'should not fire any popover events') | |
300 | }) | |
301 | .bootstrapPopover('hide') | |
302 | assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover') | |
303 | }) | |
304 | ||
305 | QUnit.test('should fire inserted event', function (assert) { | |
306 | assert.expect(2) | |
307 | var done = assert.async() | |
308 | ||
309 | $('<a href="#">@Johann-S</a>') | |
310 | .appendTo('#qunit-fixture') | |
311 | .on('inserted.bs.popover', function () { | |
312 | assert.notEqual($('.popover').length, 0, 'popover was inserted') | |
313 | assert.ok(true, 'inserted event fired') | |
314 | done() | |
315 | }) | |
316 | .bootstrapPopover({ | |
317 | title: 'Test', | |
318 | content: 'Test' | |
319 | }) | |
320 | .bootstrapPopover('show') | |
321 | }) | |
322 | ||
323 | QUnit.test('should throw an error when show is called on hidden elements', function (assert) { | |
324 | assert.expect(1) | |
325 | var done = assert.async() | |
326 | ||
327 | try { | |
328 | $('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show') | |
329 | } | |
330 | catch (err) { | |
331 | assert.strictEqual(err.message, 'Please use show on visible elements') | |
332 | done() | |
333 | } | |
334 | }) | |
335 | ||
336 | QUnit.test('should hide popovers when their containing modal is closed', function (assert) { | |
337 | assert.expect(1) | |
338 | var done = assert.async() | |
339 | var templateHTML = '<div id="modal-test" class="modal">' + | |
340 | '<div class="modal-dialog" role="document">' + | |
341 | '<div class="modal-content">' + | |
342 | '<div class="modal-body">' + | |
343 | '<button id="popover-test" type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Popover">' + | |
344 | 'Popover on top' + | |
345 | '</button>' + | |
346 | '</div>' + | |
347 | '</div>' + | |
348 | '</div>' + | |
349 | '</div>' | |
350 | ||
351 | $(templateHTML).appendTo('#qunit-fixture') | |
352 | $('#popover-test') | |
353 | .on('shown.bs.popover', function () { | |
354 | $('#modal-test').modal('hide') | |
355 | }) | |
356 | .on('hide.bs.popover', function () { | |
357 | assert.ok(true, 'popover hide') | |
358 | done() | |
359 | }) | |
360 | ||
361 | $('#modal-test') | |
362 | .on('shown.bs.modal', function () { | |
363 | $('#popover-test').bootstrapPopover('show') | |
364 | }) | |
365 | .modal('show') | |
366 | }) | |
367 | }) |