Styleguide blocks development

cc @appinteractive

We're trying to cross-validate two form fields and don't know how.
We (ie. @kachulio1, @aonomike, myself) gave up after
we discovered https://github.com/Human-Connection/Nitro-Styleguide/issues/46

components/ChangePassword.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import ChangePassword from './ChangePassword.vue'
 import Vue from 'vue'
 import Styleguide from '@human-connection/styleguide'
@@ -14,24 +14,25 @@ describe('ChangePassword.vue', () => {
 
   beforeEach(() => {
     mocks = {
+      $t: jest.fn(),
       $apollo: {
         mutate: jest.fn().mockResolvedValue()
       }
     }
   })
 
-  describe('shallowMount', () => {
+  describe('mount', () => {
     let wrapper
     const Wrapper = () => {
-      return shallowMount(ChangePassword, { mocks, localVue })
+      return mount(ChangePassword, { mocks, localVue })
     }
 
     beforeEach(() => {
       wrapper = Wrapper()
     })
 
-    it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+    it('renders three input fields', () => {
+      expect(wrapper.findAll('input')).toHaveLength(3)
     })
 
     describe('validations', () => {
@@ -41,8 +42,22 @@ describe('ChangePassword.vue', () => {
 
       describe('old password and new password', () => {
         describe('match', () => {
-          it.todo('invalid')
-          it.todo('displays a warning')
+          beforeEach(() => {
+            wrapper.find('input#oldPassword').setValue('some secret')
+            wrapper.find('input#newPassword').setValue('some secret')
+          })
+
+          it('invalid', () => {
+            expect(wrapper.vm.disabled).toBe(true)
+          })
+
+          it.skip('displays a warning', () => {
+            const calls = mocks.$t.mock.calls
+            const expected = [
+              ['change-password.validations.old-and-new-password-match']
+            ]
+            expect(calls).toEqual(expect.arrayContaining(expected))
+          })
         })
       })
 

components/ChangePassword.vue

@@ -1,13 +1,65 @@
 <template>
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @submit="handleSubmit"
+    @input="validate"
+  >
+    <template>
+      <ds-input
+        id="oldPassword"
+        model="oldPassword"
+        type="password"
+        label="Your old password"
+      />
+      <ds-input
+        id="newPassword"
+        model="newPassword"
+        type="password"
+        label="Your new password"
+      />
+      <ds-input
+        id="passwordConfirmation"
+        model="passwordConfirmation"
+        type="password"
+        label="Confirm new password"
+      />
+      <ds-space margin-top="base">
+        <ds-button primary>
+          Submit
+        </ds-button>
+      </ds-space>
+    </template>
+  </ds-form>
 </template>
 
 <script>
 export default {
-  name: 'Modal',
+  name: 'ChangePassword',
   data() {
     return {
+      formData: {
+        oldPassword: '',
+        newPassword: '',
+        passwordConfirmation: ''
+      },
+      formSchema: {
+        oldPassword: { required: true },
+        newPassword: { required: true },
+        passwordConfirmation: { required: true }
+      },
       disabled: true
     }
+  },
+  methods: {
+    validate(data) {
+      console.log('validate')
+      console.log(data)
+    },
+    handleSubmit(data) {
+      console.log('handleSubmit')
+      console.log(data)
+    }
   }
 }
 </script>

webapp/pages/settings/security.vue

@@ -1,18 +1,16 @@
 <template>
   <ds-card :header="$t('settings.security.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <change-password />
   </ds-card>
 </template>
 
 <script>
 import HcEmpty from '~/components/Empty.vue'
+import ChangePassword from '~/components/ChangePassword.vue'
 
 export default {
   components: {
-    HcEmpty
+    ChangePassword
   }
 }
 </script>