vue-moment.spec.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. import moment from 'moment-timezone';
  2. import Vue from 'vue/dist/vue';
  3. import VueMoment from '../vue-moment';
  4. Vue.use(VueMoment, {
  5. moment,
  6. });
  7. const now = moment();
  8. const tomorrow = moment().add(1, 'day');
  9. const period = 'P1D';
  10. const vm = new Vue({
  11. template: '<div>{{ now | moment(...args) }}</div>',
  12. data() {
  13. return {
  14. now,
  15. args: [
  16. 'YYYY-MM-DD',
  17. ],
  18. };
  19. },
  20. }).$mount();
  21. const vmd = new Vue({
  22. template: '<div>{{ period | duration(...args) | duration(...formatter) }}</div>',
  23. data() {
  24. return {
  25. period,
  26. args: [],
  27. formatter: ['humanize', true],
  28. };
  29. },
  30. }).$mount();
  31. describe('VueMoment', () => {
  32. describe('installing plugin', () => {
  33. it('loads prototype', () => {
  34. expect(typeof vm.$moment).toEqual('function');
  35. });
  36. it('prototype works', () => {
  37. expect(vm.$moment(now).format('YYYY-MM-DD')).toEqual(now.format('YYYY-MM-DD'));
  38. });
  39. it('sets locale', () => {
  40. vm.$moment.locale('fr');
  41. expect(vm.$moment.locale()).toEqual('fr');
  42. vm.$moment.locale('en');
  43. });
  44. });
  45. describe('using filter', () => {
  46. it('formats date', () => {
  47. expect(vm.$el.textContent).toContain(now.format('YYYY-MM-DD'));
  48. });
  49. describe('relative dates', () => {
  50. describe('from', () => {
  51. it('simple', (done) => {
  52. vm.args = ['from'];
  53. vm.$nextTick(() => {
  54. expect(vm.$el.textContent).toContain('a few seconds ago');
  55. done();
  56. });
  57. });
  58. it('change reference', (done) => {
  59. vm.args = ['from', tomorrow];
  60. vm.$nextTick(() => {
  61. expect(vm.$el.textContent).toContain('a day ago');
  62. done();
  63. });
  64. });
  65. it('remove prefix', (done) => {
  66. vm.args = ['from', tomorrow, true];
  67. vm.$nextTick(() => {
  68. expect(vm.$el.textContent).toContain('a day');
  69. done();
  70. });
  71. });
  72. });
  73. describe('calendar', () => {
  74. it('simple', (done) => {
  75. vm.args = ['calendar'];
  76. vm.$nextTick(() => {
  77. expect(vm.$el.textContent).toContain(now.calendar());
  78. done();
  79. });
  80. });
  81. it('with options', (done) => {
  82. vm.args = ['calendar', tomorrow, { lastDay: '[Yesterday]' }];
  83. vm.$nextTick(() => {
  84. expect(vm.$el.textContent).toContain('Yesterday');
  85. done();
  86. });
  87. });
  88. });
  89. describe('diff', () => {
  90. it('simple', (done) => {
  91. vm.args = ['diff', tomorrow, 'hours'];
  92. vm.$nextTick(() => {
  93. expect(vm.$el.textContent).toContain('24');
  94. done();
  95. });
  96. });
  97. });
  98. });
  99. describe('mutations', () => {
  100. it('add', (done) => {
  101. vm.args = ['add', '1 day'];
  102. vm.$nextTick(() => {
  103. expect(vm.$el.textContent).toContain(now.clone().add(1, 'days').toISOString());
  104. done();
  105. });
  106. });
  107. it('subtract', (done) => {
  108. vm.args = ['subtract', '1 day'];
  109. vm.$nextTick(() => {
  110. expect(vm.$el.textContent).toContain(now.clone().subtract(1, 'days').toISOString());
  111. done();
  112. });
  113. });
  114. it('utc', (done) => {
  115. vm.args = ['utc'];
  116. vm.$nextTick(() => {
  117. expect(vm.$el.textContent).toContain(now.clone().utc().toISOString());
  118. done();
  119. });
  120. });
  121. it('timezone', (done) => {
  122. vm.args = ['timezone', 'America/Los_Angeles'];
  123. vm.$nextTick(() => {
  124. expect(vm.$el.textContent).toContain(now.clone().tz('America/Los_Angeles').toISOString());
  125. done();
  126. });
  127. });
  128. });
  129. describe('chaining', () => {
  130. it('simple', (done) => {
  131. vm.args = ['add', '2 days', 'subtract', '1 day', 'YYYY-MM-DD'];
  132. vm.$nextTick(() => {
  133. expect(vm.$el.textContent).toContain(now.clone().add(1, 'days').format('YYYY-MM-DD'));
  134. done();
  135. });
  136. });
  137. });
  138. describe('durations', () => {
  139. afterEach(() => {
  140. vmd.period = period;
  141. vmd.args = [];
  142. vmd.formatter = ['humanize', true];
  143. });
  144. it('simple humanize', (done) => {
  145. vmd.$nextTick(() => {
  146. expect(vmd.$el.textContent).toContain('in a day');
  147. done();
  148. });
  149. });
  150. it('add', (done) => {
  151. vmd.args = ['add', 'P1D'];
  152. vmd.$nextTick(() => {
  153. expect(vmd.$el.textContent).toContain('in 2 days');
  154. done();
  155. });
  156. });
  157. it('subtract', (done) => {
  158. vmd.args = ['subtract', 'P2D'];
  159. vmd.$nextTick(() => {
  160. expect(vmd.$el.textContent).toContain('a day ago');
  161. done();
  162. });
  163. });
  164. it('to string', (done) => {
  165. vmd.period = [5, 'days'];
  166. vmd.formatter = ['toISOString'];
  167. vmd.$nextTick(() => {
  168. expect(vmd.$el.textContent).toContain('P5D');
  169. done();
  170. });
  171. });
  172. it('getter', (done) => {
  173. vmd.formatter = ['asHours'];
  174. vmd.$nextTick(() => {
  175. expect(vmd.$el.textContent).toContain('24');
  176. done();
  177. });
  178. });
  179. });
  180. });
  181. describe('handle inputs', () => {
  182. beforeEach(() => {
  183. global.console.warn = jest.fn();
  184. });
  185. afterAll(() => {
  186. vm.now = moment();
  187. });
  188. it('handles string', (done) => {
  189. vm.now = '2017-01-01';
  190. vm.args = ['YYYY-MM-DD'];
  191. vm.$nextTick(() => {
  192. expect(console.warn).not.toBeCalled();
  193. expect(vm.$el.textContent).toContain('2017-01-01');
  194. done();
  195. });
  196. });
  197. it('handles numeric: seconds', (done) => {
  198. vm.now = 1484438400;
  199. vm.args = ['YYYY-MM'];
  200. vm.$nextTick(() => {
  201. expect(console.warn).not.toBeCalled();
  202. expect(vm.$el.textContent).toContain('2017-01');
  203. done();
  204. });
  205. });
  206. it('handles numeric: milliseconds', (done) => {
  207. vm.now = 1484438400000;
  208. vm.args = ['YYYY-MM'];
  209. vm.$nextTick(() => {
  210. expect(console.warn).not.toBeCalled();
  211. expect(vm.$el.textContent).toContain('2017-01');
  212. done();
  213. });
  214. });
  215. it('handles object', (done) => {
  216. vm.now = { y: 2017, m: 1, d: 1 };
  217. vm.args = ['YYYY-MM-DD'];
  218. vm.$nextTick(() => {
  219. expect(console.warn).not.toBeCalled();
  220. expect(vm.$el.textContent).toContain('2017-01-01');
  221. done();
  222. });
  223. });
  224. it('handles Date object', (done) => {
  225. vm.now = new Date(2017, 0, 1);
  226. vm.args = ['YYYY-MM-DD'];
  227. vm.$nextTick(() => {
  228. expect(console.warn).not.toBeCalled();
  229. expect(vm.$el.textContent).toContain('2017-01-01');
  230. done();
  231. });
  232. });
  233. it('handles Moment object', (done) => {
  234. vm.now = moment('2017-01-01');
  235. vm.args = ['YYYY-MM-DD'];
  236. vm.$nextTick(() => {
  237. expect(console.warn).not.toBeCalled();
  238. expect(vm.$el.textContent).toContain('2017-01-01');
  239. done();
  240. });
  241. });
  242. it('handles undefined', (done) => {
  243. vm.now = undefined;
  244. vm.$nextTick(() => {
  245. expect(console.warn).toBeCalled();
  246. done();
  247. });
  248. });
  249. it('handles invalid string', (done) => {
  250. vm.now = 'foo';
  251. vm.$nextTick(() => {
  252. expect(console.warn).toBeCalled();
  253. expect(vm.$el.textContent).toContain('foo');
  254. done();
  255. });
  256. });
  257. });
  258. });