geophystech#137 User components forms tests.

Author: Arthur Ayvazov

src/components/users/Authentication.vue

@@ -21,6 +21,7 @@
                           maxlength="150"
                           pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                           placeholder="Электронная почта"
+                          name="email"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.email }}</b-form-invalid-feedback>
@@ -34,6 +35,7 @@
                           placeholder="Пароль"
                           minlength="6"
                           maxlength="150"
+                          name="password"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.password }}</b-form-invalid-feedback>

src/components/users/ConfirmPassword.vue

@@ -32,8 +32,9 @@
                           :state="form.fields.password.state"
                           v-model="form.fields.password.value"
                           placeholder="Новый пароль"
-                          minlength="6"
+                          name="password"
                           maxlength="150"
+                          minlength="6"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.password }}</b-form-invalid-feedback>

src/components/users/Registration.vue

@@ -39,9 +39,10 @@
                           :disabled="form.fields.email.disabled"
                           :state="form.fields.email.state"
                           v-model="form.fields.email.value"
-                          maxlength="150"
                           pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                           placeholder="Электронная почта"
+                          maxlength="150"
+                          name="email"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.email }}</b-form-invalid-feedback>
@@ -53,8 +54,9 @@
                           :state="form.fields.password.state"
                           v-model="form.fields.password.value"
                           placeholder="Пароль"
-                          minlength="6"
                           maxlength="150"
+                          name="password"
+                          minlength="6"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.password }}</b-form-invalid-feedback>
@@ -67,6 +69,7 @@
                           v-model="form.fields.company.value"
                           placeholder="Организация"
                           maxlength="150"
+                          name="company"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.company }}</b-form-invalid-feedback>
@@ -78,6 +81,7 @@
                            :disabled="form.fields.purpose.disabled"
                            :options="form.purposes.values"
                            placeholder="Цель использования расширенных данных"
+                           name="purpose"
                            required />
             <b-form-invalid-feedback>{{ form.messages.purpose }}</b-form-invalid-feedback>
           </b-form-group>
@@ -88,6 +92,7 @@
                           :state="form.fields.fullname.state"
                           v-model="form.fields.fullname.value"
                           placeholder="Фамилия, имя и отчество"
+                          name="fullname"
                           maxlength="150"
                           required>
             </b-form-input>
@@ -107,6 +112,7 @@
                              class="additional-info"
                              placeholder="Дополнительная информация"
                              maxlength="2000"
+                             name="additionalInfo"
                              v-show="form.showAdditionalInfo">
             </b-form-textarea>
           </b-form-group>

src/components/users/ResetPassword.vue

@@ -30,6 +30,7 @@
                           maxlength="150"
                           pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                           placeholder="Электронная почта"
+                          name="email"
                           required>
             </b-form-input>
             <b-form-invalid-feedback>{{ form.messages.email }}</b-form-invalid-feedback>

test/unit/specs/Filters.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Filters from '@/components/Filters'
 import BootstrapVue from 'bootstrap-vue'
-import { $routerMocks, eventFilters } from '../utils'
+import { $routerMocks, describeCheckFormFields } from '../utils'
 import $moment from 'moment'
 import $http from 'axios'
 
@@ -28,18 +28,23 @@ describe('Filters.vue', () => {
     expect(wrapper.is(Filters)).to.eql(true)
   })
 
