michaelschiemer/tests/e2e/live-components/trigger-options.spec.ts

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

/**
 * LiveComponents: Trigger Options Tests
 *
 * Tests advanced trigger options (delay, throttle, once, changed, from, load)
 */
test.describe('LiveComponents Trigger Options', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('should support trigger-delay', async ({ page }) => {
    const delayButton = page.locator('[data-lc-trigger-delay]').first();
    const count = await delayButton.count();

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

    const delayValue = await delayButton.getAttribute('data-lc-trigger-delay');
    
    // Click button
    const clickTime = Date.now();
    await delayButton.click();

    // Wait a bit
    await page.waitForTimeout(100);

    // Action should not have executed immediately (delay)
    // We can't easily test the exact delay, but we can verify the button exists
    expect(delayButton).toBeVisible();
  });

  test('should support trigger-throttle', async ({ page }) => {
    const throttleButton = page.locator('[data-lc-trigger-throttle]').first();
    const count = await throttleButton.count();

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

    // Click multiple times rapidly
    await throttleButton.click();
    await page.waitForTimeout(50);
    await throttleButton.click();
    await page.waitForTimeout(50);
    await throttleButton.click();

    // Wait for throttle to complete
    await page.waitForTimeout(1000);

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

  test('should support trigger-once', async ({ page }) => {
    const onceButton = page.locator('[data-lc-trigger-once="true"]').first();
    const count = await onceButton.count();

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

    // Click multiple times
    await onceButton.click();
    await page.waitForTimeout(100);
    await onceButton.click();
    await page.waitForTimeout(100);
    await onceButton.click();

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

  test('should support trigger-changed', async ({ page }) => {
    const changedInput = page.locator('[data-lc-trigger-changed="true"]').first();
    const count = await changedInput.count();

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

    // Type same value (should not trigger)
    await changedInput.fill('test');
    await page.waitForTimeout(100);
    await changedInput.fill('test'); // Same value

    // Type different value (should trigger)
    await changedInput.fill('different');
    await page.waitForTimeout(1000);

    expect(changedInput).toBeVisible();
  });

  test('should support trigger-from', async ({ page }) => {
    const triggerFromButton = page.locator('[data-lc-trigger-from]').first();
    const count = await triggerFromButton.count();

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

    const sourceSelector = await triggerFromButton.getAttribute('data-lc-trigger-from');
    if (!sourceSelector) {
      test.skip();
      return;
    }

    const sourceElement = page.locator(sourceSelector).first();
    const sourceExists = await sourceElement.count() > 0;

    if (!sourceExists) {
      test.skip();
      return;
    }

    // Click source element (should trigger action on triggerFromButton)
    await sourceElement.click();
    await page.waitForTimeout(1000);

    // Both elements should be visible
    expect(sourceElement).toBeVisible();
    expect(triggerFromButton).toBeVisible();
  });

  test('should support trigger-load', async ({ page }) => {
    // This test is tricky because load happens on page load
    // We'll just verify the attribute exists
    const loadButton = page.locator('[data-lc-trigger-load="true"]').first();
    const count = await loadButton.count();

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

    // Button should exist
    expect(loadButton).toBeVisible();
  });

  test('should combine multiple trigger options', async ({ page }) => {
    const combinedButton = page.locator('[data-lc-trigger-delay][data-lc-trigger-once]').first();
    const count = await combinedButton.count();

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

    // Click button
    await combinedButton.click();
    await page.waitForTimeout(1000);

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