1.
// Spectrum Colorpicker Tests
2.
// https://github.com/bgrins/spectrum
3.
// Author: Brian Grinstead
4.
// License: MIT
5.
6.
// Pretend like the color inputs aren't supported for initial load.
7.
$.fn.spectrum.inputTypeColorSupport = function () {
8.
return false;
9.
};
10.
11.
QUnit.module("Initialization");
12.
13.
QUnit.test("jQuery Plugin Can Be Created", function (assert) {
14.
var el = $("<input id='spec' />").spectrum();
15.
16.
assert.ok(el.attr("id") === "spec", "Element returned from plugin");
17.
18.
el.spectrum("set", "red");
19.
assert.equal(el.spectrum("get").toName(), "red", "Basic color setting");
20.
21.
assert.equal(
22.
el.spectrum("option", "showInput"),
23.
false,
24.
"Undefined option is false."
25.
);
26.
27.
el.spectrum({ showInput: true });
28.
29.
assert.equal(
30.
el.spectrum("option", "showInput"),
31.
true,
32.
"Double initialized spectrum is destroyed before recreating."
33.
);
34.
35.
el.spectrum("destroy");
36.
37.
assert.equal(
38.
el.spectrum("container"),
39.
el,
40.
"After destroying spectrum, string function returns input."
41.
);
42.
});
43.
44.
QUnit.test("Polyfill", function (assert) {
45.
var el = $("#type-color-on-page");
46.
assert.ok(
47.
el.spectrum("get").toHex,
48.
"The input[type=color] has been initialized on load"
49.
);
50.
el.spectrum("destroy");
51.
52.
// Pretend like the color inputs are supported.
53.
$.fn.spectrum.inputTypeColorSupport = function () {
54.
return true;
55.
};
56.
57.
el = $("<input type='color' value='red' />").spectrum({
58.
allowEmpty: true,
59.
});
60.
el.spectrum("set", null);
61.
assert.ok(el.spectrum("get"), "input[type] color does not allow null values");
62.
el.spectrum("destroy");
63.
});
64.
65.
QUnit.test("Per-element Options Are Read From Data Attributes", function (
66.
assert
67.
) {
68.
var el = $("<input id='spec' data-show-alpha='true' />").spectrum();
69.
70.
assert.equal(
71.
el.spectrum("option", "showAlpha"),
72.
true,
73.
"Took showAlpha value from data attribute"
74.
);
75.
76.
el.spectrum("destroy");
77.
78.
var changeDefault = $("<input id='spec' data-show-alpha='false' />").spectrum(
79.
{
80.
showAlpha: true,
81.
}
82.
);
83.
84.
assert.equal(
85.
changeDefault.spectrum("option", "showAlpha"),
86.
true,
87.
"Took showAlpha value from options arg"
88.
);
89.
90.
changeDefault.spectrum("destroy");
91.
92.
var noData = $("<input id='spec' />").spectrum({
93.
showAlpha: true,
94.
});
95.
96.
assert.equal(
97.
noData.spectrum("option", "showAlpha"),
98.
true,
99.
"Kept showAlpha without data attribute"
100.
);
101.
102.
noData.spectrum("destroy");
103.
});
104.
105.
QUnit.test("Events Fire", function (assert) {
106.
assert.expect(4);
107.
var count = 0;
108.
var el = $("<input id='spec' />").spectrum();
109.
110.
el.on("beforeShow.spectrum", function (e) {
111.
// Cancel the event the first time
112.
if (count === 0) {
113.
assert.ok(true, "Cancel beforeShow");
114.
count++;
115.
return false;
116.
}
117.
118.
assert.equal(count, 1, "Allow beforeShow");
119.
count++;
120.
});
121.
122.
el.on("show.spectrum", function (e) {
123.
assert.equal(count, 2, "Show");
124.
count++;
125.
});
126.
127.
el.on("hide.spectrum", function (e) {
128.
assert.equal(count, 3, "Hide");
129.
count++;
130.
});
131.
132.
el.on("move.spectrum", function (e) {
133.
assert.ok(false, "Change should not fire from `move` call");
134.
});
135.
136.
el.on("change", function (e, color) {
137.
assert.ok(false, "Change should not fire from `set` call");
138.
});
139.
140.
el.spectrum("show");
141.
el.spectrum("show");
142.
el.spectrum("hide");
143.
144.
el.spectrum("set", "red");
145.
el.spectrum("destroy");
146.
});
147.
148.
QUnit.test("Events Fire (text input change)", function (assert) {
149.
assert.expect(3);
150.
var count = 0;
151.
var el = $("<input id='spec' />").spectrum({
152.
showInput: true,
153.
});
154.
el.on("move.spectrum", function (e, color) {
155.
assert.equal(count, 0, "Move fires when input changes");
156.
count++;
157.
});
158.
159.
el.on("change.spectrum", function (e, color) {
160.
assert.equal(
161.
count,
162.
2,
163.
"Change should not fire when input changes, only when chosen"
164.
);
165.
count++;
166.
});
167.
168.
el.spectrum("container").find(".sp-input").val("blue").trigger("change");
169.
count++;
170.
el.spectrum("container").find(".sp-choose").click();
171.
el.spectrum("destroy");
172.
173.
assert.equal(count, 3, "All events fired");
174.
});
175.
176.
QUnit.test("Escape hides the colorpicker", function (assert) {
177.
assert.expect(1);
178.
var el = $("<input id='spec' />").spectrum();
179.
el.on("hide.spectrum", function (e) {
180.
assert.ok(true, "Hide event should fire");
181.
});
182.
183.
// Simulate an escape before showing -- should do nothing
184.
var e = jQuery.Event("keydown");
185.
e.keyCode = 27;
186.
$(document).trigger(e);
187.
188.
el.spectrum("show");
189.
190.
// Simulate an escape after showing -- should call the hide handler
191.
$(document).trigger(e);
192.
193.
el.spectrum("destroy");
194.
});
195.
196.
QUnit.test("Dragging", function (assert) {
197.
var el = $("<input id='spec' />").spectrum();
198.
var hueSlider = el.spectrum("container").find(".sp-hue");
199.
200.
assert.ok(hueSlider.length, "There is a hue slider");
201.
202.
hueSlider.trigger("mousedown");
203.
204.
assert.ok($("body").hasClass("sp-dragging"), "The body has dragging class");
205.
206.
hueSlider.trigger("mouseup");
207.
208.
assert.ok(
209.
!$("body").hasClass("sp-dragging"),
210.
"The body does not have a dragging class"
211.
);
212.
213.
el.spectrum("destroy");
214.
});
215.
216.
QUnit.module("Defaults");
217.
218.
QUnit.test("Default Color Is Set By Input Value", function (assert) {
219.
var red = $("<input id='spec' value='red' />").spectrum();
220.
assert.equal(red.spectrum("get").toName(), "red", "Basic color setting");
221.
222.
var noColor = $("<input id='spec' value='not a color' />").spectrum();
223.
assert.equal(
224.
noColor.spectrum("get").toHex(),
225.
"000000",
226.
"Defaults to black with an invalid color"
227.
);
228.
229.
var noValue = $("<input id='spec' />").spectrum();
230.
assert.equal(
231.
noValue.spectrum("get").toHex(),
232.
"000000",
233.
"Defaults to black with no value set"
234.
);
235.
236.
var noValueHex3 = $("<input id='spec' />").spectrum({
237.
preferredFormat: "hex3",
238.
});
239.
assert.equal(
240.
noValueHex3.spectrum("get").toHex(true),
241.
"000",
242.
"Defaults to 3 char hex with no value set"
243.
);
244.
assert.equal(
245.
noValueHex3.spectrum("get").toString(),
246.
"#000",
247.
"Defaults to 3 char hex with no value set"
248.
);
249.
250.
red.spectrum("destroy");
251.
noColor.spectrum("destroy");
252.
noValue.spectrum("destroy");
253.
noValueHex3.spectrum("destroy");
254.
});
255.
256.
QUnit.module("Palettes");
257.
258.
QUnit.test("Palette Events Fire In Correct Order ", function (assert) {
259.
assert.expect(4);
260.
var el = $("<input id='spec' value='red' />").spectrum({
261.
showPalette: true,
262.
palette: [["red", "green", "blue"]],
263.
move: function () {},
264.
});
265.
266.
var count = 0;
267.
el.on("move.spectrum", function (e) {
268.
assert.equal(count, 0, "move fires before change");
269.
count++;
270.
});
271.
272.
el.on("change.spectrum", function (e) {
273.
assert.equal(count, 1, "change fires after move");
274.
count++;
275.
});
276.
277.
el.spectrum("container").find(".sp-thumb-el:last-child").click();
278.
assert.equal(count, 1, "Change event hasn't fired after palette click");
279.
280.
el.spectrum("container").find(".sp-choose").click();
281.
assert.equal(count, 2, "Change event has fired after choose button click");
282.
283.
el.spectrum("destroy");
284.
});
285.
286.
QUnit.test("Palette click events work", function (assert) {
287.
assert.expect(7);
288.
289.
var moveCount = 0;
290.
var moves = ["blue", "green", "red"];
291.
var changeCount = 0;
292.
293.
var el = $("<input id='spec' value='orange' />")
294.
.spectrum({
295.
showPalette: true,
296.
preferredFormat: "name",
297.
palette: [["red", "green", "blue"]],
298.
show: function (c) {
299.
assert.equal(c.toName(), "orange", "correct shown color");
300.
},
301.
move: function (c) {
302.
assert.equal(
303.
c.toName(),
304.
moves[moveCount],
305.
"Move # " + moveCount + " is correct"
306.
);
307.
moveCount++;
308.
},
309.
change: function (c) {
310.
assert.equal(changeCount, 0, "Only one change happens");
311.
assert.equal(c.toName(), "red");
312.
changeCount++;
313.
},
314.
})
315.
.spectrum("show");
316.
317.
el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
318.
el.spectrum("container")
319.
.find(".sp-thumb-el:nth-child(2) .sp-thumb-inner")
320.
.click();
321.
el.spectrum("container")
322.
.find(".sp-thumb-el:nth-child(1) .sp-thumb-inner")
323.
.click();
324.
el.spectrum("container").find(".sp-choose").click();
325.
326.
assert.equal(el.val(), "red", "Element's value is set");
327.
el.spectrum("destroy");
328.
});
329.
330.
QUnit.test("Palette doesn't changes don't stick if cancelled", function (
331.
assert
332.
) {
333.
assert.expect(4);
334.
335.
var moveCount = 0;
336.
var moves = ["blue", "green", "red", "orange"];
337.
var changeCount = 0;
338.
339.
var el = $("<input id='spec' value='orange' />")
340.
.spectrum({
341.
showPalette: true,
342.
preferredFormat: "name",
343.
palette: [["red", "green", "blue"]],
344.
move: function (c) {
345.
assert.equal(
346.
c.toName(),
347.
moves[moveCount],
348.
"Move # " + moveCount + " is correct"
349.
);
350.
moveCount++;
351.
},
352.
change: function (c) {
353.
assert.ok(false, "No change fires");
354.
},
355.
})
356.
.spectrum("show");
357.
358.
el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
359.
el.spectrum("container").find(".sp-thumb-el:nth-child(2)").click();
360.
el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
361.
el.spectrum("container").find(".sp-cancel").click();
362.
363.
assert.equal(el.val(), "orange", "Element's value is the same");
364.
el.spectrum("destroy");
365.
});
366.
367.
QUnit.test(
368.
"hideAfterPaletteSelect: Palette stays open after color select when false",
369.
function (assert) {
370.
var el = $("<input id='spec' value='orange' />").spectrum({
371.
showPalette: true,
372.
hideAfterPaletteSelect: false,
373.
palette: [["red", "green", "blue"]],
374.
});
375.
376.
el.spectrum("show");
377.
el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
378.
379.
assert.ok(
380.
!el.spectrum("container").hasClass("sp-hidden"),
381.
"palette is still visible after color selection"
382.
);
383.
el.spectrum("destroy");
384.
}
385.
);
386.
387.
QUnit.test(
388.
"hideAfterPaletteSelect: Palette closes after color select when true",
389.
function (assert) {
390.
assert.expect(2);
391.
var el = $("<input id='spec' value='orange' />").spectrum({
392.
showPalette: true,
393.
hideAfterPaletteSelect: true,
394.
change: function (c) {
395.
assert.equal(c.toName(), "red", "change fires");
396.
},
397.
palette: [["red", "green", "blue"]],
398.
});
399.
400.
el.spectrum("show");
401.
el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
402.
403.
assert.ok(
404.
el.spectrum("container").hasClass("sp-hidden"),
405.
"palette is still hidden after color selection"
406.
);
407.
el.spectrum("destroy");
408.
}
409.
);
410.
411.
QUnit.test("Local Storage Is Limited ", function (assert) {
412.
var el = $("<input id='spec' value='red' />").spectrum({
413.
localStorageKey: "spectrum.tests",
414.
palette: [["#ff0", "#0ff"]],
415.
maxSelectionSize: 3,
416.
});
417.
418.
el.spectrum("set", "#f00");
419.
el.spectrum("set", "#e00");
420.
el.spectrum("set", "#d00");
421.
el.spectrum("set", "#c00");
422.
el.spectrum("set", "#b00");
423.
el.spectrum("set", "#a00");
424.
425.
assert.equal(
426.
localStorage["spectrum.tests"],
427.
"rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
428.
"Local storage array has been limited"
429.
);
430.
431.
el.spectrum("set", "#ff0");
432.
el.spectrum("set", "#0ff");
433.
434.
assert.equal(
435.
localStorage["spectrum.tests"],
436.
"rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
437.
"Local storage array did not get changed by selecting palette items"
438.
);
439.
el.spectrum("destroy");
440.
});
441.
442.
QUnit.module("Options");
443.
444.
QUnit.test("allowEmpty", function (assert) {
445.
var el = $("<input value='red' />").spectrum({
446.
allowEmpty: true,
447.
});
448.
el.spectrum("set", null);
449.
assert.ok(
450.
!el.spectrum("get"),
451.
"input[type] color does not allow null values"
452.
);
453.
el.spectrum("destroy");
454.
455.
el = $("<input value='red' />").spectrum();
456.
el.spectrum("set", null);
457.
assert.ok(el.spectrum("get"), "input[type] color does not allow null values");
458.
el.spectrum("destroy");
459.
});
460.
461.
QUnit.test("clickoutFiresChange", function (assert) {
462.
var el = $("<input value='red' />").spectrum({
463.
clickoutFiresChange: false,
464.
});
465.
el.spectrum("show");
466.
assert.equal(el.spectrum("get").toName(), "red", "Color is initialized");
467.
el.spectrum("set", "orange");
468.
assert.equal(el.spectrum("get").toName(), "orange", "Color is set");
469.
$(document).click();
470.
assert.equal(
471.
el.spectrum("get").toName(),
472.
"red",
473.
"Color is reverted after clicking 'cancel'"
474.
);
475.
el.spectrum("destroy");
476.
477.
// Try again with default behavior (clickoutFiresChange = true)
478.
el = $("<input value='red' />").spectrum();
479.
el.spectrum("show");
480.
assert.equal(el.spectrum("get").toName(), "red", "Color is initialized");
481.
el.spectrum("set", "orange");
482.
assert.equal(el.spectrum("get").toName(), "orange", "Color is set");
483.
$(document).click();
484.
assert.equal(
485.
el.spectrum("get").toName(),
486.
"orange",
487.
"Color is changed after clicking out"
488.
);
489.
el.spectrum("destroy");
490.
});
491.
492.
QUnit.test("replacerClassName", function (assert) {
493.
var el = $("<input />").appendTo("body").spectrum({
494.
replacerClassName: "test",
495.
});
496.
assert.ok(
497.
el.next(".sp-replacer").hasClass("test"),
498.
"Replacer class has been applied"
499.
);
500.
el.spectrum("destroy").remove();
501.
});
502.
503.
QUnit.test("containerClassName", function (assert) {
504.
var el = $("<input />").appendTo("body").spectrum({
505.
containerClassName: "test",
506.
});
507.
assert.ok(
508.
el.spectrum("container").hasClass("test"),
509.
"Container class has been applied"
510.
);
511.
el.spectrum("destroy").remove();
512.
});
513.
514.
QUnit.test("Options Can Be Set and Gotten Programmatically", function (assert) {
515.
var spec = $("<input id='spec' />").spectrum({
516.
color: "#ECC",
517.
flat: true,
518.
showInput: true,
519.
className: "full-spectrum",
520.
showInitial: true,
521.
showPalette: true,
522.
showSelectionPalette: true,
523.
maxPaletteSize: 10,
524.
preferredFormat: "hex",
525.
localStorageKey: "spectrum.example",
526.
palette: [["red"], ["green"]],
527.
});
528.
529.
var allOptions = spec.spectrum("option");
530.
assert.equal(
531.
allOptions.flat,
532.
true,
533.
"Fetching all options provides accurate value"
534.
);
535.
536.
var singleOption = spec.spectrum("option", "className");
537.
assert.equal(
538.
singleOption,
539.
"full-spectrum",
540.
"Fetching a single option returns that value"
541.
);
542.
543.
spec.spectrum("option", "className", "changed");
544.
singleOption = spec.spectrum("option", "className");
545.
assert.equal(
546.
singleOption,
547.
"changed",
548.
"Changing an option then fetching it is updated"
549.
);
550.
551.
var numPaletteElements = spec
552.
.spectrum("container")
553.
.find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
554.
assert.equal(numPaletteElements, 2, "Two palette elements to start");
555.
spec.spectrum("option", "palette", [["red"], ["green"], ["blue"]]);
556.
var optPalette = spec.spectrum("option", "palette");
557.
assert.deepEqual(
558.
optPalette,
559.
[["red"], ["green"], ["blue"]],
560.
"Changing an option then fetching it is updated"
561.
);
562.
numPaletteElements = spec
563.
.spectrum("container")
564.
.find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
565.
assert.equal(numPaletteElements, 3, "Three palette elements after updating");
566.
567.
var appendToDefault = $("<input />").spectrum({});
568.
569.
var container = $("<div id='c' />").appendTo("body");
570.
var appendToOther = $("<input />").spectrum({
571.
appendTo: container,
572.
});
573.
574.
var appendToParent = $("<input />").appendTo("#c").spectrum({
575.
appendTo: "parent",
576.
});
577.
578.
var appendToOtherFlat = $("<input />").spectrum({
579.
appendTo: container,
580.
flat: true,
581.
});
582.
583.
assert.equal(
584.
appendToDefault.spectrum("container").parent()[0],
585.
document.body,
586.
"Appended to body by default"
587.
);
588.
589.
assert.equal(
590.
appendToOther.spectrum("container").parent()[0],
591.
container[0],
592.
"Can be appended to another element"
593.
);
594.
595.
assert.equal(
596.
appendToOtherFlat.spectrum("container").parent()[0],
597.
$(appendToOtherFlat).parent()[0],
598.
"Flat CANNOT be appended to another element, will be same as input"
599.
);
600.
601.
assert.equal(
602.
appendToParent.spectrum("container").parent()[0],
603.
container[0],
604.
"Passing 'parent' to appendTo works as expected"
605.
);
606.
607.
// Issue #70 - https://github.com/bgrins/spectrum/issues/70
608.
assert.equal(
609.
spec.spectrum("option", "showPalette"),
610.
true,
611.
"showPalette is true by default"
612.
);
613.
spec.spectrum("option", "showPalette", false);
614.
615.
assert.equal(
616.
spec.spectrum("option", "showPalette"),
617.
false,
618.
"showPalette is false after setting showPalette"
619.
);
620.
spec.spectrum("option", "showPaletteOnly", true);
621.
622.
assert.equal(
623.
spec.spectrum("option", "showPaletteOnly"),
624.
true,
625.
"showPaletteOnly is true after setting showPaletteOnly"
626.
);
627.
assert.equal(
628.
spec.spectrum("option", "showPalette"),
629.
true,
630.
"showPalette is true after setting showPaletteOnly"
631.
);
632.
633.
spec.spectrum("destroy");
634.
appendToDefault.spectrum("destroy");
635.
appendToOther.spectrum("destroy");
636.
appendToOtherFlat.spectrum("destroy");
637.
appendToParent.spectrum("destroy").remove();
638.
delete window.localStorage["spectrum.example"];
639.
container.remove();
640.
});
641.
642.
QUnit.test("Show Input works as expected", function (assert) {
643.
var el = $("<input />").spectrum({
644.
showInput: true,
645.
color: "red",
646.
});
647.
var input = el.spectrum("container").find(".sp-input");
648.
649.
assert.equal(input.val(), "red", "Input is set to color by default");
650.
input.val("").trigger("change");
651.
652.
assert.ok(
653.
input.hasClass("sp-validation-error"),
654.
"Input has validation error class after being emptied."
655.
);
656.
657.
input.val("red").trigger("change");
658.
659.
assert.ok(
660.
!input.hasClass("sp-validation-error"),
661.
"Input does not have validation error class after being reset to original color."
662.
);
663.
664.
assert.equal(
665.
el.spectrum("get").toHexString(),
666.
"#ff0000",
667.
"Color is still red"
668.
);
669.
el.spectrum("destroy");
670.
});
671.
672.
QUnit.test("Toggle Picker Area button works as expected", function (assert) {
673.
var div = $(
674.
"<div style='position:absolute; right:0; height:20px; width:150px'>"
675.
)
676.
.appendTo("body")
677.
.show(),
678.
el = $("<input />").appendTo(div);
679.
el.spectrum({
680.
showInput: true,
681.
showPaletteOnly: true,
682.
togglePaletteOnly: true,
683.
color: "red",
684.
});
685.
686.
var spectrum = el.spectrum("container").show(),
687.
toggle = spectrum.find(".sp-palette-toggle"),
688.
picker = spectrum.find(".sp-picker-container"),
689.
palette = spectrum.find(".sp-palette-container");
690.
691.
// Open the Colorpicker
692.
el.spectrum("show");
693.
assert.equal(
694.
picker.is(":hidden"),
695.
true,
696.
"The picker area is hidden by default."
697.
);
698.
assert.ok(
699.
spectrum.hasClass("sp-palette-only"),
700.
"The 'palette-only' class is enabled."
701.
);
702.
703.
// Click the Picker area Toggle button to show the Picker
704.
toggle.click();
705.
706.
assert.equal(
707.
picker.is(":hidden"),
708.
false,
709.
"After toggling, the picker area is visible."
710.
);
711.
assert.ok(
712.
!spectrum.hasClass("sp-palette-only"),
713.
"The 'palette-only' class is disabled."
714.
);
715.
assert.equal(
716.
Math.round(picker.offset().top),
717.
Math.round(palette.offset().top),
718.
"The picker area is next to the palette."
719.
);
720.
721.
// Click the toggle again to hide the picker
722.
toggle.trigger("click");
723.
724.
assert.equal(
725.
picker.is(":hidden"),
726.
true,
727.
"After toggling again, the picker area is hidden."
728.
);
729.
assert.ok(
730.
spectrum.hasClass("sp-palette-only"),
731.
"And the 'palette-only' class is enabled."
732.
);
733.
734.
// Cleanup
735.
el.spectrum("hide");
736.
el.spectrum("destroy");
737.
el.remove();
738.
div.remove();
739.
});
740.
741.
QUnit.test("Tooltip is formatted based on preferred format", function (assert) {
742.
var el = $("<input />").spectrum({
743.
showInput: true,
744.
color: "red",
745.
showPalette: true,
746.
palette: [["red", "rgba(255, 255, 255, .5)", "rgb(0, 0, 255)"]],
747.
});
748.
el.spectrum("show");
749.
750.
function getTitlesString() {
751.
return el
752.
.spectrum("container")
753.
.find(".sp-thumb-el")
754.
.map(function () {
755.
return this.getAttribute("title");
756.
})
757.
.toArray()
758.
.join(" ");
759.
}
760.
761.
assert.equal(
762.
getTitlesString(),
763.
"rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)",
764.
"Titles use rgb format by default"
765.
);
766.
767.
el.spectrum("option", "preferredFormat", "hex");
768.
assert.equal(
769.
getTitlesString(),
770.
"#ff0000 #ffffff #0000ff",
771.
"Titles are updated to hex"
772.
);
773.
assert.equal(
774.
el.spectrum("get").toString(),
775.
"#ff0000",
776.
"Value's format is updated"
777.
);
778.
779.
el.spectrum("option", "preferredFormat", "hex6");
780.
assert.equal(
781.
getTitlesString(),
782.
"#ff0000 #ffffff #0000ff",
783.
"Titles are updated to hex6"
784.
);
785.
assert.equal(
786.
el.spectrum("get").toString(),
787.
"#ff0000",
788.
"Value's format is updated"
789.
);
790.
791.
el.spectrum("option", "preferredFormat", "hex3");
792.
assert.equal(
793.
getTitlesString(),
794.
"#f00 #fff #00f",
795.
"Titles are updated to hex3"
796.
);
797.
assert.equal(
798.
el.spectrum("get").toString(),
799.
"#f00",
800.
"Value's format is updated"
801.
);
802.
803.
el.spectrum("option", "preferredFormat", "name");
804.
assert.equal(
805.
getTitlesString(),
806.
"red #ffffff blue",
807.
"Titles are updated to name"
808.
);
809.
assert.equal(
810.
el.spectrum("get").toString(),
811.
"red",
812.
"Value's format is updated"
813.
);
814.
815.
el.spectrum("option", "preferredFormat", "hsv");
816.
assert.equal(
817.
getTitlesString(),
818.
"hsv(0, 100%, 100%) hsva(0, 0%, 100%, 0.5) hsv(240, 100%, 100%)",
819.
"Titles are updated to hsv"
820.
);
821.
assert.equal(
822.
el.spectrum("get").toString(),
823.
"hsv(0, 100%, 100%)",
824.
"Value's format is updated"
825.
);
826.
827.
el.spectrum("option", "preferredFormat", "hsl");
828.
assert.equal(
829.
getTitlesString(),
830.
"hsl(0, 100%, 50%) hsla(0, 0%, 100%, 0.5) hsl(240, 100%, 50%)",
831.
"Titles are updated to hsl"
832.
);
833.
assert.equal(
834.
el.spectrum("get").toString(),
835.
"hsl(0, 100%, 50%)",
836.
"Value's format is updated"
837.
);
838.
839.
el.spectrum("option", "preferredFormat", "rgb");
840.
assert.equal(
841.
getTitlesString(),
842.
"rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)",
843.
"Titles are updated to rgb"
844.
);
845.
assert.equal(
846.
el.spectrum("get").toString(),
847.
"rgb(255, 0, 0)",
848.
"Value's format is updated"
849.
);
850.
851.
el.spectrum("destroy");
852.
});
853.
854.
QUnit.module("Methods");
855.
856.
QUnit.test("Methods work as described", function (assert) {
857.
var el = $("<input id='spec' />").spectrum();
858.
859.
// Method - show
860.
el.spectrum("show");
861.
assert.ok(el.spectrum("container").is(":visible"), "Spectrum is visible");
862.
863.
// Method - hide
864.
el.spectrum("hide");
865.
assert.ok(
866.
el.spectrum("container").not(":visible"),
867.
"Spectrum is no longer visible"
868.
);
869.
870.
// Method - toggle
871.
el.spectrum("toggle");
872.
assert.ok(
873.
el.spectrum("container").is(":visible"),
874.
"Spectrum is visible after toggle"
875.
);
876.
877.
el.spectrum("toggle");
878.
assert.ok(
879.
el.spectrum("container").not(":visible"),
880.
"Spectrum is no longer visible after toggle"
881.
);
882.
883.
// Method - set / get
884.
el.spectrum("set", "orange");
885.
var color = el.spectrum("get", "color");
886.
887.
assert.ok(
888.
color.toHexString() == "#ffa500",
889.
"Color has been set and gotten as hex"
890.
);
891.
assert.ok(
892.
color.toName() == "orange",
893.
"Color has been set and gotten as name"
894.
);
895.
assert.ok(
896.
color.toHsvString() == "hsv(39, 100%, 100%)",
897.
"Color has been set and gotten as hsv"
898.
);
899.
assert.ok(
900.
color.toRgbString() == "rgb(255, 165, 0)",
901.
"Color has been set and gotten as rgb"
902.
);
903.
assert.ok(
904.
color.toHslString() == "hsl(39, 100%, 50%)",
905.
"Color has been set and gotten as hsl"
906.
);
907.
assert.ok(
908.
(function () {
909.
var i, argb, a;
910.
for (i = 0; i < 16; i++) {
911.
argb = "0" + i.toString(16) + "000000";
912.
a = Math.round(
913.
el.spectrum("set", argb).spectrum("get").getAlpha() * 255
914.
);
915.
if (a != i) {
916.
return false;
917.
}
918.
}
919.
return true;
920.
})(),
921.
"Set and get has preserved alpha resolution"
922.
);
923.
924.
// Method - container
925.
assert.ok(
926.
el.spectrum("container").hasClass("sp-container"),
927.
"Container can be retrieved"
928.
);
929.
930.
// Method - disable
931.
el.spectrum("disable");
932.
assert.ok(el.is(":disabled"), "Can be disabled");
933.
934.
el.spectrum("show");
935.
assert.ok(el.not(":visible"), "Cannot show when disabled");
936.
937.
// Method - enable
938.
el.spectrum("enable");
939.
assert.ok(!el.is(":disabled"), "Can be enabled");
940.
941.
// Method - reflow
942.
el.spectrum("reflow");
943.
944.
// Method - throw exception when not existing
945.
assert.throws(function () {
946.
el.spectrum("no method");
947.
}, "Expecting exception to be thrown when calling with no method");
948.
949.
// Method - destroy
950.
el.spectrum("destroy");
951.
952.
assert.equal(el.spectrum("container"), el, "No usage after being destroyed");
953.
assert.equal(el.spectrum("get"), el, "No usage after being destroyed");
954.
955.
el.spectrum("destroy");
956.
});
957.
958.
// https://github.com/bgrins/spectrum/issues/97
959.
QUnit.test("Change events fire as described", function (assert) {
960.
assert.expect(0);
961.
var input = $("<input />");
962.
963.
input.on("change", function () {
964.
assert.ok(false, "Change should not be fired inside of input change");
965.
});
966.
967.
input.spectrum({
968.
color: "red",
969.
change: function () {
970.
assert.ok(
971.
false,
972.
"Change should not be fired inside of spectrum callback"
973.
);
974.
},
975.
});
976.
977.
input.spectrum("set", "orange");
978.
});
979.
980.
QUnit.test(
981.
"The selectedPalette should be updated in each spectrum instance, when storageKeys are identical.",
982.
function (assert) {
983.
delete window.localStorage["spectrum.tests"];
984.
985.
var colorToChoose = "rgb(0, 244, 0)";
986.
var firstEl = $("<input id='firstEl' value='red' />").spectrum({
987.
showPalette: true,
988.
localStorageKey: "spectrum.tests",
989.
});
990.
var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
991.
showPalette: true,
992.
localStorageKey: "spectrum.tests",
993.
});
994.
995.
firstEl.spectrum("set", colorToChoose);
996.
997.
secondEl.spectrum("toggle");
998.
999.
var selectedColor = secondEl
1000.
.spectrum("container")
1001.
.find('span[data-color="' + colorToChoose + '"]');
1002.
assert.ok(
1003.
selectedColor.length > 0,
1004.
"Selected color is also shown in the others instance's palette."
1005.
);
1006.
1007.
delete window.localStorage["spectrum.tests"];
1008.
1009.
firstEl.spectrum("destroy");
1010.
secondEl.spectrum("destroy");
1011.
}
1012.
);
1013.
1014.
QUnit.test(
1015.
"The selectedPalette should not be updated in spectrum instances that have different storageKeys.",
1016.
function (assert) {
1017.
delete window.localStorage["spectrum.test_1"];
1018.
delete window.localStorage["spectrum.test_2"];
1019.
1020.
var colorToChoose = "rgb(0, 244, 0)";
1021.
var firstEl = $("<input id='firstEl' value='red' />").spectrum({
1022.
showPalette: true,
1023.
localStorageKey: "spectrum.test_1",
1024.
});
1025.
var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
1026.
showPalette: true,
1027.
localStorageKey: "spectrum.test_2",
1028.
});
1029.
1030.
firstEl.spectrum("set", colorToChoose);
1031.
1032.
secondEl.spectrum("toggle");
1033.
1034.
var selectedColor = secondEl
1035.
.spectrum("container")
1036.
.find('span[data-color="' + colorToChoose + '"]');
1037.
assert.ok(
1038.
selectedColor.length === 0,
1039.
"Selected color should not be available in instances with other storageKey."
1040.
);
1041.
1042.
firstEl.spectrum("destroy");
1043.
secondEl.spectrum("destroy");
1044.
1045.
delete window.localStorage["spectrum.test_1"];
1046.
delete window.localStorage["spectrum.test_2"];
1047.
}
1048.
);
1049.
1050.
QUnit.test("Cancelling reverts color", function (assert) {
1051.
var el = $("<input value='red' />").spectrum();
1052.
el.spectrum("show");
1053.
assert.equal(el.spectrum("get").toName(), "red", "Color is initialized");
1054.
el.spectrum("set", "orange");
1055.
assert.equal(el.spectrum("get").toName(), "orange", "Color is set");
1056.
el.spectrum("container").find(".sp-cancel").click();
1057.
assert.equal(
1058.
el.spectrum("get").toName(),
1059.
"red",
1060.
"Color is reverted after clicking 'cancel'"
1061.
);
1062.
el.spectrum("destroy");
1063.
});
1064.
1065.
QUnit.test("Choosing updates the color", function (assert) {
1066.
var el = $("<input value='red' />").spectrum();
1067.
el.spectrum("show");
1068.
assert.equal(el.spectrum("get").toName(), "red", "Color is initialized");
1069.
el.spectrum("set", "orange");
1070.
assert.equal(el.spectrum("get").toName(), "orange", "Color is set");
1071.
el.spectrum("container").find(".sp-choose").click();
1072.
assert.equal(
1073.
el.spectrum("get").toName(),
1074.
"orange",
1075.
"Color is kept after clicking 'choose'"
1076.
);
1077.
el.spectrum("destroy");
1078.
});
1079.
1080.
QUnit.test("Custom offset", function (assert) {
1081.
var el = $("<input value='red' />").spectrum();
1082.
el.spectrum("show");
1083.
assert.deepEqual(el.spectrum("container").offset(), { top: 0, left: 0 });
1084.
el.spectrum("hide");
1085.
el.spectrum("offset", { top: 10, left: 10 });
1086.
el.spectrum("show");
1087.
assert.deepEqual(el.spectrum("container").offset(), { top: 10, left: 10 });
1088.
el.spectrum("hide");
1089.
el.spectrum("offset", null);
1090.
el.spectrum("show");
1091.
assert.deepEqual(el.spectrum("container").offset(), { top: 0, left: 0 });
1092.
el.spectrum("hide");
1093.
el.spectrum("destroy");
1094.
1095.
var el2 = $("<input value='red' />").spectrum({
1096.
offset: { top: 100, left: 100 },
1097.
});
1098.
el2.spectrum("show");
1099.
assert.deepEqual(el2.spectrum("container").offset(), { top: 100, left: 100 });
1100.
el2.spectrum("hide");
1101.
});
1102.