Cover change password with e2e tests

tests-e2e/cypress.json

@@ -1,4 +1,5 @@
 {
   "baseUrl": "http://localhost:8080",
+  "testFiles": ["**/*.test.ts"],
   "chromeWebSecurity": false
 }

tests-e2e/cypress/integration/profile/change-password.test.ts

@@ -0,0 +1,49 @@
+import { openSectionByName, confirmWithPassword } from './utils';
+
+describe('Change password', () => {
+  it('should change password', () => {
+    cy.login({ accounts: ['default'] }).then(({ accounts: [account] }) => {
+      cy.server();
+      cy.route({
+        method: 'POST',
+        url: `/api/v1/accounts/${account.id}/password`,
+      }).as('password');
+      cy.visit('/');
+
+      openSectionByName('Password');
+
+      cy.get('[name=newPassword]').type(account.password);
+      cy.get('[name=newRePassword]').type(account.password);
+      cy.get('[name=logoutAll]').should('be.checked');
+      cy.get('[type=submit]').click();
+
+      cy.wait('@password')
+        .its('requestBody')
+        .should(
+          'eq',
+          new URLSearchParams({
+            password: '',
+            newPassword: account.password,
+            newRePassword: account.password,
+            logoutAll: '1',
+          }).toString(),
+        );
+
+      confirmWithPassword(account.password);
+
+      cy.wait('@password')
+        .its('requestBody')
+        .should(
+          'eq',
+          new URLSearchParams({
+            password: account.password,
+            newPassword: account.password,
+            newRePassword: account.password,
+            logoutAll: '1',
+          }).toString(),
+        );
+
+      cy.location('pathname').should('eq', '/');
+    });
+  });
+});

tests-e2e/cypress/integration/profile/change-username.test.ts

@@ -1,3 +1,5 @@
+import { openSectionByName, confirmWithPassword } from './utils';
+
 describe('Change username', () => {
   it('should change username', () => {
     cy.server();
@@ -29,16 +31,18 @@ describe('Change username', () => {
 
       cy.visit('/');
 
-      cy.getByTestId('profile-item')
+      openSectionByName('Nickname');
-        .contains('Nickname')
-        .closest('[data-testid="profile-item"]')
-        .getByTestId('profile-action')
-        .click();
 
       cy.location('pathname').should('eq', '/profile/change-username');
 
       cy.get('[name=username]').type(`{selectall}${account.username}{enter}`);
 
+      // unmock accounts route
+      cy.route({
+        method: 'GET',
+        url: `/api/v1/accounts/${account.id}`,
+      });
+
       cy.wait('@username')
         .its('requestBody')
         .should(
@@ -48,18 +52,8 @@ describe('Change username', () => {
             password: '',
           }).toString(),
         );
-      cy.getByTestId('password-request-form').should('be.visible');
 
-      // unmock accounts route
+      confirmWithPassword(account.password);
-      cy.route({
-        method: 'GET',
-        url: `/api/v1/accounts/${account.id}`,
-      });
-
-      cy.get('[name=password]').type(account.password);
-      cy.getByTestId('password-request-form')
-        .find('[type=submit]')
-        .click();
 
       cy.wait('@username')
         .its('requestBody')

tests-e2e/cypress/integration/profile/utils.ts

@@ -0,0 +1,18 @@
+export function getSectionByName(name: string) {
+  return cy.getByTestId('profile-item').contains(name);
+}
+
+export function openSectionByName(name: string) {
+  return getSectionByName(name)
+    .closest('[data-testid="profile-item"]')
+    .getByTestId('profile-action')
+    .click();
+}
+
+export function confirmWithPassword(password: string) {
+  cy.getByTestId('password-request-form').should('be.visible');
+  cy.get('[name=password]').type(password);
+  cy.getByTestId('password-request-form')
+    .find('[type=submit]')
+    .click();
+}

tests-e2e/cypress/plugins/index.js

@@ -19,6 +19,9 @@
 // };
 const wp = require('@cypress/webpack-preprocessor');
 
+// for some reason loader can not locate babel.config. So we
+const config = require('../../../babel.config');
+
 module.exports = on => {
   const options = {
     webpackOptions: {
@@ -38,6 +41,7 @@ module.exports = on => {
                 options: {
                   envName: 'webpack',
                   cacheDirectory: true,
+                  ...config,
                 },
               },
             ],