News (#40)

* Clear Button Feature
* Test Coverage
* New Tests

Author: edisdev

.github/workflows/ci.yml

@@ -9,10 +9,16 @@ on:
 jobs:
   ci:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
 
     steps:
       - uses: actions/checkout@v2
-
+      - uses: actions/setup-node@v2-beta
+        with: 
+          node-version: ${{ matrix.node-version }}
+  
       - name: Install dependencies
         run: yarn install
 
@@ -22,5 +28,13 @@ jobs:
       - name: Run linter
         run: yarn lint
 
+      - name: full-icu install
+        run: yarn global add full-icu
+  
+      - name: set NODE_ICU_DATA path
+        run: echo "NODE_ICU_DATA=`node-full-icu-path 2>/dev/null`" >> $GITHUB_ENV
+      - name: 'Echo $GITHUB_ENV'
+        run: echo "NODE_ICU_DATA=" >> $GITHUB_ENV
+
       - name: Run tests
-        run: yarn test:unit
+        run: yarn test:unit

.gitignore

@@ -22,4 +22,7 @@ yarn-error.log*
 
 # dependencies lock
 yarn.lock
-package-lock.json
+package-lock.json
+
+# test
+coverage

development/Example.vue

@@ -33,6 +33,7 @@
             :disabled-end-date="example.disabledEndDate"
             :disabled="example.disabled || false"
             :circle="example.circle || false"
+            :show-clear-button="example.showClearButton || false"
           />
           <blockquote class="exam-props">
             <textarea :value="JSON.stringify(example, null, 2)" readonly>
@@ -59,6 +60,7 @@
             :disabled-end-date="example.disabledEndDate"
             :disabled="example.disabled || false"
             :circle="example.circle || false"
+            :show-clear-button="example.showClearButton || false"
           />
           <blockquote class="exam-props">
             <textarea :value="JSON.stringify(example, null, 2)" readonly>
@@ -91,6 +93,16 @@ export default {
           value: null,
           firstDayOfWeek: 'monday'
         },
+        {
+          title: 'With Clear Button',
+          inputClass: 'exampleDatePicker',
+          lang: 'tr',
+          position: 'bottom',
+          range: false,
+          showClearButton: true,
+          value: new Date(),
+          firstDayOfWeek: 'monday'
+        },
         {
           title: 'Range',
           inputClass: 'exampleDatePicker',

jest.config.js

@@ -2,5 +2,7 @@ module.exports = {
   preset: '@vue/cli-plugin-unit-jest',
   transformIgnorePatterns: [
     'node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'
-  ]
+  ],
+  collectCoverage: true,
+  collectCoverageFrom: ['./src/**/*.{js,vue}']
 }

src/components/calendar.vue

@@ -6,7 +6,7 @@
         <button
           type="button"
           class="viewButton"
-          @click="changeViewMode('years')"
+          @click="changeViewMode(MODE_ENUMS.YEAR)"
         >
           {{ viewButtonText }}
         </button>
@@ -43,7 +43,7 @@
         </button>
       </div>
       <div class="viewmode">
-        <div class="years" v-show="viewMode === 'years'">
+        <div class="years" v-show="viewMode === MODE_ENUMS.YEAR">
           <button
             v-for="y in years"
             :key="y.year"
@@ -55,7 +55,7 @@
             {{ y.year }}
           </button>
         </div>
-        <div class="months" v-show="viewMode === 'months'">
+        <div class="months" v-show="viewMode === MODE_ENUMS.MONTH">
           <button
             v-for="month in months"
             :key="month.index"
@@ -73,6 +73,8 @@
 </template>
 
 <script>
+import { MODE_ENUMS } from '@/utils/modes'
+
 export default {
   props: {
     calendar: {
@@ -122,12 +124,15 @@ export default {
       } else return this.selectedDate
     },
     isDayMode () {
-      return this.viewMode === 'days'
+      return this.viewMode === MODE_ENUMS.DAY
     },
     yearsRange () {
       const years = this.calendar.years
       return years[0] + this.rangeSeperator + years[years.length - 1]
     },
+    MODE_ENUMS () {
+      return MODE_ENUMS
+    },
     dayViewText () {
       return (
         this.calendar.months[this.currentDate.month].name +
@@ -138,10 +143,10 @@ export default {
     viewButtonText () {
       let text
       switch (this.viewMode) {
-        case 'years':
+        case MODE_ENUMS.YEAR:
           text = this.yearsRange
           break
-        case 'months':
+        case MODE_ENUMS.MONTH:
           text = this.currentDate.year
           break
         default:
@@ -206,31 +211,31 @@ export default {
     },
     prev () {
       switch (this.viewMode) {
-        case 'days':
+        case MODE_ENUMS.DAY:
           this.$emit('prevMonth', this.pickerType)
           break
-        case 'months':
+        case MODE_ENUMS.MONTH:
           this.$emit('setUniqYear', {
             year: this.currentDate.year - 1,
             picker: this.pickerType
           })
           break
-        case 'years':
+        case MODE_ENUMS.YEAR:
           this.$emit('setYears', { route: 'prev', picker: this.pickerType })
       }
     },
     next () {
       switch (this.viewMode) {
-        case 'days':
+        case MODE_ENUMS.DAY:
           this.$emit('nextMonth', this.pickerType)
           break
-        case 'months':
+        case MODE_ENUMS.MONTH:
           this.$emit('setUniqYear', {
             year: this.currentDate.year + 1,
             picker: this.pickerType
           })
           break
-        case 'years':
+        case MODE_ENUMS.YEAR:
           this.$emit('setYears', { route: 'next', picker: this.pickerType })
       }
     },