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

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');
  });
});