smoothschedule/frontend/tests/e2e/email-template-editor.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Email Template Editor', () => {
  test.beforeEach(async ({ page }) => {
    // Login with real credentials on the pixel8ed subdomain
    await page.goto('http://pixel8ed.lvh.me:5173/login');

    // Wait for the login form
    await expect(page.locator('input[type="email"]')).toBeVisible({ timeout: 10000 });

    // Fill in the login form
    await page.fill('input[type="email"]', 'timm50@hotmail.com');
    await page.fill('input[type="password"]', 'starry12');

    // Click sign in button
    await page.click('button[type="submit"]');

    // Wait for login to complete and redirect to dashboard
    await page.waitForURL('**/dashboard**', { timeout: 20000 });
  });

  test('should check site builder works correctly', async ({ page }) => {
    // Navigate directly to site builder
    await page.goto('http://pixel8ed.lvh.me:5173/dashboard/site-editor', { waitUntil: 'networkidle' });
    await page.waitForTimeout(3000);

    // Take screenshot
    await page.screenshot({ path: 'test-results/site-builder-state.png', fullPage: true });

    // Check iframe content for multiple component types
    const iframe = page.frameLocator('iframe').first();
    try {
      const iframeContent = await iframe.locator('body').textContent({ timeout: 3000 });
      console.log('Site builder iframe content (first 500 chars):', iframeContent?.substring(0, 500));

      // Site builder should have diverse content
      expect(iframeContent?.length).toBeGreaterThan(100);
    } catch (e) {
      console.log('No iframe content found');
    }
  });

  test('should check email template editor with actual API data', async ({ page }) => {
    // Navigate directly to the dedicated email template editor page
    await page.goto('http://pixel8ed.lvh.me:5173/dashboard/email-template-editor/welcome', { waitUntil: 'networkidle' });

    // Wait for editor to load - need to wait for Puck to render
    await expect(page.getByText(/Email Subject/i)).toBeVisible({ timeout: 10000 });

    // Wait for Puck editor to appear (Components heading)
    await expect(page.getByRole('heading', { name: 'Components' })).toBeVisible({ timeout: 15000 });
    await page.waitForTimeout(3000);

    // Take screenshot
    await page.screenshot({ path: 'test-results/email-editor-api-data.png', fullPage: true });

    // Count component types shown
    const emailHeaderCount = await page.locator('text="Email Header"').count();
    const emailHeadingCount = await page.locator('text="Email Heading"').count();
    const emailTextCount = await page.locator('text="Email Text"').count();
    const emailButtonCount = await page.locator('text="Email Button"').count();
    const emailSpacerCount = await page.locator('text="Email Spacer"').count();
    const emailFooterCount = await page.locator('text="Email Footer"').count();

    console.log('Component type counts in editor:');
    console.log('  Email Header:', emailHeaderCount);
    console.log('  Email Heading:', emailHeadingCount);
    console.log('  Email Text:', emailTextCount);
    console.log('  Email Button:', emailButtonCount);
    console.log('  Email Spacer:', emailSpacerCount);
    console.log('  Email Footer:', emailFooterCount);

    // Check iframe content for diverse component rendering
    const iframe = page.frameLocator('iframe').first();
    try {
      const iframeContent = await iframe.locator('body').textContent({ timeout: 3000 });
      console.log('Iframe content (first 800 chars):', iframeContent?.substring(0, 800));

      // Content should show diverse email template components
      expect(iframeContent?.length).toBeGreaterThan(100);
    } catch (e) {
      console.log('No iframe content found');
    }

    // With correct config, we should see multiple different component types
    // If the bug is fixed, no single component type should dominate
    const maxCount = Math.max(emailHeaderCount, emailHeadingCount, emailTextCount,
                               emailButtonCount, emailSpacerCount, emailFooterCount);
    console.log('Max single component type count:', maxCount);

    // A working editor should have reasonable distribution (max ~4-5 per type)
    expect(maxCount).toBeLessThanOrEqual(5);
  });
});