Setup e2e testing with BDD, Cypress & Cucumber

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'airbnb-base',
     'plugin:compat/recommended',
     'prettier',
+    'plugin:cypress/recommended',
     'plugin:jest/recommended',
     'plugin:vue/recommended',
   ],

.gitignore

@@ -5,7 +5,10 @@ npm-debug.log
 .coveralls.yml
 example/demo.js
 example/demo.js.map
+example-e2e/app.js
+example-e2e/app.js.map
 test/unit/coverage
+test/e2e/cucumber-json
 yarn-debug.log*
 yarn-error.log*
 .idea

cypress.json

@@ -0,0 +1,8 @@
+{
+  "pluginsFile": "test/e2e/plugins/index.js",
+  "baseUrl": "http://localhost:8080",
+  "chromeWebSecurity": true,
+  "testFiles": "**/*.{feature,features}",
+  "nodeVersion": "system",
+  "defaultCommandTimeout": 1000
+}

example-e2e/App.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="app">
+    <h1>Datepicker Integration Tests</h1>
+    <div class="example">
+      <h3>Default datepicker...</h3>
+      <Datepicker
+        :id="id"
+        :append-to-body="appendToBody"
+        :autofocus="autofocus"
+        :bootstrap-styling="bootstrapStyling"
+        :calendar-button="calendarButton"
+        :calendar-class="calendarClass"
+        :clear-button="clearButton"
+        :day-cell-content="dayCellContent"
+        :disabled="disabled"
+        :disabled-dates="disabledDates"
+        :first-day-of-week="firstDayOfWeek"
+        :fixed-position="fixedPosition"
+        :format="format"
+        :full-month-name="fullMonthName"
+        :initial-view="initialView"
+        :inline="inline"
+        :input-class="inputClass"
+        :language="languages[language]"
+        :maxlength="maxLength"
+        :maximum-view="maximumView"
+        :minimum-view="minimumView"
+        :name="name"
+        :open-date="openDate"
+        :pattern="pattern"
+        :placeholder="placeholder"
+        :required="required"
+        :ref-name="refName"
+        :show-edge-dates="showEdgeDates"
+        :show-header="showHeader"
+        :show-calendar-on-focus="showCalendarOnFocus"
+        :show-calendar-on-button-click="showCalendarOnButtonClick"
+        :tabindex="tabindex"
+        :typeable="typeable"
+        :use-utc="useUtc"
+        :value="value"
+        :wrapper-class="wrapperClass"
+        :year-picker-range="yearPickerRange"
+      />
+      <code>
+        &lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+  </div>
+</template>
+
+<script>
+import Datepicker from '~/components/Datepicker.vue'
+import * as lang from '~/locale/index'
+
+export default {
+  name: 'Demo',
+  components: {
+    Datepicker,
+  },
+  data() {
+    return {
+      languages: lang,
+    }
+  },
+  computed: {
+    appendToBody() {
+      return this.$store.state.appendToBody
+    },
+    autofocus() {
+      return this.$store.state.autofocus
+    },
+    bootstrapStyling() {
+      return this.$store.state.bootstrapStyling
+    },
+    calendarButton() {
+      return this.$store.state.calendarButton
+    },
+    calendarClass() {
+      return this.$store.state.calendarClass
+    },
+    clearButton() {
+      return this.$store.state.clearButton
+    },
+    dayCellContent() {
+      return this.$store.state.dayCellContent
+    },
+    disabled() {
+      return this.$store.state.disabled
+    },
+    disabledDates() {
+      return this.$store.state.disabledDates
+    },
+    firstDayOfWeek() {
+      return this.$store.state.firstDayOfWeek
+    },
+    fixedPosition() {
+      return this.$store.state.fixedPosition
+    },
+    format() {
+      return this.$store.state.format
+    },
+    fullMonthName() {
+      return this.$store.state.fullMonthName
+    },
+    id() {
+      return this.$store.state.id
+    },
+    initialView() {
+      return this.$store.state.initialView
+    },
+    inline() {
+      return this.$store.state.inline
+    },
+    inputClass() {
+      return this.$store.state.inputClass
+    },
+    language() {
+      return this.$store.state.language
+    },
+    maxLength() {
+      return this.$store.state.maxLength
+    },
+    maximumView() {
+      return this.$store.state.maximumView
+    },
+    minimumView() {
+      return this.$store.state.minimumView
+    },
+    name() {
+      return this.$store.state.name
+    },
+    openDate() {
+      return this.$store.state.openDate
+    },
+    pattern() {
+      return this.$store.state.pattern
+    },
+    placeholder() {
+      return this.$store.state.placeholder
+    },
+    required() {
+      return this.$store.state.required
+    },
+    refName() {
+      return this.$store.state.refName
+    },
+    showEdgeDates() {
+      return this.$store.state.showEdgeDates
+    },
+    showHeader() {
+      return this.$store.state.showHeader
+    },
+    showCalendarOnFocus() {
+      return this.$store.state.showCalendarOnFocus
+    },
+    showCalendarOnButtonClick() {
+      return this.$store.state.showCalendarOnButtonClick
+    },
+    tabindex() {
+      return this.$store.state.tabindex
+    },
+    typeable() {
+      return this.$store.state.typeable
+    },
+    useUtc() {
+      return this.$store.state.useUtc
+    },
+    value() {
+      return this.$store.state.value
+    },
+    wrapperClass() {
+      return this.$store.state.wrapperClass
+    },
+    yearPickerRange() {
+      return this.$store.state.yearPickerRange
+    },
+  },
+}
+</script>
+
+<style>
+body {
+  font-family: 'Helvetica Neue Light', Helvetica, sans-serif;
+  padding: 1em 2em 2em;
+}
+
+input,
+select {
+  padding: 0.75em 0.5em;
+  font-size: 100%;
+  border: 1px solid #ccc;
+  width: 100%;
+}
+
+.example {
+  background: #f2f2f2;
+  border: 1px solid #ddd;
+  padding: 0 1em 1em;
+  margin-bottom: 2em;
+}
+
+code,
+pre {
+  margin: 1em 0;
+  padding: 1em;
+  border: 1px solid #bbb;
+  display: block;
+  background: #ddd;
+  border-radius: 3px;
+}
+
+h5 {
+  font-size: 100%;
+  padding: 0;
+}
+
+h3 {
+  margin-top: 20px;
+}
+
+.form-group label {
+  font-size: 80%;
+  display: block;
+}
+</style>