-  describe('Check filter fields', () => {
-
-    for (let item of Object.entries(eventFilters))
-    {
-      const [filterName, filterConf] = item
-      const field = wrapper.find(`${filterConf.tag}[name="${filterName}"]`)
-
-      it(`Check filter ${filterName}`, () => {
-        expect(field.exists()).to.eql(true)
-      })
+  describeCheckFormFields(wrapper, {
+    label: 'Check filter fields',
+    fields: {
+      datetime_max: { tag: 'flat-pickr-stub' },
+      datetime_min: { tag: 'flat-pickr-stub' },
+      depth_max: { tag: 'b-form-input-stub' },
+      depth_min: { tag: 'b-form-input-stub' },
+      has_mt: { tag: 'b-form-checkbox-stub' },
+      mag_max: { tag: 'b-form-input-stub' },
+      mag_min: { tag: 'b-form-input-stub' },
+      lat_max: { tag: 'b-form-input-stub' },
+      lat_min: { tag: 'b-form-input-stub' },
+      lon_max: { tag: 'b-form-input-stub' },
+      lon_min: { tag: 'b-form-input-stub' },
+      rms_max: { tag: 'b-form-input-stub' },
+      sta_num_min: { tag: 'b-form-input-stub' }
     }
-
   })
 
 })

test/unit/specs/users/Authentication.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Authentication from '@/components/users/Authentication'
 import BootstrapVue from 'bootstrap-vue'
-import { $routerMocks, RouterLink } from '../../utils'
+import {$routerMocks, RouterLink, describeCheckFormFields} from '../../utils'
 import $moment from 'moment'
 import $http from 'axios'
 
@@ -12,19 +12,24 @@ describe('users/Authentication.vue', () => {
 
   const wrapper = shallowMount(Authentication, {
     mocks: Object.assign({ $http, $moment }, $routerMocks),
+    stubs: { RouterLink },
     propsData: {
       form: {
 
       }
     },
-    stubs: {
-      RouterLink
-    },
     localVue
   })
 
   it('Check component Authentication', () => {
     expect(wrapper.is(Authentication)).to.eql(true)
   })
 
+  describeCheckFormFields(wrapper, {
+    fields: {
+      email: {tag: 'b-form-input-stub'},
+      password: {tag: 'b-form-input-stub'}
+    }
+  })
+
 })

test/unit/specs/users/ConfirmPassword.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import ConfirmPassword from '@/components/users/ConfirmPassword'
 import BootstrapVue from 'bootstrap-vue'
-import {$routerMocks} from '../../utils'
+import {$routerMocks, describeCheckFormFields} from '../../utils'
 import $moment from 'moment'
 import $http from 'axios'
 
@@ -24,4 +24,8 @@ describe('users/ConfirmPassword.vue', () => {
     expect(wrapper.is(ConfirmPassword)).to.eql(true)
   })
 
+  describeCheckFormFields(wrapper, {
+    password: {tag: 'b-form-input-stub'}
+  })
+
 })

test/unit/specs/users/Registration.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Registration from '@/components/users/Registration'
 import BootstrapVue from 'bootstrap-vue'
-import { $routerMocks, RouterLink } from '../../utils'
+import {$routerMocks, describeCheckFormFields, RouterLink} from '../../utils'
 import $moment from 'moment'
 import $http from 'axios'
 
@@ -28,4 +28,13 @@ describe('users/Registration.vue', () => {
     expect(wrapper.is(Registration)).to.eql(true)
   })
 
+  describeCheckFormFields(wrapper, {
+    email: {tag: 'b-form-input-stub'},
+    password: {tag: 'b-form-input-stub'},
+    company: {tag: 'b-form-input-stub'},
+    purpose: {tag: 'b-form-select-stub'},
+    fullname: {tag: 'b-form-input-stub'},
+    additionalInfo: {tag: 'b-form-textarea-stub'}
+  })
+
 })

test/unit/specs/users/ResetPassword.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
 import ResetPassword from '@/components/users/ResetPassword'
 import BootstrapVue from 'bootstrap-vue'
-import {$routerMocks} from '../../utils'
+import {$routerMocks, describeCheckFormFields} from '../../utils'
 import $moment from 'moment'
 import $http from 'axios'
 
@@ -24,4 +24,8 @@ describe('users/ResetPassword.vue', () => {
     expect(wrapper.is(ResetPassword)).to.eql(true)
   })
 
+  describeCheckFormFields(wrapper, {
+    email: {tag: 'b-form-input-stub'}
+  })
+
 })

test/unit/utils.js

@@ -40,44 +40,19 @@ export const RouterLink = {
   props: ['to']
 }
 
-export const eventFilters = {
-  datetime_max: {
-    tag: 'flat-pickr-stub'
-  },
-  datetime_min: {
-    tag: 'flat-pickr-stub'
-  },
-  depth_max: {
-    tag: 'b-form-input-stub'
-  },
-  depth_min: {
-    tag: 'b-form-input-stub'
-  },
-  has_mt: {
-    tag: 'b-form-checkbox-stub'
-  },
-  mag_max: {
-    tag: 'b-form-input-stub'
-  },
-  mag_min: {
-    tag: 'b-form-input-stub'
-  },
-  lat_max: {
-    tag: 'b-form-input-stub'
-  },
-  lat_min: {
-    tag: 'b-form-input-stub'
-  },
-  lon_max: {
-    tag: 'b-form-input-stub'
-  },
-  lon_min: {
-    tag: 'b-form-input-stub'
-  },
-  rms_max: {
-    tag: 'b-form-input-stub'
-  },
-  sta_num_min: {
-    tag: 'b-form-input-stub'
-  }
+export function describeCheckFormFields(wrapper, {fields = {}, label = 'Check form fields'} = {})
+{
+  describe(label, () => {
+
+    for (let item of Object.entries(fields))
+    {
+      const [fieldName, fieldConf] = item
+      const field = wrapper.find(`${fieldConf.tag}[name="${fieldName}"]`)
+
+      it(`Check field ${fieldName}`, () => {
+        expect(field.exists()).to.eql(true)
+      })
+    }
+
+  })
 }