updated and fixed tests

Author: liloow

demo/demo.html

@@ -7,9 +7,9 @@
   <h1> Classic version, all default</h1>
   <noyear></noyear>
   <h1> Custom version with 18 complete months </h1>
-  <noyearcustom :days=2 :months=18 :fullMonths=true></noyearcustom>
+  <noyearcustom :days=2 :months=18 :fullMonths=true accent-color="#dbde1b"></noyearcustom>
   <h1> With years version, with 5 years</h1>
-  <year :years=5></year>
+  <year :years=5 accent-color="#f44336"></year>
 </div>
 
 <script>

dist/draggableCal.common.js

@@ -10,9 +10,9 @@
           </div>
         </div>
       </div>
-      <div class="arrow top left" @click="goLeft($event, 'yearly')" :style="{visibility: yearly.realOffset === 0 ? 'hidden' : 'visible'}">
+      <div v-if="NUMBER_OF_YEARS" class="arrow top left" @click="goLeft($event, 'yearly')" :style="{visibility: yearly.realOffset === 0 ? 'hidden' : 'visible'}">
       </div>
-      <div class="arrow top right" @click="goRight($event, 'yearly')" :style="{visibility: yearly.realOffset <= yearly.maxOffset ? 'hidden' : 'visible'}">
+      <div v-if="NUMBER_OF_YEARS" class="arrow top right" @click="goRight($event, 'yearly')" :style="{visibility: yearly.realOffset <= yearly.maxOffset ? 'hidden' : 'visible'}">
       </div>
       <div :class="monthly.maxOffset < 0 ? 'wrapper' : 'wrapper-flex'">
         <div ref="monthly" state="monthly" class="months ui-draggable" style="left: 0px;" @mousedown="handleDrag($event)" @touchstart="handleDrag($event)" :style="monthly.phase === 'dragging' ? {pointerEvents: 'none', transition: 'none', cursor:'-webkit-grab'} : {} ">
