Add cypress tests for change password

Author: carlnewton

cypress/e2e/3-user.cy.js

@@ -267,6 +267,39 @@ describe('user', function() {
       cy.getElement('change-username-errors').should('be.visible');
     })
 
+    it('allows a user to change their password', function() {
+      cy.loginUser('neo');
+      cy.visit('/settings');
+      cy.getElement('change-current-password').clear().type('Neo');
+      cy.getElement('change-new-password').clear().type('!ThisIsASecurePassword123!');
+      cy.getElement('change-confirm-password').clear().type('!ThisIsASecurePassword123!');
+      cy.getElement('change-password-submit').click();
+
+      cy.getElement('change-password-success').should('be.visible');
+    })
+
+    it('does not allow a user to change their password if current password is incorrect', function() {
+      cy.loginUser('neo');
+      cy.visit('/settings');
+      cy.getElement('change-current-password').clear().type('Incorrect password');
+      cy.getElement('change-new-password').clear().type('!ThisIsASecurePassword123!');
+      cy.getElement('change-confirm-password').clear().type('!ThisIsASecurePassword123!');
+      cy.getElement('change-password-submit').click();
+
+      cy.getElement('current-password-error').should('be.visible');
+    })
+
+    it('does not allow a user to change their password if confirmed password does not match', function() {
+      cy.loginUser('neo');
+      cy.visit('/settings');
+      cy.getElement('change-current-password').clear().type('Neo');
+      cy.getElement('change-new-password').clear().type('!ThisIsASecurePassword123!');
+      cy.getElement('change-confirm-password').clear().type('!ThisIsADifferentSecurePassword123!');
+      cy.getElement('change-password-submit').click();
+
+      cy.getElement('confirm-password-error').should('be.visible');
+    })
+
   })
 
 })

templates/partials/hx/change_password.html.twig

@@ -1,14 +1,14 @@
 <div id="hx-change-password" class="mb-2">
     <div class="mb-2">
         {% if success is defined %}
-            <div class="alert alert-success">
+            <div class="alert alert-success" data-test="change-password-success">
                 {{ 'fields.password.updated' | trans }}
             </div>
         {% endif %}
         <label for="currentPassword" class="form-label">{{ 'fields.current_password.title' | trans }}</label>
-        <input type="password" class="form-control{% if errors.current_password is defined %} is-invalid{% endif %}" name="current_password" id="currentPassword" autocomplete="current-password" data-test="current-password" required>
+        <input type="password" class="form-control{% if errors.current_password is defined %} is-invalid{% endif %}" name="current_password" id="currentPassword" autocomplete="current-password" data-test="change-current-password" required>
         {% if errors.current_password is defined %}
-            <div class="invalid-feedback">
+            <div class="invalid-feedback" data-test="current-password-error">
                 {% for errorMessage in errors.current_password %}
                     <p>{{ errorMessage }}</p>
                 {% endfor %}
@@ -17,9 +17,9 @@
     </div>
     <div class="mb-2">
         <label for="newPassword" class="form-label">{{ 'fields.new_password.title' | trans }}</label>
-        <input type="password" class="form-control{% if errors.new_password is defined %} is-invalid{% endif %}" name="new_password" id="newPassword" aria-describedby="passwordHelpBlock" data-test="new-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
+        <input type="password" class="form-control{% if errors.new_password is defined %} is-invalid{% endif %}" name="new_password" id="newPassword" aria-describedby="passwordHelpBlock" data-test="change-new-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
         {% if errors.new_password is defined %}
-            <div class="invalid-feedback">
+            <div class="invalid-feedback" data-test="new-password-error">
                 {% for errorMessage in errors.new_password %}
                     <p>{{ errorMessage }}</p>
                 {% endfor %}
@@ -31,9 +31,9 @@
     </div>
     <div class="mb-2">
         <label for="confirmPassword" class="form-label">{{ 'fields.confirm_password.title' | trans }}</label>
-        <input type="password" class="form-control{% if errors.confirm_password is defined %} is-invalid{% endif %}" name="confirm_password" id="confirmPassword" data-test="confirm-password" required>
+        <input type="password" class="form-control{% if errors.confirm_password is defined %} is-invalid{% endif %}" name="confirm_password" id="confirmPassword" data-test="change-confirm-password" required>
         {% if errors.confirm_password is defined %}
-            <div class="invalid-feedback">
+            <div class="invalid-feedback" data-test="confirm-password-error">
                 {% for errorMessage in errors.confirm_password %}
                     <p>{{ errorMessage }}</p>
                 {% endfor %}