example-e2e/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Vue.js Datepicker</title>
+    <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./app.js"></script>
+  </body>
+</html>

example-e2e/main.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import App from './App.vue'
+import storeConfig from './store'
+
+Vue.use(Vuex)
+Vue.config.productionTip = false
+Vue.config.devtools = false
+
+const store = new Vuex.Store(storeConfig)
+
+const app = new Vue({
+  render: (h) => h(App),
+  store,
+}).$mount('#app')
+
+window.app = app

example-e2e/store/index.js

@@ -0,0 +1,44 @@
+export default {
+  state: {
+    appendToBody: false,
+    autofocus: false,
+    bootstrapStyling: false,
+    calendarButton: false,
+    calendarClass: null,
+    clearButton: false,
+    dayCellContent: (day) => day.date,
+    disabled: false,
+    disabledDates: {},
+    firstDayOfWeek: 'sun',
+    fixedPosition: 'bottom',
+    format: 'dd MMM yyyy',
+    fullMonthName: false,
+    id: null,
+    initialView: '',
+    inline: false,
+    inputClass: null,
+    language: 'en',
+    maxLength: null,
+    maximumView: 'year',
+    minimumView: 'day',
+    name: null,
+    openDate: null,
+    pattern: null,
+    placeholder: 'Select Date',
+    required: false,
+    refName: '',
+    showEdgeDates: true,
+    showHeader: true,
+    showCalendarOnFocus: false,
+    showCalendarOnButtonClick: false,
+    tabindex: null,
+    typeable: false,
+    useUtc: false,
+    value: '',
+    wrapperClass: null,
+    yearPickerRange: 10,
+  },
+  getters: {},
+  actions: {},
+  modules: {},
+}