[PB-985]: feature/playwright e2e tests

.vscode/settings.json

@@ -3,8 +3,8 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
-      "source.fixAll.format": true
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.format": "explicit"
     },
     "svg.preview.background": "editor"
   }

package.json

@@ -125,6 +125,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
+    "@faker-js/faker": "^9.0.0",
     "@internxt/eslint-config-internxt": "^1.0.3",
     "@internxt/prettier-config": "^1.0.1",
     "@playwright/test": "^1.44.1",

playwright.config.ts

@@ -1,15 +1,18 @@
 import { defineConfig, devices } from '@playwright/test';
-
+import * as dotenv from 'dotenv';
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  expect: {
+    timeout: 3000,
+  },
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -24,7 +27,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'https://staging.drive.internxt.com/login',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -33,18 +36,29 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+      testDir: './tests/specs',
+    },
+    {
+      name: 'Internxt E2E tests on chromium',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Chrome'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: 'Internxt E2E tests on firefox',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Firefox'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'Internxt E2E tests on webkit',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Safari'], storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
 
     /* Test against mobile viewports. */
@@ -59,8 +73,10 @@ export default defineConfig({
 
     /* Test against branded browsers. */
     {
-      name: 'edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+      name: 'Internxt E2E tests on Edge',
+      testDir: './tests/specs',
+      use: { ...devices['Desktop Edge'], channel: 'msedge', storageState: './tests/specs/playwright/.auth/user.json' },
+      dependencies: ['setup'],
     },
     // {
     //   name: 'Google Chrome',

src/app/banners/BannerManager.ts

@@ -1,8 +1,9 @@
+import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
+import envService from '../core/services/env.service';
 import localStorageService from '../core/services/local-storage.service';
 import { useAppSelector } from '../store/hooks';
 import { PlanState } from '../store/slices/plan';
 import { userSelectors } from '../store/slices/user';
-import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 
 const BANNER_NAME_IN_LOCAL_STORAGE = 'show_banner';
 const BANNER_NAME_FOR_FREE_USERS = 'show_free_users_banner';
@@ -46,7 +47,7 @@ export class BannerManager {
   }
 
   handleBannerDisplay(setShowBanner: (show: boolean) => void): void {
-    if (this.shouldShowBanner()) {
+    if (this.shouldShowBanner() && envService.isProduction()) {
       setTimeout(() => {
         setShowBanner(true);
       }, 5000);

tests/global.ts

@@ -0,0 +1,5 @@
+// global.ts
+export const userCredentials = {
+  email: '',
+  password: '',
+};

tests/helper/staticData.ts

@@ -0,0 +1,37 @@
+export const staticData = {
+  //CREDENTIALS
+  invalidPassword: 'invalid',
+  tooShortPassword: 'tes',
+  notComplexPassword: 'password',
+
+  //URLS
+  passwordRecoveryLinkURL: 'https://drive.internxt.com/recovery-link/',
+  signUpURL: 'https://drive.internxt.com/new',
+  driveURL: 'https://staging.drive.internxt.com/',
+
+  //SIGNUP DISCLAIMER
+  disclaimer:
+    'Internxt doesn’t store passwords. If you forget your password, you can download a backup key to regain access to your files. Learn more',
+
+  //PASSWORD WARNINGS
+  passwordNotLongEnough: 'Password has to be at least 8 characters long',
+  passwordNotComplex: 'Password is not complex enough',
+  passwordWeak: 'Password is weak',
+  passwordStrong: 'Password is strong',
+
+  //PAGE TITLES
+  termsOfServiceTitle: 'Terms of Service',
+  needHelpTitle: 'How can we help you?',
+  howToCreateBackUpKeyPageTitle: 'How do I create a backup key?',
+  logInPageTitle: 'Log in',
+
+  userAlreadyRegistered: 'already registered',
+  accountRecovery: 'Account recovery',
+  wrongLoginWarning: 'Wrong login credentials',
+  dontHaveAccountText: "Don't have an account?",
+  createAccountText: 'Create account',
+  termsAndConditionsLinkText: 'Terms and conditions',
+  youAcceptTermsLinkText: 'you accept the terms & conditions',
+  needHelpLinkText: 'Need help?',
+  driveTitle: 'Drive',
+};

tests/pages/drivePage.ts

@@ -0,0 +1,99 @@
+import { test, expect, Locator, Page } from '@playwright/test';
+
+export class DrivePage {
+  private page: Page;
+  private driveTitle: Locator;
+  private createFolderHeaderButton: Locator;
+  private folderCreationModal: Locator;
+  private newFolderModalTitle: Locator;
+  private inputTitle: Locator;
+  private nameInput: Locator;
+  private cancelFolderCreationButton: Locator;
+  private cancelFolderCreationButtonText: Locator;
+  private createFolderButton: Locator;
+  private createFolderButtonText: Locator;
+  private allFolderNamesInDrive: Locator;
+  private rightClickOnBodyModal: Locator;
+  private contextMenuCreateFolderButton: Locator;
+  private contextMenuCreateFolderButtonText: Locator;
+  private contextMenuCreateFolderButtonSymbol: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.driveTitle = this.page.locator('[title="Drive"]');
+    this.createFolderHeaderButton = this.page.locator('div[data-tooltip-id="createfolder-tooltip"]');
+    //FOLDER CREATION MODAL
+    this.folderCreationModal = this.page.locator('form[class="flex flex-col space-y-5"]');
+    this.newFolderModalTitle = this.page.locator('[class="text-2xl font-medium text-gray-100"]:has-text("New folder")');
+    this.inputTitle = this.page.locator('[class*="w-full text-gray-100 max-w-sm "] span');
+    this.nameInput = this.page.getByPlaceholder('Untitled folder', { exact: true });
+    this.cancelFolderCreationButton = this.page.getByRole('button', { name: 'Cancel' });
+    this.cancelFolderCreationButtonText = this.page.locator(
+      '[class$="dark:active:bg-gray-10 text-gray-80 shadow-sm "] div',
+    );
+    this.createFolderButtonText = this.page.locator(
+      '[class="flex items-center justify-center space-x-2"]:has-text("Create")',
+    );
+    this.createFolderButton = this.page.getByRole('button', { name: 'Create' });
+    this.allFolderNamesInDrive = this.page.locator('[data-test="folder-name"]');
+    //RIGHT CLICK ON BODY OPTIONS
+    this.rightClickOnBodyModal = this.page.locator('[class="absolute scale-100 opacity-100"]');
+    this.contextMenuCreateFolderButton = this.page.locator('[data-cy="contextMenuCreateFolderButton"]');
+    this.contextMenuCreateFolderButtonText = this.page.locator('[data-cy="contextMenuCreateFolderButtonText"]');
+    this.contextMenuCreateFolderButtonSymbol = this.page.locator('[data-cy="contextMenuCreateFolderButton"] span');
+  }
+  async checkFolder(folderName: string) {
+    const folder = this.allFolderNamesInDrive.filter({ hasText: folderName });
+    await folder.waitFor({ state: 'visible' });
+    const createdFolderName = await folder.textContent();
+    return createdFolderName;
+  }
+
+  async clickOnCreateFolderHeaderButton() {
+    await this.createFolderHeaderButton.click();
+  }
+
+  async typeInFolderName(folderName: string) {
+    const modalTitle = await this.newFolderModalTitle.textContent();
+    expect(modalTitle).toEqual('New folder');
+    const inputTitle = await this.inputTitle.textContent();
+    expect(inputTitle).toEqual('Name');
+    const inputPlaceholder = await this.nameInput.getAttribute('placeholder');
+    expect(inputPlaceholder).toEqual('Untitled folder');
+    await this.nameInput.fill(folderName);
+  }
+
+  async clickOnCreateFolder(folderName: string) {
+    await this.createFolderButton.waitFor({ state: 'visible' });
+    const createButtonText = await this.createFolderButtonText.textContent();
+    expect(createButtonText).toEqual('Create');
+    await this.createFolderButton.click();
+    const createdFolderName = await this.checkFolder(folderName);
+    return createdFolderName;
+  }
+
+  async clickOnCancelFolderCreation() {
+    const cancelButton = this.folderCreationModal.locator('button', { hasText: 'Cancel' });
+    await cancelButton.waitFor({ state: 'visible' });
+    const buttonText = await cancelButton.textContent();
+    expect(buttonText).toEqual('Cancel');
+    await cancelButton.click();
+    return this.folderCreationModal;
+  }
+  async rightClickOnBody() {
+    await this.driveTitle.waitFor({ state: 'visible' });
+    await this.page.locator('body').click({ button: 'right' });
+  }
+
+  async clickOnNewFolderContextMenu() {
+    await this.contextMenuCreateFolderButton.waitFor({ state: 'visible', timeout: 6000 });
+    const newFolderButtonText = await this.contextMenuCreateFolderButtonText.textContent();
+    expect(newFolderButtonText).toEqual('New folder');
+    const buttonSymbols = await this.contextMenuCreateFolderButtonSymbol.textContent();
+    expect(buttonSymbols).toContain('F');
+    await this.contextMenuCreateFolderButton.click();
+  }
+  async pressShiftAndF() {
+    await this.page.keyboard.press('Shift+f');
+  }
+}

tests/pages/loginPage.ts

@@ -0,0 +1,115 @@
+import { Page, Locator, expect } from '@playwright/test';
+import { Context } from 'vm';
+
+export class loginPage {
+  page: Page;
+  private loginTitle: Locator;
+  private emailInput: Locator;
+  private passwordInput: Locator;
+  private loginButton: Locator;
+  private loginButtonText: Locator;
+  private forgotPassword: Locator;
+  private dontHaveAccountText: Locator;
+  private createAccount: Locator;
+  private termsAndConditions: Locator;
+  private needHelp: Locator;
+  private wrongCredentials: Locator;
+  //drive
+  private driveTitle: Locator;
+  //accountRecovery
+  private accountRecoveryTitle: Locator;
+  //SignUp
+  private createAccounTitle: Locator;
+  //terms and conditions
+  private termsOfService: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.loginTitle = this.page.getByRole('heading', { name: 'Log in' });
+    this.emailInput = this.page.getByPlaceholder('Email', { exact: true });
+    this.passwordInput = this.page.getByPlaceholder('Password', { exact: true });
+    this.loginButton = this.page.getByRole('button', { name: 'Log in' });
+    this.loginButtonText = this.page.locator('[data-cy="loginButton"] div');
+    this.forgotPassword = this.page.getByText('Forgot your password?');
+    this.dontHaveAccountText = this.page.getByText("Don't have an account?");
+    this.createAccount = this.page.getByText('Create account');
+    this.termsAndConditions = this.page.getByRole('link', { name: 'Terms and conditions' });
+    this.needHelp = this.page.getByRole('link', { name: 'Need help?' });
+    this.wrongCredentials = this.page.getByText('Wrong login credentials');
+    //drive
+    this.driveTitle = this.page.locator('[title="Drive"]');
+    //account recovery
+    this.accountRecoveryTitle = this.page.getByRole('heading', { name: 'Account recovery' });
+    //Sign Up
+    this.createAccounTitle = this.page.getByRole('heading', { name: 'Create account' });
+    // terms of service
+  }
+
+  async typeEmail(user: string | any) {
+    await this.emailInput.waitFor({ state: 'visible' });
+    const emailPlaceholder = await this.emailInput.getAttribute('placeholder');
+    expect(emailPlaceholder).toEqual('Email');
+    await this.emailInput.fill(user);
+  }
+  async typePassword(password: string | any) {
+    const passPlaceholder = await this.passwordInput.getAttribute('placeholder');
+    expect(passPlaceholder).toEqual('Password');
+    await this.passwordInput.fill(password);
+  }
+  async clickLogIn() {
+    const loginButtonText = await this.loginButtonText.textContent();
+    expect(loginButtonText).toEqual('Log in');
+    await this.loginButton.click();
+    const driveTitle = await this.driveTitle.textContent();
+    return driveTitle;
+  }
+
+  async clickLoginWrongPass() {
+    const loginButtonText = await this.loginButtonText.textContent();
+    expect(loginButtonText).toEqual('Log in');
+    await this.loginButton.click();
+    const wrongLoginText = await this.wrongCredentials.textContent();
+    return wrongLoginText;
+  }
+
+  async clickOnForgotYourPassword() {
+    await this.loginTitle.waitFor({ state: 'visible' });
+    await this.forgotPassword.click();
+    await this.accountRecoveryTitle.waitFor({ state: 'visible' });
+    const accountRecoveryText = await this.accountRecoveryTitle.textContent();
+    return accountRecoveryText;
+  }
+
+  async clickOnCreateAccount() {
+    await this.loginTitle.waitFor({ state: 'visible' });
+    const dontHaveAccountText = await this.dontHaveAccountText.textContent();
+    const createAccountText = await this.createAccount.textContent();
+    await this.createAccount.click();
+    await this.createAccounTitle.waitFor({ state: 'visible', timeout: 3000 });
+    const createAccountTitle = await this.createAccounTitle.textContent();
+
+    return { dontHaveAccountText, createAccountText, createAccountTitle };
+  }
+
+  async clickOnTermsAndConditions(context: Context) {
+    const pagePromise = context.waitForEvent('page');
+    await this.termsAndConditions.waitFor({ state: 'visible' });
+    const termsAndConditionsText = await this.termsAndConditions.textContent();
+    await this.termsAndConditions.click();
+
+    const newPage = await pagePromise;
+    const termsOfServiceTitle = await newPage.locator('h1').textContent();
+    return { termsAndConditionsText, termsOfServiceTitle };
+  }
+
+  async clickOnNeedHelp(context: Context) {
+    const pagePromise = context.waitForEvent('page');
+    await this.needHelp.waitFor({ state: 'visible' });
+    const needHelpText = await this.needHelp.textContent();
+    await this.needHelp.click();
+
+    const newPage = await pagePromise;
+    const needHelpPageTitle = await newPage.locator('h1').textContent();
+    return { needHelpText, needHelpPageTitle };
+  }
+}