tweets.e2e.js

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

import FollowingScreen from '../pageobjects/Home/FollowingScreen.page';
import ForYouScreen from '../pageobjects/Home/ForYouScreen.page';
import LoginEmailScreen from '../pageobjects/Login/LoginEmail.page';
import LoginPasswordScreen from '../pageobjects/Login/LoginPassword.page';
import StartScreen from '../pageobjects/StartScreen.page';
import TweetComposerScreen from '../pageobjects/Tweets/TweetComposerScreen.page';
import TweetDetailsScreen from '../pageobjects/Tweets/TweetDetailsScreen.page';
import { changeUsername } from '../utils/changeUsername';
import { createTestUser } from '../utils/createTestUser';
import { getAccessToken } from '../utils/getAccessToken';

let testUser;

describe('Tweets Flow', () => {
  const login = async () => {
    await StartScreen.openLoginScreen();
    await LoginEmailScreen.enterEmail(testUser.email);
    await LoginEmailScreen.clickNext();
    await LoginPasswordScreen.enterPassword(testUser.password);
    await LoginPasswordScreen.clickLogin();
    await ForYouScreen.forYouTab.waitForDisplayed();
  };

  before(async () => {
    testUser = await createTestUser();
    const accessToken = await getAccessToken(testUser.email, testUser.password);
    testUser.username = await changeUsername(accessToken);
    await login();
  });

  describe('Creating Tweet Tests', () => {
    before(async () => {
      await ForYouScreen.clickNewTweetButton();
    });

    it('should show tweet composer screen', async () => {
      await expect(await TweetComposerScreen.isDisplayed()).toBe(true);
    });

    it('should initially have post button disabled when composer is empty', async () => {
      await expect(await TweetComposerScreen.isPostButtonEnabled()).toBe(false);
    });

    it('should enable post button upon entering any input', async () => {
      await TweetComposerScreen.writeTweet('Hello!');
      await expect(await TweetComposerScreen.isPostButtonEnabled()).toBe(true);
    });

    it('should disable posting tweet when input is too long', async () => {
      await TweetComposerScreen.writeTweet('s'.repeat(281));
      await expect(await TweetComposerScreen.isPostButtonEnabled()).toBe(false);
    });

    it('should show discard modal when going back with unsaved changes', async () => {
      await TweetComposerScreen.goBack();
      await expect(await TweetComposerScreen.isDiscardModalDisplayed()).toBe(true);
    });

    it('should stay on composer screen when canceling discard', async () => {
      await TweetComposerScreen.cancelDiscardTweet();
      await expect(await TweetComposerScreen.isDisplayed()).toBe(true);
    });

    it('should discard tweet when discarding', async () => {
      await TweetComposerScreen.goBack();
      await TweetComposerScreen.discardTweet();
      await expect(await ForYouScreen.isDisplayed()).toBe(true);
    });

    it('should handle posting tweet with only text', async () => {
      await ForYouScreen.clickNewTweetButton();
      await TweetComposerScreen.tweetInput.waitForDisplayed();
      await TweetComposerScreen.writeTweet('Hello World!');
      await TweetComposerScreen.postTweet();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await ForYouScreen.switchToFollowingTab();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(500);
      await expect(await FollowingScreen.tweetCard.length).toBe(1);
    });

    it('should verify posted tweet is the same as input', async () => {
      await expect(await FollowingScreen.tweetContent[0].getText()).toBe('Hello World!');
    });

    it('should handle choosing media in composer', async () => {
      await FollowingScreen.clickNewTweetButton();
      await TweetComposerScreen.tweetInput.waitForDisplayed();
      try {
        await expect(await TweetComposerScreen.composerMediaImages.length).toBeGreaterThan(0);
        await TweetComposerScreen.composerMediaImages[0].click();
        await driver.pause(500);
        await expect(await TweetComposerScreen.composerRemoveMedia.length).toBe(1);
      } catch (error) {
        console.error(error);
      }
    });

    it('should max out at 4 images', async () => {
      try {
        await TweetComposerScreen.composerMediaImages[1].click();
        await driver.pause(100);
        await TweetComposerScreen.composerMediaImages[2].click();
        await driver.pause(100);
        await TweetComposerScreen.composerMediaImages[3].click();
        await driver.pause(100);
        await expect(await TweetComposerScreen.composerRemoveMedia.length).toBeGreaterThan(0);
      } catch (error) {
        console.error(error);
      }
    });

    it('should handle removing media', async () => {
      try {
        for (let i = 0; i < 4; i++) {
          await TweetComposerScreen.composerRemoveMedia[0].click();
          await driver.pause(500);
        }
        await expect(await TweetComposerScreen.composerRemoveMedia.length).toBe(0);
      } catch (error) {
        console.error(error);
      }
    });

    it('should handle posting tweet with media', async () => {
      try {
        await TweetComposerScreen.composerMediaImages[0].click();
        await driver.pause(100);
        await TweetComposerScreen.postTweet();
        await ForYouScreen.forYouTab.waitForDisplayed();
        await ForYouScreen.switchToFollowingTab();
        await FollowingScreen.screenTitle.waitForDisplayed();
        await driver.pause(500);
        await expect(await FollowingScreen.tweetCard.length).toBe(2);
      } catch (error) {
        console.error(error);
      }
    });

    it('should handle posting tweet with mention, hashtag, and link', async () => {
      await FollowingScreen.clickNewTweetButton();
      await TweetComposerScreen.tweetInput.waitForDisplayed();
      await TweetComposerScreen.writeTweet(`@${testUser.username} #test https://raven.cmp27.space`);
      await TweetComposerScreen.postTweet();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await ForYouScreen.switchToFollowingTab();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(500);
      await expect(await FollowingScreen.tweetCard.length).toBe(3);
    });
  });

  describe('Timeline Navigation Tests', () => {
    before(async () => {
      await ForYouScreen.forYouTab.waitForDisplayed();
    });

    it('should switch between For You and Following tabs', async () => {
      await expect(await FollowingScreen.isDisplayed()).toBe(true);

      await ForYouScreen.forYouTab.click();
      await driver.pause(300);
      await expect(await ForYouScreen.forYouTab).toBeDisplayed();

      await ForYouScreen.switchToFollowingTab();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await expect(await FollowingScreen.screenTitle).toBeDisplayed();
    });

    it('should display tweet cards on timeline', async () => {
      const tweetCards = await FollowingScreen.tweetCard;
      await expect(tweetCards.length).toBeGreaterThan(0);
    });

    it('should navigate to tweet detail when clicking on a tweet', async () => {
      const firstTweet = await FollowingScreen.tweetCard[2];
      await firstTweet.click();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
      await expect(await TweetDetailsScreen.isDisplayed()).toBe(true);
    });

    it('should go back to timeline from tweet detail', async () => {
      await TweetDetailsScreen.goBack();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await expect(await FollowingScreen.isDisplayed()).toBe(true);
    });
  });

  describe('Thread View Tests', () => {
    before(async () => {
      await FollowingScreen.screenTitle.waitForDisplayed();
      const firstTweet = await FollowingScreen.tweetCard[2];
      await firstTweet.click();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
    });

    it('should display main tweet in detail view', async () => {
      await expect(await TweetDetailsScreen.isMainTweetDisplayed()).toBe(true);
    });

    it('should display tweet content in detail view', async () => {
      const contentElements = await TweetDetailsScreen.tweetContent;
      await expect(contentElements.length).toBeGreaterThan(0);
    });

    it('should display tweet action buttons', async () => {
      await expect(await TweetDetailsScreen.likeButton).toBeDisplayed();
      await expect(await TweetDetailsScreen.retweetButton).toBeDisplayed();
      await expect(await TweetDetailsScreen.replyButton).toBeDisplayed();
    });

    it('should display reply input at bottom', async () => {
      await expect(await TweetDetailsScreen.replyInput).toBeDisplayed();
    });

    after(async () => {
      await TweetDetailsScreen.goBack();
      await FollowingScreen.screenTitle.waitForDisplayed();
    });
  });

  describe('Reply Flow Tests', () => {
    let initialReplyCount;

    before(async () => {
      const firstTweet = await FollowingScreen.tweetCard[2];
      await firstTweet.click();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
      initialReplyCount = await TweetDetailsScreen.getReplyCountValue();
    });

    it('should show reply input with placeholder', async () => {
      const replyInput = await TweetDetailsScreen.replyInput;
      await expect(replyInput).toBeDisplayed();
    });

    it('should submit a reply using quick reply input', async () => {
      await TweetDetailsScreen.typeReply('This is a test reply!');
      await TweetDetailsScreen.submitReply();
      await driver.pause(1000);
      await expect(await TweetDetailsScreen.isDisplayed()).toBe(true);
    });

    it('should update reply count after replying', async () => {
      await driver.pause(500);
      const newReplyCount = await TweetDetailsScreen.getReplyCountValue();
      expect(newReplyCount).toBe(initialReplyCount + 1);
    });

    it('should show the reply in the thread', async () => {
      const replies = await TweetDetailsScreen.replyContainers;
      await expect(replies.length).toBeGreaterThan(0);
    });

    it('should navigate to reply detail when clicking on a reply', async () => {
      const replies = await TweetDetailsScreen.replyContainers;
      if (replies.length > 0) {
        await replies[0].click();
        await driver.pause(500);
        await expect(await TweetDetailsScreen.isDisplayed()).toBe(true);
        await TweetDetailsScreen.goBack();
      }
    });

    after(async () => {
      await TweetDetailsScreen.goBack();
      await FollowingScreen.screenTitle.waitForDisplayed();
    });
  });

  describe('Tweet Interaction Tests', () => {
    it('should show delete tweet modal when deleting tweet', async () => {
      await FollowingScreen.tweetDrawerButton[0].click();
      await FollowingScreen.deleteTweet();
      await FollowingScreen.deleteTweetModal.waitForDisplayed();
      await expect(await FollowingScreen.isDeleteTweetModalDisplayed()).toBe(true);
    });

    it('should not delete tweet when canceling deletion', async () => {
      const initialCount = 3;
      await FollowingScreen.cancelDeleteTweet();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await expect(await FollowingScreen.tweetCard.length).toBe(initialCount);
    });

    it('should delete tweet when confirming deletion', async () => {
      const initialCount = await FollowingScreen.tweetCard.length;
      await FollowingScreen.tweetDrawerButton[0].click();
      await FollowingScreen.deleteTweet();
      await FollowingScreen.confirmDeleteTweet();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(500);
      await expect(await FollowingScreen.tweetCard.length).toBe(initialCount - 1);
    });

    it('should show ai summary when clicking on its icon', async () => {
      const aiButtons = await FollowingScreen.aiSummaryButton;
      if (aiButtons.length > 0) {
        await aiButtons[0].click();
        await driver.pause(2000);
        const aiTexts = await FollowingScreen.aiSummaryText;
        if (aiTexts.length > 0) {
          await expect(await aiTexts[0].waitForDisplayed()).toBe(true);
        }
      }
    });

    it('should handle liking tweet', async () => {
      const initialLikeCount = await FollowingScreen.tweetLikeCount[0].getText();
      await FollowingScreen.tweetLikeButton[0].click();
      await driver.pause(300);
      const updatedLikeCount = await FollowingScreen.tweetLikeCount[0].getText();
      expect(parseInt(updatedLikeCount)).toBe(parseInt(initialLikeCount) + 1);
    });

    it('should handle unliking tweet', async () => {
      const initialLikeCount = await FollowingScreen.tweetLikeCount[0].getText();
      await FollowingScreen.tweetLikeButton[0].click();
      await driver.pause(300);
      const updatedLikeCount = await FollowingScreen.tweetLikeCount[0].getText();
      expect(parseInt(updatedLikeCount)).toBe(parseInt(initialLikeCount) - 1);
    });

    it('should handle retweeting tweet', async () => {
      const initialRetweetCount = await FollowingScreen.tweetRetweetCount[0].getText();
      await FollowingScreen.tweetRetweetButton[0].click();
      await FollowingScreen.chooseRepostFromDrawer();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(300);
      const updatedRetweetCount = await FollowingScreen.tweetRetweetCount[0].getText();
      expect(parseInt(updatedRetweetCount)).toBe(parseInt(initialRetweetCount) + 1);
    });

    it('should handle undo retweet', async () => {
      const initialRetweetCount = await FollowingScreen.tweetRetweetCount[0].getText();
      await FollowingScreen.tweetRetweetButton[0].click();
      await FollowingScreen.chooseUndoRepostFromDrawer();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(300);
      const updatedRetweetCount = await FollowingScreen.tweetRetweetCount[0].getText();
      expect(parseInt(updatedRetweetCount)).toBe(parseInt(initialRetweetCount) - 1);
    });

    it('should handle quoting tweet', async () => {
      await FollowingScreen.tweetRetweetButton[1].click();
      await FollowingScreen.chooseQuoteFromDrawer();
      await TweetComposerScreen.tweetInput.waitForDisplayed();
      await TweetComposerScreen.writeTweet("I'm quoting this tweet!");
      await TweetComposerScreen.postTweet();
      await ForYouScreen.forYouTab.waitForDisplayed();
      await ForYouScreen.switchToFollowingTab();
      await FollowingScreen.screenTitle.waitForDisplayed();
      await driver.pause(500);
      const tweetContent = await FollowingScreen.tweetContent[0].getText();
      expect(tweetContent).toContain("I'm quoting this tweet!");
    });
  });

  describe('Reply via Composer Tests', () => {
    before(async () => {
      const firstTweet = await FollowingScreen.tweetCard[2];
      await firstTweet.click();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
    });

    it('should open full composer when clicking reply button', async () => {
      await TweetDetailsScreen.replyButton.click();
      await TweetComposerScreen.tweetInput.waitForDisplayed();
      await expect(await TweetComposerScreen.isDisplayed()).toBe(true);
    });

    it('should show replying to context in composer', async () => {
      await expect(await TweetComposerScreen.tweetInput).toBeDisplayed();
    });

    it('should submit reply via full composer', async () => {
      await TweetComposerScreen.writeTweet('Reply via full composer!');
      await TweetComposerScreen.postTweet();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
      await expect(await TweetDetailsScreen.isDisplayed()).toBe(true);
    });

    after(async () => {
      await TweetDetailsScreen.goBack();
      await FollowingScreen.screenTitle.waitForDisplayed();
    });
  });

  describe('Tweet Detail Interaction Tests', () => {
    before(async () => {
      const firstTweet = await FollowingScreen.tweetCard[2];
      await firstTweet.click();
      await TweetDetailsScreen.screenTitle.waitForDisplayed();
    });

    it('should like tweet from detail view', async () => {
      const initialCount = await TweetDetailsScreen.getLikeCountValue();
      await TweetDetailsScreen.toggleLike();
      await driver.pause(300);
      const newCount = await TweetDetailsScreen.getLikeCountValue();
      expect(newCount).toBe(initialCount + 1);
    });

    it('should retweet from detail view', async () => {
      await TweetDetailsScreen.openRetweetMenu();
      await TweetDetailsScreen.repostOption.waitForDisplayed();
      await expect(await TweetDetailsScreen.repostOption).toBeDisplayed();
      await expect(await TweetDetailsScreen.quoteOption).toBeDisplayed();
      await driver.back();
      await driver.pause(300);
    });

    it('should show tweet drawer options', async () => {
      const drawerButton = await TweetDetailsScreen.tweetDrawerButton;
      if (await drawerButton.isDisplayed()) {
        await drawerButton.click();
        await driver.pause(500);
        await driver.back();
        await driver.pause(300);
      }
    });

    after(async () => {
      await TweetDetailsScreen.goBack();
      await FollowingScreen.screenTitle.waitForDisplayed();
    });
  });
});