snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-apps/examples/postcard/e2e/auth.setup.ts

@@ -0,0 +1,68 @@
+import { type Locator, expect, test as setup } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const AUTH_DIR = path.resolve(__dirname, '.auth');
+const STORAGE_STATE = path.join(AUTH_DIR, 'user.json');
+const WORKSPACE_ORIGIN_FILE = path.join(AUTH_DIR, 'workspace-origin.txt');
+
+const LOGIN = process.env.E2E_LOGIN ?? 'tim@apple.dev';
+const PASSWORD = process.env.E2E_PASSWORD ?? 'tim@apple.dev';
+const WORKSPACE_NAME = process.env.E2E_WORKSPACE_NAME ?? 'Apple';
+
+const isVisible = async (locator: Locator) =>
+  locator.isVisible().catch(() => false);
+
+setup('authenticate', async ({ page }) => {
+  await page.goto('/');
+
+  // A fresh load shows the auth provider choice even when credentials are prefilled.
+  const continueWithEmail = page.getByRole('button', {
+    name: 'Continue with Email',
+  });
+  const emailField = page.getByPlaceholder('Email');
+
+  // Wait on the concrete auth UI rather than networkidle (flaky per Playwright).
+  await expect(continueWithEmail.or(emailField).first()).toBeVisible();
+
+  if (await isVisible(continueWithEmail)) {
+    await continueWithEmail.click();
+  }
+
+  if (await isVisible(emailField)) {
+    await emailField.fill(LOGIN);
+    await page.getByRole('button', { name: 'Continue', exact: true }).click();
+  }
+
+  const passwordField = page.getByPlaceholder('Password');
+  await passwordField.waitFor({ state: 'visible' });
+  await passwordField.fill(PASSWORD);
+
+  const signInButton = page.getByRole('button', { name: 'Sign in' });
+  await expect(signInButton).toBeEnabled();
+  await signInButton.click();
+
+  // Multi-workspace logins land on a picker; single-workspace logins skip it.
+  const workspacePicker = page.getByText('Choose a workspace');
+  const reachedPicker = await workspacePicker
+    .waitFor({ state: 'visible', timeout: 10_000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (reachedPicker) {
+    await page.getByText(WORKSPACE_NAME, { exact: true }).click();
+    await page.waitForFunction(() => window.location.href.includes('verify'));
+    await page.waitForFunction(() => !window.location.href.includes('verify'));
+  }
+
+  await page.waitForFunction(
+    () => window.localStorage.getItem('tokenPairState') !== null,
+    undefined,
+    { timeout: 15_000 },
+  );
+
+  fs.mkdirSync(AUTH_DIR, { recursive: true });
+  fs.writeFileSync(WORKSPACE_ORIGIN_FILE, new URL(page.url()).origin);
+
+  await page.context().storageState({ path: STORAGE_STATE });
+});

packages/twenty-apps/examples/postcard/e2e/card-front-component.spec.ts

@@ -0,0 +1,152 @@
+import { expect, test } from '@playwright/test';
+
+import { CARD_TEST_IDS } from '../src/components/card-test-ids';
+import { resolveE2eWorkspaceUrl } from './utils/resolve-e2e-workspace-url';
+
+// Seeded postcard record the preview should display.
+const RECORD_ID = process.env.E2E_POSTCARD_RECORD_ID;
+const EXPECTED_NAME = process.env.E2E_POSTCARD_NAME;
+const EXPECTED_STATUS = process.env.E2E_POSTCARD_STATUS;
+const EXPECTED_CONTENT = process.env.E2E_POSTCARD_CONTENT;
+
+const STATUS_BADGE_BACKGROUND: Record<string, string> = {
+  DRAFT: 'rgb(153, 153, 153)',
+  SENT: 'rgb(232, 140, 48)',
+  DELIVERED: 'rgb(76, 175, 80)',
+  RETURNED: 'rgb(224, 82, 82)',
+};
+
+// Error states rendered by card.front-component.tsx when it cannot authenticate
+// or fetch the record. None of these may appear once the component renders.
+const FALLBACK_TEXTS = [
+  'No postcard data',
+  'Record not found',
+  'No record ID',
+  'apiUrl: missing',
+];
+
+test.describe('Postcard card front component', () => {
+  test.beforeAll(() => {
+    if (!RECORD_ID) {
+      throw new Error(
+        'E2E_POSTCARD_RECORD_ID is required and must point to a seeded postcard record. ' +
+          'Ensure the postcard app is installed and a record exists before running this test.',
+      );
+    }
+  });
+
+  // The front component renders in a separate iframe + Web Worker, so its
+  // failures never reach the assertion output. Surface browser console output,
+  // uncaught errors, failed requests, and 4xx/5xx responses (e.g. a presigned
+  // S3 403) in the test log so CI failures are diagnosable without the trace.
+  test.beforeEach(({ page }) => {
+    page.on('console', (message) => {
+      console.log(`[browser:${message.type()}] ${message.text()}`);
+    });
+
+    page.on('pageerror', (error) => {
+      console.log(`[pageerror] ${error.message}\n${error.stack ?? ''}`);
+    });
+
+    page.on('requestfailed', (request) => {
+      console.log(
+        `[requestfailed] ${request.method()} ${request.url()} — ${
+          request.failure()?.errorText ?? 'unknown error'
+        }`,
+      );
+    });
+
+    page.on('response', (response) => {
+      if (response.status() >= 400) {
+        console.log(
+          `[response ${response.status()}] ${response
+            .request()
+            .method()} ${response.url()}`,
+        );
+      }
+    });
+
+    page.on('worker', (worker) => {
+      console.log(`[worker started] ${worker.url()}`);
+    });
+  });
+
+  test('renders the postcard name and status badge in the record preview', async ({
+    page,
+  }) => {
+    await page.goto(`${resolveE2eWorkspaceUrl()}/object/postCard/${RECORD_ID}`);
+
+    const card = page.getByTestId(CARD_TEST_IDS.root);
+    await expect(card).toBeVisible();
+
+    const cardName = card.getByTestId(CARD_TEST_IDS.name);
+    const cardStatus = card.getByTestId(CARD_TEST_IDS.status);
+    const cardContent = card.getByTestId(CARD_TEST_IDS.content);
+
+    await expect(cardName).toHaveCount(1);
+    await expect(cardStatus).toHaveCount(1);
+    await expect(cardContent).toHaveCount(1);
+
+    if (EXPECTED_NAME) {
+      await expect(cardName).toHaveText(EXPECTED_NAME);
+    }
+
+    if (EXPECTED_STATUS) {
+      await expect(cardStatus).toHaveText(EXPECTED_STATUS);
+    }
+
+    if (EXPECTED_CONTENT) {
+      await expect(cardContent).toHaveText(EXPECTED_CONTENT);
+    }
+
+    // Redundant style assertions: the front component sets every style inline, so
+    // verifying the computed styles proves the component's own render + the
+    // remote-dom style bridge ran end-to-end (not just that text leaked onto the
+    // page). These mirror card.front-component.tsx exactly.
+
+    // Root container.
+    await expect(card).toHaveCSS('padding', '24px');
+
+    // Name.
+    await expect(cardName).toHaveCSS('font-size', '15px');
+    await expect(cardName).toHaveCSS('font-weight', '600');
+    await expect(cardName).toHaveCSS('color', 'rgb(51, 51, 51)');
+
+    // Status badge: white text on a status-dependent colored, rounded chip.
+    await expect(cardStatus).toHaveCSS('color', 'rgb(255, 255, 255)');
+    await expect(cardStatus).toHaveCSS('font-size', '11px');
+    await expect(cardStatus).toHaveCSS('font-weight', '600');
+    await expect(cardStatus).toHaveCSS('border-radius', '4px');
+    await expect(cardStatus).toHaveCSS('padding-top', '2px');
+    await expect(cardStatus).toHaveCSS('padding-bottom', '2px');
+    await expect(cardStatus).toHaveCSS('padding-left', '8px');
+    await expect(cardStatus).toHaveCSS('padding-right', '8px');
+
+    if (EXPECTED_STATUS && EXPECTED_STATUS in STATUS_BADGE_BACKGROUND) {
+      await expect(cardStatus).toHaveCSS(
+        'background-color',
+        STATUS_BADGE_BACKGROUND[EXPECTED_STATUS],
+      );
+    }
+
+    // Content.
+    await expect(cardContent).toHaveCSS('font-size', '14px');
+    await expect(cardContent).toHaveCSS('color', 'rgb(85, 85, 85)');
+    await expect(cardContent).toHaveCSS('margin', '0px');
+    await expect(cardContent).toHaveCSS('white-space', 'pre-line');
+
+    for (const fallback of FALLBACK_TEXTS) {
+      await expect(page.getByText(fallback, { exact: false })).toHaveCount(0);
+    }
+
+    const sdkPanel = page.getByTestId(CARD_TEST_IDS.sdkPanel);
+    await expect(sdkPanel).toBeVisible();
+
+    await expect(page.getByTestId(CARD_TEST_IDS.sdkCore)).toHaveText('core: ok');
+    await expect(page.getByTestId(CARD_TEST_IDS.sdkMetadata)).toHaveText(
+      'metadata: ok',
+    );
+
+    await expect(page.getByTestId(CARD_TEST_IDS.sdkRest)).toHaveText('rest: ok');
+  });
+});

packages/twenty-apps/examples/postcard/e2e/shared-dependencies-bundle.spec.ts

@@ -0,0 +1,146 @@
+import { expect, test, type Page, type Response } from '@playwright/test';
+
+import { CARD_TEST_IDS } from '../src/components/card-test-ids';
+import { resolveE2eWorkspaceUrl } from './utils/resolve-e2e-workspace-url';
+
+const RECORD_ID = process.env.E2E_POSTCARD_RECORD_ID;
+
+const FRONT_COMPONENT_SHARED_DEPENDENCIES_IMPORT_SPECIFIER = 'twenty:front-component-shared-dependencies';
+const REACT_LICENSE_BANNER = '@license React';
+
+const MIN_SHARED_DEPENDENCIES_BUNDLE_BYTES = 50_000;
+const MAX_COMPONENT_TO_SHARED_DEPENDENCIES_RATIO = 0.65;
+
+const resolveJavaScriptBody = async (
+  page: Page,
+  response: Response,
+): Promise<Buffer> => {
+  const contentType = response.headers()['content-type'] ?? '';
+
+  if (contentType.includes('application/json')) {
+    const { url } = (await response.json()) as { url: string };
+    const redirectedResponse = await page.request.get(url);
+
+    return Buffer.from(await redirectedResponse.body());
+  }
+
+  return response.body();
+};
+
+const findCardComponentBundleBody = async (
+  page: Page,
+  frontComponentResponses: Response[],
+): Promise<Buffer | null> => {
+  for (const response of frontComponentResponses) {
+    if (response.status() !== 200) {
+      continue;
+    }
+
+    const body = await resolveJavaScriptBody(page, response);
+
+    if (body.toString('utf-8').includes(CARD_TEST_IDS.root)) {
+      return body;
+    }
+  }
+
+  return null;
+};
+
+test.describe('Postcard shared dependencies bundle', () => {
+  test.beforeAll(() => {
+    if (!RECORD_ID) {
+      throw new Error(
+        'E2E_POSTCARD_RECORD_ID is required and must point to a seeded postcard record. ' +
+          'Ensure the postcard app is installed and a record exists before running this test.',
+      );
+    }
+  });
+
+  test.beforeEach(({ page }) => {
+    page.on('console', (message) => {
+      console.log(`[browser:${message.type()}] ${message.text()}`);
+    });
+
+    page.on('pageerror', (error) => {
+      console.log(`[pageerror] ${error.message}\n${error.stack ?? ''}`);
+    });
+
+    page.on('requestfailed', (request) => {
+      console.log(
+        `[requestfailed] ${request.method()} ${request.url()} — ${
+          request.failure()?.errorText ?? 'unknown error'
+        }`,
+      );
+    });
+
+    page.on('response', (response) => {
+      if (response.status() >= 400) {
+        console.log(
+          `[response ${response.status()}] ${response
+            .request()
+            .method()} ${response.url()}`,
+        );
+      }
+    });
+
+    page.on('worker', (worker) => {
+      console.log(`[worker started] ${worker.url()}`);
+    });
+  });
+
+  test('serves the shared dependencies bundle and keeps react out of the component bundle', async ({
+    page,
+  }) => {
+    const sharedDependenciesResponses: Response[] = [];
+    const frontComponentResponses: Response[] = [];
+
+    page.on('response', (response) => {
+      const url = response.url();
+
+      if (url.includes('/rest/front-component-shared-dependencies/')) {
+        sharedDependenciesResponses.push(response);
+      }
+
+      if (url.includes('/rest/front-components/')) {
+        frontComponentResponses.push(response);
+      }
+    });
+
+    await page.goto(`${resolveE2eWorkspaceUrl()}/object/postCard/${RECORD_ID}`);
+
+    const card = page.getByTestId(CARD_TEST_IDS.root);
+    await expect(card).toBeVisible();
+    await expect(card.getByTestId(CARD_TEST_IDS.name)).toHaveCount(1);
+
+    expect(sharedDependenciesResponses.length).toBeGreaterThan(0);
+
+    const sharedDependenciesResponse = sharedDependenciesResponses[0];
+    expect(sharedDependenciesResponse.status()).toBe(200);
+    expect(sharedDependenciesResponse.url()).toMatch(
+      /\/rest\/front-component-shared-dependencies\/[0-9a-f-]{36}\/[0-9a-f]{64}\.js(?:\?[^#]*)?$/,
+    );
+
+    const sharedDependenciesBundleBody = await resolveJavaScriptBody(
+      page,
+      sharedDependenciesResponse,
+    );
+    expect(sharedDependenciesBundleBody.byteLength).toBeGreaterThan(
+      MIN_SHARED_DEPENDENCIES_BUNDLE_BYTES,
+    );
+
+    const cardBundleBody = await findCardComponentBundleBody(
+      page,
+      frontComponentResponses,
+    );
+    expect(cardBundleBody).not.toBeNull();
+
+    const cardBundleSource = (cardBundleBody as Buffer).toString('utf-8');
+    expect(cardBundleSource).toContain(FRONT_COMPONENT_SHARED_DEPENDENCIES_IMPORT_SPECIFIER);
+    expect(cardBundleSource).not.toContain(REACT_LICENSE_BANNER);
+
+    expect((cardBundleBody as Buffer).byteLength).toBeLessThan(
+      sharedDependenciesBundleBody.byteLength *
+        MAX_COMPONENT_TO_SHARED_DEPENDENCIES_RATIO,
+    );
+  });
+});

packages/twenty-apps/examples/postcard/e2e/utils/resolve-e2e-workspace-url.ts

@@ -0,0 +1,25 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const WORKSPACE_ORIGIN_FILE = path.resolve(
+  __dirname,
+  '..',
+  '.auth',
+  'workspace-origin.txt',
+);
+
+export const resolveE2eWorkspaceUrl = (): string => {
+  const fromEnv = process.env.E2E_WORKSPACE_URL;
+  if (fromEnv) {
+    return fromEnv.replace(/\/$/, '');
+  }
+
+  try {
+    return fs
+      .readFileSync(WORKSPACE_ORIGIN_FILE, 'utf8')
+      .trim()
+      .replace(/\/$/, '');
+  } catch {
+    return 'http://app.localhost:3001';
+  }
+};