Feat/console UI toolkit integration

packages/console/e2e/smoke.spec.ts

@@ -0,0 +1,134 @@
+import { test, expect } from '@playwright/test'
+
+const CONSOLE_URL = process.env.CONSOLE_URL || 'http://localhost:3000'
+
+test.describe('Console Smoke Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(CONSOLE_URL)
+  })
+
+  test('should load the console homepage', async ({ page }) => {
+    // Should show authentication form for unauthenticated users
+    await expect(page.locator('.authenticator')).toBeVisible()
+
+    // Should have email input for authentication
+    await expect(page.locator('input[type="email"]')).toBeVisible()
+
+    // Should have authorize button
+    await expect(page.locator('button[type="submit"]')).toBeVisible()
+
+    // Should have proper page title
+    await expect(page).toHaveTitle(/Storacha console/)
+  })
+
+  test('should display terms of service', async ({ page }) => {
+    // Check that terms of service link is present
+    await expect(page.locator('a[href="https://docs.storacha.network/terms/"]')).toBeVisible()
+  })
+
+  test('should have working navigation structure', async ({ page }) => {
+    // Check if navigation elements are present
+    // Note: These tests assume unauthenticated state, so we're testing the basic page structure
+
+    // Authentication form should be present
+    await expect(page.locator('form')).toBeVisible()
+
+    // Should show Storacha logo
+    await expect(page.locator('svg, img')).toBeVisible()
+  })
+
+  test('should handle iframe context detection', async ({ page }) => {
+    // Test iframe page specifically
+    await page.goto(`${CONSOLE_URL}/iframe`)
+
+    // Should still load without errors - iframe may show different title
+    await expect(page).toHaveTitle(/.+/) // Just verify some title exists
+  })
+
+  test('should handle error pages gracefully', async ({ page }) => {
+    // Test non-existent page
+    const response = await page.goto(`${CONSOLE_URL}/non-existent-page`, { 
+      waitUntil: 'networkidle' 
+    })
+
+    // Should return 404 or redirect gracefully
+    expect([200, 404]).toContain(response?.status() || 0)
+  })
+})
+
+test.describe('Console Authentication Flow', () => {
+  test('should validate email input', async ({ page }) => {
+    await page.goto(CONSOLE_URL)
+
+    const emailInput = page.locator('input[type="email"]')
+    const submitButton = page.locator('button[type="submit"]')
+
+    // Try submitting with invalid email
+    await emailInput.fill('invalid-email')
+    await submitButton.click()
+
+    // Should show browser validation message or prevent submission
+    // Note: This depends on browser behavior for invalid emails
+    await expect(emailInput).toBeVisible()
+  })
+
+  test('should handle authentication form submission', async ({ page }) => {
+    await page.goto(CONSOLE_URL)
+
+    const emailInput = page.locator('input[type="email"]')
+    const submitButton = page.locator('button[type="submit"]')
+
+    // Fill valid email
+    await emailInput.fill('test@example.com')
+    await submitButton.click()
+
+    // Should show submission state or redirect
+    // In real implementation, this would show "check your email" message
+    // For smoke test, we just verify the form interaction works
+    await expect(submitButton).toBeVisible()
+  })
+})
+
+test.describe('Console UI Components', () => {
+  test('should load with proper styling', async ({ page }) => {
+    await page.goto(CONSOLE_URL)
+
+    // Check if Tailwind CSS classes are applied
+    const authenticator = page.locator('.authenticator')
+    await expect(authenticator).toBeVisible()
+
+    // Check for hot-red theme colors (custom Tailwind classes)
+    const submitButton = page.locator('button[type="submit"]')
+    const buttonClasses = await submitButton.getAttribute('class')
+    expect(buttonClasses).toContain('hot-red')
+  })
+
+  test('should be responsive on mobile', async ({ page }) => {
+    // Set mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 })
+    await page.goto(CONSOLE_URL)
+
+    // Should still be usable on mobile
+    await expect(page.locator('.authenticator')).toBeVisible()
+    await expect(page.locator('input[type="email"]')).toBeVisible()
+    await expect(page.locator('button[type="submit"]')).toBeVisible()
+  })
+})
+
+test.describe('Console Routing', () => {
+  test('should handle space routes', async ({ page }) => {
+    // Test space creation route
+    const response = await page.goto(`${CONSOLE_URL}/space/create`)
+    expect([200, 302]).toContain(response?.status() || 0) // 302 for redirect to auth
+  })
+
+  test('should handle space import route', async ({ page }) => {
+    const response = await page.goto(`${CONSOLE_URL}/space/import`)
+    expect([200, 302]).toContain(response?.status() || 0)
+  })
+
+  test('should handle settings route', async ({ page }) => {
+    const response = await page.goto(`${CONSOLE_URL}/settings`)
+    expect([200, 302]).toContain(response?.status() || 0)
+  })
+})

packages/console/package.json

@@ -7,7 +7,10 @@
     "build": "next build",
     "build:fresh": "nx build --skip-nx-cache",
     "start": "next start",
-    "test": "pnpm lint",
+    "test": "pnpm lint && pnpm test:e2e:headless",
+    "test:e2e": "playwright test",
+    "test:e2e:headless": "playwright test --project=chromium",
+    "test:e2e:ui": "playwright test --ui",
     "lint": "next lint",
     "pages:build": "pnpm dlx @cloudflare/next-on-pages@1",
     "pages:watch": "pnpm @cloudflare/next-on-pages@1 --watch",
@@ -53,6 +56,7 @@
   },
   "devDependencies": {
     "@cloudflare/next-on-pages": "^1.6.3",
+    "@playwright/test": "^1.51.1",
     "@types/archy": "^0.0.36",
     "@types/blueimp-md5": "^2.18.0",
     "@types/node": "^18.19.75",

packages/console/playwright.config.ts

@@ -0,0 +1,73 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* 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: process.env.CONSOLE_URL || 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* 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' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: process.env.CI ? undefined : {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+});