@@ -157,6 +157,7 @@ export default {
       this.$refs[state].style.left = `${this[state].realOffset}px`;
     },
     goRight(e, state) {
+      console.log(state);
       let elem = e.target.parentNode.querySelector(`[state="${state}"`);
       let cell = elem.firstChild;
       this[state].realOffset =
@@ -287,6 +288,10 @@ export default {
       let m = this.calendar.months;
       let d = this.calendar.days;
       year = Number(year);
+      if (this.selectedDate.day) {
+        this.selectedDate = {};
+        this.$emit('dateCleared');
+      }
       this.monthly.realOffset = 0;
       this.daily.realOffset = 0;
       m.splice(0, 14);

dist/draggableCal.common.js.map

@@ -12,20 +12,20 @@ function splitDate(date) {
   };
 }
 
-function computeMonthFromDays(NUMBER_OF_DAYS) {
+export function computeMonthsFromDays(NUMBER_OF_DAYS) {
   const date = new Date(gYear(TODAY), gMonth(TODAY), gDay(TODAY) + NUMBER_OF_DAYS);
   const NUMBER_OF_MONTHS = (gYear(date) - gYear(TODAY)) * 12 + gMonth(date) - gMonth(TODAY);
   return NUMBER_OF_MONTHS;
 }
-function computeDaysFromMonths(NUMBER_OF_MONTH) {
+export function computeDaysFromMonths(NUMBER_OF_MONTH) {
   const NUMBER_OF_DAYS =
     (Date.UTC(gYear(TODAY), gMonth(TODAY) + NUMBER_OF_MONTH) -
       Date.UTC(gYear(TODAY), gMonth(TODAY))) /
     (1000 * 60 * 60 * 24);
   return NUMBER_OF_DAYS;
 }
 
-function createDaysArray(NUMBER_OF_DAYS, fullMonths) {
+export function createDaysArray(NUMBER_OF_DAYS, fullMonths) {
   if (NUMBER_OF_DAYS <= 0) return [];
   let currentConstructorDate = new Date();
   const days = [];
@@ -47,7 +47,7 @@ function createDaysArray(NUMBER_OF_DAYS, fullMonths) {
   return days;
 }
 
-function createMonthsArray(NUMBER_OF_MONTHS) {
+export function createMonthsArray(NUMBER_OF_MONTHS) {
   if (NUMBER_OF_MONTHS <= 0) return [];
   let currentConstructorMonth = new Date();
   const months = [];
@@ -67,7 +67,7 @@ function createMonthsArray(NUMBER_OF_MONTHS) {
   return months;
 }
 
-function createPrependArray(PREPEND_MONTHS) {
+export function createPrependArray(PREPEND_MONTHS) {
   const prepended = [{fullYear: gYear(TODAY), monthNumber: gMonth(TODAY)}];
   for (let i = 0; i < PREPEND_MONTHS; i++) {
     let year = prepended[0].fullYear;
@@ -82,7 +82,7 @@ function createPrependArray(PREPEND_MONTHS) {
   return prepended;
 }
 
-function buildYear(year) {
+export function buildYear(year) {
   let currentConstructorDate = new Date(Date.UTC(year, 0, 1));
   const isLeap = year % 4 === 0 ? 1 : 0;
   const entireYear = {
@@ -113,7 +113,7 @@ export function buildEntireCalendar(NUMBER_OF_YEARS) {
 }
 export function buildCalendar(NUMBER_OF_DAYS, NUMBER_OF_MONTHS, PREPEND_MONTHS, fullMonths) {
   if (NUMBER_OF_MONTHS !== 12) NUMBER_OF_DAYS = computeDaysFromMonths(NUMBER_OF_MONTHS);
-  else if (NUMBER_OF_DAYS !== 365) NUMBER_OF_MONTHS = computeMonthFromDays(NUMBER_OF_DAYS);
+  else if (NUMBER_OF_DAYS !== 365) NUMBER_OF_MONTHS = computeMonthsFromDays(NUMBER_OF_DAYS);
 
   const calendar = {
     days: createDaysArray(NUMBER_OF_DAYS, fullMonths),

dist/draggableCal.umd.js

@@ -8,28 +8,32 @@ describe('VueCal', () => {
     expect(wrapper.vm.calendar.days.length).toEqual(365);
     expect(wrapper.vm.calendar.months.length).toEqual(14);
   });
+
   it('should build with custom days', () => {
     const wrapper = shallowMount(App, {
       propsData: {days: 900},
       sync: false,
     });
     expect(wrapper.vm.calendar.days.length).toEqual(900);
   });
+
   it('should discard days if months is set', () => {
     const wrapper = shallowMount(App, {
       propsData: {days: 900, months: 6},
       sync: false,
     });
     expect(wrapper.vm.calendar.months.length).toEqual(8);
   });
+
   it('should change the language', () => {
     const wrapper = shallowMount(App, {
       propsData: {lang: 'FR'},
       sync: false,
     });
     expect(wrapper.vm.MONTHS[0]).toMatch('JANVIER');
   });
-  const wrapper = mount(App, {
+
+  const noyear = mount(App, {
     sync: false,
     attachToDocument: true,
     propsData: {
@@ -41,15 +45,64 @@ describe('VueCal', () => {
       },
     },
   });
-  it('should', async () => {
-    wrapper.element.querySelector('.arrow.bottom.left').click();
-    wrapper.element.querySelector('.arrow.bottom.right').click();
-    wrapper.vm.$refs.monthly.childNodes[2].click();
-    wrapper.vm.$refs.daily.childNodes[5].click();
-    expect(wrapper.vm.selectedDate).not.toBe(null);
-    expect(wrapper.element).toMatchSnapshot();
-    wrapper.vm.$refs.daily.childNodes[5].click();
-    expect(wrapper.vm.selectedDate).toBe(null);
-    wrapper.vm.$destroy();
+
+  const years = mount(App, {
+    sync: false,
+    attachToDocument: true,
+    propsData: {
+      years: 10,
+    },
+  });
+
+  it('should build noyear', async () => {
+    noyear.element.querySelector('.arrow.top.right').click();
+    noyear.vm.$nextTick(() => expect(Number(noyear.vm.monthly.realOffset)).toBeLessThan(0));
+
+    noyear.element.querySelector('.arrow.bottom.right').click();
+    noyear.vm.$nextTick(() => expect(Number(noyear.vm.daily.realOffset)).toBeLessThan(0));
+
+    noyear.vm.$refs.monthly.childNodes[2].click();
+    noyear.vm.$nextTick(() =>
+      expect(noyear.vm.$refs.monthly.childNodes[2].getAttribute('selected')).toBe('selected')
+    );
+
+    noyear.vm.$refs.daily.childNodes[5].click();
+    expect(noyear.vm.selectedDate).not.toBe(null);
+
+    noyear.vm.$refs.daily.childNodes[5].click();
+    noyear.vm.$nextTick(() => expect(noyear.vm.selectedDate).toBe({}));
+
+    expect(noyear.element).toMatchSnapshot();
+    noyear.vm.$destroy();
+  });
+
+  it('should build year', async () => {
+    years.vm.$refs.yearly.childNodes[2].click();
+    noyear.vm.$nextTick(() =>
+      expect(years.vm.$refs.yearly.childNodes[2].getAttribute('selected')).toBe('selected')
+    );
+
+    years.element.querySelector('.arrow.top.right').click();
+    noyear.vm.$nextTick(() => expect(Number(years.vm.yearly.realOffset)).toBeLessThan(0));
+
+    years.element.querySelector('.arrow.middle.right').click();
+    noyear.vm.$nextTick(() => expect(Number(years.vm.monthly.realOffset)).toBeLessThan(0));
+
+    years.element.querySelector('.arrow.bottom.right').click();
+    noyear.vm.$nextTick(() => expect(Number(years.vm.daily.realOffset)).toBeLessThan(0));
+
+    years.vm.$refs.monthly.childNodes[2].click();
+    noyear.vm.$nextTick(() =>
+      expect(years.vm.$refs.monthly.childNodes[2].getAttribute('selected')).toBe('selected')
+    );
+
+    years.vm.$refs.daily.childNodes[5].click();
+    years.vm.$nextTick(() => expect(years.vm.selectedDate).not.toBe({}));
+
+    years.vm.$refs.daily.childNodes[5].click();
+    years.vm.$nextTick(() => expect(years.vm.selectedDate).toBe({}));
+
+    expect(years.element).toMatchSnapshot();
+    years.vm.$destroy();
   });
 });