From 37ecc2dfa83ee54cc2172e7d313064516545a7dc Mon Sep 17 00:00:00 2001 From: Hiren Date: Tue, 9 Jul 2024 21:06:53 +0530 Subject: [PATCH] Upgrade to vue 3 --- babel.config.js | 5 +- example/main.js | 10 +-- package.json | 34 ++++---- scripts/build-locale.js | 8 +- scripts/build.js | 16 ++-- scripts/serve.js | 13 +-- src/components/Datepicker.vue | 14 ++-- test/unit/jest.conf.js | 6 +- test/unit/setup.js | 2 - test/unit/specs/DateInput/DateInput.spec.js | 33 ++++---- test/unit/specs/DateInput/typedDates.spec.js | 24 +++--- test/unit/specs/Datepicker/Datepicker.spec.js | 82 +++++++++++-------- test/unit/specs/Datepicker/inline.spec.js | 7 +- test/unit/specs/Datepicker/openDate.spec.js | 9 +- .../unit/specs/PickerDay/changeMonths.spec.js | 7 +- .../specs/PickerDay/disabledDates.spec.js | 37 +++++---- .../specs/PickerDay/highlightedDates.spec.js | 33 ++++---- test/unit/specs/PickerDay/initialDom.spec.js | 7 +- test/unit/specs/PickerDay/mondayFirst.spec.js | 17 ++-- test/unit/specs/PickerDay/pickerDay.spec.js | 15 ++-- .../specs/PickerMonth/disabledMonths.spec.js | 17 ++-- .../specs/PickerMonth/pickerMonth.spec.js | 15 ++-- .../specs/PickerYear/disabledYears.spec.js | 33 ++++---- test/unit/specs/PickerYear/pickerYear.spec.js | 21 ++--- 24 files changed, 250 insertions(+), 215 deletions(-) diff --git a/babel.config.js b/babel.config.js index 691f4205..b3311370 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,10 @@ module.exports = { 'presets': [ ['@babel/preset-env', { - 'modules': false + 'modules': false, + 'targets': { + 'node': 'current', + }, }] ], 'env': { diff --git a/example/main.js b/example/main.js index 63a2cfae..a25f0191 100644 --- a/example/main.js +++ b/example/main.js @@ -1,10 +1,6 @@ -import Vue from 'vue' +import { createApp } from 'vue'; import Demo from './Demo.vue' -Vue.config.productionTip = false +const app = createApp(Demo); -/* eslint-disable no-new */ -new Vue({ - el: '#app', - render: h => h(Demo) -}) +app.mount("#app"); \ No newline at end of file diff --git a/package.json b/package.json index 7db09140..592e5a1a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vuejs-datepicker", - "version": "1.6.2", + "version": "2.0.0", "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations", "keywords": [ "vue", @@ -36,9 +36,8 @@ "lint", "test" ], - "dependencies": {}, "peerDependencies": { - "vue": "^2.6.10" + "vue": "^3.3.4" }, "devDependencies": { "@babel/cli": "^7.4.4", @@ -51,21 +50,25 @@ "@babel/preset-stage-2": "^7.0.0", "@babel/register": "^7.4.4", "@babel/runtime": "^7.4.5", - "@vue/test-utils": "^1.0.0-beta.12", - "autoprefixer": "^8.3.0", + "@rollup/plugin-babel": "^6.0.3", + "@vue/compiler-sfc": "^3.3.4", + "@vue/test-utils": "^2.4.1", + "@vue/vue3-jest": "^29.2.4", + "autoprefixer": "^10.4.14", "babel-eslint": "^7.1.1", - "babel-jest": "^24.8.0", + "babel-jest": "^29.6.2", "chalk": "^1.1.3", "connect-history-api-fallback": "^1.3.0", "coveralls": "^3.0.4", "eslint": "^3.19.0", "eslint-config-standard": "^6.2.1", "eslint-friendly-formatter": "^2.0.7", - "eslint-plugin-html": "^2.0.0", + "eslint-plugin-html": "^2.0.3", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "eventsource-polyfill": "^0.9.6", - "jest": "^24.8.0", + "jest": "^29.6.2", + "jest-environment-jsdom": "^29.6.2", "jest-serializer-vue": "^2.0.2", "lolex": "^1.5.2", "opn": "^4.0.2", @@ -73,22 +76,19 @@ "parse5": "^2.1.0", "pre-commit": "^1.2.2", "rimraf": "^2.6.0", - "rollup": "^1.16.2", - "rollup-plugin-babel": "^4.3.3", + "rollup": "^2.79.1", "rollup-plugin-commonjs": "^10.0.0", "rollup-plugin-livereload": "^1.0.1", "rollup-plugin-node-resolve": "^5.0.4", - "rollup-plugin-postcss": "^2.0.3", + "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-replace": "^2.0.0", "rollup-plugin-serve": "^1.0.1", "rollup-plugin-terser": "^5.0.0", - "rollup-plugin-vue": "^5.0.0", + "rollup-plugin-vue": "^6.0.0", "semver": "^5.3.0", "shelljs": "^0.8.3", "stylus": "^0.54.5", - "vue": "^2.6.10", - "vue-jest": "^4.0.0-beta.2", - "vue-server-renderer": "^2.6.10", - "vue-template-compiler": "^2.6.10" + "vue": "^3.3.4", + "vue-server-renderer": "^2.6.10" } -} +} \ No newline at end of file diff --git a/scripts/build-locale.js b/scripts/build-locale.js index 5d5d2994..bbed532d 100644 --- a/scripts/build-locale.js +++ b/scripts/build-locale.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import {terser} from 'rollup-plugin-terser' -import babel from 'rollup-plugin-babel' +import { terser } from 'rollup-plugin-terser' +import babel from '@rollup/plugin-babel' import commonjs from 'rollup-plugin-commonjs' const files = fs.readdirSync('./src/locale/translations') @@ -15,7 +15,7 @@ const config = files.map(file => { }, plugins: [ commonjs(), - babel({exclude: 'node_modules/**'}), + babel({ exclude: 'node_modules/**' }), terser() ] } @@ -30,7 +30,7 @@ const index = { }, plugins: [ commonjs(), - babel({exclude: 'node_modules/**'}), + babel({ exclude: 'node_modules/**' }), terser() ] } diff --git a/scripts/build.js b/scripts/build.js index 9044fa75..eb8f539f 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,7 +1,7 @@ import path from 'path' -import {terser} from 'rollup-plugin-terser' +import { terser } from 'rollup-plugin-terser' import vue from 'rollup-plugin-vue' -import babel from 'rollup-plugin-babel' +import babel from '@rollup/plugin-babel' import postcss from 'rollup-plugin-postcss' import autoprefixer from 'autoprefixer' import commonjs from 'rollup-plugin-commonjs' @@ -24,10 +24,10 @@ export default [{ } ], plugins: [ - vue({css: true}), - postcss({plugins: [autoprefixer()]}), + vue({ css: true }), + postcss({ plugins: [autoprefixer()] }), commonjs(), - babel({exclude: 'node_modules/**'}) + babel({ exclude: 'node_modules/**' }) ] }, { input: path.join(__dirname, '..', 'src', 'components', 'Datepicker.vue'), @@ -37,10 +37,10 @@ export default [{ name: 'vuejsDatepicker' }, plugins: [ - vue({css: true}), - postcss({plugins: [autoprefixer()]}), + vue({ css: true }), + postcss({ plugins: [autoprefixer()] }), commonjs(), terser(), - babel({exclude: 'node_modules/**'}) + babel({ exclude: 'node_modules/**' }) ] }] diff --git a/scripts/serve.js b/scripts/serve.js index 0d0402d6..8ecddba2 100644 --- a/scripts/serve.js +++ b/scripts/serve.js @@ -2,10 +2,12 @@ import path from 'path' import serve from 'rollup-plugin-serve' import livereload from 'rollup-plugin-livereload' import vue from 'rollup-plugin-vue' -import babel from 'rollup-plugin-babel' +import babel from '@rollup/plugin-babel' import resolve from 'rollup-plugin-node-resolve' import replace from 'rollup-plugin-replace' import common from 'rollup-plugin-commonjs' +import postcss from 'rollup-plugin-postcss' +import autoprefixer from 'autoprefixer' export default { input: path.join(__dirname, '..', 'example', 'main.js'), @@ -19,6 +21,7 @@ export default { vue({ css: true }), + postcss({ plugins: [autoprefixer()] }), replace({ 'process.env.NODE_ENV': JSON.stringify('development') }), @@ -26,16 +29,16 @@ export default { mainFields: ['module', 'main'] }), common(), - babel({exclude: 'node_modules/**'}), + babel({ exclude: 'node_modules/**' }), serve({ open: true, contentBase: path.join(__dirname, '..', 'example'), - host: 'localhost', - port: 10001 + host: '0.0.0.0', + port: 3000 }), livereload({ verbose: true, watch: path.join(__dirname, '..', 'example') }) ] -} +} \ No newline at end of file diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 67055bef..a487d5bc 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -108,7 +108,7 @@ export default { PickerYear }, props: { - value: { + modelValue: { validator: val => utils.validateDateInput(val) }, name: String, @@ -187,7 +187,7 @@ export default { } }, watch: { - value (value) { + modelValue (value) { this.setValue(value) }, openDate () { @@ -331,7 +331,7 @@ export default { this.selectedDate = date this.setPageDate(date) this.$emit('selected', date) - this.$emit('input', date) + this.$emit('update:modelValue', date) }, /** * Clear the selected date @@ -340,7 +340,7 @@ export default { this.selectedDate = null this.setPageDate() this.$emit('selected', null) - this.$emit('input', null) + this.$emit('update:modelValue', null) this.$emit('cleared') }, /** @@ -445,8 +445,8 @@ export default { * Initiate the component */ init () { - if (this.value) { - this.setValue(this.value) + if (this.modelValue) { + this.setValue(this.modelValue) } if (this.isInline) { this.setInitialView() @@ -462,4 +462,4 @@ export default { + \ No newline at end of file diff --git a/test/unit/jest.conf.js b/test/unit/jest.conf.js index 37d88bd0..60029272 100644 --- a/test/unit/jest.conf.js +++ b/test/unit/jest.conf.js @@ -1,6 +1,10 @@ const path = require('path') module.exports = { + testEnvironment: 'jsdom', + testEnvironmentOptions: { + customExportConditions: ["node", "node-addons"], + }, rootDir: path.resolve(__dirname, '../../'), moduleFileExtensions: [ 'js', @@ -12,7 +16,7 @@ module.exports = { }, transform: { '^.+\\.js$': 'babel-jest', - '.*\\.(vue)$': 'vue-jest' + '.*\\.(vue)$': '@vue/vue3-jest' }, setupFiles: ['/test/unit/setup'], coverageDirectory: '/test/unit/coverage', diff --git a/test/unit/setup.js b/test/unit/setup.js index edbdbae8..9448490d 100644 --- a/test/unit/setup.js +++ b/test/unit/setup.js @@ -1,3 +1 @@ import Vue from 'vue' - -Vue.config.productionTip = false diff --git a/test/unit/specs/DateInput/DateInput.spec.js b/test/unit/specs/DateInput/DateInput.spec.js index 82d17e50..1b7d9963 100644 --- a/test/unit/specs/DateInput/DateInput.spec.js +++ b/test/unit/specs/DateInput/DateInput.spec.js @@ -1,12 +1,13 @@ import DateInput from '@/components/DateInput.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('DateInput', () => { let wrapper beforeEach(() => { - wrapper = shallow(DateInput, { + wrapper = mount(DateInput, { + shallow: true, propsData: { selectedDate: new Date(2018, 2, 24), format: 'dd MMM yyyy', @@ -19,8 +20,8 @@ describe('DateInput', () => { expect(wrapper.findAll('input')).toHaveLength(1) }) - it('nulls date', () => { - wrapper.setProps({ + it('nulls date', async () => { + await wrapper.setProps({ selectedDate: null }) expect(wrapper.vm.formattedValue).toBeNull() @@ -32,8 +33,8 @@ describe('DateInput', () => { expect(wrapper.find('input').element.value).toEqual('24 Mar 2018') }) - it('delegates date formatting', () => { - wrapper.setProps({ + it('delegates date formatting', async () => { + await wrapper.setProps({ selectedDate: new Date(2016, 1, 15), format: () => '2016/1/15' }) @@ -46,15 +47,15 @@ describe('DateInput', () => { expect(wrapper.emitted().showCalendar).toBeTruthy() }) - it('adds bootstrap classes', () => { - wrapper.setProps({ + it('adds bootstrap classes', async () => { + await wrapper.setProps({ bootstrapStyling: true }) expect(wrapper.find('input').element.classList).toContain('form-control') }) - it('appends bootstrap classes', () => { - wrapper.setProps({ + it('appends bootstrap classes', async () => { + await wrapper.setProps({ inputClass: 'someClass', bootstrapStyling: true }) @@ -62,15 +63,15 @@ describe('DateInput', () => { expect(wrapper.find('input').element.classList).toContain('someClass') }) - it('can be disabled', () => { - wrapper.setProps({ + it('can be disabled', async () => { + await wrapper.setProps({ disabled: true }) expect(wrapper.find('input').attributes().disabled).toBeDefined() }) - it('accepts a function as a formatter', () => { - wrapper.setMethods({ + it('accepts a function as a formatter', async () => { + await wrapper.setProps({ format: () => '!' }) expect(wrapper.find('input').element.value).toEqual('!') @@ -80,4 +81,4 @@ describe('DateInput', () => { wrapper.find('input').trigger('blur') expect(wrapper.emitted('closeCalendar')).toBeTruthy() }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js index ef41ddc5..7f9f21fe 100644 --- a/test/unit/specs/DateInput/typedDates.spec.js +++ b/test/unit/specs/DateInput/typedDates.spec.js @@ -1,12 +1,13 @@ import DateInput from '@/components/DateInput.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('DateInput', () => { let wrapper beforeEach(() => { - wrapper = shallow(DateInput, { + wrapper = mount(DateInput, { + shallow: true, propsData: { format: 'dd MMM yyyy', translation: en, @@ -15,14 +16,14 @@ describe('DateInput', () => { }) }) - it('does not format the date when typed', () => { + it('does not format the date when typed', async () => { const dateString = '2018-04-24' wrapper.vm.input.value = dateString expect(wrapper.vm.input.value).toEqual(dateString) - wrapper.setData({ + await wrapper.setData({ typedDate: dateString }) - wrapper.setProps({ + await wrapper.setProps({ selectedDate: new Date(dateString) }) expect(wrapper.vm.typedDate).toEqual(dateString) @@ -40,19 +41,20 @@ 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', { keyCode: 13 }) expect(blurSpy).toBeCalled() }) - it('clears a typed date if it does not parse', () => { + it('clears a typed date if it does not parse', async () => { const input = wrapper.find('input') - wrapper.setData({typedDate: 'not a date'}) + await wrapper.setData({ typedDate: 'not a date' }) input.trigger('blur') expect(wrapper.emitted().clearDate).toBeDefined() }) it('doesn\'t emit the date if typeable=false', () => { - const wrapper = shallow(DateInput, { + const wrapper = mount(DateInput, { + shallow: true, propsData: { format: 'dd MMM yyyy', translation: en, @@ -65,4 +67,4 @@ describe('DateInput', () => { input.trigger('keyup') expect(wrapper.emitted().typedDate).not.toBeDefined() }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index df080e7e..20d79b28 100644 --- a/test/unit/specs/Datepicker/Datepicker.spec.js +++ b/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 { mount } from '@vue/test-utils' describe('Datepicker unmounted', () => { it('has a mounted hook', () => { @@ -23,16 +23,17 @@ describe('Datepicker mounted', () => { let date beforeEach(() => { date = new Date(2016, 1, 15) - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { format: 'yyyy-MM-dd', - value: date + modelValue: date } }) }) it('correctly sets the value when created', () => { - expect(wrapper.vm.value).toEqual(date) + expect(wrapper.vm.modelValue).toEqual(date) }) it('correctly sets the value from method', () => { @@ -51,7 +52,8 @@ describe('Datepicker mounted', () => { it('sets the date', () => { const date = new Date(2016, 9, 9) - const wrapper = shallow(Datepicker, { + const wrapper = mount(Datepicker, { + shallow: true, propsData: { format: 'yyyy-MM-dd' } @@ -62,7 +64,7 @@ describe('Datepicker mounted', () => { it('clears the date', () => { const date = new Date(2016, 9, 9) - const wrapper = shallow(Datepicker) + const wrapper = mount(Datepicker, { shallow: true }) wrapper.vm.setDate(date.getTime()) wrapper.vm.clearDate() expect(wrapper.vm.selectedDate).toEqual(null) @@ -101,13 +103,13 @@ describe('Datepicker mounted', () => { it('should emit selectedDisabled on a disabled timestamp', () => { const date = new Date(2016, 9, 1) - wrapper.vm.selectDisabledDate({timestamp: date.getTime()}) + wrapper.vm.selectDisabledDate({ timestamp: date.getTime() }) expect(wrapper.emitted().selectedDisabled).toBeTruthy() }) it('can select a day', () => { const date = new Date(2016, 9, 1) - wrapper.vm.selectDate({timestamp: date.getTime()}) + wrapper.vm.selectDate({ timestamp: date.getTime() }) expect(wrapper.vm.pageTimestamp).toEqual(date.getTime()) expect(wrapper.vm.selectedDate.getMonth()).toEqual(9) expect(wrapper.vm.showDayView).toEqual(false) @@ -116,7 +118,7 @@ describe('Datepicker mounted', () => { it('can select a month', () => { const date = new Date(2016, 9, 9) - wrapper.vm.selectMonth({timestamp: date.getTime()}) + wrapper.vm.selectMonth({ timestamp: date.getTime() }) expect(wrapper.emitted().changedMonth).toBeTruthy() expect(wrapper.emitted().changedMonth[0][0].timestamp).toEqual(date.getTime()) expect(new Date(wrapper.vm.pageTimestamp).getMonth()).toEqual(date.getMonth()) @@ -125,7 +127,7 @@ describe('Datepicker mounted', () => { it('can select a year', () => { const date = new Date(2018, 9, 9) - wrapper.vm.selectYear({timestamp: date.getTime()}) + wrapper.vm.selectYear({ timestamp: date.getTime() }) expect(wrapper.emitted().changedYear).toBeTruthy() expect(wrapper.emitted().changedYear[0][0].timestamp).toEqual(date.getTime()) expect(new Date(wrapper.vm.pageTimestamp).getFullYear()).toEqual(date.getFullYear()) @@ -133,7 +135,7 @@ describe('Datepicker mounted', () => { }) it('resets the default page date', () => { - const wrapper = shallow(Datepicker) + const wrapper = mount(Datepicker, { shallow: true }) const today = new Date() expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear()) expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth()) @@ -145,7 +147,7 @@ describe('Datepicker mounted', () => { }) it('does not set the default page date if a date is selected', () => { - const wrapper = shallow(Datepicker) + const wrapper = mount(Datepicker, { shallow: true }) const today = new Date() const pastDate = new Date(2018, 3, 20) expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear()) @@ -159,20 +161,23 @@ describe('Datepicker mounted', () => { }) it('sets the date on typedDate event', () => { - const wrapper = shallow(Datepicker) + const wrapper = mount(Datepicker, { shallow: true }) const today = new Date() wrapper.vm.setTypedDate(today) expect(wrapper.vm.selectedDate).toEqual(today) }) it('watches value', done => { - const wrapper = shallow(Datepicker, { + const wrapper = mount(Datepicker, { + shallow: true, propsData: { - value: '2018-01-01' + modelValue: '2018-01-01' } }) const spy = jest.spyOn(wrapper.vm, 'setValue') - wrapper.vm.value = '2018-04-26' + wrapper.setProps({ + modelValue: '2018-04-26' + }) wrapper.vm.$nextTick(() => { expect(spy).toBeCalled() done() @@ -180,13 +185,16 @@ describe('Datepicker mounted', () => { }) it('watches openDate', done => { - const wrapper = shallow(Datepicker, { + const wrapper = mount(Datepicker, { + shallow: true, propsData: { openDate: new Date(2018, 0, 1) } }) const spy = jest.spyOn(wrapper.vm, 'setPageDate') - wrapper.vm.openDate = new Date(2018, 3, 26) + wrapper.setProps({ + openDate: new Date(2018, 3, 26) + }) wrapper.vm.$nextTick(() => { expect(spy).toBeCalled() done() @@ -194,13 +202,16 @@ describe('Datepicker mounted', () => { }) it('watches initialView', done => { - const wrapper = shallow(Datepicker, { + const wrapper = mount(Datepicker, { + shallow: true, propsData: { initialView: 'day' } }) const spy = jest.spyOn(wrapper.vm, 'setInitialView') - wrapper.vm.initialView = 'month' + wrapper.setProps({ + initialView: 'month' + }) wrapper.vm.$nextTick(() => { expect(spy).toBeCalled() done() @@ -209,7 +220,7 @@ describe('Datepicker mounted', () => { it('should emit changedMonth on a month change received from PickerDay', () => { const date = new Date(2016, 9, 1) - wrapper.vm.handleChangedMonthFromDayPicker({timestamp: date.getTime()}) + wrapper.vm.handleChangedMonthFromDayPicker({ timestamp: date.getTime() }) expect(wrapper.emitted().changedMonth).toBeTruthy() }) }) @@ -217,10 +228,11 @@ describe('Datepicker mounted', () => { describe('Datepicker.vue set by string', () => { let wrapper it('can parse a string date', () => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { format: 'yyyy MM dd', - value: '2016-02-20' + modelValue: '2016-02-20' } }) const date = new Date('2016-02-20') @@ -230,9 +242,10 @@ describe('Datepicker.vue set by string', () => { }) it('should nullify malformed value', () => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { - value: 'today' + modelValue: 'today' } }) expect(wrapper.vm.selectedDate).toBeNull() @@ -242,10 +255,11 @@ describe('Datepicker.vue set by string', () => { describe('Datepicker.vue set by timestamp', () => { let wrapper it('can parse unix timestamp', () => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { format: 'yyyy MM dd', - value: new Date(Date.UTC(2018, 0, 29)).getTime() + modelValue: new Date(Date.UTC(2018, 0, 29)).getTime() } }) expect(wrapper.vm.selectedDate.getFullYear()).toEqual(2018) @@ -271,13 +285,13 @@ describe('Datepicker.vue using UTC', () => { wrapper = mount(Datepicker, { propsData: { format: 'yyyy MM dd', - value: ambiguousDate, + modelValue: ambiguousDate, useUtc: true // This should fail if `useUtc=false` } }) // It's important to assert the input rendered output wrapper.vm.$nextTick(() => { - expect(wrapper.find(DateInput).vm.formattedValue).toEqual(UTCString) + expect(wrapper.findComponent(DateInput).vm.formattedValue).toEqual(UTCString) done() }) }) @@ -286,7 +300,7 @@ describe('Datepicker.vue using UTC', () => { describe('Datepicker with initial-view', () => { let wrapper it('should open in Day view', () => { - wrapper = shallow(Datepicker) + wrapper = mount(Datepicker, { shallow: true }) wrapper.vm.showCalendar() expect(wrapper.vm.computedInitialView).toEqual('day') expect(wrapper.vm.showDayView).toEqual(true) @@ -295,7 +309,8 @@ describe('Datepicker with initial-view', () => { }) it('should open in Month view', () => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { initialView: 'month' } @@ -308,7 +323,8 @@ describe('Datepicker with initial-view', () => { }) it('should open in Year view', () => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { initialView: 'year' } @@ -319,4 +335,4 @@ describe('Datepicker with initial-view', () => { expect(wrapper.vm.showMonthView).toEqual(false) expect(wrapper.vm.showYearView).toEqual(true) }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/Datepicker/inline.spec.js b/test/unit/specs/Datepicker/inline.spec.js index 8cb743ae..38daf83c 100644 --- a/test/unit/specs/Datepicker/inline.spec.js +++ b/test/unit/specs/Datepicker/inline.spec.js @@ -1,10 +1,11 @@ import Datepicker from '@/components/Datepicker.vue' -import {shallow} from '@vue/test-utils' +import { mount } from '@vue/test-utils' describe('Datepicker.vue inline', () => { let wrapper beforeEach(() => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { inline: true } @@ -18,7 +19,7 @@ describe('Datepicker.vue inline', () => { it('should not close the calendar when date is selected', () => { const date = new Date() - wrapper.vm.selectDate({timestamp: date.getTime()}) + wrapper.vm.selectDate({ timestamp: date.getTime() }) expect(wrapper.vm.isOpen).toEqual(true) document.body.click() expect(wrapper.vm.isOpen).toEqual(true) diff --git a/test/unit/specs/Datepicker/openDate.spec.js b/test/unit/specs/Datepicker/openDate.spec.js index de2207df..07b48e71 100644 --- a/test/unit/specs/Datepicker/openDate.spec.js +++ b/test/unit/specs/Datepicker/openDate.spec.js @@ -1,11 +1,12 @@ import Datepicker from '@/components/Datepicker.vue' -import {shallow} from '@vue/test-utils' +import { mount } from '@vue/test-utils' describe('Datepicker with open date', () => { const openDate = new Date(2016, 9, 12) let wrapper beforeEach(() => { - wrapper = shallow(Datepicker, { + wrapper = mount(Datepicker, { + shallow: true, propsData: { openDate: openDate } @@ -28,13 +29,13 @@ describe('Datepicker with open date', () => { it('should open with selected date if one is set', () => { const newDate = new Date(2018, 10, 9) - wrapper.vm.selectDate({timestamp: newDate.getTime()}) + wrapper.vm.selectDate({ timestamp: newDate.getTime() }) expect(wrapper.vm.pageDate.getMonth()).toEqual(10) expect(wrapper.vm.pageDate.getFullYear()).toEqual(2018) }) it('should show today\'s date if no open date is set', () => { - wrapper = shallow(Datepicker) + wrapper = mount(Datepicker, { shallow: true }) const today = new Date() expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth()) expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear()) diff --git a/test/unit/specs/PickerDay/changeMonths.spec.js b/test/unit/specs/PickerDay/changeMonths.spec.js index 57170dc4..dc79060d 100644 --- a/test/unit/specs/PickerDay/changeMonths.spec.js +++ b/test/unit/specs/PickerDay/changeMonths.spec.js @@ -1,11 +1,12 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerDay: changing months', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerDay, { + wrapper = mount(PickerDay, { + shallow: true, propsData: { translation: en, allowedToShowView: () => true, diff --git a/test/unit/specs/PickerDay/disabledDates.spec.js b/test/unit/specs/PickerDay/disabledDates.spec.js index 8ed6b3e7..7a0080ab 100644 --- a/test/unit/specs/PickerDay/disabledDates.spec.js +++ b/test/unit/specs/PickerDay/disabledDates.spec.js @@ -1,14 +1,15 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerDay: disabled', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerDay, { + wrapper = mount(PickerDay, { + shallow: true, propsData: { allowedToShowView: () => true, - showMonthCalendar: () => {}, + showMonthCalendar: () => { }, translation: en, disabledDates: { to: new Date(2016, 9, 4), @@ -25,7 +26,7 @@ describe('PickerDay: disabled', () => { }) it('should not select a disabled date', () => { - expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false) + expect(wrapper.vm.selectDate({ isDisabled: true })).toEqual(false) }) it('cant change to a disabled month', () => { @@ -39,8 +40,8 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isNextMonthDisabled()).toBeTruthy() }) - it('should detect disabled dates', () => { - wrapper.setProps({ + it('should detect disabled dates', async () => { + await wrapper.setProps({ disabledDates: { ranges: [{ from: new Date(2005, 6, 5), @@ -55,8 +56,8 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2026, 9, 2))).toEqual(true) }) - it('can accept an array of disabled dates', () => { - wrapper.setProps({ + it('can accept an array of disabled dates', async () => { + await wrapper.setProps({ disabledDates: { dates: [ new Date(2016, 9, 2), @@ -69,8 +70,8 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 3))).toEqual(false) }) - it('can accept an array of disabled days of the week', () => { - wrapper.setProps({ + it('can accept an array of disabled days of the week', async () => { + await wrapper.setProps({ disabledDates: { days: [6, 0] } @@ -79,8 +80,8 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 3))).toEqual(false) }) - it('can accept an array of disabled days of the month', () => { - wrapper.setProps({ + it('can accept an array of disabled days of the month', async () => { + await wrapper.setProps({ disabledDates: { daysOfMonth: [29, 30, 31] } @@ -91,10 +92,10 @@ describe('PickerDay: disabled', () => { expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false) }) - it('can accept a customPredictor to check if the date is disabled', () => { - wrapper.setProps({ + it('can accept a customPredictor to check if the date is disabled', async () => { + await wrapper.setProps({ disabledDates: { - customPredictor (date) { + customPredictor(date) { if (date.getDate() % 4 === 0) { return true } @@ -108,7 +109,7 @@ describe('PickerDay: disabled', () => { }) it('should emit a selectedDisabled event for a disabled date', () => { - expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false) + expect(wrapper.vm.selectDate({ isDisabled: true })).toEqual(false) expect(wrapper.emitted().selectedDisabled).toBeTruthy() }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerDay/highlightedDates.spec.js b/test/unit/specs/PickerDay/highlightedDates.spec.js index e2a31738..ae887fc7 100644 --- a/test/unit/specs/PickerDay/highlightedDates.spec.js +++ b/test/unit/specs/PickerDay/highlightedDates.spec.js @@ -1,11 +1,12 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerDay highlight date', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerDay, { + wrapper = mount(PickerDay, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -15,7 +16,7 @@ describe('PickerDay highlight date', () => { from: new Date(2016, 12, 4) }, disabledDates: { - dates: [ new Date(2016, 12, 5) ] + dates: [new Date(2016, 12, 5)] } } }) @@ -30,8 +31,8 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 5))).toEqual(false) }) - it('should highlight a disabled date when explicitly configured to', () => { - wrapper.setProps({ + it('should highlight a disabled date when explicitly configured to', async () => { + await wrapper.setProps({ highlighted: { to: new Date(2016, 12, 8), from: new Date(2016, 12, 4), @@ -57,8 +58,8 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 3))).toEqual(false) }) - it('can accept an array of highlighted dates', () => { - wrapper.setProps({ + it('can accept an array of highlighted dates', async () => { + await wrapper.setProps({ highlighted: { dates: [ new Date(2016, 9, 2), @@ -71,8 +72,8 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false) }) - it('can accept an array of highlighted days of the week', () => { - wrapper.setProps({ + it('can accept an array of highlighted days of the week', async () => { + await wrapper.setProps({ highlighted: { days: [6, 0] } @@ -81,8 +82,8 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false) }) - it('can accept an array of highlighted days of the month', () => { - wrapper.setProps({ + it('can accept an array of highlighted days of the month', async () => { + await wrapper.setProps({ highlighted: { daysOfMonth: [1, 10, 31] } @@ -95,10 +96,10 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightedDate(new Date(2016, 7, 20))).toEqual(false) }) - it('can accept a customPredictor to check if the date is highlighted', () => { - wrapper.setProps({ + it('can accept a customPredictor to check if the date is highlighted', async () => { + await wrapper.setProps({ highlighted: { - customPredictor (date) { + customPredictor(date) { if (date.getDate() % 5 === 0) { return true } @@ -122,4 +123,4 @@ describe('PickerDay highlight date', () => { expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 6))).toEqual(false) expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 7))).toEqual(false) }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerDay/initialDom.spec.js b/test/unit/specs/PickerDay/initialDom.spec.js index 06d5c506..08117aa3 100644 --- a/test/unit/specs/PickerDay/initialDom.spec.js +++ b/test/unit/specs/PickerDay/initialDom.spec.js @@ -1,11 +1,12 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerDay: DOM', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerDay, { + wrapper = mount(PickerDay, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, diff --git a/test/unit/specs/PickerDay/mondayFirst.spec.js b/test/unit/specs/PickerDay/mondayFirst.spec.js index 59458385..acd19f45 100644 --- a/test/unit/specs/PickerDay/mondayFirst.spec.js +++ b/test/unit/specs/PickerDay/mondayFirst.spec.js @@ -1,11 +1,12 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } 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 = mount(PickerDay, { + shallow: true, propsData: { mondayFirst: true, translation: en, @@ -23,17 +24,17 @@ describe('PickerDay: Datepicker with monday as first day of week', () => { expect(wrapper.vm.daysOfWeek[6]).toEqual('Sun') }) - it('should have 6 blankDays when month starts from Sunday', () => { - wrapper.setProps({ + it('should have 6 blankDays when month starts from Sunday', async () => { + await wrapper.setProps({ pageDate: new Date(2018, 3, 1) }) expect(wrapper.vm.blankDays).toEqual(6) }) - it('should have no blankDays when month starts from Monday', () => { - wrapper.setProps({ + it('should have no blankDays when month starts from Monday', async () => { + await wrapper.setProps({ pageDate: new Date(2018, 9, 1) }) expect(wrapper.vm.blankDays).toEqual(0) }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerDay/pickerDay.spec.js b/test/unit/specs/PickerDay/pickerDay.spec.js index 5b17558c..fbf9bafd 100644 --- a/test/unit/specs/PickerDay/pickerDay.spec.js +++ b/test/unit/specs/PickerDay/pickerDay.spec.js @@ -1,11 +1,12 @@ import PickerDay from '@/components/PickerDay.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerDay: DOM', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerDay, { + wrapper = mount(PickerDay, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -15,9 +16,9 @@ describe('PickerDay: DOM', () => { }) }) - it('knows the selected date', () => { + it('knows the selected date', async () => { const newDate = new Date(2016, 9, 15) - wrapper.setProps({ + await wrapper.setProps({ selectedDate: newDate }) expect(wrapper.vm.isSelectedDate(newDate)).toEqual(true) @@ -25,7 +26,7 @@ describe('PickerDay: DOM', () => { }) it('emits an event when selected', () => { - wrapper.vm.selectDate({isDisabled: false}) + wrapper.vm.selectDate({ isDisabled: false }) expect(wrapper.emitted().selectDate).toBeTruthy() }) @@ -38,4 +39,4 @@ describe('PickerDay: DOM', () => { yearBtn.trigger('click') expect(wrapper.emitted().showMonthCalendar).toBeTruthy() }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerMonth/disabledMonths.spec.js b/test/unit/specs/PickerMonth/disabledMonths.spec.js index 03492364..098752ef 100644 --- a/test/unit/specs/PickerMonth/disabledMonths.spec.js +++ b/test/unit/specs/PickerMonth/disabledMonths.spec.js @@ -1,11 +1,12 @@ import PickerMonth from '@/components/PickerMonth.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerMonth', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerMonth, { + wrapper = mount(PickerMonth, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -20,14 +21,14 @@ describe('PickerMonth', () => { }) it('cant select a disabled month', () => { - const month = {isDisabled: true} + const month = { isDisabled: true } expect(wrapper.vm.selectMonth(month)).toEqual(false) }) - it('can accept a customPredictor to check if the month is disabled', () => { - wrapper.setProps({ + it('can accept a customPredictor to check if the month is disabled', async () => { + await wrapper.setProps({ disabledDates: { - customPredictor (date) { + customPredictor(date) { if (date.getMonth() % 4 === 0) { return true } @@ -39,4 +40,4 @@ describe('PickerMonth', () => { expect(wrapper.vm.isDisabledMonth(new Date(2018, 8, 24))).toEqual(true) expect(wrapper.vm.isDisabledMonth(new Date(2018, 2, 11))).toEqual(false) }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js index 985bc428..5c7280e1 100644 --- a/test/unit/specs/PickerMonth/pickerMonth.spec.js +++ b/test/unit/specs/PickerMonth/pickerMonth.spec.js @@ -1,11 +1,12 @@ import PickerMonth from '@/components/PickerMonth.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerMonth', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerMonth, { + wrapper = mount(PickerMonth, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -15,9 +16,9 @@ describe('PickerMonth', () => { }) }) - it('knows the selected month', () => { + it('knows the selected month', async () => { const newDate = new Date(2016, 9, 15) - wrapper.setProps({ + await wrapper.setProps({ selectedDate: newDate }) expect(wrapper.vm.isSelectedMonth(newDate)).toEqual(true) @@ -36,7 +37,7 @@ describe('PickerMonth', () => { it('emits date on selection', () => { const time = new Date().getTime() - wrapper.vm.selectMonth({timestamp: time}) + wrapper.vm.selectMonth({ timestamp: time }) expect(wrapper.emitted().selectMonth).toBeTruthy() expect(wrapper.emitted().selectMonth[0][0].timestamp).toEqual(time) }) @@ -46,4 +47,4 @@ describe('PickerMonth', () => { yearBtn.trigger('click') expect(wrapper.emitted().showYearCalendar).toBeTruthy() }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerYear/disabledYears.spec.js b/test/unit/specs/PickerYear/disabledYears.spec.js index 1dfcc36e..2ee4ee88 100644 --- a/test/unit/specs/PickerYear/disabledYears.spec.js +++ b/test/unit/specs/PickerYear/disabledYears.spec.js @@ -1,11 +1,12 @@ import PickerYear from '@/components/PickerYear.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerYear', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerYear, { + wrapper = mount(PickerYear, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -20,7 +21,7 @@ describe('PickerYear', () => { }) it('cant select a disabled year', () => { - const year = {isDisabled: true} + const year = { isDisabled: true } expect(wrapper.vm.selectYear(year)).toEqual(false) }) @@ -29,8 +30,8 @@ describe('PickerYear', () => { expect(wrapper.vm.nextDecade()).toEqual(false) }) - it('can\'t change decade when previous or next decades are disabled', () => { - wrapper.setProps({ + it('can\'t change decade when previous or next decades are disabled', async () => { + await wrapper.setProps({ pageDate: new Date(2016, 9, 15), disabledDates: { to: new Date(2010, 8, 6), @@ -41,8 +42,8 @@ describe('PickerYear', () => { expect(wrapper.vm.isNextDecadeDisabled()).toEqual(true) }) - it('can change decade despite having a disabled decade', () => { - wrapper.setProps({ + it('can change decade despite having a disabled decade', async () => { + await wrapper.setProps({ pageDate: new Date(2016, 9, 15), disabledDates: { to: new Date(2010, 11, 19), @@ -53,10 +54,10 @@ describe('PickerYear', () => { expect(wrapper.vm.isNextDecadeDisabled()).toEqual(false) }) - it('can accept a customPredictor to check if the year is disabled', () => { - wrapper.setProps({ + it('can accept a customPredictor to check if the year is disabled', async () => { + await wrapper.setProps({ disabledDates: { - customPredictor (date) { + customPredictor(date) { if (date.getFullYear() % 3 === 0) { return true } @@ -70,8 +71,8 @@ describe('PickerYear', () => { expect(wrapper.vm.isDisabledYear(new Date(2022, 2, 11))).toEqual(true) }) - it('does not disable the next decade button when disabled from date is in the first year of the next decade', () => { - wrapper.setProps({ + it('does not disable the next decade button when disabled from date is in the first year of the next decade', async () => { + await wrapper.setProps({ pageDate: new Date(1998, 9, 15), disabledDates: { from: new Date(2000, 0, 1) @@ -80,12 +81,12 @@ describe('PickerYear', () => { expect(wrapper.vm.isNextDecadeDisabled()).toEqual(false) }) - it('does disable the next decade button when disabled from date is the last day year of the current decade', () => { - wrapper.setProps({ + it('does disable the next decade button when disabled from date is the last day year of the current decade', async () => { + await wrapper.setProps({ disabledDates: { from: new Date(1999, 12, 31) } }) expect(wrapper.vm.isNextDecadeDisabled()).toEqual(true) }) -}) +}) \ No newline at end of file diff --git a/test/unit/specs/PickerYear/pickerYear.spec.js b/test/unit/specs/PickerYear/pickerYear.spec.js index a3c05d8d..e292333e 100644 --- a/test/unit/specs/PickerYear/pickerYear.spec.js +++ b/test/unit/specs/PickerYear/pickerYear.spec.js @@ -1,11 +1,12 @@ import PickerYear from '@/components/PickerYear.vue' -import {shallow} from '@vue/test-utils' -import {en} from '@/locale' +import { mount } from '@vue/test-utils' +import { en } from '@/locale' describe('PickerYear', () => { let wrapper beforeEach(() => { - wrapper = shallow(PickerYear, { + wrapper = mount(PickerYear, { + shallow: true, propsData: { allowedToShowView: () => true, translation: en, @@ -15,9 +16,9 @@ describe('PickerYear', () => { }) }) - it('knows the selected year', () => { + it('knows the selected year', async () => { const newDate = new Date(2016, 9, 15) - wrapper.setProps({ + await wrapper.setProps({ selectedDate: newDate }) expect(wrapper.vm.isSelectedYear(newDate)).toEqual(true) @@ -34,19 +35,19 @@ describe('PickerYear', () => { expect(wrapper.emitted().changedDecade).toBeTruthy() }) - it('formats the decade range', () => { - wrapper.setProps({ + it('formats the decade range', async () => { + await wrapper.setProps({ pageDate: new Date(2021, 1, 1) }) expect(wrapper.vm.getPageDecade).toEqual('2020 - 2029') - wrapper.setProps({ + await wrapper.setProps({ pageDate: new Date(2001, 1, 1) }) expect(wrapper.vm.getPageDecade).toEqual('2000 - 2009') }) it('emits an event when selected', () => { - wrapper.vm.selectYear({isDisabled: false}) + wrapper.vm.selectYear({ isDisabled: false }) expect(wrapper.emitted().selectYear).toBeTruthy() }) -}) +}) \ No newline at end of file