source: other-projects/nz-flag-design/trunk/main-form/bgrins-spectrum/test/tests.js@ 29741

Last change on this file since 29741 was 29741, checked in by davidb, 9 years ago

Support JS library for colour picker
  • Property svn:executable set to *
File size: 20.2 KB
Line 
1// Spectrum Colorpicker Tests
2// https://github.com/bgrins/spectrum
3// Author: Brian Grinstead
4// License: MIT
5
6
7module("Initialization");
8
9test( "jQuery Plugin Can Be Created", function() {
10 var el = $("<input id='spec' />").spectrum();
11
12 ok(el.attr("id") === "spec", "Element returned from plugin" );
13
14 el.spectrum("set", "red");
15 equal(el.spectrum("get").toName(), "red", "Basic color setting");
16
17 equal(el.spectrum("option", "showInput"), false, "Undefined option is false.");
18
19 el.spectrum({showInput: true});
20
21 equal(el.spectrum("option", "showInput"), true, "Double initialized spectrum is destroyed before recreating.");
22
23 el.spectrum("destroy");
24
25 equal(el.spectrum("container"), el, "After destroying spectrum, string function returns input.");
26
27});
28
29test( "Per-element Options Are Read From Data Attributes", function() {
30 var el = $("<input id='spec' data-show-alpha='true' />").spectrum();
31
32 equal ( el.spectrum("option", "showAlpha"), true, "Took showAlpha value from data attribute");
33
34 el.spectrum("destroy");
35
36 var changeDefault = $("<input id='spec' data-show-alpha='false' />").spectrum({
37 showAlpha: true
38 });
39
40 equal ( changeDefault.spectrum("option", "showAlpha"), false, "Took showAlpha value from data attribute");
41
42 changeDefault.spectrum("destroy");
43
44 var noData = $("<input id='spec' />").spectrum({
45 showAlpha: true
46 });
47
48 equal ( noData.spectrum("option", "showAlpha"), true, "Kept showAlpha without data attribute");
49
50 noData.spectrum("destroy");
51});
52
53test( "Events Fire", function() {
54 var el = $("<input id='spec' />").spectrum();
55 var count = 0;
56 expect(5);
57
58 el.on("beforeShow.spectrum", function(e) {
59
60 // Cancel the event the first time
61 if (count === 0) {
62 ok(true, "Cancel beforeShow");
63 count++;
64 return false;
65 }
66
67 ok (count === 1, "Allow beforeShow");
68 count++;
69 });
70
71
72 el.on("show.spectrum", function(e) {
73 ok(count === 2, "Show");
74 count++;
75 });
76
77 el.on("hide.spectrum", function(e) {
78 ok(count === 3, "Hide");
79
80 count++;
81 });
82
83 el.on("move.spectrum", function(e) {
84
85 });
86
87 el.on("change", function(e, color) {
88 ok(false, "Change should not fire from `set` call");
89 });
90
91 el.spectrum("show");
92 el.spectrum("show");
93 el.spectrum("hide");
94
95 el.spectrum("set", "red");
96
97 el.spectrum("destroy");
98
99 var el2 = $("<input />").spectrum({
100 showInput: true
101 });
102 el2.on("change.spectrum", function(e, color) {
103 ok(true, "Change should fire input changing");
104 });
105 el2.spectrum("container").find(".sp-input").val("blue").trigger("change");
106 el2.spectrum("destroy");
107});
108
109test( "Dragging", function() {
110 var el = $("<input id='spec' />").spectrum();
111 var hueSlider = el.spectrum("container").find(".sp-hue");
112
113 ok (hueSlider.length, "There is a hue slider");
114
115 hueSlider.trigger("mousedown");
116
117 ok ($("body").hasClass("sp-dragging"), "The body has dragging class");
118
119 hueSlider.trigger("mouseup");
120
121 ok (!$("body").hasClass("sp-dragging"), "The body does not have a dragging class");
122
123 el.spectrum("destroy");
124});
125
126module("Defaults");
127
128test( "Default Color Is Set By Input Value", function() {
129
130 var red = $("<input id='spec' value='red' />").spectrum();
131 equal ( red.spectrum("get").toName(), "red", "Basic color setting");
132
133 var noColor = $("<input id='spec' value='not a color' />").spectrum();
134 equal ( noColor.spectrum("get").toHex(), "000000", "Defaults to black with an invalid color");
135
136 var noValue = $("<input id='spec' />").spectrum();
137 equal ( noValue.spectrum("get").toHex(), "000000", "Defaults to black with no value set");
138
139 var noValueHex3 = $("<input id='spec' />").spectrum({
140 preferredFormat: "hex3"
141 });
142 equal ( noValueHex3.spectrum("get").toHex(true), "000", "Defaults to 3 char hex with no value set");
143 equal ( noValueHex3.spectrum("get").toString(), "#000", "Defaults to 3 char hex with no value set");
144
145
146 red.spectrum("destroy");
147 noColor.spectrum("destroy");
148 noValue.spectrum("destroy");
149 noValueHex3.spectrum("destroy");
150});
151
152module("Palettes");
153
154test( "Palette Events Fire In Correct Order ", function() {
155 expect(2);
156 var el = $("<input id='spec' value='red' />").spectrum({
157 showPalette: true,
158 palette: [
159 ["red", "green", "blue"]
160 ],
161 move: function() {
162
163 }
164 });
165
166 var count = 0;
167 el.on("move.spectrum", function(e) {
168 ok(count === 0, "move fires before change");
169 count++;
170 });
171
172 el.on("change.spectrum", function(e) {
173 ok(count === 1, "change fires after move");
174 });
175
176 el.spectrum("container").find(".sp-thumb-el:last-child").click();
177 el.spectrum("destroy");
178});
179
180test( "Palette click events work ", function() {
181 var el = $("<input id='spec' value='red' />").spectrum({
182 showPalette: true,
183 palette: [
184 ["red", "green", "blue"]
185 ],
186 move: function() {
187
188 }
189 });
190
191 el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
192 equal (el.spectrum("get").toName(), "blue", "First click worked");
193 el.spectrum("container").find(".sp-thumb-el:nth-child(2) .sp-thumb-inner").click();
194 equal (el.spectrum("get").toName(), "green", "Second click worked (on child element)");
195 el.spectrum("container").find(".sp-thumb-el:nth-child(1) .sp-thumb-inner").click();
196 equal (el.spectrum("get").toName(), "red", "Third click worked (on child element)");
197 el.spectrum("destroy");
198
199});
200
201test( "hideAfterPaletteSelect: Palette stays open after color select", function() {
202 var el = $("<input id='spec' value='red' />").spectrum({
203 showPalette: true,
204 hideAfterPaletteSelect: false,
205 palette: [
206 ["red", "green", "blue"]
207 ]
208 });
209
210 el.spectrum("show");
211 el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
212
213 ok(!el.spectrum("container").hasClass('sp-hidden'), "palette is still visible after color selection");
214 el.spectrum("destroy");
215});
216
217test( "hideAfterPaletteSelect: Palette closes after color select", function() {
218 var el = $("<input id='spec' value='red' />").spectrum({
219 showPalette: true,
220 hideAfterPaletteSelect: true,
221 palette: [
222 ["red", "green", "blue"]
223 ]
224 });
225
226 el.spectrum("show");
227 el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
228
229 ok(el.spectrum("container").hasClass('sp-hidden'), "palette is still hidden after color selection");
230 el.spectrum("destroy");
231});
232
233test( "Local Storage Is Limited ", function() {
234
235 var el = $("<input id='spec' value='red' />").spectrum({
236 localStorageKey: "spectrum.tests",
237 palette: [["#ff0", "#0ff"]],
238 maxSelectionSize: 3
239 });
240
241 el.spectrum("set", "#f00");
242 el.spectrum("set", "#e00");
243 el.spectrum("set", "#d00");
244 el.spectrum("set", "#c00");
245 el.spectrum("set", "#b00");
246 el.spectrum("set", "#a00");
247
248 equal (
249 localStorage["spectrum.tests"],
250 "rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
251 "Local storage array has been limited"
252 );
253
254 el.spectrum("set", "#ff0");
255 el.spectrum("set", "#0ff");
256
257 equal (
258 localStorage["spectrum.tests"],
259 "rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
260 "Local storage array did not get changed by selecting palette items"
261 );
262 el.spectrum("destroy");
263
264});
265
266module("Options");
267
268test ("replacerClassName", function() {
269 var el = $("<input />").appendTo("body").spectrum({
270 replacerClassName: "test"
271 });
272 ok (el.next(".sp-replacer").hasClass("test"), "Replacer class has been applied");
273 el.spectrum("destroy").remove();
274});
275
276test ("containerClassName", function() {
277 var el = $("<input />").appendTo("body").spectrum({
278 containerClassName: "test"
279 });
280 ok (el.spectrum("container").hasClass("test"), "Container class has been applied");
281 el.spectrum("destroy").remove();
282});
283
284test( "Options Can Be Set and Gotten Programmatically", function() {
285
286 var spec = $("<input id='spec' />").spectrum({
287 color: "#ECC",
288 flat: true,
289 showInput: true,
290 className: "full-spectrum",
291 showInitial: true,
292 showPalette: true,
293 showSelectionPalette: true,
294 maxPaletteSize: 10,
295 preferredFormat: "hex",
296 localStorageKey: "spectrum.example",
297 palette: [['red'], ['green']]
298 });
299
300 var allOptions = spec.spectrum("option");
301 equal ( allOptions.flat, true, "Fetching all options provides accurate value");
302
303 var singleOption = spec.spectrum("option", "className");
304 equal ( singleOption, "full-spectrum", "Fetching a single option returns that value");
305
306 spec.spectrum("option", "className", "changed");
307 singleOption = spec.spectrum("option", "className");
308 equal ( singleOption, "changed", "Changing an option then fetching it is updated");
309
310
311 var numPaletteElements = spec.spectrum("container").find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
312 equal (numPaletteElements, 2, "Two palette elements to start");
313 spec.spectrum("option", "palette", [['red'], ['green'], ['blue']]);
314 var optPalette = spec.spectrum("option", "palette");
315 deepEqual (optPalette, [['red'], ['green'], ['blue']], "Changing an option then fetching it is updated");
316 numPaletteElements = spec.spectrum("container").find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
317 equal (numPaletteElements, 3, "Three palette elements after updating");
318
319 var appendToDefault = $("<input />").spectrum({
320
321 });
322
323 var container = $("<div id='c' />").appendTo("body");
324 var appendToOther = $("<input />").spectrum({
325 appendTo: container
326 });
327
328 var appendToParent = $("<input />").appendTo("#c").spectrum({
329 appendTo: "parent"
330 });
331
332
333 var appendToOtherFlat = $("<input />").spectrum({
334 appendTo: container,
335 flat: true
336 });
337
338 equal ( appendToDefault.spectrum("container").parent()[0], document.body, "Appended to body by default");
339
340 equal ( appendToOther.spectrum("container").parent()[0], container[0], "Can be appended to another element");
341
342 equal ( appendToOtherFlat.spectrum("container").parent()[0], $(appendToOtherFlat).parent()[0], "Flat CANNOT be appended to another element, will be same as input");
343
344 equal ( appendToParent.spectrum("container").parent()[0], container[0], "Passing 'parent' to appendTo works as expected");
345
346
347 // Issue #70 - https://github.com/bgrins/spectrum/issues/70
348 equal (spec.spectrum("option", "showPalette"), true, "showPalette is true by default");
349 spec.spectrum("option", "showPalette", false);
350
351 equal (spec.spectrum("option", "showPalette"), false, "showPalette is false after setting showPalette");
352 spec.spectrum("option", "showPaletteOnly", true);
353
354 equal (spec.spectrum("option", "showPaletteOnly"), true, "showPaletteOnly is true after setting showPaletteOnly");
355 equal (spec.spectrum("option", "showPalette"), true, "showPalette is true after setting showPaletteOnly");
356
357 spec.spectrum("destroy");
358 appendToDefault.spectrum("destroy");
359 appendToOther.spectrum("destroy");
360 appendToOtherFlat.spectrum("destroy");
361 appendToParent.spectrum("destroy").remove();
362 delete window.localStorage["spectrum.example"];
363 container.remove();
364});
365
366test ("Show Input works as expected", function() {
367 var el = $("<input />").spectrum({
368 showInput: true,
369 color: "red"
370 });
371 var input = el.spectrum("container").find(".sp-input");
372
373 equal(input.val(), "red", "Input is set to color by default");
374 input.val("").trigger("change");
375
376 ok(input.hasClass("sp-validation-error"), "Input has validation error class after being emptied.");
377
378 input.val("red").trigger("change");
379
380 ok(!input.hasClass("sp-validation-error"), "Input does not have validation error class after being reset to original color.");
381
382 equal (el.spectrum("get").toHexString(), "#ff0000", "Color is still red");
383 el.spectrum("destroy");
384});
385
386test ("Toggle Picker Area button works as expected", function() {
387 var div = $("<div style='position:absolute; right:0; height:20px; width:150px'>").appendTo('body').show(),
388 el = $("<input />").appendTo(div);
389 el.spectrum({
390 showInput: true,
391 showPaletteOnly: true,
392 togglePaletteOnly: true,
393 color: "red"
394 });
395
396 var spectrum = el.spectrum("container").show(),
397 toggle = spectrum.find(".sp-palette-toggle"),
398 picker = spectrum.find(".sp-picker-container"),
399 palette = spectrum.find(".sp-palette-container");
400
401 // Open the Colorpicker
402 el.spectrum("show");
403 equal(picker.is(":hidden"), true, "The picker area is hidden by default.");
404 ok(spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is enabled.");
405
406 // Click the Picker area Toggle button to show the Picker
407 toggle.click();
408
409 equal(picker.is(":hidden"), false, "After toggling, the picker area is visible.");
410 ok(!spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is disabled.");
411 equal(Math.round(picker.offset().top), Math.round(palette.offset().top), "The picker area is next to the palette.");
412
413 // Click the toggle again to hide the picker
414 toggle.trigger("click");
415
416 equal(picker.is(":hidden"), true, "After toggling again, the picker area is hidden.");
417 ok(spectrum.hasClass("sp-palette-only"), "And the 'palette-only' class is enabled.");
418
419 // Cleanup
420 el.spectrum("hide");
421 el.spectrum("destroy");
422 el.remove();
423 div.remove();
424});
425
426test ("Tooltip is formatted based on preferred format", function() {
427 var el = $("<input />").spectrum({
428 showInput: true,
429 color: "rgba(255, 255, 255, .5)",
430 showPalette: true,
431 palette: [["red", "rgba(255, 255, 255, .5)", "rgb(0, 0, 255)"]]
432 });
433
434 function getTitlesString() {
435 return el.spectrum("container").find(".sp-thumb-el").map(function() {
436 return this.getAttribute("title");
437 }).toArray().join(" ");
438 }
439
440 equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles use rgb format by default");
441
442 el.spectrum("option", "preferredFormat", "hex");
443 equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex");
444
445 el.spectrum("option", "preferredFormat", "hex6");
446 equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex6");
447
448 el.spectrum("option", "preferredFormat", "hex3");
449 equal (getTitlesString(), "#f00 #fff #00f", "Titles are updated to hex3");
450
451 el.spectrum("option", "preferredFormat", "name");
452 equal (getTitlesString(), "red #ffffff blue", "Titles are updated to name");
453
454 el.spectrum("option", "preferredFormat", "hsv");
455 equal (getTitlesString(), "hsv(0, 100%, 100%) hsva(0, 0%, 100%, 0.5) hsv(240, 100%, 100%)", "Titles are updated to hsv");
456
457 el.spectrum("option", "preferredFormat", "hsl");
458 equal (getTitlesString(), "hsl(0, 100%, 50%) hsla(0, 0%, 100%, 0.5) hsl(240, 100%, 50%)", "Titles are updated to hsl");
459
460 el.spectrum("option", "preferredFormat", "rgb");
461 equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles are updated to rgb");
462
463 el.spectrum("destroy");
464});
465
466module("Methods");
467
468test( "Methods work as described", function() {
469 var el = $("<input id='spec' />").spectrum();
470
471 // Method - show
472 el.spectrum("show");
473 ok (el.spectrum("container").is(":visible"), "Spectrum is visible");
474
475 // Method - hide
476 el.spectrum("hide");
477 ok (el.spectrum("container").not(":visible"), "Spectrum is no longer visible");
478
479 // Method - toggle
480 el.spectrum("toggle");
481 ok (el.spectrum("container").is(":visible"), "Spectrum is visible after toggle");
482
483 el.spectrum("toggle");
484 ok (el.spectrum("container").not(":visible"), "Spectrum is no longer visible after toggle");
485
486 // Method - set / get
487 el.spectrum("set", "orange");
488 var color = el.spectrum("get", "color");
489
490 ok (color.toHexString() == "#ffa500", "Color has been set and gotten as hex");
491 ok (color.toName() == "orange", "Color has been set and gotten as name");
492 ok (color.toHsvString() == "hsv(39, 100%, 100%)", "Color has been set and gotten as hsv");
493 ok (color.toRgbString() == "rgb(255, 165, 0)", "Color has been set and gotten as rgb");
494 ok (color.toHslString() == "hsl(39, 100%, 50%)", "Color has been set and gotten as hsl");
495
496 // Method - container
497 ok (el.spectrum("container").hasClass("sp-container"), "Container can be retrieved");
498
499 // Method - disable
500 el.spectrum("disable");
501 ok (el.is(":disabled") , "Can be disabled");
502
503 el.spectrum("show");
504 ok (el.not(":visible") , "Cannot show when disabled");
505
506 // Method - enable
507 el.spectrum("enable");
508 ok (!el.is(":disabled") , "Can be enabled");
509
510 // Method - reflow
511 el.spectrum("reflow");
512
513 // Method - throw exception when not existing
514 raises(function() {
515 el.spectrum("no method");
516 }, "Expecting exception to be thrown when calling with no method");
517
518 // Method - destroy
519 el.spectrum("destroy");
520
521 equal (el.spectrum("container"), el , "No usage after being destroyed");
522 equal (el.spectrum("get"), el , "No usage after being destroyed");
523
524 el.spectrum("destroy");
525});
526
527// https://github.com/bgrins/spectrum/issues/97
528test( "Change events fire as described" , function() {
529
530 expect(0);
531 var input = $("<input />");
532
533 input.on("change", function() {
534 ok(false, "Change should not be fired inside of input change");
535 });
536
537 input.spectrum({
538 color: "red",
539 change: function() {
540 ok (false, "Change should not be fired inside of spectrum callback");
541 }
542 });
543
544 input.spectrum("set", "orange");
545
546});
547
548test("The selectedPalette should be updated in each spectrum instance, when storageKeys are identical.", function () {
549
550 delete window.localStorage["spectrum.tests"];
551
552 var colorToChoose = "rgb(0, 244, 0)";
553 var firstEl = $("<input id='firstEl' value='red' />").spectrum({
554 showPalette: true,
555 localStorageKey: "spectrum.tests"
556 });
557 var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
558 showPalette: true,
559 localStorageKey: "spectrum.tests"
560 });
561
562 firstEl.spectrum("set", colorToChoose);
563
564 secondEl.spectrum("toggle");
565
566 var selectedColor = secondEl.spectrum("container").find('span[data-color="' + colorToChoose + '"]');
567 ok(selectedColor.length > 0, "Selected color is also shown in the others instance's palette.");
568
569 delete window.localStorage["spectrum.tests"];
570
571 firstEl.spectrum("destroy");
572 secondEl.spectrum("destroy");
573});
574
575test("The selectedPalette should not be updated in spectrum instances that have different storageKeys.", function () {
576
577 delete window.localStorage["spectrum.test_1"];
578 delete window.localStorage["spectrum.test_2"];
579
580 var colorToChoose = "rgb(0, 244, 0)";
581 var firstEl = $("<input id='firstEl' value='red' />").spectrum({
582 showPalette: true,
583 localStorageKey: "spectrum.test_1"
584 });
585 var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
586 showPalette: true,
587 localStorageKey: "spectrum.test_2"
588 });
589
590 firstEl.spectrum("set", colorToChoose);
591
592 secondEl.spectrum("toggle");
593
594 var selectedColor = secondEl.spectrum("container").find('span[data-color="' + colorToChoose + '"]');
595 ok(selectedColor.length === 0, "Selected color should not be available in instances with other storageKey.");
596
597 firstEl.spectrum("destroy");
598 secondEl.spectrum("destroy");
599
600 delete window.localStorage["spectrum.test_1"];
601 delete window.localStorage["spectrum.test_2"];
602});
603
604test( "Cancelling reverts color", function() {
605 var el = $("<input value='red' />").spectrum();
606 el.spectrum("show");
607 equal ( el.spectrum("get").toName(), "red", "Color is initialized");
608 el.spectrum("set", "orange");
609 equal ( el.spectrum("get").toName(), "orange", "Color is set");
610 el.spectrum("container").find(".sp-cancel").click();
611 equal ( el.spectrum("get").toName(), "red", "Color is reverted after clicking 'cancel'");
612 el.spectrum("destroy");
613});
614
615test( "Choosing updates the color", function() {
616 var el = $("<input value='red' />").spectrum();
617 el.spectrum("show");
618 equal ( el.spectrum("get").toName(), "red", "Color is initialized");
619 el.spectrum("set", "orange");
620 equal ( el.spectrum("get").toName(), "orange", "Color is set");
621 el.spectrum("container").find(".sp-choose").click();
622 equal ( el.spectrum("get").toName(), "orange", "Color is kept after clicking 'choose'");
623 el.spectrum("destroy");
624});
625
626test( "Custom offset", function() {
627 var el = $("<input value='red' />").spectrum();
628 el.spectrum("show");
629 deepEqual (el.spectrum("container").offset(), {top: 0, left: 0});
630 el.spectrum("hide");
631 el.spectrum("offset", {top: 10, left: 10});
632 el.spectrum("show");
633 deepEqual (el.spectrum("container").offset(), {top: 10, left: 10});
634 el.spectrum("hide");
635 el.spectrum("offset", null);
636 el.spectrum("show");
637 deepEqual (el.spectrum("container").offset(), {top: 0, left: 0});
638 el.spectrum("hide");
639 el.spectrum("destroy");
640
641 var el2 = $("<input value='red' />").spectrum({
642 offset: { top: 100, left: 100 }
643 });
644 el2.spectrum("show");
645 deepEqual (el2.spectrum("container").offset(), {top: 100, left: 100});
646 el2.spectrum("hide");
647});
Note: See TracBrowser for help on using the repository browser.