fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...
Some checks failed
Deploy Application / deploy (push) Has been cancelled
Some checks failed
Deploy Application / deploy (push) Has been cancelled
This commit is contained in:
185
tests/e2e/livecomponents/ui-events.spec.js
Normal file
185
tests/e2e/livecomponents/ui-events.spec.js
Normal file
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* E2E Tests for UI Events Integration
|
||||
*
|
||||
* Tests the integration between PHP LiveComponents and JavaScript UI components
|
||||
* via the event-based system.
|
||||
*/
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('UI Events Integration', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate to a test page with UI example component
|
||||
// Note: This assumes a test route exists
|
||||
await page.goto('/test/ui-events');
|
||||
});
|
||||
|
||||
test('should show toast notification on toast:show event', async ({ page }) => {
|
||||
// Wait for component to be initialized
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Click button that triggers toast
|
||||
await page.click('[data-live-action="showSuccessToast"]');
|
||||
|
||||
// Wait for toast to appear
|
||||
await page.waitForSelector('.toast-queue-toast', { timeout: 5000 });
|
||||
|
||||
// Verify toast content
|
||||
const toast = page.locator('.toast-queue-toast');
|
||||
await expect(toast).toBeVisible();
|
||||
await expect(toast).toContainText('Operation completed successfully');
|
||||
});
|
||||
|
||||
test('should show different toast types', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Test success toast
|
||||
await page.click('[data-live-action="showSuccessToast"]');
|
||||
await page.waitForSelector('.toast-queue-toast--success');
|
||||
await expect(page.locator('.toast-queue-toast--success')).toBeVisible();
|
||||
|
||||
// Wait for toast to disappear
|
||||
await page.waitForTimeout(6000);
|
||||
|
||||
// Test error toast
|
||||
await page.click('[data-live-action="showErrorToast"]');
|
||||
await page.waitForSelector('.toast-queue-toast--error');
|
||||
await expect(page.locator('.toast-queue-toast--error')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show modal on modal:show event', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Click button that triggers modal
|
||||
await page.click('[data-live-action="showModal"]');
|
||||
|
||||
// Wait for modal to appear
|
||||
await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });
|
||||
|
||||
// Verify modal content
|
||||
const modal = page.locator('.livecomponent-modal');
|
||||
await expect(modal).toBeVisible();
|
||||
await expect(modal).toContainText('Example Modal');
|
||||
});
|
||||
|
||||
test('should show confirmation dialog on modal:confirm event', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Click button that triggers confirmation
|
||||
await page.click('[data-live-action="showConfirmDialog"]');
|
||||
|
||||
// Wait for modal to appear
|
||||
await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });
|
||||
|
||||
// Verify confirmation dialog content
|
||||
const modal = page.locator('.livecomponent-modal');
|
||||
await expect(modal).toBeVisible();
|
||||
await expect(modal).toContainText('Confirm Action');
|
||||
await expect(modal).toContainText('Are you sure');
|
||||
|
||||
// Verify buttons exist
|
||||
await expect(page.locator('button:has-text("Yes, proceed")')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("Cancel")')).toBeVisible();
|
||||
});
|
||||
|
||||
test('should close modal on modal:close event', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Open modal
|
||||
await page.click('[data-live-action="showModal"]');
|
||||
await page.waitForSelector('.livecomponent-modal');
|
||||
|
||||
// Close modal
|
||||
await page.click('[data-live-action="closeModal"]');
|
||||
|
||||
// Wait for modal to disappear
|
||||
await page.waitForSelector('.livecomponent-modal', { state: 'hidden', timeout: 5000 });
|
||||
});
|
||||
|
||||
test('should show alert dialog on modal:alert event', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Click button that triggers alert
|
||||
await page.click('[data-live-action="showInfoAlert"]');
|
||||
|
||||
// Wait for modal to appear
|
||||
await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });
|
||||
|
||||
// Verify alert content
|
||||
const modal = page.locator('.livecomponent-modal');
|
||||
await expect(modal).toBeVisible();
|
||||
await expect(modal).toContainText('Information');
|
||||
});
|
||||
|
||||
test('should handle multiple toasts in queue', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Trigger multiple toasts quickly
|
||||
await page.click('[data-live-action="showInfoToast"]');
|
||||
await page.click('[data-live-action="showSuccessToast"]');
|
||||
await page.click('[data-live-action="showWarningToast"]');
|
||||
|
||||
// Wait for toasts to appear
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Verify multiple toasts are visible
|
||||
const toasts = page.locator('.toast-queue-toast');
|
||||
const count = await toasts.count();
|
||||
expect(count).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
test('should handle modal stack with z-index', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Open first modal
|
||||
await page.click('[data-live-action="showModal"]');
|
||||
await page.waitForSelector('.livecomponent-modal');
|
||||
|
||||
// Get z-index of first modal
|
||||
const firstModal = page.locator('.livecomponent-modal').first();
|
||||
const firstZIndex = await firstModal.evaluate(el => {
|
||||
return window.getComputedStyle(el).zIndex;
|
||||
});
|
||||
|
||||
// Open second modal (should have higher z-index)
|
||||
await page.click('[data-live-action="showLargeModal"]');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const modals = page.locator('.livecomponent-modal');
|
||||
const modalCount = await modals.count();
|
||||
expect(modalCount).toBeGreaterThanOrEqual(1);
|
||||
|
||||
// Close top modal
|
||||
await page.click('[data-live-action="closeModal"]');
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('should handle ESC key for topmost modal', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Open modal
|
||||
await page.click('[data-live-action="showModal"]');
|
||||
await page.waitForSelector('.livecomponent-modal');
|
||||
|
||||
// Press ESC key
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('.livecomponent-modal', { state: 'hidden', timeout: 5000 });
|
||||
});
|
||||
|
||||
test('should hide toast on toast:hide event', async ({ page }) => {
|
||||
await page.waitForSelector('[data-live-component]');
|
||||
|
||||
// Show toast
|
||||
await page.click('[data-live-action="showSuccessToast"]');
|
||||
await page.waitForSelector('.toast-queue-toast');
|
||||
|
||||
// Hide toast
|
||||
await page.click('[data-live-action="hideToast"]');
|
||||
|
||||
// Wait for toast to disappear
|
||||
await page.waitForSelector('.toast-queue-toast', { state: 'hidden', timeout: 5000 });
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user