Merge remote-tracking branch 'public/update-lib'

kjugi · May 9, 2020 · 1c35f6d · 1c35f6d
2 parents 9db4b36 + c0be39b
commit 1c35f6d
Show file tree

Hide file tree

Showing 20 changed files with 431 additions and 163 deletions.
diff --git a/api/package.json b/api/package.json
@@ -5,5 +5,8 @@
   },
   "scripts": {
     "start": "node app.js"
+  },
+  "engines": {
+    "node" : ">=12"
   }
 }
diff --git a/done/jest.config.js b/done/jest.config.js
@@ -5,5 +5,8 @@ module.exports = {
   ],
   setupFiles: [
     'jest-date-mock'
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/tests/setup.js'
   ]
 }
diff --git a/done/package.json b/done/package.json
@@ -8,6 +8,9 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
+  "engines": {
+    "node": ">=12"
+  },
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
@@ -16,18 +19,19 @@
     "jest-serializer-vue": "^2.0.2",
     "snapshot-diff": "^0.7.0",
     "vue": "^2.6.11",
-    "vue-router": "^3.1.5",
+    "vue-router": "^3.1.6",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.7.0",
     "@vue/cli-plugin-babel": "~4.2.0",
     "@vue/cli-plugin-eslint": "~4.2.0",
     "@vue/cli-plugin-router": "~4.2.0",
     "@vue/cli-plugin-unit-jest": "~4.2.0",
     "@vue/cli-plugin-vuex": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
     "@vue/eslint-config-standard": "^5.1.0",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/test-utils": "1.0.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.1",

diff --git a/done/src/components/Checkbox.vue b/done/src/components/Checkbox.vue
@@ -7,13 +7,15 @@
     <input
       :id="id"
       v-model="localValue"
