Merge pull request #21 from Satellite-im/luis/settings-profile

add(locators): add locators for settings profile page

cypress/e2e/05-settings-profile.cy.ts

@@ -0,0 +1,84 @@
+import { chatsMainPage } from "./PageObjects/ChatsMain";
+import { loginPinPage } from "./PageObjects/LoginPin";
+import { authNewAccount } from "./PageObjects/AuthNewAccount";
+import { settingsProfile } from "./PageObjects/Settings/SettingsProfile";
+
+describe("Settings Profile Tests", () => {
+  beforeEach(() => {
+    loginPinPage.loginWithPin("1234");
+    cy.wrap(authNewAccount.createRandomUser()).as("username");
+    chatsMainPage.validateChatsMainPageIsShown();
+    chatsMainPage.goToSettings();
+    cy.location("href").should("include", "/settings/profile");
+  });
+
+  // Skipped since it needs investigation on how to implement pseudo elements validation in cypress
+  xit("I1 - Banner Picture - Tooltip displayed", () => {
+    // Shows tooltip when hovering
+    settingsProfile.profileBanner.realHover();
+  });
+
+  it("I2, I3 - Banner Picture - User can upload banner", () => {
+    // Shows tooltip when hovering
+    settingsProfile.profileBanner.realHover();
+
+    // User can upload a banner picture
+    settingsProfile.uploadProfileBanner("cypress/fixtures/banner.jpg");
+
+    // Property Style is reassigned to Background Image after uploading banner
+    settingsProfile.validateProfileBannerURLIsValid();
+  });
+
+  it("I4 - Clicking upload picture on Profile picture should open File Browser", () => {
+    // Profile Picture Upload Button tooltip shows "Change Profile Picture"
+    settingsProfile.profilePictureUploadButton.realHover();
+    settingsProfile.profilePictureUploadButton.should(
+      "have.attr",
+      "data-tooltip",
+      "Change profile photo",
+    );
+
+    // Validate user can upload profile pictures
+    settingsProfile.uploadProfilePicture("cypress/fixtures/logo.jpg");
+    settingsProfile.validateProfilePictureURLIsValid();
+  });
+
+  // Skipped since it needs investigation on how to truly delete data before executing test
+  xit("I5 - Profile picture appears blank until custom profile picture is set", () => {
+    settingsProfile.profilePictureImage.should("not.have.attr", "src");
+  });
+
+  it("I6 - Username should be displayed in the Username textbox", () => {
+    // Username displayed will be equal to the username assigned randomly when creating account
+    cy.get("@username").then((username) => {
+      settingsProfile.inputSettingsProfileUsername.should(
+        "have.value",
+        username,
+      );
+    });
+  });
+
+  it("I7 - UsernameID should be displayed next to username", () => {
+    // Short ID button tooltip shows "Copy"
+    settingsProfile.inputSettingsProfileShortIDGroup.realHover();
+    settingsProfile.inputSettingsProfileShortIDGroup.should(
+      "have.attr",
+      "data-tooltip",
+      "Copy",
+    );
+
+    // Value displayed on Short ID is hardcoded
+    settingsProfile.inputSettingsProfileShortID.should("have.value", "xxxxxx");
+  });
+
+  xit("I9 - User should be able to click into username textbox and change username", () => {});
+  xit("I10 - Toast notifcation should appear when user changes username", () => {});
+  xit("I12 - Highlighted border should appear when clicked into the username textbox", () => {});
+  xit("I14 - Highlighted border should appear when user is clicked into Status textbox", () => {});
+  xit("I15 - User should be able to click into the Status Message textbox", () => {});
+  xit("I16 - Toast notification should appear when user updates status", () => {});
+  xit("I19 - Status dropdown should show Online, Offline, Idle, Do not Disturb", () => {});
+  xit("I20 - Status should show correctly depending on which status user has set", () => {});
+  xit("I21 - Clicking Reveal Phrase should display the users Recovery Phrases", () => {});
+  xit("I24 - Clicking LogOut should log user out of the account", () => {});
+});

