onboarding.e2e.js

import { driver, expect } from '@wdio/globals';

import ForYouScreen from '../pageobjects/Home/ForYouScreen.page';
import SidebarScreen from '../pageobjects/Home/SidebarScreen.page';
import OnboardingBioScreen from '../pageobjects/Onboarding/OnboardingBioScreen.page';
import OnboardingFollowScreen from '../pageobjects/Onboarding/OnboardingFollowScreen.page';
import OnboardingInterestsScreen from '../pageobjects/Onboarding/OnboardingInterestsScreen.page';
import OnboardingProfilePicScreen from '../pageobjects/Onboarding/OnboardingProfilePicScreen.page';
import OnboardingUsernameScreen from '../pageobjects/Onboarding/OnboardingUsernameScreen.page';
import SignupStep1Page from '../pageobjects/SignUp/SignupStep1.page';
import SignupStep2Page from '../pageobjects/SignUp/SignupStep2.page';
import SignupStep3Page from '../pageobjects/SignUp/SignupStep3.page';
import StartScreen from '../pageobjects/StartScreen.page';
import { fetchOTP } from '../utils/fetchOTP';

describe('Onboarding Flow', () => {
  let chosenSuggestion = '';
  async function signUp() {
    if (await SidebarScreen.isDisplayed()) {
      await SidebarScreen.logout();
    }
    await StartScreen.openSignupScreen();
    await SignupStep1Page.completeStep1(
      SignupStep1Page.generateTestName(),
      SignupStep1Page.generateTestEmail()
    );
    await SignupStep2Page.screenTitle.waitForDisplayed();
    const otp = await fetchOTP(SignupStep1Page.testEmail, 'registration');
    await SignupStep2Page.completeStep2(otp);
    await SignupStep3Page.completeStep3(SignupStep1Page.testPassword);
  }

  describe('Normal Onboarding Flow', () => {
    before(async () => {
      await signUp();
    });

    it('should show the onboarding profile picture screen', async () => {
      await OnboardingProfilePicScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingProfilePicScreen.isDisplayed()).toBe(true);
    });

    it('should have next button disabled initially in onboarding profile picture screen', async () => {
      await expect(await OnboardingProfilePicScreen.isNextButtonEnabled()).toBe(false);
    });

    it('should enable next button upon selecting an avatar', async () => {
      await OnboardingProfilePicScreen.emojiAvatars[0].click();
      await expect(await OnboardingProfilePicScreen.isNextButtonEnabled()).toBe(true);
    });

    it('should handle choosing a different avatar color', async () => {
      await OnboardingProfilePicScreen.avatarColors[1].click();
      await expect(await OnboardingProfilePicScreen.isNextButtonEnabled()).toBe(true);
    });

    it('should navigate to the username onboarding screen when clicking next', async () => {
      await OnboardingProfilePicScreen.clickNext();
      await OnboardingUsernameScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingUsernameScreen.isDisplayed()).toBe(true);
    });

    it('should preserve selected avatar when navigating back', async () => {
      await OnboardingUsernameScreen.goBack();
      await OnboardingProfilePicScreen.screenTitle.waitForDisplayed();
      expect(await OnboardingProfilePicScreen.isDisplayed()).toBe(true);
      expect(await OnboardingProfilePicScreen.isNextButtonEnabled()).toBe(true);
      await OnboardingProfilePicScreen.clickNext();
    });

    it('should show error for short usernames', async () => {
      await OnboardingUsernameScreen.screenTitle.waitForDisplayed();
      await OnboardingUsernameScreen.enterUsername('a');
      await OnboardingUsernameScreen.enterUsername('b');
      await expect(await OnboardingUsernameScreen.isShortUsernameErrorMessageDisplayed()).toBe(
        true
      );
    });

    it('should show error for usernames with only underscores', async () => {
      await OnboardingUsernameScreen.enterUsername('___');
      await expect(await OnboardingUsernameScreen.isUnderscoresOnlyErrorMessageDisplayed()).toBe(
        true
      );
    });

    it('should show error for usernames without any letters', async () => {
      await OnboardingUsernameScreen.enterUsername('_123');
      await expect(await OnboardingUsernameScreen.isIncludeLettersErrorMessageDisplayed()).toBe(
        true
      );
    });

    it('should show error for usernames with only numbers', async () => {
      await OnboardingUsernameScreen.enterUsername('123456');
      await expect(await OnboardingUsernameScreen.isNumbersOnlyErrorMessageDisplayed()).toBe(true);
    });

    it('should not accept characters other than letters, numbers, and underscores', async () => {
      await OnboardingUsernameScreen.enterUsername('user!@#');
      await expect(await OnboardingUsernameScreen.usernameInput.getText()).toBe('@user');
    });

    it('should show error for already taken usernames', async () => {
      await OnboardingUsernameScreen.enterUsername('@notnowomar');
      await driver.pause(2000);
      await expect(await OnboardingUsernameScreen.isUsernameExistsErrorMessageDisplayed()).toBe(
        true
      );
    });

    it('should handle choosing suggested usernames and make sure they are valid', async () => {
      const suggestions = await OnboardingUsernameScreen.usernameSuggestions;
      for (let suggestion of suggestions) {
        await suggestion.waitForDisplayed();
        await expect(await suggestion.isDisplayed()).toBe(true);
        await suggestion.click();
        await driver.pause(1500);
        await expect(await OnboardingUsernameScreen.isNextButtonEnabled()).toBe(true);
        await expect(await OnboardingUsernameScreen.isUsernameExistsErrorMessageDisplayed()).toBe(
          false
        );
      }
      chosenSuggestion = await OnboardingUsernameScreen.usernameInput.getText();
    });

    it('should proceed to the interests onboarding step when clicking next', async () => {
      await OnboardingUsernameScreen.clickNext();
      await OnboardingInterestsScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingInterestsScreen.isDisplayed()).toBe(true);
    });

    it('should preserve username when navigating back to the username screen', async () => {
      await OnboardingInterestsScreen.goBack();
      await OnboardingUsernameScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingUsernameScreen.isNextButtonEnabled()).toBe(true);
      await expect(await OnboardingUsernameScreen.usernameInput.getText()).toBe(chosenSuggestion);
      await OnboardingUsernameScreen.clickNext();
    });

    it('should enable next button upon selecting at least one interest', async () => {
      await OnboardingInterestsScreen.clickInterests(['Medical']); // Select
      await expect(await OnboardingInterestsScreen.isNoneSelectedMessageDisplayed()).toBe(false);
    });

    it('should allow deselecting interests', async () => {
      await OnboardingInterestsScreen.clickInterests(['Medical']); // Deselect
      await driver.pause(100);
      await expect(await OnboardingInterestsScreen.isNoneSelectedMessageDisplayed()).toBe(true);
    });

    it('should allow selecting multiple interests', async () => {
      await OnboardingInterestsScreen.clickInterests(['Tech', 'Culture', 'Travel']);
      await expect(await OnboardingInterestsScreen.isNoneSelectedMessageDisplayed()).toBe(false);
    });

    it('should proceed to the bio onboarding step when clicking next', async () => {
      await OnboardingInterestsScreen.clickNext();
      await OnboardingBioScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingBioScreen.isDisplayed()).toBe(true);
    });

    it('should have next button disabled initially on bio screen', async () => {
      await OnboardingBioScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingBioScreen.isNextButtonEnabled()).toBe(false);
    });

    it('should enable next button upon entering bio', async () => {
      await OnboardingBioScreen.enterBio('This is a test bio.');
      await expect(await OnboardingBioScreen.isNextButtonEnabled()).toBe(true);
    });

    it('should handle max character limit in bio input', async () => {
      const longBio = 'a'.repeat(200);
      await OnboardingBioScreen.enterBio(longBio);
      const enteredBio = await OnboardingBioScreen.bioInput.getText();
      await expect(enteredBio.length).toBe(160);
    });

    it('should proceed to follow screen when clicking next', async () => {
      await OnboardingBioScreen.enterBio('Hello, this is my bio!');
      await OnboardingBioScreen.clickNext();
      await OnboardingFollowScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingFollowScreen.screenTitle.waitForDisplayed()).toBe(true);
    });

    it('should show follow suggestions on follow screen', async () => {
      await OnboardingFollowScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingFollowScreen.interactionButtons.length).toBeGreaterThan(0);
    });

    it('should have next button disabled initially on follow screen', async () => {
      await OnboardingFollowScreen.screenTitle.waitForDisplayed();
      await OnboardingFollowScreen.clickNext();
      await expect(await OnboardingFollowScreen.screenTitle.isDisplayed()).toBe(true);
    });

    it('should enable next button upon selecting at least one follow suggestion', async () => {
      await OnboardingFollowScreen.interactionButtons[0].click();
      await expect(await OnboardingFollowScreen.isNextButtonEnabled()).toBe(true);
    });

    it('should disable next button again upon unfollowing that suggestion', async () => {
      await OnboardingFollowScreen.interactionButtons[0].click();
      await driver.pause(500);
      await OnboardingFollowScreen.clickNext();
      await expect(await OnboardingFollowScreen.screenTitle.isDisplayed()).toBe(true);
    });

    it('should handle following multiple users from suggestions', async () => {
      for (let i = 0; i < (await OnboardingFollowScreen.interactionButtons.length); i++) {
        await OnboardingFollowScreen.interactionButtons[i].click();
        await driver.pause(500);
      }
      await expect(await OnboardingFollowScreen.isNextButtonEnabled()).toBe(true);
      await expect(await OnboardingFollowScreen.followingButtons.length).toBe(
        await OnboardingFollowScreen.interactionButtons.length
      );
    });

    it('should navigate to for you screen upon clicking next', async () => {
      await OnboardingFollowScreen.clickNext();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await expect(await ForYouScreen.forYouTab.isDisplayed()).toBe(true);
    });

    it('should reflect all changes in profile after onboarding', async () => {
      await ForYouScreen.openSideMenu();
      await expect(await SidebarScreen.currentUsername.getText()).toBe(chosenSuggestion);
    });
  });

  describe('Cancel Onboarding Flow', () => {
    before(async () => {
      await signUp();
    });

    it('should allow cancelling onboarding from profile picture screen', async () => {
      await OnboardingProfilePicScreen.cancelOnboarding();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await expect(await ForYouScreen.forYouTab.isDisplayed()).toBe(true);
    });

    it('should have handled username generation upon cancelling onboarding', async () => {
      await ForYouScreen.openSideMenu();
      expect(await SidebarScreen.currentUsername.isDisplayed()).toBe(true);
    });
  });

  describe('Skip Onboarding Flow', () => {
    before(async () => {
      await signUp();
    });

    it('should allow skipping profile picture selection and proceed to username screen', async () => {
      await OnboardingProfilePicScreen.clickSkip();
      await OnboardingUsernameScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingUsernameScreen.isDisplayed()).toBe(true);
    });

    it('should allow skipping username screen and proceed to interests screen', async () => {
      chosenSuggestion = await OnboardingUsernameScreen.usernameInput.getText();
      await OnboardingUsernameScreen.clickSkip();
      await OnboardingInterestsScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingInterestsScreen.isDisplayed()).toBe(true);
    });

    it('should still need one interest selected to proceed to bio screen', async () => {
      await OnboardingInterestsScreen.clickInterests(['Food']);
      await OnboardingInterestsScreen.clickNext();
      await OnboardingBioScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingBioScreen.isDisplayed()).toBe(true);
    });

    it('should allow skipping bio screen and proceed to follow screen', async () => {
      await OnboardingBioScreen.clickSkip();
      await OnboardingFollowScreen.screenTitle.waitForDisplayed();
      await expect(await OnboardingFollowScreen.screenTitle.isDisplayed()).toBe(true);
    });

    it('should still need at least one follow to complete onboarding', async () => {
      await OnboardingFollowScreen.interactionButtons[0].click();
      await driver.pause(500);
      await OnboardingFollowScreen.clickNext();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await expect(await ForYouScreen.forYouTab.isDisplayed()).toBe(true);
    });

    it('should have handled username skipping by defaulting to first suggestion', async () => {
      await ForYouScreen.openSideMenu();
      await expect(await SidebarScreen.currentUsername.getText()).toBe(chosenSuggestion);
    });
  });
});