+      v-bind="$attrs"
       type="checkbox"
     />
   </div>
 </template>
 
 <script>
 export default {
+  inheritAttrs: false,
   props: {
     id: {
       type: String,

diff --git a/done/src/store/index.js b/done/src/store/index.js
@@ -22,16 +22,15 @@ export const actions = {
     try {
       await axios.post('http://localhost:5679/example/confirmMeeting', data)
       commit('exampleCommit', true)
-    }
-    catch (error) {
+    } catch (error) {
       commit('exampleCommit', false)
     }
   }
 }
 
 // Just for test case purposes
 export const getters = {
-  getTodayMeetings ( state ) {
+  getTodayMeetings (state) {
     const today = new Date().toJSON().slice(0, 10)
     return state.meetingList.filter(meeting => meeting.date === today)
   }

diff --git a/done/src/views/AddMeeting.vue b/done/src/views/AddMeeting.vue
@@ -12,14 +12,20 @@
           <select
             v-if="predefined"
             id="email"
+            data-testid="emailInput"
             v-model="selectedPerson"
             class="add-meeting__input"
           >
-            <option value="" selected></option>
+            <option
+              value=""
+              selected
+              data-testid="predefinedEmailOption"
+            ></option>
 
             <option
               v-for="(option, index) in options"
               :key="index"
+              data-testid="predefinedEmailOption"
             >
               {{ option.text }}
             </option>
@@ -29,6 +35,7 @@
             v-else
             id="email"
             v-model="email"
+            data-testid="emailInput"
             type="text"
             class="add-meeting__input"
             placeholder="Email address"
@@ -38,6 +45,7 @@
         <checkbox-field
           id="predefined"
           v-model="predefined"
+          data-testid="predefinedCheckbox"
           label="Predefined?"
           class="add-meeting__field"
           @change="clearPersonData"
@@ -53,6 +61,7 @@
           ref="meetingDate"
           id="meetingDate"
           v-model="meetingDate"
+          data-testid="meetingDateInput"
           type="date"
           class="add-meeting__input"
           :min="getFormattedDate"
@@ -62,6 +71,7 @@
       <div class="add-meeting__action-wrapper">
         <button
           class="add-meeting__button"
+          data-testid="addMeetingButton"
           @click="addMeeting"
           :disabled="!isFormValid || isFormBlocked"
         >
@@ -71,6 +81,7 @@
         <p
           v-if="!isFormValid"
           class="add-meeting__error"
+          data-testid="generalErrorMessage"
         >
           You've got a problem in form
         </p>

diff --git a/done/src/views/Home.vue b/done/src/views/Home.vue
@@ -8,6 +8,7 @@
         v-for="(item, index) in meetingList"
         :key="index"
         class="home__item"
+        data-testid="meetingItem"
       >
         <h2>
           {{ item.who }}
@@ -18,7 +19,10 @@
         </span>
       </div>
     </div>
-    <div v-else>
+    <div
+      v-else
+      data-testid="emptyMessage"
+    >
       Meeting list is empty!
     </div>
   </div>

diff --git a/done/tests/setup.js b/done/tests/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
diff --git a/done/tests/unit/AddMeeting.spec.js b/done/tests/unit/AddMeeting.spec.js
@@ -52,11 +52,13 @@ describe('views/AddMeeting.vue', () => {
       'add-meeting',
       'add-meeting--loading'
     ])
-    expect(wrapper.find('#email').exists()).toBe(true)
-    expect(wrapper.find('#predefined').exists()).toBe(true)
-    expect(wrapper.find({ ref: 'meetingDate' }).exists()).toBe(true)
-    expect(wrapper.find('.add-meeting__button').exists()).toBe(true)
-    expect(wrapper.find('.add-meeting__error').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="emailInput"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="predefinedCheckbox"]').exists())
+      .toBe(true)
+    expect(wrapper.findComponent({ ref: 'meetingDate' }).exists()).toBe(true)
+    expect(wrapper.find('[data-testid="addMeetingButton"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="generalErrorMessage"]').exists())
+      .toBe(true)
     expect(wrapper).toMatchSnapshot()
   })
 
@@ -93,7 +95,11 @@ describe('views/AddMeeting.vue', () => {
     expect(wrapper.vm.isMessageShowed).toBe(false)
     expect(wrapper.vm.messageTitle).toBe('')
     expect(wrapper.vm.options.length).toBe(3)
-    expect(wrapper.findAll('#email option').length).toBe(4)
+    expect(
+      wrapper.findAll(
+        '[data-testid="emailInput"] [data-testid="predefinedEmailOption"]'
+      ).length
+    ).toBe(4)
     expect(snapshotDiff(present, next)).toMatchSnapshot()
   })
 
@@ -105,7 +111,9 @@ describe('views/AddMeeting.vue', () => {
     expect(wrapper.vm.selectedPerson).toBe('')
     expect(present).toMatchSnapshot()
 
-    wrapper.findAll('#email option').at(2).setSelected()
+    wrapper.findAll(
+      '[data-testid="emailInput"] [data-testid="predefinedEmailOption"'
+    ).at(2).setSelected()
     next = wrapper.html()
 
     expect(wrapper.vm.selectedPerson).toBe('Example Person1')
@@ -120,25 +128,25 @@ describe('views/AddMeeting.vue', () => {
     expect(wrapper.vm.predefined).toBe(true)
     expect(present).toMatchSnapshot()
 
-    await wrapper.find('#predefined').setChecked(false)
+    await wrapper.find('[data-testid="predefinedCheckbox"]').setChecked(false)
     next = wrapper.html()
 
     expect(wrapper.vm.predefined).toBe(false)
     expect(snapshotDiff(present, next)).toMatchSnapshot()
 
     present = next
-    wrapper.find('#email').setValue('example value')
+    wrapper.find('[data-testid="emailInput"]').setValue('example value')
     next = wrapper.html()
 
     expect(wrapper.vm.email).toBe('example value')
     expect(snapshotDiff(present, next)).toMatchSnapshot()
 
     present = next
-    await wrapper.find('#predefined').setChecked(true)
+    await wrapper.find('[data-testid="predefinedCheckbox"]').setChecked(true)
     next = wrapper.html()
 
     expect(wrapper.vm.email).toBe('')
-    expect(wrapper.find('#email').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="emailInput"]').exists()).toBe(true)
     expect(snapshotDiff(present, next)).toMatchSnapshot()
   })
 
@@ -151,10 +159,11 @@ describe('views/AddMeeting.vue', () => {
     expect(wrapper.vm.meetingDate).toBe('')
     expect(present).toMatchSnapshot()
 
-    wrapper.find('#meetingDate').setValue(todayDateFormat)
+    wrapper.find('[data-testid="meetingDateInput"]').setValue(todayDateFormat)
     next = wrapper.html()
 
-    expect(wrapper.find('#meetingDate').element.value).toBe(todayDateFormat)
+    expect(wrapper.find('[data-testid="meetingDateInput"]').element.value)
+      .toBe(todayDateFormat)
     expect(wrapper.vm.meetingDate).toBe(todayDateFormat)
     expect(snapshotDiff(present, next)).toMatchSnapshot()
   })
@@ -164,15 +173,17 @@ describe('views/AddMeeting.vue', () => {
     const todayDateFormat = new Date().toJSON().slice(0, 10)
     await flushPromises()
 
-    expect(wrapper.find('#meetingDate').attributes().min).toBe(todayDateFormat)
+    expect(wrapper.find('[data-testid="meetingDateInput"]').attributes().min)
+      .toBe(todayDateFormat)
   })
 
   it('error is showed when form is invalid', async () => {
     const wrapper = createWrapper(AddMeeting)
     present = wrapper.html()
 
     expect(wrapper.vm.isFormValid).toBe(false)
-    expect(wrapper.find('.add-meeting__error').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="generalErrorMessage"]').exists())
+      .toBe(true)
     expect(present).toMatchSnapshot()
 
     await wrapper.setData({
@@ -182,7 +193,8 @@ describe('views/AddMeeting.vue', () => {
     next = wrapper.html()
 
     expect(wrapper.vm.isFormValid).toBe(true)
-    expect(wrapper.find('.add-meeting__error').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="generalErrorMessage"]').exists())
+      .toBe(false)
     expect(snapshotDiff(present, next)).toMatchSnapshot()
   })
 
@@ -193,7 +205,8 @@ describe('views/AddMeeting.vue', () => {
 
     expect(wrapper.vm.isFormValid).toBe(false)
     expect(wrapper.vm.isFormBlocked).toBe(false)
-    expect(wrapper.find('.add-meeting__button').attributes().disabled).toBe('disabled')
+    expect(wrapper.find('[data-testid="addMeetingButton"]').attributes().disabled)
+      .toBe('disabled')
     expect(present).toMatchSnapshot()
 
     await wrapper.setData({
@@ -203,7 +216,8 @@ describe('views/AddMeeting.vue', () => {
     next = wrapper.html()
 
     expect(wrapper.vm.isFormValid).toBe(true)
-    expect(wrapper.find('.add-meeting__button').attributes().disabled).toBeUndefined()
+    expect(wrapper.find('[data-testid="addMeetingButton"]').attributes().disabled)
+      .toBeUndefined()
     expect(snapshotDiff(present, next)).toMatchSnapshot()
   })
 
@@ -227,7 +241,7 @@ describe('views/AddMeeting.vue', () => {
 
     expect(snapshotDiff(present, next)).toMatchSnapshot()
 
-    wrapper.find('.add-meeting__button').trigger('click')
+    wrapper.find('[data-testid="addMeetingButton"]').trigger('click')
 
     expect(wrapper.vm.isFormBlocked).toBe(true)
 
@@ -256,7 +270,7 @@ describe('views/AddMeeting.vue', () => {
       email: 'test',
       meetingDate: '2020-12-12'
     })
-    wrapper.find('.add-meeting__button').trigger('click')
+    wrapper.find('[data-testid="addMeetingButton"]').trigger('click')
     await flushPromises()
 
     expect(axios.post).toHaveBeenCalledWith('http://localhost:5679/add', {
@@ -267,13 +281,13 @@ describe('views/AddMeeting.vue', () => {
     expect(wrapper.vm.isMessageShowed).toBe(true)
     expect(wrapper.vm.messageClass).toBe('message--success')
     expect(wrapper.vm.messageTitle).toBe('Successfully added a new meeting')
-    expect(wrapper.find('.message--success').isVisible()).toBe(true)
+    expect(wrapper.find('.message--success').element).toBeVisible()
 
     jest.runAllTimers()
     await flushPromises()
 
     expect(wrapper.vm.isMessageShowed).toBe(false)
-    expect(wrapper.find('.message--success').isVisible()).toBe(false)
+    expect(wrapper.find('.message--success').element).not.toBeVisible()
   })
 
   afterEach(() => {

diff --git a/done/tests/unit/Checkbox.spec.js b/done/tests/unit/Checkbox.spec.js
@@ -4,14 +4,15 @@ import Checkbox from '@/components/Checkbox.vue'
 const propsData = {
   id: 'checkbox1',
   label: 'label prop',
-  value: false
+  value: false,
+  'data-testid': 'testId'
 }
 
 describe('components/Checkbox.vue', () => {
   it('emit events when change checked value', () => {
     const wrapper = createWrapper(Checkbox, { propsData })
 
-    wrapper.find('#checkbox1').setChecked()
+    wrapper.find('[data-testid="testId"]').setChecked()
 
     expect(wrapper.emitted('change')).toBeDefined()
     expect(wrapper.emitted('change').length).toBe(1)

diff --git a/done/tests/unit/Home.spec.js b/done/tests/unit/Home.spec.js
@@ -17,13 +17,14 @@ describe('views/Home.vue', () => {
     }})
     const wrapper = createWrapper(HomePage, { store: localStore })
 
-    expect(wrapper.findAll('.home__item')).toHaveLength(2)
+    expect(wrapper.findAll('[data-testid="meetingItem"]')).toHaveLength(2)
     expect(wrapper).toMatchSnapshot()
   })
 
   it('render empty list message when don\'t have items', () => {
     const wrapper = createWrapper(HomePage)
 
-    expect(wrapper.find('.home div').text()).toBe('Meeting list is empty!')
+    expect(wrapper.find('[data-testid="emptyMessage"]').text())
+      .toBe('Meeting list is empty!')
   })
 })