cypress/e2e/PageObjects/AuthNewAccount.ts

@@ -38,12 +38,13 @@ class AuthNewAccount {
   }
 
   async createRandomUser() {
-    const username = faker.internet.userName();
+    const username: string = faker.internet.userName();
     const status = faker.lorem.sentence(3);
     this.validateLoadingHeader();
     this.typeOnUsername(username);
     this.typeOnStatus(status);
     this.buttonNewAccountCreate.click();
+    return username;
   }
 
   async typeOnStatus(status: string) {

cypress/e2e/PageObjects/ChatsMain.ts

@@ -106,6 +106,10 @@ class ChatsMainPage {
     });
   }
 
+  public goToSettings() {
+    this.buttonSettings.click();
+  }
+
   public validateChatsMainPageIsShown() {
     this.addSomeone.should("exist");
     cy.location("href").should("include", "/chat");

cypress/e2e/PageObjects/Settings/SettingsProfile.ts

@@ -0,0 +1,227 @@
+class SettingsProfile {
+  get buttonAbout() {
+    return cy.getByTestAttr("button-About");
+  }
+
+  get buttonAccessibility() {
+    return cy.getByTestAttr("button-Accessibility");
+  }
+
+  get buttonAudioAndVideo() {
+    return cy.getByTestAttr("button-Audio & Video");
+  }
+
+  get buttonCustomization() {
+    return cy.getByTestAttr("button-Customization");
+  }
+
+  get buttonExtensions() {
+    return cy.getByTestAttr("button-Extensions");
+  }
+
+  get buttonInventory() {
+    return cy.getByTestAttr("button-Inventory");
+  }
+
+  get buttonKeybinds() {
+    return cy.getByTestAttr("button-Keybinds");
+  }
+
+  get buttonLicenses() {
+    return cy.getByTestAttr("button-Licenses");
+  }
+
+  get buttonMessages() {
+    return cy.getByTestAttr("button-Messages");
+  }
+
+  get buttonNotifications() {
+    return cy.getByTestAttr("button-Notifications");
+  }
+
+  get buttonProfile() {
+    return cy.getByTestAttr("button-Profile");
+  }
+
+  // Getters from Settings Profile
+
+  get inputSettingsProfileShortID() {
+    return cy.getByTestAttr("input-settings-profile-short-id");
+  }
+
+  get inputSettingsProfileShortIDGroup() {
+    return this.inputSettingsProfileShortID.parents(".input-group");
+  }
+
+  get inputSettingsProfileStatus() {
+    return cy.getByTestAttr("input-settings-profile-status-message");
+  }
+
+  get inputSettingsProfileUsername() {
+    return cy.getByTestAttr("input-settings-profile-username");
+  }
+
+  get labelSettingsProfileStatusMessage() {
+    return cy.getByTestAttr("label-settings-profile-status-message");
+  }
+
+  get labelSettingsProfileUsername() {
+    return cy.getByTestAttr("label-settings-profile-username");
+  }
+
+  get logOutSection() {
+    return cy.getByTestAttr("section-log-out");
+  }
+
+  get logOutSectionButton() {
+    return this.logOutSection.find('[data-cy="button-log-out"]');
+  }
+
+  get logOutSectionLabel() {
+    return this.logOutSection.find('[data-cy="setting-section-label"]');
+  }
+
+  get logOutSectionText() {
+    return this.logOutSection.find('[data-cy="setting-section-text"]');
+  }
+
+  get profileBanner() {
+    return cy.getByTestAttr("profile-banner");
+  }
+
+  get profileBannerInput() {
+    return this.profilePictureUploadButton
+      .parents(".profile-picture-container")
+      .siblings("input");
+  }
+
+  get profilePicture() {
+    return cy.getByTestAttr("profile-picture");
+  }
+
+  get profilePictureInput() {
+    return this.profilePictureUploadButton.siblings("input");
+  }
+
+  get profilePictureUploadButton() {
+    return cy.getByTestAttr("button-file-upload");
+  }
+
+  get profilePictureImage() {
+    return this.profilePicture.find("img");
+  }
+
+  get revealPhraseSection() {
+    return cy.getByTestAttr("section-reveal-phrase");
+  }
+
+  get revealPhraseSectionHideButton() {
+    return this.revealPhraseSection.find('[data-cy="button-hide-phrase"]');
+  }
+
+  get revealPhraseSectionRevealButton() {
+    return this.revealPhraseSection.find('[data-cy="button-reveal-phrase"]');
+  }
+
+  get revealPhraseSectionButtonCopyPhrase() {
+    return this.revealPhraseSection.find('[data-cy="button-copy-phrase"]');
+  }
+
+  get revealPhraseSectionLabel() {
+    return this.revealPhraseSection.find('[data-cy="setting-section-label"]');
+  }
+
+  get revealPhraseSectionText() {
+    return this.revealPhraseSection.find('[data-cy="setting-section-text"]');
+  }
+
+  get revealPhraseSectionWordNumber() {
+    return this.revealPhraseSection.find('[data-cy="ordered-phrase-number-1"]');
+  }
+
+  get revealPhraseSectionWordValue() {
+    return this.revealPhraseSection.find('[data-cy="ordered-phrase-word-1"]');
+  }
+
+  get saveControls() {
+    return cy.getByTestAttr("save-controls");
+  }
+
+  get saveControlsButtonCancel() {
+    return cy.getByTestAttr("button-cancel");
+  }
+
+  get saveControlsButtonSave() {
+    return cy.getByTestAttr("button-save");
+  }
+
+  get onlineStatusSection() {
+    return cy.getByTestAttr("section-online-status");
+  }
+
+  get onlineStatusSectionLabel() {
+    return this.onlineStatusSection.find('[data-cy="setting-section-label"]');
+  }
+
+  get onlineStatusSectionSelect() {
+    return this.onlineStatusSection.find(
+      '[data-cy="settings-profile-status-select"]',
+    );
+  }
+
+  get onlineStatusSectionSelectOptions() {
+    return this.onlineStatusSection
+      .find("[name='generic-select']")
+      .find('[data-cy="select-option"]');
+  }
+
+  get onlineStatusSectionText() {
+    return this.onlineStatusSection.find('[data-cy="setting-section-text"]');
+  }
+
+  get storeRecoverySeedSection() {
+    return cy.getByTestAttr("section-store-recovery-seed");
+  }
+
+  get storeRecoverySeedCheckbox() {
+    return this.storeRecoverySeedSection.find(
+      '[data-cy="checkbox-store-recovery-seed"]',
+    );
+  }
+
+  get storeRecoverySeedText() {
+    return this.storeRecoverySeedSection.find(
+      '[data-cy="text-store-recovery-seed"]',
+    );
+  }
+
+  public uploadProfileBanner(file: string) {
+    this.profileBannerInput.selectFile(file, {
+      force: true,
+    });
+  }
+
+  public uploadProfilePicture(file: string) {
+    cy.get('input[type="file"]').eq(0).selectFile(file, {
+      force: true,
+    });
+  }
+
+  public validateProfileBannerURLIsValid() {
+    this.profileBanner.should(($el) => {
+      const style = $el.attr("style");
+      return expect(
+        style.startsWith('background-image: url("data:image/jpeg;base64'),
+      ).to.be.true;
+    });
+  }
+
+  public validateProfilePictureURLIsValid() {
+    this.profilePictureImage.should(($el) => {
+      const style = $el.attr("src");
+      return expect(style.startsWith("data:image/jpeg;base64")).to.be.true;
+    });
+  }
+}
+
+export const settingsProfile: SettingsProfile = new SettingsProfile();

cypress/support/commands.ts

@@ -4,7 +4,6 @@ declare namespace Cypress {
       selector: string,
       ...options: any
     ): Chainable<JQuery<HTMLElement>>;
-    login(pin: string): Chainable<JQuery<HTMLElement>>;
   }
 }