color-picker.spec.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. import { createTest, createVue, destroyVM } from '../util';
  2. import ColorPicker from 'packages/color-picker';
  3. describe('ColorPicker', () => {
  4. let vm;
  5. afterEach(() => {
  6. vm.$destroy(true);
  7. destroyVM(vm);
  8. const dropdown = document.querySelector('.el-color-dropdown');
  9. if (dropdown && dropdown.parentNode) dropdown.parentNode.removeChild(dropdown);
  10. });
  11. it('should work', () => {
  12. vm = createTest(ColorPicker, true);
  13. expect(vm.$el).to.exist;
  14. });
  15. it('should show alpha slider when show-alpha=true', (done) => {
  16. const vm = createVue({
  17. template: `
  18. <el-color-picker v-model="color" show-alpha></el-color-picker>
  19. `,
  20. data() {
  21. return {
  22. color: null
  23. };
  24. }
  25. }, true);
  26. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  27. trigger.click();
  28. setTimeout(() => {
  29. const alphaSlider = document.querySelector('.el-color-alpha-slider');
  30. expect(alphaSlider).to.exist;
  31. done();
  32. }, ANIMATION_TIME);
  33. });
  34. it('should show color picker when click trigger', (done) => {
  35. vm = createTest(ColorPicker, true);
  36. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  37. trigger.click();
  38. vm.$nextTick(() => {
  39. const dropdown = document.querySelector('.el-color-dropdown');
  40. expect(dropdown).to.exist;
  41. done();
  42. });
  43. });
  44. const ANIMATION_TIME = 300;
  45. it('should pick a color when confirm button click', (done) => {
  46. const vm = createVue({
  47. template: `
  48. <el-color-picker v-model="color"></el-color-picker>
  49. `,
  50. data() {
  51. return {
  52. color: null
  53. };
  54. }
  55. }, true);
  56. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  57. trigger.click();
  58. setTimeout(() => {
  59. const dropdown = document.querySelector('.el-color-dropdown__btn');
  60. dropdown.click();
  61. vm.$nextTick(() => {
  62. expect(vm.color).to.equal('#FF0000');
  63. done();
  64. });
  65. }, ANIMATION_TIME);
  66. });
  67. it('should show correct rgb value', (done) => {
  68. const vm = createVue({
  69. template: `
  70. <el-color-picker v-model="color"></el-color-picker>
  71. `,
  72. data() {
  73. return {
  74. color: '#20A0FF'
  75. };
  76. }
  77. }, true);
  78. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  79. trigger.click();
  80. setTimeout(() => {
  81. const input = document.querySelector('.el-color-dropdown__value input');
  82. expect(input.value.trim().toUpperCase()).to.equal('#20A0FF');
  83. done();
  84. }, ANIMATION_TIME);
  85. });
  86. it('should init the right color when open', (done) => {
  87. const vm = createVue({
  88. template: `
  89. <el-color-picker v-model="color"></el-color-picker>
  90. `,
  91. data() {
  92. return {
  93. color: '#0f0'
  94. };
  95. }
  96. }, true);
  97. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  98. trigger.click();
  99. setTimeout(() => {
  100. const dropdown = document.querySelector('.el-color-dropdown__btn');
  101. dropdown.click();
  102. vm.$nextTick(() => {
  103. const hueBar = document.querySelector('.el-color-hue-slider__thumb');
  104. const top = parseInt(hueBar.style.top, 10);
  105. expect(top > 10).to.be.true;
  106. done();
  107. });
  108. }, ANIMATION_TIME);
  109. });
  110. it('should clear a color when clear button click', (done) => {
  111. const vm = createVue({
  112. template: `
  113. <el-color-picker v-model="color"></el-color-picker>
  114. `,
  115. data() {
  116. return {
  117. color: '#f00'
  118. };
  119. }
  120. }, true);
  121. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  122. trigger.click();
  123. setTimeout(() => {
  124. const clearBtn = document.querySelector('.el-color-dropdown__link-btn');
  125. clearBtn.click();
  126. setTimeout(() => {
  127. expect(vm.color).to.equal(null);
  128. done();
  129. }, 30);
  130. }, ANIMATION_TIME);
  131. });
  132. it('should change hue when clicking the hue bar', (done) => {
  133. const vm = createVue({
  134. template: `
  135. <el-color-picker v-model="color"></el-color-picker>
  136. `,
  137. data() {
  138. return {
  139. color: '#f00'
  140. };
  141. }
  142. }, true);
  143. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  144. trigger.click();
  145. setTimeout(() => {
  146. const hueBar = document.querySelector('.el-color-hue-slider');
  147. hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
  148. vm.$nextTick(() => {
  149. const picker = vm.$children[0];
  150. expect(picker.color._hue > 0).to.true;
  151. done();
  152. });
  153. }, ANIMATION_TIME);
  154. });
  155. it('should change hue when saturation is zero', (done) => {
  156. const vm = createVue({
  157. template: `
  158. <el-color-picker v-model="color"></el-color-picker>
  159. `,
  160. data() {
  161. return {
  162. color: '#FFFFFF'
  163. };
  164. }
  165. }, true);
  166. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  167. trigger.click();
  168. setTimeout(() => {
  169. const hueBar = document.querySelector('.el-color-hue-slider');
  170. hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
  171. vm.$nextTick(() => {
  172. const thumb = document.querySelector('.el-color-hue-slider__thumb');
  173. expect(parseInt(thumb.style.top, 10) > 0).to.true;
  174. done();
  175. });
  176. }, ANIMATION_TIME);
  177. });
  178. it('should change alpha when clicking the alpha bar', (done) => {
  179. const vm = createVue({
  180. template: `
  181. <el-color-picker v-model="color" show-alpha></el-color-picker>
  182. `,
  183. data() {
  184. return {
  185. color: '#f00'
  186. };
  187. }
  188. }, true);
  189. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  190. trigger.click();
  191. setTimeout(() => {
  192. const alphaBar = document.querySelector('.el-color-alpha-slider');
  193. alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
  194. vm.$nextTick(() => {
  195. const picker = vm.$children[0];
  196. expect(picker.color._alpha < 100).to.true;
  197. done();
  198. });
  199. }, ANIMATION_TIME);
  200. });
  201. it('should change saturation and value when clicking the sv-panel', (done) => {
  202. const vm = createVue({
  203. template: `
  204. <el-color-picker v-model="color" color-format="hsv"></el-color-picker>
  205. `,
  206. data() {
  207. return {
  208. color: 'hsv(0, 50%, 50%)'
  209. };
  210. }
  211. }, true);
  212. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  213. trigger.click();
  214. setTimeout(() => {
  215. const svPanel = document.querySelector('.el-color-svpanel');
  216. svPanel.__vue__.handleDrag({ clientX: 0, clientY: 0 });
  217. vm.$nextTick(() => {
  218. const picker = vm.$children[0];
  219. expect(picker.color._saturation !== 50).to.true;
  220. expect(picker.color._value !== 50).to.true;
  221. done();
  222. });
  223. }, ANIMATION_TIME);
  224. });
  225. it('should change color to the selected color', done => {
  226. const vm = createVue({
  227. template: `
  228. <el-color-picker v-model="color" show-alpha :predefine="colors"></el-color-picker>
  229. `,
  230. data() {
  231. return {
  232. color: 'hsva(180, 65, 20, 0.5)',
  233. colors: [
  234. 'rgba(19, 206, 102, 0.18)',
  235. 'rgb(25, 159, 147)',
  236. 'hsv(250, 54, 98)',
  237. 'hsva(180, 65, 20, 0.5)',
  238. 'hsl(170, 32%, 87%)',
  239. 'hsla(45, 62%, 47%, 0.13)',
  240. '#7486de',
  241. '#45aa9477',
  242. '#892345'
  243. ]
  244. };
  245. }
  246. }, true);
  247. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  248. trigger.click();
  249. setTimeout(() => {
  250. expect(document.querySelectorAll('.el-color-predefine__color-selector').length === 9).to.be.true;
  251. const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');
  252. selector.click();
  253. vm.$nextTick(() => {
  254. const picker = vm.$children[0];
  255. expect(picker.color._hue === 180).to.be.true;
  256. expect(picker.color._saturation === 65).to.be.true;
  257. expect(picker.color._value === 20).to.be.true;
  258. expect(picker.color._alpha === 50).to.be.true;
  259. const selector2 = document.querySelector('.el-color-predefine__color-selector:nth-child(3)');
  260. selector2.click();
  261. vm.$nextTick(() => {
  262. expect(picker.color._hue === 250).to.be.true;
  263. expect(picker.color._saturation === 54).to.be.true;
  264. expect(picker.color._value === 98).to.be.true;
  265. expect(picker.color._alpha === 100).to.be.true;
  266. done();
  267. });
  268. });
  269. });
  270. });
  271. it('should change selected state of predefined color', done => {
  272. const vm = createVue({
  273. template: `
  274. <el-color-picker v-model="color" show-alpha :predefine="colors"></el-color-picker>
  275. `,
  276. data() {
  277. return {
  278. color: 'hsva(180, 65, 20, 0.5)',
  279. colors: [
  280. 'rgba(19, 206, 102, 0.18)',
  281. 'rgb(25, 159, 147)',
  282. 'hsv(250, 54, 98)',
  283. 'hsva(180, 65, 20, 0.5)',
  284. 'hsl(170, 32%, 87%)',
  285. 'hsla(45, 62%, 47%, 0.13)',
  286. '#7486de',
  287. '#45aa9477',
  288. '#892345'
  289. ]
  290. };
  291. }
  292. }, true);
  293. const trigger = vm.$el.querySelector('.el-color-picker__trigger');
  294. trigger.click();
  295. setTimeout(() => {
  296. const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');
  297. selector.click();
  298. vm.$nextTick(() => {
  299. expect(selector.classList.contains('selected')).to.be.true;
  300. const hueBar = document.querySelector('.el-color-hue-slider');
  301. hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
  302. vm.$nextTick(() => {
  303. expect(selector.classList.contains('selected')).to.be.false;
  304. done();
  305. });
  306. });
  307. });
  308. });
  309. });