Profile and username add tests

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

@@ -7,6 +7,11 @@ export const settingsPage = {
   firstNameInput: () => cy.get("[data-cy=input-profile-firstname]"),
   lastNameInput: () => cy.get("[data-cy=input-profile-lastname]"),
   saveChangesButton: () => cy.get("[data-cy=button-save-changes]"),
+  addUsernameButton: () => cy.get("[data-cy=button-add-username]"),
+  usernameInput: () => cy.get("[data-cy=input-profile-username]"),
+  usernameErrorLabel: () => cy.get("[data-cy=input-profile-username] span.error"),
+  setUsernameButton: () => cy.get("[data-cy=button-set-username]"),
+  usernamePresentInput: () => cy.get("[data-cy=input-profile-username-present]"),
   securityTabButton: () => cy.get("[data-testid=tab-security]"),
   securityTabHeader: () => cy.get("[data-cy=label-security-header]"),
   subscriptionTabButton: () => cy.get("[data-testid=tab-subscription]")

packages/files-ui/cypress/support/page-objects/toasts/profileUpdateSuccessToast.ts

@@ -0,0 +1,4 @@
+export const profileUpdateSuccessToast = {
+  body: () => cy.get("[data-testId=toast-profile-update-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-profile-update-success]")
+}

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

@@ -1,21 +1,58 @@
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { settingsPage } from "../support/page-objects/settingsPage"
 import { homePage } from "../support/page-objects/homePage"
+import { profileUpdateSuccessToast } from "../support/page-objects/toasts/profileUpdateSuccessToast"
 
 describe("Settings", () => {
-
   context("desktop", () => {
     beforeEach(() => {
       cy.web3Login()
-    })
-
-    it("can navigate to the settings profile page", () => {
       navigationMenu.settingsNavButton().click()
+    })
+    it("can navigate to settings profile page", () => {
       settingsPage.profileTabHeader().should("be.visible")
       cy.url().should("include", "/settings")
       settingsPage.profileTabButton().click()
       cy.url().should("include", "/settings/profile")
       settingsPage.profileTabHeader().should("be.visible")
+    })
+
+    it("save changes button should be disabled without first and last name", () => {
+      settingsPage.firstNameInput().clear()
+      settingsPage.lastNameInput().clear()
+
+      settingsPage.saveChangesButton().should("be.disabled")
+    })
+
+    it("can add/edit firstname and lastname", () => {
+      const newFirstName = "test first name"
+      const newLastName = "test last name"
+
+      settingsPage.firstNameInput().type(newFirstName)
+      settingsPage.lastNameInput().type(`${newLastName}{enter}`)
+
+      profileUpdateSuccessToast.body().should("be.visible")
+      settingsPage.firstNameInput().should("have.value", newFirstName)
+      settingsPage.lastNameInput().should("have.value", newLastName)
+    })
+
+    // random username generation
+    const newUserName = Buffer.from(Math.random().toString()).toString("base64").substr(10, 12)
+
+    it("can add a username", () => {
+      settingsPage.addUsernameButton().should("be.visible")
+      settingsPage.addUsernameButton().click()
+      settingsPage.usernameInput().should("be.visible")
+      settingsPage.usernameInput().type(`${newUserName}`)
+      settingsPage.setUsernameButton().should("be.enabled")
+      settingsPage.setUsernameButton().safeClick()
+      settingsPage.usernamePresentInput().should("be.visible")
+      settingsPage.usernamePresentInput().should("be.disabled")
+    })
+
+    it("can navigate to settings security page", () => {
+      settingsPage.securityTabButton().click()
+      cy.url().should("include", "/settings")
       settingsPage.securityTabButton().click()
       cy.url().should("include", "/settings/security")
       settingsPage.securityTabHeader().should("be.visible")
@@ -25,21 +62,17 @@ describe("Settings", () => {
   context("mobile", () => {
     beforeEach(() => {
       cy.viewport("iphone-6")
-    })
-
-    beforeEach(() => {
       cy.web3Login()
-    })
-
-    it("can navigate to the settings security page on a phone", () => {
       homePage.hamburgerMenuButton().click()
       navigationMenu.settingsNavButton().click()
-      settingsPage.profileTabHeader().should("not.exist")
-      cy.url().should("include", "/settings")
+    })
+    it("can navigate to the settings profile page on a phone", () => {
       settingsPage.profileTabButton().click()
       cy.url().should("include", "/settings/profile")
       settingsPage.profileTabHeader().should("be.visible")
-      cy.go("back")
+    })
+
+    it("can navigate to settings security page", () => {
       settingsPage.securityTabButton().click()
       cy.url().should("include", "/settings/security")
       settingsPage.securityTabHeader().should("be.visible")

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

@@ -210,7 +210,7 @@ const ProfileView = () => {
     try {
       setUpdatingProfile(true)
       await updateProfile(firstName, lastName)
-      addToast({ title: t`Profile updated`, type: "success" })
+      addToast({ title: t`Profile updated`, type: "success", testId: "profile-update-success" })
       setUpdatingProfile(false)
     } catch (error) {
       error instanceof Error && addToast({ title: error.message, type: "error" })
@@ -410,6 +410,7 @@ const ProfileView = () => {
                         disabled={true}
                         value={profile.username}
                         className={classes.usernameInput}
+                        data-cy="input-profile-username-present"
                       />
                     </div>
                   </>
@@ -442,13 +443,14 @@ const ProfileView = () => {
                             onChange={onUsernameChange}
                             captionMessage={usernameData.error}
                             state={usernameData.error ? "error" : "normal"}
-                            data-cy="profile-username-input"
+                            data-cy="input-profile-username"
                           />
                           <div>
                             <Button
                               type="submit"
                               disabled={usernameData.loading || !!usernameData.error || !username}
                               loading={usernameData.loading}
+                              data-cy="button-set-username"
                             >
                               {usernameData.loading ? t`Setting Username` : t`Set Username`}
                             </Button>
@@ -467,6 +469,7 @@ const ProfileView = () => {
                           <span
                             className={classes.buttonLink}
                             onClick={() => setShowUsernameForm(true)}
+                            data-cy="button-add-username"
                           >
                             <Trans>Add a username</Trans>
                           </span>