ElementDataAttributesSpec.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. describe("Element Data Attributes Tests", function() {
  2. var slider;
  3. it("reads the 'data-slider-min' property and sets it on slider", function() {
  4. slider = $("#minSlider").slider();
  5. slider.slider('setValue', 1);
  6. var sliderValue = slider.slider('getValue');
  7. expect(sliderValue).toBe(5);
  8. });
  9. it("reads the 'data-slider-max' property and sets it on slider", function() {
  10. slider = $("#maxSlider").slider();
  11. slider.slider('setValue', 10);
  12. var sliderValue = slider.slider('getValue');
  13. expect(sliderValue).toBe(5);
  14. });
  15. it("reads the 'data-slider-step' property and sets it on slider", function() {
  16. slider = $("#stepSlider").slider();
  17. //TODO How do you test this? Maybe manually trigger a slideChange event?
  18. expect(true).toBeTruthy();
  19. });
  20. it("reads the 'data-slider-precision' property (which is set to 2) and sets it on slider", function() {
  21. slider = $("#precisionSlider").slider();
  22. slider.slider('setValue', 8.115);
  23. var sliderValue = slider.slider('getValue');
  24. expect(sliderValue).toBe(8.12);
  25. });
  26. it("reads the 'data-slider-orientation' property and sets it on slider", function() {
  27. slider = $("#orientationSlider").slider();
  28. var orientationIsVertical = $("#orientationSlider").data('slider').options.orientation === 'vertical';
  29. expect(orientationIsVertical).toBeTruthy();
  30. });
  31. it("reads the 'data-slider-value' property and sets it on slider", function() {
  32. slider = $("#valueSlider").slider();
  33. var sliderValue = slider.slider('getValue');
  34. expect(sliderValue).toBe(5);
  35. });
  36. it("reads the 'data-slider-ticks-labels' property and sets it on slider", function() {
  37. slider = $("#sliderWithTickMarksAndLabels").slider();
  38. var ticksLabelsAreCorrect = arraysEqual($("#sliderWithTickMarksAndLabels").data('slider').options.ticks_labels, ['$0', '$100', '$200', '$300', '$400']);
  39. expect(ticksLabelsAreCorrect).toBeTruthy();
  40. function arraysEqual(a, b) {
  41. if (a === b) {return true;}
  42. if (a == null || b == null){return false;}
  43. if (a.length !== b.length) {return false;}
  44. for (var i = 0; i < a.length; ++i) {
  45. if (a[i] !== b[i]) {return false;}
  46. }
  47. return true;
  48. }
  49. });
  50. it("reads the 'data-slider-selection' property and sets it on slider", function() {
  51. slider = $("#selectionSlider").slider({
  52. id: "selectionSliderId"
  53. });
  54. slider.slider('setValue', 0);
  55. var newSliderValue = slider.slider('getValue');
  56. expect(newSliderValue).toBe(0);
  57. });
  58. it("reads the 'data-slider-tooltip' property and sets it on slider", function() {
  59. slider = $("#tooltipSlider").slider({
  60. id: "tooltipSliderElem"
  61. });
  62. var tooltipIsHidden = $("#tooltipSliderElem").children("div.tooltip").hasClass("hide");
  63. expect(tooltipIsHidden).toBeTruthy();
  64. });
  65. describe("reads the 'data-slider-handle' property and sets it on slider", function() {
  66. it("applies 'triangle' class tag to handle", function() {
  67. slider = $("#handleSlider").slider({
  68. id: "handleSliderElem"
  69. });
  70. var handleIsSetToTriangle = $("#handleSliderElem div.slider-handle").hasClass("triangle");
  71. expect(handleIsSetToTriangle).toBeTruthy();
  72. });
  73. it("applies 'custom' class tag to handle", function() {
  74. slider = $("#customHandleSlider").slider({
  75. id: "customHandleSliderElem"
  76. });
  77. var handleIsSetToCustom = $("#customHandleSliderElem div.slider-handle").hasClass("custom");
  78. expect(handleIsSetToCustom).toBeTruthy();
  79. });
  80. });
  81. it("reads the 'data-slider-reversed' property and sets it on slider", function() {
  82. slider = $("#reversedSlider").slider({
  83. id: "reversedSliderElem"
  84. });
  85. slider.slider('setValue', 10);
  86. var sliderSelectionHeightAtMaxValue = $("#reversedSliderElem div.slider-track").children("div.slider-selection").width();
  87. expect(sliderSelectionHeightAtMaxValue).toBe(0);
  88. });
  89. it("reads the 'data-slider-enabled' property and sets it on slider", function() {
  90. slider = $("#disabledSlider").slider();
  91. var isEnabled = slider.slider('isEnabled');
  92. expect(isEnabled).not.toBeTruthy();
  93. });
  94. it("always sets the 'value' attribute of the original <input> element to be the current slider value", function() {
  95. var $slider = $("#testSliderGeneric");
  96. var val = 7;
  97. slider = $slider.slider({
  98. value: val
  99. });
  100. var sliderValueAttrib = $slider.val();
  101. var valAsString = val.toString();
  102. expect(sliderValueAttrib).toBe(valAsString);
  103. });
  104. it("always sets the 'data-value' attribute of the original <input> element to be the current slider value", function() {
  105. // Setup
  106. var sliderInputElem = document.getElementById("testSliderGeneric");
  107. var val = 7;
  108. slider = new Slider(sliderInputElem, {
  109. value: val
  110. });
  111. // Assert
  112. expect(sliderInputElem.dataset.value).toBe( val.toString() );
  113. // Cleanup
  114. slider.destroy();
  115. slider = null;
  116. });
  117. afterEach(function() {
  118. if(slider) { slider.slider('destroy'); }
  119. });
  120. describe("Test element attribute values after calling 'setValue()'", function() {
  121. var sliderObj;
  122. afterEach(function() {
  123. if (sliderObj) {
  124. sliderObj.destroy();
  125. sliderObj = null;
  126. }
  127. });
  128. it("The 'data-value' attribute of the original <input> element should equal the new value", function() {
  129. // Setup
  130. var sliderInputElem = document.getElementById("testSliderGeneric");
  131. var newVal = 7;
  132. sliderObj = new Slider(sliderInputElem, {
  133. min: 0,
  134. max: 10,
  135. value: 5
  136. });
  137. sliderObj.setValue(newVal);
  138. expect(sliderInputElem.dataset.value).toBe(newVal.toString());
  139. });
  140. it("The 'value' attribute of the original <input> element should equal the new value", function() {
  141. var sliderInputElem = document.getElementById("testSliderGeneric");
  142. var newVal = 7;
  143. sliderObj = new Slider(sliderInputElem, {
  144. min: 0,
  145. max: 10,
  146. value: 5
  147. });
  148. sliderObj.setValue(newVal);
  149. var sliderValueAttrib = sliderInputElem.getAttribute('value');
  150. expect(sliderValueAttrib).toBe(newVal.toString());
  151. });
  152. it("The 'value' property of the original <input> element should equal the new value", function() {
  153. var sliderInputElem = document.getElementById("testSliderGeneric");
  154. var newVal = 7;
  155. sliderObj = new Slider(sliderInputElem, {
  156. min: 0,
  157. max: 10,
  158. value: 5
  159. });
  160. sliderObj.setValue(newVal);
  161. expect(sliderInputElem.value).toBe(newVal.toString());
  162. });
  163. });
  164. });