Merge 2c4be65 into 7056546

src/components/Datepicker.vue

@@ -62,6 +62,7 @@
       :selectedDate="selectedDate"
       :showMonthView="showMonthView"
       :allowedToShowView="allowedToShowView"
+      :full-month-name="fullMonthName"
       :disabledDates="disabledDates"
       :calendarClass="calendarClass"
       :calendarStyle="calendarStyle"

src/components/PickerMonth.vue

@@ -27,6 +27,7 @@ export default {
     selectedDate: Date,
     pageDate: Date,
     pageTimestamp: Number,
+    fullMonthName: Boolean,
     disabledDates: Object,
     calendarClass: [String, Object, Array],
     calendarStyle: Object,
@@ -50,8 +51,9 @@ export default {
         ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate()))
         : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes())
       for (let i = 0; i < 12; i++) {
+        const month = this.fullMonthName ? this.utils.getMonthName(i, this.translation.months) : this.utils.getMonthNameAbbr(i, this.translation.monthsAbbr)
         months.push({
-          month: this.utils.getMonthName(i, this.translation.months),
+          month,
           timestamp: dObj.getTime(),
           isSelected: this.isSelectedMonth(dObj),
           isDisabled: this.isDisabledMonth(dObj)

test/unit/jest.conf.js

@@ -2,6 +2,8 @@ const path = require('path')
 
 module.exports = {
   rootDir: path.resolve(__dirname, '../../'),
+  testURL: 'http://localhost/',
+  verbose: true,
   moduleFileExtensions: [
     'js',
     'json',

test/unit/specs/DateInput/DateInput.spec.js

@@ -1,12 +1,12 @@
 import DateInput from '@/components/DateInput.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('DateInput', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(DateInput, {
+    wrapper = shallowMount(DateInput, {
       propsData: {
         selectedDate: new Date(2018, 2, 24),
         format: 'dd MMM yyyy',

test/unit/specs/DateInput/typedDates.spec.js

@@ -1,12 +1,12 @@
 import DateInput from '@/components/DateInput.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('DateInput', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(DateInput, {
+    wrapper = shallowMount(DateInput, {
       propsData: {
         format: 'dd MMM yyyy',
         translation: en,
@@ -40,7 +40,7 @@ describe('DateInput', () => {
   it('emits closeCalendar when return is pressed', () => {
     const input = wrapper.find('input')
     const blurSpy = jest.spyOn(input.element, 'blur')
-    input.trigger('keyup', {keyCode: 13})
+    input.trigger('keyup.enter')
     expect(blurSpy).toBeCalled()
   })
 
@@ -52,7 +52,7 @@ describe('DateInput', () => {
   })
 
   it('doesn\'t emit the date if typeable=false', () => {
-    const wrapper = shallow(DateInput, {
+    const wrapper = shallowMount(DateInput, {
       propsData: {
         format: 'dd MMM yyyy',
         translation: en,

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -1,6 +1,6 @@
 import Datepicker from '@/components/Datepicker.vue'
 import DateInput from '@/components/DateInput.vue'
-import {shallow, mount} from '@vue/test-utils'
+import {shallowMount, mount} from '@vue/test-utils'
 
 describe('Datepicker unmounted', () => {
   it('has a mounted hook', () => {
@@ -23,7 +23,7 @@ describe('Datepicker mounted', () => {
   let date
   beforeEach(() => {
     date = new Date(2016, 1, 15)
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         format: 'yyyy-MM-dd',
         value: date
@@ -51,7 +51,7 @@ describe('Datepicker mounted', () => {
 
   it('sets the date', () => {
     const date = new Date(2016, 9, 9)
-    const wrapper = shallow(Datepicker, {
+    const wrapper = shallowMount(Datepicker, {
       propsData: {
         format: 'yyyy-MM-dd'
       }
@@ -62,7 +62,7 @@ describe('Datepicker mounted', () => {
 
   it('clears the date', () => {
     const date = new Date(2016, 9, 9)
-    const wrapper = shallow(Datepicker)
+    const wrapper = shallowMount(Datepicker)
     wrapper.vm.setDate(date.getTime())
     wrapper.vm.clearDate()
     expect(wrapper.vm.selectedDate).toEqual(null)
@@ -133,7 +133,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('resets the default page date', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = shallowMount(Datepicker)
     const today = new Date()
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())
     expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth())
@@ -145,7 +145,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('does not set the default page date if a date is selected', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = shallowMount(Datepicker)
     const today = new Date()
     const pastDate = new Date(2018, 3, 20)
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())
@@ -159,14 +159,14 @@ describe('Datepicker mounted', () => {
   })
 
   it('sets the date on typedDate event', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = shallowMount(Datepicker)
     const today = new Date()
     wrapper.vm.setTypedDate(today)
     expect(wrapper.vm.selectedDate).toEqual(today)
   })
 
   it('watches value', async () => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = shallowMount(Datepicker, {
       propsData: {
         value: '2018-01-01'
       }
@@ -178,7 +178,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('watches openDate', async () => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = shallowMount(Datepicker, {
       propsData: {
         openDate: new Date(2018, 0, 1)
       }
@@ -190,7 +190,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('watches initialView', async () => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = shallowMount(Datepicker, {
       propsData: {
         initialView: 'day'
       }
@@ -211,7 +211,7 @@ describe('Datepicker mounted', () => {
 describe('Datepicker.vue set by string', () => {
   let wrapper
   it('can parse a string date', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         format: 'yyyy MM dd',
         value: '2016-02-20'
@@ -224,7 +224,7 @@ describe('Datepicker.vue set by string', () => {
   })
 
   it('should nullify malformed value', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         value: 'today'
       }
@@ -236,7 +236,7 @@ describe('Datepicker.vue set by string', () => {
 describe('Datepicker.vue set by timestamp', () => {
   let wrapper
   it('can parse unix timestamp', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         format: 'yyyy MM dd',
         value: new Date(Date.UTC(2018, 0, 29)).getTime()
@@ -278,7 +278,7 @@ describe('Datepicker.vue using UTC', () => {
 describe('Datepicker with initial-view', () => {
   let wrapper
   it('should open in Day view', () => {
-    wrapper = shallow(Datepicker)
+    wrapper = shallowMount(Datepicker)
     wrapper.vm.showCalendar()
     expect(wrapper.vm.computedInitialView).toEqual('day')
     expect(wrapper.vm.showDayView).toEqual(true)
@@ -287,7 +287,7 @@ describe('Datepicker with initial-view', () => {
   })
 
   it('should open in Month view', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         initialView: 'month'
       }
@@ -300,7 +300,7 @@ describe('Datepicker with initial-view', () => {
   })
 
   it('should open in Year view', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         initialView: 'year'
       }

test/unit/specs/Datepicker/inline.spec.js

@@ -1,10 +1,10 @@
 import Datepicker from '@/components/Datepicker.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 
 describe('Datepicker.vue inline', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         inline: true
       }

test/unit/specs/Datepicker/openDate.spec.js

@@ -1,11 +1,11 @@
 import Datepicker from '@/components/Datepicker.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 
 describe('Datepicker with open date', () => {
   const openDate = new Date(2016, 9, 12)
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(Datepicker, {
+    wrapper = shallowMount(Datepicker, {
       propsData: {
         openDate: openDate
       }
@@ -34,7 +34,7 @@ describe('Datepicker with open date', () => {
   })
 
   it('should show today\'s date if no open date is set', () => {
-    wrapper = shallow(Datepicker)
+    wrapper = shallowMount(Datepicker)
     const today = new Date()
     expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth())
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())

test/unit/specs/PickerDay/changeMonths.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay: changing months', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         translation: en,
         allowedToShowView: () => true,

test/unit/specs/PickerDay/disabledDates.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay: disabled', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         allowedToShowView: () => true,
         showMonthCalendar: () => {},

test/unit/specs/PickerDay/highlightedDates.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay highlight date', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,

test/unit/specs/PickerDay/initialDom.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay: DOM', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,

test/unit/specs/PickerDay/mondayFirst.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay: Datepicker with monday as first day of week', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         mondayFirst: true,
         translation: en,

test/unit/specs/PickerDay/pickerDay.spec.js

@@ -1,11 +1,11 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerDay: DOM', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = shallowMount(PickerDay, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,

test/unit/specs/PickerMonth/disabledMonths.spec.js

@@ -1,11 +1,11 @@
 import PickerMonth from '@/components/PickerMonth.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerMonth', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerMonth, {
+    wrapper = shallowMount(PickerMonth, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,

test/unit/specs/PickerMonth/pickerMonth.spec.js

@@ -1,11 +1,11 @@
 import PickerMonth from '@/components/PickerMonth.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerMonth', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerMonth, {
+    wrapper = shallowMount(PickerMonth, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -46,4 +46,10 @@ describe('PickerMonth', () => {
     yearBtn.trigger('click')
     expect(wrapper.emitted().showYearCalendar).toBeTruthy()
   })
+
+  it('shows abbreviated month names when full-month-name is false', () => {
+    const firstMonth = wrapper.find('.month')
+    const abbreviatedMonth = en._monthsAbbr[0]
+    expect(firstMonth.text()).toEqual(abbreviatedMonth)
+  })
 })

test/unit/specs/PickerYear/disabledYears.spec.js

@@ -1,11 +1,11 @@
 import PickerYear from '@/components/PickerYear.vue'
-import {shallow} from '@vue/test-utils'
+import {shallowMount} from '@vue/test-utils'
 import {en} from '@/locale'
 
 describe('PickerYear', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerYear, {
+    wrapper = shallowMount(PickerYear, {
       propsData: {
         allowedToShowView: () => true,
         translation: en,