use a common component for Links and Emails inputs

Author: gitstart-twenty

.github/workflows/playwright.yml.bak

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn test:e2e companies
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -26,5 +26,5 @@ dist
 storybook-static
 *.tsbuildinfo
 .eslintcache
-.cache
 .nyc_output
+test-results/

nx.json

@@ -32,7 +32,7 @@
     },
     "start": {
       "cache": true,
-      "dependsOn": ["^typecheck","^build"]
+      "dependsOn": ["^build"]
     },
     "lint": {
       "executor": "@nx/eslint:lint",

package.json

@@ -71,7 +71,6 @@
     "apollo-server-express": "^3.12.0",
     "apollo-upload-client": "^17.0.0",
     "archiver": "^7.0.1",
-    "aws-sdk": "^2.1658.0",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
     "better-sqlite3": "^9.2.2",
@@ -190,7 +189,6 @@
     "tslib": "^2.3.0",
     "tsup": "^8.2.4",
     "type-fest": "4.10.1",
-    "typeorm": "patch:[email protected]#./packages/twenty-server/patches/typeorm+0.3.20.patch",
     "typescript": "5.3.3",
     "use-context-selector": "^2.0.0",
     "use-debounce": "^10.0.0",
@@ -223,6 +221,7 @@
     "@nx/storybook": "18.3.3",
     "@nx/vite": "18.3.3",
     "@nx/web": "18.3.3",
+    "@playwright/test": "^1.46.0",
     "@sentry/types": "^7.109.0",
     "@storybook/addon-actions": "^7.6.3",
     "@storybook/addon-coverage": "^1.0.0",

packages/twenty-chrome-extension/src/generated/graphql.tsx

@@ -7455,7 +7455,7 @@ export type Workspace = {
   billingSubscriptions?: Maybe<Array<BillingSubscription>>;
   createdAt: Scalars['DateTime'];
   currentBillingSubscription?: Maybe<BillingSubscription>;
-  currentCacheVersion?: Maybe<Scalars['String']>;
+  metadataVersion?: Maybe<Scalars['String']>;
   deletedAt?: Maybe<Scalars['DateTime']>;
   displayName?: Maybe<Scalars['String']>;
   domainName?: Maybe<Scalars['String']>;

packages/twenty-e2e-testing/.env.example

@@ -1,2 +1,22 @@
 # Note that provide always without trailing forward slash to have expected behaviour
-FRONTEND_BASE_URL="http://localhost:3001"
+FRONTEND_BASE_URL=http://localhost:3001
+CI_DEFAULT_BASE_URL=https://demo.twenty.com
+DEFAULT_LOGIN=[email protected]
+NEW_WORKSPACE_LOGIN=[email protected]
+DEMO_DEFAULT_LOGIN=[email protected]
+DEFAULT_PASSWORD=Applecar2025
+WEBSITE_URL=https://twenty.com
+
+# === DO NOT USE, WORK IN PROGRESS ===
+# This URL must have trailing forward slash as all REST API endpoints have object after it
+# Documentation for REST API: https://twenty.com/developers/rest-api/core#/
+# REST_API_BASE_URL=http://localhost:3000/rest/
+
+# Documentation for GraphQL API: https://twenty.com/developers/graphql/core
+# GRAPHQL_BASE_URL=http://localhost:3000/graphql
+
+# Without this key, all API tests will fail, to generate this key
+# Log in to Twenty workspace, go to Settings > Developers, generate new key and paste it here
+# In order to use it, header Authorization: Bearer token must be used
+# This key works for both REST and GraphQL API
+# API_DEV_KEY=fill_with_proper_key

packages/twenty-e2e-testing/.gitignore

@@ -1,5 +1,10 @@
-node_modules/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+run_results/
+playwright-report/.last-run.json
+results/
+run_results/.playwright-artifacts-0/
+run_results/.playwright-artifacts-1/
+.auth/

packages/twenty-e2e-testing/README.md

@@ -1,8 +1,8 @@
 # Twenty e2e Testing
 
-## Install
+## Prerequisite
 
-Don't forget to install the browsers before launching the tests  :
+Installing the browsers:
 
 ```
 yarn playwright install 
@@ -35,3 +35,10 @@ yarn run test:e2e <filename>
 ```
 yarn run test:e2e:debug
 ```
+
+## Q&A
+
+#### Why there's `path.resolve()` everywhere?
+That's thanks to differences in root directory when running tests using commands and using IDE. When running tests with commands, 
+the root directory is `twenty/packages/twenty-e2e-testing`, for IDE it depends on how someone sets the configuration. This way, it
+ensures that no matter which IDE or OS Shell is used, the result will be the same.

packages/twenty-e2e-testing/config/customreporter.ts

@@ -0,0 +1,33 @@
+import {
+  Reporter,
+  FullConfig,
+  Suite,
+  TestCase,
+  TestResult,
+  FullResult,
+} from '@playwright/test/reporter';
+
+class CustomReporter implements Reporter {
+  constructor(options: { customOption?: string } = {}) {
+    console.log(
+      `my-awesome-reporter setup with customOption set to ${options.customOption}`,
+    );
+  }
+
+  onBegin(config: FullConfig, suite: Suite) {
+    console.log(`Starting the run with ${suite.allTests().length} tests`);
+  }
+
+  onTestBegin(test: TestCase) {
+    console.log(`Starting test ${test.title}`);
+  }
+
+  onTestEnd(test: TestCase, result: TestResult) {
+    console.log(`Finished test ${test.title}: ${result.status}`);
+  }
+
+  onEnd(result: FullResult) {
+    console.log(`Finished the run: ${result.status}`);
+  }
+}
+export default CustomReporter;

packages/twenty-e2e-testing/drivers/shell_driver.ts

@@ -0,0 +1,13 @@
+import { exec } from 'child_process';
+
+export async function sh(cmd) {
+  return new Promise((resolve, reject) => {
+    exec(cmd, (err, stdout, stderr) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve({ stdout, stderr });
+      }
+    });
+  });
+}

packages/twenty-e2e-testing/e2e/companies.spec.ts

@@ -0,0 +1,32 @@
+import { test as base } from '@playwright/test';
+import path from 'path';
+
+const date = new Date();
+
+export const test = base.extend<{ screenshotHook: void }>({
+  screenshotHook: [
+    async ({ page, browserName }, use, workerInfo) => {
+      // here everything is the same as beforeEach()
+      // goto is to go to website as login setup saves the cookies of logged-in user, not the state of browser
+      await page.goto('/');
+      await use(); // here is the code of test
+      // here everything is the same as afterEach()
+      // automatic fixture of making screenshot after each test
+      await page.screenshot({
+        path: path.resolve(
+          __dirname,
+          '..',
+          '..',
+          'results',
+          'screenshots',
+          `${workerInfo.project.name}`,
+          browserName,
+          `${date.toISOString()}.png`,
+        ),
+      });
+    },
+    { auto: true }, // automatic fixture runs with every test
+  ],
+});
+
+export { expect } from '@playwright/test';

packages/twenty-e2e-testing/lib/fixtures/screenshot.ts

@@ -1,43 +1,85 @@
 import { defineConfig, devices } from '@playwright/test';
-
 import { config } from 'dotenv';
+import path from 'path';
+
 config();
 
+/* === Run your local dev server before starting the tests === */
+
 /**
  * See https://playwright.dev/docs/test-configuration.
- * See https://playwright.dev/docs/trace-viewer to Collect trace when retrying the failed test
  */
 export default defineConfig({
-  testDir: 'e2e',
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  testDir: '.',
+  outputDir: 'run_results/', // directory for screenshots and videos
+  snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', // just in case, do not delete it
+  fullyParallel: true, // false only for specific tests, overwritten in specific projects or global setups of projects
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined, // undefined = amount of projects * amount of tests
+  timeout: 30 * 1000, // timeout can be changed
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.FRONTEND_BASE_URL ?? 'http://localhost:3001',
+    baseURL: process.env.CI
+      ? process.env.CI_DEFAULT_BASE_URL
+      : (process.env.FRONTEND_BASE_URL ?? 'http://localhost:3001'),
+    trace: 'retain-on-failure', // trace takes EVERYTHING from page source, records every single step, should be used only when normal debugging won't work
+    screenshot: 'on', // either 'on' here or in different method in modules, if 'on' all screenshots are overwritten each time the test is run
+    headless: true, // instead of changing it to false, run 'yarn test:e2e:debug' or 'yarn test:e2e:ui'
+    testIdAttribute: 'data-testid', // taken from Twenty source
+    viewport: { width: 1920, height: 1080 }, // most laptops use this resolution
+    launchOptions: {
+      slowMo: 500, // time in milliseconds between each step, better to use it than explicitly define timeout in tests
+    },
   },
-
-  /* Configure projects for major browsers */
+  expect: {
+    timeout: 5000,
+  },
+  reporter: [['html', { open: 'never' }]],
   projects: [
+    {
+      name: 'Login setup',
+      testMatch: /login\.setup\.ts/, // finds all tests matching this regex, in this case only 1 test should be found
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: path.resolve(__dirname, '.auth', 'user.json'), // takes saved cookies from directory
+      },
+      dependencies: ['Login setup'], // forces to run login setup before running tests from this project - CASE SENSITIVE
     },
-
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        ...devices['Desktop Firefox'],
+        storageState: path.resolve(__dirname, '.auth', 'user.json'),
+      },
+      dependencies: ['Login setup'],
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    //{
+    //  name: 'webkit',
+    //  use: { ...devices['Desktop Safari'] },
+    //},
 
-    {
-      name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    //{
+    //  name: 'Microsoft Edge',
+    //  use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    //},
+    //{
+    //  name: 'Google Chrome',
+    //  use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    //},
   ],
 });

packages/twenty-e2e-testing/playwright.config.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '../lib/fixtures/screenshot';
+import { config } from 'dotenv';
+import path = require('path');
+config({ path: path.resolve(__dirname, '..', '.env') });
+
+test.describe('Basic check', () => {
+  test('Checking if table in Companies is visible', async ({ page }) => {
+    await expect(page.getByTestId('tooltip').nth(0)).toHaveText('Companies');
+    await expect(page.getByTestId('tooltip').nth(0)).toBeVisible();
+    expect(page.url()).toContain('/companies');
+    await expect(page.locator('table')).toBeVisible();
+    await expect(page.locator('tbody > tr')).toHaveCount(13); // shouldn't be hardcoded in case of tests on demo
+  });
+
+  test('', async ({ page }) => {
+    await page.getByRole('link', { name: 'Opportunities' }).click();
+    await expect(page.locator('table')).toBeVisible();
+  });
+});

packages/twenty-e2e-testing/tests/companies.spec.ts

@@ -0,0 +1,18 @@
+import { test as setup, expect } from '@playwright/test';
+import path from 'path';
+
+setup('Login test', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Continue With Email' }).click();
+  await page.getByPlaceholder('Email').fill(process.env.DEFAULT_LOGIN);
+  await page.getByRole('button', { name: 'Continue', exact: true }).click();
+  await page.getByPlaceholder('Password').fill(process.env.DEFAULT_PASSWORD);
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await expect(page.getByText('Welcome to Twenty')).not.toBeVisible();
+
+  // End of authentication steps.
+
+  await page.context().storageState({
+    path: path.resolve(__dirname, '..', '.auth', 'user.json'),
+  });
+});