Add ui tests for change password

packages/files-ui/cypress/fixtures/filesTestData.ts

@@ -7,4 +7,6 @@ export const sharedFolderEditedName = "Edited"
 export const validEthAddress = "0x2eab9cfa0b5e8e82a73da026254d50567f52d3ce"
 export const validUsernameA = "filesusera"
 export const validUsernameB = "filesuserb"
-export const validShareKey = "0x02c62b63ef1bd5ead99deb91a74bc7db4bc60d64a6d65a68461f3cf03d8c75da40"
+export const validShareKey = "0x02c62b63ef1bd5ead99deb91a74bc7db4bc60d64a6d65a68461f3cf03d8c75da40"
+export const complexPassword = "4utom4t3P455w0rd!"
+export const simplePassword = "basic"

packages/files-ui/cypress/support/page-objects/settingsPage.ts

@@ -25,6 +25,11 @@ export const settingsPage = {
   // security tab
   securityTabButton: () => cy.get("[data-testid=tab-security]"),
   securityTabHeader: () => cy.get("[data-cy=label-security-header]"),
+  changePasswordLink: () => cy.get("[data-cy=link-change-password]"),
+  passwordInput: () => cy.get("[data-cy=input-sign-in-password]"),
+  confirmPasswordInput: () => cy.get("[data-cy=input-sign-in-password-verification]"),
+  changePasswordButton: () => cy.get("[data-cy=button-sign-in-password]"),
+  changePasswordErrorLabel: () => cy.get("[data-cy=form-change-password] span.default.error"),
 
   // subscription tab
   subscriptionTabButton: () => cy.get("[data-testid=tab-subscription]"),

packages/files-ui/cypress/tests/settings-spec.ts

@@ -1,16 +1,15 @@
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { settingsPage } from "../support/page-objects/settingsPage"
 import { homePage } from "../support/page-objects/homePage"
+import { complexPassword, simplePassword } from "../fixtures/filesTestData"
 // import { profileUpdateSuccessToast } from "../support/page-objects/toasts/profileUpdateSuccessToast"
 
 describe("Settings", () => {
   context("desktop", () => {
-    beforeEach(() => {
-      cy.web3Login()
-      navigationMenu.settingsNavButton().click()
-    })
 
     it("can navigate to settings profile page", () => {
+      cy.web3Login()
+      navigationMenu.settingsNavButton().click()
       settingsPage.profileTabHeader().should("be.visible")
       cy.url().should("include", "/settings")
       settingsPage.profileTabButton().click()
@@ -19,6 +18,8 @@ describe("Settings", () => {
     })
 
     // it("save changes button should be disabled without first and last name", () => {
+    //   cy.web3Login()
+    //   navigationMenu.settingsNavButton().click()
     //   settingsPage.signOutDropdown().should("be.visible")
     //   settingsPage.firstNameInput().clear()
     //   settingsPage.lastNameInput().clear()
@@ -43,6 +44,8 @@ describe("Settings", () => {
     const newUserName = Date.now().toString()
 
     it("can add a username", () => {
+      cy.web3Login({ withNewSession: true })
+      navigationMenu.settingsNavButton().click()
       settingsPage.signOutDropdown().should("be.visible")
       settingsPage.addUsernameButton().should("be.visible")
       settingsPage.addUsernameButton().click()
@@ -55,12 +58,71 @@ describe("Settings", () => {
     })
 
     it("can navigate to settings security page", () => {
+      cy.web3Login()
+      navigationMenu.settingsNavButton().click()
       settingsPage.securityTabButton().click()
       cy.url().should("include", "/settings")
       settingsPage.securityTabButton().click()
       cy.url().should("include", "/settings/security")
       settingsPage.securityTabHeader().should("be.visible")
     })
+
+    it("can change the account password", () => {
+      cy.web3Login({ withNewSession: true })
+      navigationMenu.settingsNavButton().click()
+      settingsPage.securityTabButton().click()
+      settingsPage.securityTabButton().click()
+      settingsPage.changePasswordLink().click()
+
+      // change password
+      settingsPage.passwordInput().type(complexPassword)
+      settingsPage.confirmPasswordInput().type(complexPassword)
+      settingsPage.changePasswordButton().click()
+
+      // ensure change password elements are not displayed after change
+      settingsPage.passwordInput().should("not.exist")
+      settingsPage.confirmPasswordInput().should("not.exist")
+      settingsPage.changePasswordButton().should("not.exist")
+    })
+
+    it("can see error messages when password doesn't meet critieria", () => {
+      cy.web3Login()
+      navigationMenu.settingsNavButton().click()
+      settingsPage.securityTabButton().click()
+      settingsPage.securityTabButton().click()
+      settingsPage.changePasswordLink().click()
+
+      // ensure errors are displayed if password fields are blank
+      settingsPage.passwordInput().type("{selectall}{del}{esc}")
+      settingsPage.confirmPasswordInput().type("{selectall}{del}{esc}")
+      settingsPage.changePasswordButton().click()
+      settingsPage.changePasswordErrorLabel()
+        .should("be.visible")
+        .should("have.length", 2)
+
+      // ensure an error displayed if password is not complex enough
+      settingsPage.passwordInput().type(simplePassword)
+      settingsPage.changePasswordButton().click()
+      settingsPage.changePasswordErrorLabel()
+        .should("be.visible")
+        .should("have.length", 2)
+
+      // should see an error if confirm password is missing
+      settingsPage.passwordInput().type(complexPassword)
+      settingsPage.confirmPasswordInput().type("{selectall}{del}{esc}")
+      settingsPage.changePasswordButton().click()
+      settingsPage.changePasswordErrorLabel()
+        .should("be.visible")
+        .should("have.length", 1)
+
+      // should see an error if confirm password does not match password
+      settingsPage.passwordInput().type(complexPassword)
+      settingsPage.confirmPasswordInput().type(simplePassword)
+      settingsPage.changePasswordButton().click()
+      settingsPage.changePasswordErrorLabel()
+        .should("be.visible")
+        .should("have.length", 1)
+    })
   })
 
   context("mobile", () => {

packages/files-ui/src/Components/Modules/Settings/SecurityTab/index.tsx

@@ -242,7 +242,10 @@ const Security = ({ className }: SecurityProps) => {
           )}
           { isChangingPassword
             ? (
-              <section className={classes.formRoot}>
+              <section
+                className={classes.formRoot}
+                data-cy="form-change-password"
+              >
                 <CloseSvg
                   onClick={onResetPasswordForm}
                   className={classes.close}
@@ -258,6 +261,7 @@ const Security = ({ className }: SecurityProps) => {
                 <PasswordForm
                   setPassword={onSetPassword}
                   buttonLabel={t`Change Password`}
+                  data-cy="button-change-password"
                 />
               </section>
             )
@@ -274,6 +278,7 @@ const Security = ({ className }: SecurityProps) => {
                       <span
                         className={clsx(classes.action, classes.buttonLink, classes.changeButton)}
                         onClick={() => {setIsChangingPassword(true)}}
+                        data-cy="link-change-password"
                       >
                         <Trans>Change Password</Trans>
                       </span>