automaker/apps/ui/tests/context/add-context-image.spec.ts

/**
 * Add Context Image E2E Test
 *
 * Happy path: Import an image file to the context via the UI
 */

import { test, expect } from '@playwright/test';
import { Buffer } from 'buffer';
import * as fs from 'fs';
import * as path from 'path';
import {
  resetContextDirectory,
  setupProjectWithFixture,
  getFixturePath,
  navigateToContext,
  waitForContextFile,
  waitForNetworkIdle,
  authenticateForTests,
} from '../utils';

test.describe('Add Context Image', () => {
  let testImagePath: string;

  test.beforeAll(async () => {
    // Create a simple test image (1x1 red PNG)
    const fixturePath = getFixturePath();
    testImagePath = path.join(fixturePath, '..', 'test-image.png');

    // Create a minimal PNG (1x1 pixel red image)
    const pngHeader = Buffer.from([
      0x89,
      0x50,
      0x4e,
      0x47,
      0x0d,
      0x0a,
      0x1a,
      0x0a, // PNG signature
      0x00,
      0x00,
      0x00,
      0x0d, // IHDR chunk length
      0x49,
      0x48,
      0x44,
      0x52, // IHDR
      0x00,
      0x00,
      0x00,
      0x01, // width: 1
      0x00,
      0x00,
      0x00,
      0x01, // height: 1
      0x08,
      0x02, // bit depth: 8, color type: 2 (RGB)
      0x00,
      0x00,
      0x00, // compression, filter, interlace
      0x90,
      0x77,
      0x53,
      0xde, // IHDR CRC
      0x00,
      0x00,
      0x00,
      0x0c, // IDAT chunk length
      0x49,
      0x44,
      0x41,
      0x54, // IDAT
      0x08,
      0xd7,
      0x63,
      0xf8,
      0xcf,
      0xc0,
      0x00,
      0x00,
      0x01,
      0x01,
      0x01,
      0x00, // compressed data
      0x18,
      0xdd,
      0x8d,
      0xb4, // IDAT CRC
      0x00,
      0x00,
      0x00,
      0x00, // IEND chunk length
      0x49,
      0x45,
      0x4e,
      0x44, // IEND
      0xae,
      0x42,
      0x60,
      0x82, // IEND CRC
    ]);

    fs.writeFileSync(testImagePath, pngHeader);
  });

  test.beforeEach(async () => {
    resetContextDirectory();
  });

  test.afterEach(async () => {
    resetContextDirectory();
  });

  test.afterAll(async () => {
    // Clean up test image
    if (fs.existsSync(testImagePath)) {
      fs.unlinkSync(testImagePath);
    }
  });

  test('should import an image file to context', async ({ page }) => {
    await setupProjectWithFixture(page, getFixturePath());
    await authenticateForTests(page);
    await page.goto('/');
    await waitForNetworkIdle(page);

    await navigateToContext(page);

    // Wait for the file input to be attached to the DOM before setting files
    const fileInput = page.locator('[data-testid="file-import-input"]');
    await expect(fileInput).toBeAttached({ timeout: 10000 });

    // Use setInputFiles to upload the image
    await fileInput.setInputFiles(testImagePath);

    // Wait for the file to appear in the list (filename should be the base name)
    const fileName = path.basename(testImagePath);
    await waitForContextFile(page, fileName, 15000);

    // Verify the file appears in the list
    const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
    await expect(fileButton).toBeVisible();

    // Verify the file exists on disk
    const fixturePath = getFixturePath();
    const contextImagePath = path.join(fixturePath, '.automaker', 'context', fileName);
    await expect(async () => {
      expect(fs.existsSync(contextImagePath)).toBe(true);
    }).toPass({ timeout: 5000 });
  });
});