@unicity/design-system/dist/components/Dialog/Dialog.playwright.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { jsx as _jsx } from "react/jsx-runtime";
// Dialog.playwright.tsx - Playwright Component Tests using Portable Stories
import { test, expect } from '@playwright/experimental-ct-react';
import stories from './Dialog.stories.portable';
test.describe('Dialog Component - Advanced Playwright Tests', () => {
    test('Dialog Sizes - All variations render correctly', async ({ mount }) => {
        // Mount the DialogSizes story (which has our interaction tests)
        const component = await mount(_jsx(stories.DialogSizes, {}));
        // Test that all dialog size buttons are present
        await expect(component.getByRole('button', { name: /small dialog/i })).toBeVisible();
        await expect(component.getByRole('button', { name: /medium dialog/i })).toBeVisible();
        await expect(component.getByRole('button', { name: /large dialog/i })).toBeVisible();
        await expect(component.getByRole('button', { name: /fullscreen dialog/i })).toBeVisible();
    });
    test('Dialog interaction flow with visual assertions', async ({ mount, page }) => {
        const component = await mount(_jsx(stories.DialogSizes, {}));
        // Click to open Small dialog
        await component.getByRole('button', { name: /small dialog/i }).click();
        // Wait for dialog to appear and verify it's visible
        const dialog = page.locator('[role="dialog"]');
        await expect(dialog).toBeVisible();
        // Check dialog content
        await expect(dialog.getByText(/this is a small dialog/i)).toBeVisible();
        // Verify dialog has the expected title
        await expect(dialog.getByRole('heading', { name: /small dialog/i })).toBeVisible();
        // Take a screenshot for visual comparison
        await expect(page).toHaveScreenshot('dialog-small-open.png');
        // Close dialog using escape key
        await page.keyboard.press('Escape');
        // Verify dialog is closed
        await expect(dialog).not.toBeVisible();
    });
    test('Multiple dialog sizes with screenshots', async ({ mount, page }) => {
        const component = await mount(_jsx(stories.DialogSizes, {}));
        const dialogSizes = [
            { name: 'Small Dialog', screenshot: 'dialog-small.png' },
            { name: 'Medium Dialog', screenshot: 'dialog-medium.png' },
            { name: 'Large Dialog', screenshot: 'dialog-large.png' },
            { name: 'Fullscreen Dialog', screenshot: 'dialog-fullscreen.png' }
        ];
        for (const size of dialogSizes) {
            // Open dialog
            await component.getByRole('button', { name: new RegExp(size.name, 'i') }).click();
            // Wait for dialog and take screenshot
            const dialog = page.locator('[role="dialog"]');
            await expect(dialog).toBeVisible();
            await expect(page).toHaveScreenshot(size.screenshot);
            // Close dialog
            await page.keyboard.press('Escape');
            await expect(dialog).not.toBeVisible();
        }
    });
    test('Form Dialog submission', async ({ mount, page }) => {
        const component = await mount(_jsx(stories.FormDialog, {}));
        // Open form dialog
        await component.getByRole('button', { name: /open form dialog/i }).click();
        const dialog = page.locator('[role="dialog"]');
        await expect(dialog).toBeVisible();
        // Fill out the form
        await dialog.getByLabel(/email/i).fill('test@example.com');
        await dialog.getByLabel(/name/i).fill('John Doe');
        await dialog.getByLabel(/message/i).fill('This is a test message');
        // Submit form
        await dialog.getByRole('button', { name: /submit/i }).click();
        // Verify dialog closes after submission
        await expect(dialog).not.toBeVisible();
    });
    test('Confirmation Dialog - Accept/Cancel actions', async ({ mount, page }) => {
        const component = await mount(_jsx(stories.ConfirmationDialog, {}));
        // Open confirmation dialog
        await component.getByRole('button', { name: /delete item/i }).click();
        const dialog = page.locator('[role="dialog"]');
        await expect(dialog).toBeVisible();
        // Test cancel action
        await dialog.getByRole('button', { name: /cancel/i }).click();
        await expect(dialog).not.toBeVisible();
        // Open again and test confirm action  
        await component.getByRole('button', { name: /delete item/i }).click();
        await expect(dialog).toBeVisible();
        await dialog.getByRole('button', { name: /confirm/i }).click();
        await expect(dialog).not.toBeVisible();
    });
    test('Alert Dialog accessibility', async ({ mount, page }) => {
        const component = await mount(_jsx(stories.AlertDialog, {}));
        // Open alert dialog
        await component.getByRole('button', { name: /show alert/i }).click();
        const dialog = page.locator('[role="dialog"]');
        await expect(dialog).toBeVisible();
        // Check accessibility attributes
        await expect(dialog).toHaveAttribute('aria-describedby');
        await expect(dialog).toHaveAttribute('aria-labelledby');
        // Verify focus management
        const okButton = dialog.getByRole('button', { name: /ok/i });
        await expect(okButton).toBeFocused();
        // Test escape key functionality
        await page.keyboard.press('Escape');
        await expect(dialog).not.toBeVisible();
    });
});
//# sourceMappingURL=Dialog.playwright.js.map