arrow-up.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. describe('keyboard operation - arrow-up', function () {
  2. const replaceInput = () => {
  3. const newInput = document.createElement('input');
  4. testContainer.replaceChild(newInput, input);
  5. return newInput;
  6. };
  7. let input;
  8. beforeEach(function () {
  9. input = document.createElement('input');
  10. testContainer.appendChild(input);
  11. });
  12. afterEach(function () {
  13. testContainer.removeChild(input);
  14. });
  15. it('moves the view date/month/year/decade to 1 step up side', function () {
  16. const clock = sinon.useFakeTimers({now: new Date(2044, 5, 15)});
  17. const {dp, picker} = createDP(input);
  18. const viewSwitch = getViewSwitch(picker);
  19. input.focus();
  20. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  21. expect(viewSwitch.textContent, 'to be', 'June 2044');
  22. let cells = getCells(picker);
  23. expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
  24. expect(cells[10].textContent, 'to be', '8');
  25. viewSwitch.click();
  26. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  27. expect(viewSwitch.textContent, 'to be', '2044');
  28. cells = getCells(picker);
  29. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  30. viewSwitch.click();
  31. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  32. expect(viewSwitch.textContent, 'to be', '2040-2049');
  33. cells = getCells(picker);
  34. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  35. expect(cells[1].textContent, 'to be', '2040');
  36. viewSwitch.click();
  37. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  38. expect(viewSwitch.textContent, 'to be', '2000-2090');
  39. cells = getCells(picker);
  40. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  41. expect(cells[1].textContent, 'to be', '2000');
  42. dp.destroy();
  43. clock.restore();
  44. });
  45. it('also changes month of the days view if the current view date <= 7th', function () {
  46. let clock = sinon.useFakeTimers({now: new Date(2020, 2, 1)});
  47. let {dp, picker} = createDP(input);
  48. let viewSwitch = getViewSwitch(picker);
  49. input.focus();
  50. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  51. expect(viewSwitch.textContent, 'to be', 'February 2020');
  52. let cells = getCells(picker);
  53. expect(filterCells(cells, '.focused'), 'to equal', [cells[28]]);
  54. expect(cells[28].textContent, 'to be', '23');
  55. dp.destroy();
  56. clock.restore();
  57. input = replaceInput();
  58. clock = sinon.useFakeTimers({now: new Date(2020, 2, 4)});
  59. ({dp, picker} = createDP(input));
  60. viewSwitch = getViewSwitch(picker);
  61. input.focus();
  62. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  63. expect(viewSwitch.textContent, 'to be', 'February 2020');
  64. cells = getCells(picker);
  65. expect(filterCells(cells, '.focused'), 'to equal', [cells[31]]);
  66. expect(cells[31].textContent, 'to be', '26');
  67. dp.destroy();
  68. clock.restore();
  69. input = replaceInput();
  70. clock = sinon.useFakeTimers({now: new Date(2020, 2, 7)});
  71. ({dp, picker} = createDP(input));
  72. viewSwitch = getViewSwitch(picker);
  73. input.focus();
  74. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  75. expect(viewSwitch.textContent, 'to be', 'February 2020');
  76. cells = getCells(picker);
  77. expect(filterCells(cells, '.focused'), 'to equal', [cells[34]]);
  78. expect(cells[34].textContent, 'to be', '29');
  79. dp.destroy();
  80. clock.restore();
  81. });
  82. it('also changes year of the months view if the current view month is Jan/Feb/Mar/Apr', function () {
  83. let clock = sinon.useFakeTimers({now: new Date(2020, 0, 1)});
  84. let {dp, picker} = createDP(input);
  85. let viewSwitch = getViewSwitch(picker);
  86. input.focus();
  87. viewSwitch.click();
  88. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  89. expect(viewSwitch.textContent, 'to be', '2019');
  90. let cells = getCells(picker);
  91. expect(filterCells(cells, '.focused'), 'to equal', [cells[8]]);
  92. dp.destroy();
  93. clock.restore();
  94. input = replaceInput();
  95. clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
  96. ({dp, picker} = createDP(input));
  97. viewSwitch = getViewSwitch(picker);
  98. input.focus();
  99. viewSwitch.click();
  100. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  101. expect(viewSwitch.textContent, 'to be', '2019');
  102. cells = getCells(picker);
  103. expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
  104. dp.destroy();
  105. clock.restore();
  106. input = replaceInput();
  107. clock = sinon.useFakeTimers({now: new Date(2020, 2, 1)});
  108. ({dp, picker} = createDP(input));
  109. viewSwitch = getViewSwitch(picker);
  110. input.focus();
  111. viewSwitch.click();
  112. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  113. expect(viewSwitch.textContent, 'to be', '2019');
  114. cells = getCells(picker);
  115. expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
  116. dp.destroy();
  117. clock.restore();
  118. input = replaceInput();
  119. clock = sinon.useFakeTimers({now: new Date(2020, 3, 1)});
  120. ({dp, picker} = createDP(input));
  121. viewSwitch = getViewSwitch(picker);
  122. input.focus();
  123. viewSwitch.click();
  124. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  125. expect(viewSwitch.textContent, 'to be', '2019');
  126. cells = getCells(picker);
  127. expect(filterCells(cells, '.focused'), 'to equal', [cells[11]]);
  128. dp.destroy();
  129. clock.restore();
  130. });
  131. it('also changes decade of the years view if the current view year is the first 4 of the decade', function () {
  132. let clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
  133. let {dp, picker} = createDP(input);
  134. let viewSwitch = getViewSwitch(picker);
  135. input.focus();
  136. viewSwitch.click();
  137. viewSwitch.click();
  138. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  139. expect(viewSwitch.textContent, 'to be', '2010-2019');
  140. let cells = getCells(picker);
  141. expect(filterCells(cells, '.focused'), 'to equal', [cells[7]]);
  142. expect(cells[7].textContent, 'to be', '2016');
  143. dp.destroy();
  144. clock.restore();
  145. input = replaceInput();
  146. clock = sinon.useFakeTimers({now: new Date(2022, 1, 1)});
  147. ({dp, picker} = createDP(input));
  148. viewSwitch = getViewSwitch(picker);
  149. input.focus();
  150. viewSwitch.click();
  151. viewSwitch.click();
  152. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  153. expect(viewSwitch.textContent, 'to be', '2010-2019');
  154. cells = getCells(picker);
  155. expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
  156. expect(cells[9].textContent, 'to be', '2018');
  157. dp.destroy();
  158. clock.restore();
  159. input = replaceInput();
  160. clock = sinon.useFakeTimers({now: new Date(2023, 1, 1)});
  161. ({dp, picker} = createDP(input));
  162. viewSwitch = getViewSwitch(picker);
  163. input.focus();
  164. viewSwitch.click();
  165. viewSwitch.click();
  166. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  167. expect(viewSwitch.textContent, 'to be', '2010-2019');
  168. cells = getCells(picker);
  169. expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
  170. expect(cells[10].textContent, 'to be', '2019');
  171. dp.destroy();
  172. clock.restore();
  173. });
  174. it('also changes century of the decades view if the current view decade is the first 4 of the century', function () {
  175. let clock = sinon.useFakeTimers({now: new Date(2000, 1, 1)});
  176. let {dp, picker} = createDP(input);
  177. let viewSwitch = getViewSwitch(picker);
  178. input.focus();
  179. viewSwitch.click();
  180. viewSwitch.click();
  181. viewSwitch.click();
  182. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  183. expect(viewSwitch.textContent, 'to be', '1900-1990');
  184. let cells = getCells(picker);
  185. expect(filterCells(cells, '.focused'), 'to equal', [cells[7]]);
  186. expect(cells[7].textContent, 'to be', '1960');
  187. dp.destroy();
  188. clock.restore();
  189. input = replaceInput();
  190. clock = sinon.useFakeTimers({now: new Date(2020, 1, 1)});
  191. ({dp, picker} = createDP(input));
  192. viewSwitch = getViewSwitch(picker);
  193. input.focus();
  194. viewSwitch.click();
  195. viewSwitch.click();
  196. viewSwitch.click();
  197. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  198. expect(viewSwitch.textContent, 'to be', '1900-1990');
  199. cells = getCells(picker);
  200. expect(filterCells(cells, '.focused'), 'to equal', [cells[9]]);
  201. expect(cells[9].textContent, 'to be', '1980');
  202. dp.destroy();
  203. clock.restore();
  204. input = replaceInput();
  205. clock = sinon.useFakeTimers({now: new Date(2030, 1, 1)});
  206. ({dp, picker} = createDP(input));
  207. viewSwitch = getViewSwitch(picker);
  208. input.focus();
  209. viewSwitch.click();
  210. viewSwitch.click();
  211. viewSwitch.click();
  212. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  213. expect(viewSwitch.textContent, 'to be', '1900-1990');
  214. cells = getCells(picker);
  215. expect(filterCells(cells, '.focused'), 'to equal', [cells[10]]);
  216. expect(cells[10].textContent, 'to be', '1990');
  217. dp.destroy();
  218. clock.restore();
  219. });
  220. it('does nothing if the current view date <= 0000-01-07 in the days view', function () {
  221. input.value = '01/01/0000';
  222. const {dp, picker} = createDP(input);
  223. const viewSwitch = getViewSwitch(picker);
  224. input.focus();
  225. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  226. expect(viewSwitch.textContent, 'to be', 'January 0');
  227. let cells = getCells(picker);
  228. expect(filterCells(cells, '.focused'), 'to equal', [cells[6]]);
  229. expect(cells[6].textContent, 'to be', '1');
  230. dp.setDate('01/07/0000');
  231. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  232. expect(viewSwitch.textContent, 'to be', 'January 0');
  233. expect(filterCells(cells, '.focused'), 'to equal', [cells[12]]);
  234. expect(cells[12].textContent, 'to be', '7');
  235. dp.destroy();
  236. });
  237. it('does nothing if the current view month <= April 0000 in the months view', function () {
  238. input.value = '01/01/0000';
  239. const {dp, picker} = createDP(input);
  240. const viewSwitch = getViewSwitch(picker);
  241. input.focus();
  242. viewSwitch.click();
  243. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  244. expect(viewSwitch.textContent, 'to be', '0');
  245. let cells = getCells(picker);
  246. expect(filterCells(cells, '.focused'), 'to equal', [cells[0]]);
  247. dp.setDate('04/07/0000');
  248. viewSwitch.click();
  249. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  250. expect(viewSwitch.textContent, 'to be', '0');
  251. expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
  252. dp.destroy();
  253. });
  254. it('does nothing if the current view year <= 0004 in the years view', function () {
  255. input.value = '01/01/0000';
  256. const {dp, picker} = createDP(input);
  257. const viewSwitch = getViewSwitch(picker);
  258. input.focus();
  259. viewSwitch.click();
  260. viewSwitch.click();
  261. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  262. expect(viewSwitch.textContent, 'to be', '0-9');
  263. let cells = getCells(picker);
  264. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  265. expect(cells[1].textContent, 'to be', '0');
  266. dp.setDate('04/07/0004');
  267. viewSwitch.click();
  268. viewSwitch.click();
  269. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  270. expect(viewSwitch.textContent, 'to be', '0-9');
  271. expect(filterCells(cells, '.focused'), 'to equal', [cells[5]]);
  272. expect(cells[5].textContent, 'to be', '4');
  273. dp.destroy();
  274. });
  275. it('does nothing if the current view decade <= 0040 in the decades view', function () {
  276. input.value = '01/01/0000';
  277. const {dp, picker} = createDP(input);
  278. const viewSwitch = getViewSwitch(picker);
  279. input.focus();
  280. viewSwitch.click();
  281. viewSwitch.click();
  282. viewSwitch.click();
  283. simulant.fire(input, 'keydown', {key: 'ArrowLeft'});
  284. expect(viewSwitch.textContent, 'to be', '0-90');
  285. let cells = getCells(picker);
  286. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  287. expect(cells[1].textContent, 'to be', '0');
  288. dp.setDate('04/07/0047');
  289. viewSwitch.click();
  290. viewSwitch.click();
  291. viewSwitch.click();
  292. simulant.fire(input, 'keydown', {key: 'ArrowUp'});
  293. expect(viewSwitch.textContent, 'to be', '0-90');
  294. expect(filterCells(cells, '.focused'), 'to equal', [cells[5]]);
  295. expect(cells[5].textContent, 'to be', '40');
  296. dp.destroy();
  297. });
  298. describe('with control', function () {
  299. it('functions as the shortcut key of the view switch', function () {
  300. const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
  301. const {dp, picker} = createDP(input);
  302. const viewSwitch = getViewSwitch(picker);
  303. input.focus();
  304. simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
  305. expect(viewSwitch.textContent, 'to be', '2020');
  306. let cells = getCells(picker);
  307. expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
  308. simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
  309. expect(viewSwitch.textContent, 'to be', '2020-2029');
  310. cells = getCells(picker);
  311. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  312. expect(cells[1].textContent, 'to be', '2020');
  313. simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
  314. expect(viewSwitch.textContent, 'to be', '2000-2090');
  315. cells = getCells(picker);
  316. expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
  317. expect(cells[3].textContent, 'to be', '2020');
  318. // does nothig if the view has reached to the max view
  319. simulant.fire(input, 'keydown', {key: 'ArrowUp', ctrlKey: true});
  320. expect(viewSwitch.textContent, 'to be', '2000-2090');
  321. dp.destroy();
  322. clock.reset();
  323. });
  324. });
  325. describe('with meta', function () {
  326. it('functions as a substitute for the "+ctrl" key combination', function () {
  327. const clock = sinon.useFakeTimers({now: new Date(2020, 3, 22)});
  328. const {dp, picker} = createDP(input);
  329. const viewSwitch = getViewSwitch(picker);
  330. input.focus();
  331. simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
  332. expect(viewSwitch.textContent, 'to be', '2020');
  333. let cells = getCells(picker);
  334. expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
  335. simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
  336. expect(viewSwitch.textContent, 'to be', '2020-2029');
  337. cells = getCells(picker);
  338. expect(filterCells(cells, '.focused'), 'to equal', [cells[1]]);
  339. expect(cells[1].textContent, 'to be', '2020');
  340. simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
  341. expect(viewSwitch.textContent, 'to be', '2000-2090');
  342. cells = getCells(picker);
  343. expect(filterCells(cells, '.focused'), 'to equal', [cells[3]]);
  344. expect(cells[3].textContent, 'to be', '2020');
  345. // does nothig if the view has reached to the max view
  346. simulant.fire(input, 'keydown', {key: 'ArrowUp', metaKey: true});
  347. expect(viewSwitch.textContent, 'to be', '2000-2090');
  348. dp.destroy();
  349. clock.reset();
  350. });
  351. });
  352. });