michaelschiemer/tests/e2e/live-components/transitions.spec.ts

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

/**
 * LiveComponents: Transitions Tests
 *
 * Tests CSS transitions for swap operations
 */
test.describe('LiveComponents Transitions', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('should support fade transition', async ({ page }) => {
    const fadeButton = page.locator('[data-lc-swap-transition="fade"]').first();
    const count = await fadeButton.count();

    if (count === 0) {
      test.skip();
      return;
    }

    // Click button
    await fadeButton.click();

    // Wait for transition
    await page.waitForTimeout(1000);

    // Button should still be visible
    expect(fadeButton).toBeVisible();
  });

  test('should support slide transition', async ({ page }) => {
    const slideButton = page.locator('[data-lc-swap-transition="slide"]').first();
    const count = await slideButton.count();

    if (count === 0) {
      test.skip();
      return;
    }

    // Click button
    await slideButton.click();

    // Wait for transition
    await page.waitForTimeout(1000);

    // Button should still be visible
    expect(slideButton).toBeVisible();
  });

  test('should combine transition with swap strategy', async ({ page }) => {
    const combinedButton = page.locator('[data-lc-swap-transition][data-lc-swap]').first();
    const count = await combinedButton.count();

    if (count === 0) {
      test.skip();
      return;
    }

    // Click button
    await combinedButton.click();

    // Wait for transition
    await page.waitForTimeout(1000);

    // Button should still be visible
    expect(combinedButton).toBeVisible();
  });
});