Add cypress test, update variables

- change to confirmPassword to be more consistent with oldPassword, newPassword
- change to validate, $t is used for a function for translation

components/ChangePassword.spec.js

@@ -14,7 +14,7 @@ describe('ChangePassword.vue', () => {
 
   beforeEach(() => {
     mocks = {
-      $t: jest.fn(),
+      validate: jest.fn(),
       $apollo: {
         mutate: jest.fn().mockResolvedValue()
       }
@@ -52,7 +52,7 @@ describe('ChangePassword.vue', () => {
           })
 
           it.skip('displays a warning', () => {
-            const calls = mocks.$t.mock.calls
+            const calls = mocks.validate.mock.calls
             const expected = [
               ['change-password.validations.old-and-new-password-match']
             ]

components/ChangePassword.vue

@@ -19,8 +19,8 @@
         label="Your new password"
       />
       <ds-input
-        id="passwordConfirmation"
+        id="confirmPassword"
-        model="passwordConfirmation"
+        model="confirmPassword"
         type="password"
         label="Confirm new password"
       />
@@ -41,12 +41,12 @@ export default {
       formData: {
         oldPassword: '',
         newPassword: '',
-        passwordConfirmation: ''
+        confirmPassword: ''
       },
       formSchema: {
         oldPassword: { required: true },
         newPassword: { required: true },
-        passwordConfirmation: { required: true }
+        confirmPassword: { required: true }
       },
       disabled: true
     }

cypress/integration/ChangePassword.feature

@@ -0,0 +1,14 @@
+Feature: Change password
+  As a user
+  I want to change my password in my settings
+  Because this is a basic security feature, e.g. if I exposed my password by accident
+
+  Background: 
+    Given I have a user account
+    And I am logged in
+    And I am on the "settings" page
+  
+  Scenario: Change my password
+    Given I click on the "Security" link
+    Then I should be on the "Security" settings page
+    And I should be able to change my password

cypress/integration/common/settings.js

@@ -61,3 +61,32 @@ Then(
   'I can see my new name {string} when I click on my profile picture in the top right',
   name => matchNameInUserMenu(name)
 )
+
+When('I click on the {string} link', link => {
+  cy.get('a')
+    .contains(link)
+    .click()
+})
+
+Then('I should be on the {string} settings page', page => {
+  const pathname = `/settings/${page.toLowerCase()}`
+  cy.location()
+    .should(loc => {
+      expect(loc.pathname).to.eq(pathname)
+    })
+    .get('h3')
+    .should('contain', page)
+})
+
+Then('I should be able to change my password', () => {
+  cy.get('input[id=oldPassword]')
+    .type('1234')
+    .get('input[id=newPassword]')
+    .type('12345')
+    .get('input[id=confirmPassword]')
+    .type('12345')
+    .get('button')
+    .contains('Submit')
+    .get('.iziToast-message')
+    .should('contain', 'Password updated successfully.')
+})