@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/tests/e2e/additional-components.spec.ts

@@ -1,438 +1,438 @@
-import { test, expect, Frame } from '@playwright/test';
-import { navigateToStory, getComponentButton, getComponentInput, getComponentElement } from './storybook-utils';
-
-test.describe('Additional Components', () => {
-  let frame: Frame;
-
-  test.describe('Audio Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-audio--default');
-    }, { timeout: 45000 });
-
-    test('renders audio component', async ({ page }) => {
-      const audioComponent = frame.locator('.audio-component, .waveform, audio').first();
-      await expect(audioComponent).toBeVisible();
-    });
-
-    test('has audio controls', async ({ page }) => {
-      const playButton = frame.locator('button[aria-label*="play"], button[title*="play"], .play-button').first();
-      if (await playButton.count() > 0) {
-        await expect(playButton).toBeVisible();
-        await playButton.click();
-      }
-    });
-
-    test('displays waveform if present', async ({ page }) => {
-      const waveform = frame.locator('.waveform, canvas, svg').first();
-      if (await waveform.count() > 0) {
-        await expect(waveform).toBeVisible();
-      }
-    });
-  });
-
-  test.describe('Edit Field Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-editfield--text-field');
-    }, { timeout: 45000 });
-
-    test('renders edit field', async ({ page }) => {
-      const editField = frame.locator('.wl-edit-field, .v-input, .v-field').first();
-      await expect(editField).toBeVisible();
-    });
-
-    test('can toggle between edit and display mode', async ({ page }) => {
-      const editButton = frame.locator('button[aria-label*="edit"], .edit-button, [class*="edit"]').first();
-      
-      if (await editButton.count() > 0) {
-        await editButton.click();
-        
-        const input = frame.locator('input, .v-field input').first();
-        if (await input.count() > 0) {
-          await expect(input).toBeVisible();
-        }
-      }
-    });
-
-    test('saves changes when confirmed', async ({ page }) => {
-      const editButton = frame.locator('button[aria-label*="edit"], .edit-button, [class*="edit"]').first();
-      
-      if (await editButton.count() > 0) {
-        await editButton.click();
-        
-        const input = frame.locator('input, .v-field input').first();
-        if (await input.count() > 0) {
-          await input.fill('Updated text');
-          
-          const saveButton = frame.locator('button[aria-label*="save"], button[aria-label*="confirm"], .save-button').first();
-          if (await saveButton.count() > 0) {
-            await saveButton.click();
-          } else {
-            // Try Enter key
-            await input.press('Enter');
-          }
-        }
-      }
-    });
-  });
-
-  test.describe('Phone Input Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-phoneinput--default');
-    }, { timeout: 45000 });
-
-    test('renders phone input with country selector', async ({ page }) => {
-      const phoneInput = frame.locator('.phone-input, .v-field').first();
-      await expect(phoneInput).toBeVisible();
-      
-      const countrySelector = frame.locator('.country-select, .flag, [class*="country"]').first();
-      if (await countrySelector.count() > 0) {
-        await expect(countrySelector).toBeVisible();
-      }
-    });
-
-    test('accepts phone number input', async ({ page }) => {
-      // Find the actual phone number input field (not the country selector)
-      const phoneNumberInputs = frame.locator('input[type="tel"], input[type="text"]');
-      // Skip the first input which is the country selector
-      const phoneNumberInput = await phoneNumberInputs.count() > 1 ? phoneNumberInputs.nth(1) : phoneNumberInputs.first();
-      
-      await phoneNumberInput.fill('1234567890');
-      await expect(phoneNumberInput).toHaveValue('1234567890');
-    });
-
-    test('country selector opens dropdown', async ({ page }) => {
-      const countrySelector = frame.locator('.country-select, .flag, [class*="country"]').first();
-      
-      if (await countrySelector.count() > 0) {
-        await countrySelector.click();
-        
-        const dropdown = frame.locator('.v-menu, .country-list, .dropdown').first();
-        if (await dropdown.count() > 0) {
-          await expect(dropdown).toBeVisible();
-        }
-      }
-    });
-  });
-
-  test.describe('TextArea Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-textarea--default');
-    }, { timeout: 45000 });
-
-    test('renders textarea', async ({ page }) => {
-      const textarea = frame.locator('textarea, .v-textarea').first();
-      await expect(textarea).toBeVisible();
-    });
-
-    test('accepts multi-line text input', async ({ page }) => {
-      const textarea = frame.locator('textarea, .v-textarea textarea').first();
-      const multilineText = 'Line 1\nLine 2\nLine 3';
-      
-      await textarea.fill(multilineText);
-      await expect(textarea).toHaveValue(multilineText);
-    });
-
-    test('handles resize if enabled', async ({ page }) => {
-      const textarea = frame.locator('textarea, .v-textarea textarea').first();
-      
-      // Check if resize is possible
-      const resizable = await textarea.evaluate((el: HTMLTextAreaElement) => {
-        const style = window.getComputedStyle(el);
-        return style.resize !== 'none';
-      });
-      
-      if (resizable) {
-        // Textarea should be resizable
-        expect(resizable).toBeTruthy();
-      }
-    });
-
-    test('shows character count if enabled', async ({ page }) => {
-      const characterCount = frame.locator('.character-count, .v-counter, [class*="counter"]').first();
-      
-      if (await characterCount.count() > 0) {
-        await expect(characterCount).toBeVisible();
-        
-        const textarea = frame.locator('textarea, .v-textarea textarea').first();
-        await textarea.fill('Test text');
-        
-        const countText = await characterCount.textContent();
-        expect(countText?.includes('9') || countText?.includes('Test text'.length.toString())).toBeTruthy();
-      }
-    });
-  });
-
-  test.describe('TickBox Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-tickbox--default');
-    }, { timeout: 45000 });
-
-    test('renders tickbox', async ({ page }) => {
-      const tickbox = frame.locator('.tick-box, .v-checkbox, input[type="checkbox"]').first();
-      await expect(tickbox).toBeVisible();
-    });
-
-    test('can be checked and unchecked', async ({ page }) => {
-      const checkbox = frame.locator('input[type="checkbox"]').first();
-      
-      // Get initial state
-      const initiallyChecked = await checkbox.isChecked();
-      
-      // Click the checkbox directly to toggle it
-      await checkbox.click({ force: true });
-      await page.waitForTimeout(500);
-      
-      // Verify state changed
-      await expect(checkbox).toBeChecked({ checked: !initiallyChecked });
-      
-      // Click again to toggle back
-      await checkbox.click({ force: true });
-      await page.waitForTimeout(500);
-      
-      // Verify returned to initial state
-      await expect(checkbox).toBeChecked({ checked: initiallyChecked });
-    });
-
-    test('displays custom tick styling', async ({ page }) => {
-      const tickboxWrapper = frame.locator('.tick-box, .v-checkbox, label').first();
-      await tickboxWrapper.click({ force: true });
-      
-      const tickIcon = frame.locator('.v-icon, .tick-icon, [class*="check"]').first();
-      if (await tickIcon.count() > 0) {
-        await expect(tickIcon).toBeVisible();
-      }
-    });
-  });
-
-  test.describe.skip('Modal Component', () => {
-    // Skip Modal tests as the component doesn't exist
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-modal--default');
-    }, { timeout: 45000 });
-
-    test('modal trigger renders', async ({ page }) => {
-      const trigger = frame.locator('button').first();
-      await expect(trigger).toBeVisible();
-    });
-
-    test('opens modal when triggered', async ({ page }) => {
-      const trigger = frame.locator('button').first();
-      await trigger.click();
-      
-      const modal = frame.locator('.v-dialog, .modal, [role="dialog"]').first();
-      await expect(modal).toBeVisible();
-    });
-
-    test('closes modal with close button', async ({ page }) => {
-      const trigger = frame.locator('button').first();
-      await trigger.click();
-      
-      const modal = frame.locator('.v-dialog, .modal, [role="dialog"]').first();
-      await expect(modal).toBeVisible();
-      
-      const closeButton = frame.locator('button').filter({ hasText: /close|×/i }).first();
-      if (await closeButton.count() > 0) {
-        await closeButton.click();
-        await expect(modal).not.toBeVisible();
-      }
-    });
-  });
-
-  test.describe('Notification Bubble Component', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-notificationbubble--with-text');
-    }, { timeout: 45000 });
-
-    test('renders notification bubble', async ({ page }) => {
-      const notification = frame.locator('.notification-bubble, button.v-btn').first();
-      await expect(notification).toBeVisible();
-    });
-
-    test('displays notification content', async ({ page }) => {
-      const notification = frame.locator('.notification-bubble, button.v-btn').first();
-      const content = await notification.textContent();
-      // Check if content exists and is not empty
-      if (!content || content.trim() === '') {
-        // Try to find h4 or v-icon inside the button
-        const textElement = notification.locator('h4');
-        const iconElement = notification.locator('.v-icon');
-        
-        if (await textElement.count() > 0) {
-          const text = await textElement.textContent();
-          expect(text?.trim()).toBeTruthy();
-        } else if (await iconElement.count() > 0) {
-          await expect(iconElement).toBeVisible();
-        } else {
-          // At least the button should be visible
-          await expect(notification).toBeVisible();
-        }
-      } else {
-        expect(content.trim()).toBeTruthy();
-      }
-    });
-
-    test('can be dismissed if dismissible', async ({ page }) => {
-      const dismissButton = frame.locator('button[aria-label*="dismiss"], button[aria-label*="close"], .close-button').first();
-      
-      if (await dismissButton.count() > 0) {
-        const notification = frame.locator('.notification-bubble, .v-alert, .notification').first();
-        await dismissButton.click();
-        await expect(notification).not.toBeVisible();
-      }
-    });
-  });
-
-  test.describe.skip('Icon Components', () => {
-    // Skip individual icon tests to avoid navigation issues
-    const iconStories = [
-      '/?path=/story/wl-icons-calendar--default',
-      '/?path=/story/wl-icons-chair--default',
-      '/?path=/story/wl-icons-circle--default'
-    ];
-
-    iconStories.forEach((story, index) => {
-      test(`icon component ${index + 1} renders`, async ({ page }) => {
-        try {
-          await page.goto(story);
-          await page.waitForSelector('[data-testid="root"]', { timeout: 5000 });
-          
-          const icon = frame.locator('svg, i, .icon, .v-icon').first();
-          await expect(icon).toBeVisible();
-        } catch (error) {
-          // Skip if story doesn't exist
-          console.log(`Icon story ${story} not found, skipping`);
-        }
-      });
-    });
-  });
-
-  test.describe('Icon Bullet Components', () => {
-    test.beforeEach(async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-iconbullet-iconbullet--with-content');
-    }, { timeout: 45000 });
-
-    test('renders icon bullet', async ({ page }) => {
-      // Wait for content to load
-      await page.waitForTimeout(1000);
-      
-      // Look for the IconBullet component structure (d-flex container with icon and content)
-      const iconBulletContainer = frame.locator('.d-flex.align-start').first();
-      
-      if (await iconBulletContainer.count() > 0) {
-        await expect(iconBulletContainer).toBeVisible();
-        
-        // Verify icon is present
-        const icon = iconBulletContainer.locator('.v-icon, svg').first();
-        if (await icon.count() > 0) {
-          await expect(icon).toBeVisible();
-        }
-        
-        // Verify content is present
-        const content = iconBulletContainer.locator('div').nth(1);
-        if (await content.count() > 0) {
-          await expect(content).toBeVisible();
-        }
-      } else {
-        // Fallback: check for any visible content
-        const anyContent = frame.locator('body').first();
-        const htmlContent = await anyContent.innerHTML();
-        expect(htmlContent.length).toBeGreaterThan(0);
-      }
-    });
-
-    test('displays icon and content', async ({ page }) => {
-      const icon = frame.locator('svg, i, .icon, .v-icon').first();
-      if (await icon.count() > 0) {
-        await expect(icon).toBeVisible();
-      }
-      
-      const content = await frame.locator('body').textContent();
-      expect(content?.trim()).toBeTruthy();
-    });
-
-    test.skip('icon bullet list renders multiple items', async ({ page }) => {
-      // Skip this test due to frame detach issues
-      await page.goto('/?path=/story/wl-iconbullet-iconbulletlist--default');
-      
-      if (await frame.locator('[data-testid="root"]').count() > 0) {
-        const bulletItems = frame.locator('.icon-bullet, .bullet-point, .list-item');
-        const itemCount = await bulletItems.count();
-        expect(itemCount).toBeGreaterThan(0);
-      }
-    });
-  });
-
-  // Cross-component integration tests
-  test.describe('Component Integration', () => {
-    test('components work together in complex layouts', async ({ page }) => {
-      // Test with a complex story that combines multiple components
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      // Test tab navigation across multiple components
-      await page.keyboard.press('Tab');
-      
-      // Check for any focusable element
-      const focusableElements = frame.locator('button:visible, input:visible, select:visible, textarea:visible, a[href]:visible');
-      const firstFocusable = focusableElements.first();
-      
-      if (await firstFocusable.count() > 0) {
-        await expect(firstFocusable).toBeVisible();
-      }
-    });
-
-    test('components maintain state independently', async ({ page }) => {
-      // Navigate to a story with multiple interactive components
-      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
-      
-      const inputs = frame.locator('input');
-      if (await inputs.count() > 1) {
-        // Fill first input
-        await inputs.nth(0).fill('First input');
-        await expect(inputs.nth(0)).toHaveValue('First input');
-        
-        // Fill second input
-        await inputs.nth(1).fill('Second input');
-        await expect(inputs.nth(1)).toHaveValue('Second input');
-        
-        // First input should maintain its value
-        await expect(inputs.nth(0)).toHaveValue('First input');
-      }
-    });
-  });
-
-  // Performance tests
-  test.describe('Component Performance', () => {
-    test('components render within acceptable time', async ({ page }) => {
-      const stories = [
-        '/?path=/story/wl-button--default',
-        '/?path=/story/wl-input--default',
-        '/?path=/story/wl-select--default'
-      ];
-
-      for (const story of stories) {
-        const startTime = Date.now();
-        await page.goto(story);
-        // Frame already loaded
-        const endTime = Date.now();
-        
-        const renderTime = endTime - startTime;
-        expect(renderTime).toBeLessThan(5000); // Should render within 5 seconds
-      }
-    });
-
-    test('components handle rapid interactions', async ({ page }) => {
-      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
-      
-      const button = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' }).first();
-      
-      if (await button.count() > 0) {
-        // Rapid clicking should not cause errors
-        for (let i = 0; i < 10; i++) {
-          await button.click({ delay: 50 });
-        }
-        
-        await expect(button).toBeVisible();
-      }
-    });
-  });
+import { test, expect, Frame } from '@playwright/test';
+import { navigateToStory, getComponentButton, getComponentInput, getComponentElement } from './storybook-utils';
+
+test.describe('Additional Components', () => {
+  let frame: Frame;
+
+  test.describe('Audio Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-audio--default');
+    }, { timeout: 45000 });
+
+    test('renders audio component', async ({ page }) => {
+      const audioComponent = frame.locator('.audio-component, .waveform, audio').first();
+      await expect(audioComponent).toBeVisible();
+    });
+
+    test('has audio controls', async ({ page }) => {
+      const playButton = frame.locator('button[aria-label*="play"], button[title*="play"], .play-button').first();
+      if (await playButton.count() > 0) {
+        await expect(playButton).toBeVisible();
+        await playButton.click();
+      }
+    });
+
+    test('displays waveform if present', async ({ page }) => {
+      const waveform = frame.locator('.waveform, canvas, svg').first();
+      if (await waveform.count() > 0) {
+        await expect(waveform).toBeVisible();
+      }
+    });
+  });
+
+  test.describe('Edit Field Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-editfield--text-field');
+    }, { timeout: 45000 });
+
+    test('renders edit field', async ({ page }) => {
+      const editField = frame.locator('.wl-edit-field, .v-input, .v-field').first();
+      await expect(editField).toBeVisible();
+    });
+
+    test('can toggle between edit and display mode', async ({ page }) => {
+      const editButton = frame.locator('button[aria-label*="edit"], .edit-button, [class*="edit"]').first();
+      
+      if (await editButton.count() > 0) {
+        await editButton.click();
+        
+        const input = frame.locator('input, .v-field input').first();
+        if (await input.count() > 0) {
+          await expect(input).toBeVisible();
+        }
+      }
+    });
+
+    test('saves changes when confirmed', async ({ page }) => {
+      const editButton = frame.locator('button[aria-label*="edit"], .edit-button, [class*="edit"]').first();
+      
+      if (await editButton.count() > 0) {
+        await editButton.click();
+        
+        const input = frame.locator('input, .v-field input').first();
+        if (await input.count() > 0) {
+          await input.fill('Updated text');
+          
+          const saveButton = frame.locator('button[aria-label*="save"], button[aria-label*="confirm"], .save-button').first();
+          if (await saveButton.count() > 0) {
+            await saveButton.click();
+          } else {
+            // Try Enter key
+            await input.press('Enter');
+          }
+        }
+      }
+    });
+  });
+
+  test.describe('Phone Input Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-phoneinput--default');
+    }, { timeout: 45000 });
+
+    test('renders phone input with country selector', async ({ page }) => {
+      const phoneInput = frame.locator('.phone-input, .v-field').first();
+      await expect(phoneInput).toBeVisible();
+      
+      const countrySelector = frame.locator('.country-select, .flag, [class*="country"]').first();
+      if (await countrySelector.count() > 0) {
+        await expect(countrySelector).toBeVisible();
+      }
+    });
+
+    test('accepts phone number input', async ({ page }) => {
+      // Find the actual phone number input field (not the country selector)
+      const phoneNumberInputs = frame.locator('input[type="tel"], input[type="text"]');
+      // Skip the first input which is the country selector
+      const phoneNumberInput = await phoneNumberInputs.count() > 1 ? phoneNumberInputs.nth(1) : phoneNumberInputs.first();
+      
+      await phoneNumberInput.fill('1234567890');
+      await expect(phoneNumberInput).toHaveValue('1234567890');
+    });
+
+    test('country selector opens dropdown', async ({ page }) => {
+      const countrySelector = frame.locator('.country-select, .flag, [class*="country"]').first();
+      
+      if (await countrySelector.count() > 0) {
+        await countrySelector.click();
+        
+        const dropdown = frame.locator('.v-menu, .country-list, .dropdown').first();
+        if (await dropdown.count() > 0) {
+          await expect(dropdown).toBeVisible();
+        }
+      }
+    });
+  });
+
+  test.describe('TextArea Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-textarea--default');
+    }, { timeout: 45000 });
+
+    test('renders textarea', async ({ page }) => {
+      const textarea = frame.locator('textarea, .v-textarea').first();
+      await expect(textarea).toBeVisible();
+    });
+
+    test('accepts multi-line text input', async ({ page }) => {
+      const textarea = frame.locator('textarea, .v-textarea textarea').first();
+      const multilineText = 'Line 1\nLine 2\nLine 3';
+      
+      await textarea.fill(multilineText);
+      await expect(textarea).toHaveValue(multilineText);
+    });
+
+    test('handles resize if enabled', async ({ page }) => {
+      const textarea = frame.locator('textarea, .v-textarea textarea').first();
+      
+      // Check if resize is possible
+      const resizable = await textarea.evaluate((el: HTMLTextAreaElement) => {
+        const style = window.getComputedStyle(el);
+        return style.resize !== 'none';
+      });
+      
+      if (resizable) {
+        // Textarea should be resizable
+        expect(resizable).toBeTruthy();
+      }
+    });
+
+    test('shows character count if enabled', async ({ page }) => {
+      const characterCount = frame.locator('.character-count, .v-counter, [class*="counter"]').first();
+      
+      if (await characterCount.count() > 0) {
+        await expect(characterCount).toBeVisible();
+        
+        const textarea = frame.locator('textarea, .v-textarea textarea').first();
+        await textarea.fill('Test text');
+        
+        const countText = await characterCount.textContent();
+        expect(countText?.includes('9') || countText?.includes('Test text'.length.toString())).toBeTruthy();
+      }
+    });
+  });
+
+  test.describe('TickBox Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-tickbox--default');
+    }, { timeout: 45000 });
+
+    test('renders tickbox', async ({ page }) => {
+      const tickbox = frame.locator('.tick-box, .v-checkbox, input[type="checkbox"]').first();
+      await expect(tickbox).toBeVisible();
+    });
+
+    test('can be checked and unchecked', async ({ page }) => {
+      const checkbox = frame.locator('input[type="checkbox"]').first();
+      
+      // Get initial state
+      const initiallyChecked = await checkbox.isChecked();
+      
+      // Click the checkbox directly to toggle it
+      await checkbox.click({ force: true });
+      await page.waitForTimeout(500);
+      
+      // Verify state changed
+      await expect(checkbox).toBeChecked({ checked: !initiallyChecked });
+      
+      // Click again to toggle back
+      await checkbox.click({ force: true });
+      await page.waitForTimeout(500);
+      
+      // Verify returned to initial state
+      await expect(checkbox).toBeChecked({ checked: initiallyChecked });
+    });
+
+    test('displays custom tick styling', async ({ page }) => {
+      const tickboxWrapper = frame.locator('.tick-box, .v-checkbox, label').first();
+      await tickboxWrapper.click({ force: true });
+      
+      const tickIcon = frame.locator('.v-icon, .tick-icon, [class*="check"]').first();
+      if (await tickIcon.count() > 0) {
+        await expect(tickIcon).toBeVisible();
+      }
+    });
+  });
+
+  test.describe.skip('Modal Component', () => {
+    // Skip Modal tests as the component doesn't exist
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-modal--default');
+    }, { timeout: 45000 });
+
+    test('modal trigger renders', async ({ page }) => {
+      const trigger = frame.locator('button').first();
+      await expect(trigger).toBeVisible();
+    });
+
+    test('opens modal when triggered', async ({ page }) => {
+      const trigger = frame.locator('button').first();
+      await trigger.click();
+      
+      const modal = frame.locator('.v-dialog, .modal, [role="dialog"]').first();
+      await expect(modal).toBeVisible();
+    });
+
+    test('closes modal with close button', async ({ page }) => {
+      const trigger = frame.locator('button').first();
+      await trigger.click();
+      
+      const modal = frame.locator('.v-dialog, .modal, [role="dialog"]').first();
+      await expect(modal).toBeVisible();
+      
+      const closeButton = frame.locator('button').filter({ hasText: /close|×/i }).first();
+      if (await closeButton.count() > 0) {
+        await closeButton.click();
+        await expect(modal).not.toBeVisible();
+      }
+    });
+  });
+
+  test.describe('Notification Bubble Component', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-notificationbubble--with-text');
+    }, { timeout: 45000 });
+
+    test('renders notification bubble', async ({ page }) => {
+      const notification = frame.locator('.notification-bubble, button.v-btn').first();
+      await expect(notification).toBeVisible();
+    });
+
+    test('displays notification content', async ({ page }) => {
+      const notification = frame.locator('.notification-bubble, button.v-btn').first();
+      const content = await notification.textContent();
+      // Check if content exists and is not empty
+      if (!content || content.trim() === '') {
+        // Try to find h4 or v-icon inside the button
+        const textElement = notification.locator('h4');
+        const iconElement = notification.locator('.v-icon');
+        
+        if (await textElement.count() > 0) {
+          const text = await textElement.textContent();
+          expect(text?.trim()).toBeTruthy();
+        } else if (await iconElement.count() > 0) {
+          await expect(iconElement).toBeVisible();
+        } else {
+          // At least the button should be visible
+          await expect(notification).toBeVisible();
+        }
+      } else {
+        expect(content.trim()).toBeTruthy();
+      }
+    });
+
+    test('can be dismissed if dismissible', async ({ page }) => {
+      const dismissButton = frame.locator('button[aria-label*="dismiss"], button[aria-label*="close"], .close-button').first();
+      
+      if (await dismissButton.count() > 0) {
+        const notification = frame.locator('.notification-bubble, .v-alert, .notification').first();
+        await dismissButton.click();
+        await expect(notification).not.toBeVisible();
+      }
+    });
+  });
+
+  test.describe.skip('Icon Components', () => {
+    // Skip individual icon tests to avoid navigation issues
+    const iconStories = [
+      '/?path=/story/wl-icons-calendar--default',
+      '/?path=/story/wl-icons-chair--default',
+      '/?path=/story/wl-icons-circle--default'
+    ];
+
+    iconStories.forEach((story, index) => {
+      test(`icon component ${index + 1} renders`, async ({ page }) => {
+        try {
+          await page.goto(story);
+          await page.waitForSelector('[data-testid="root"]', { timeout: 5000 });
+          
+          const icon = frame.locator('svg, i, .icon, .v-icon').first();
+          await expect(icon).toBeVisible();
+        } catch (error) {
+          // Skip if story doesn't exist
+          console.log(`Icon story ${story} not found, skipping`);
+        }
+      });
+    });
+  });
+
+  test.describe('Icon Bullet Components', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-iconbullet-iconbullet--with-content');
+    }, { timeout: 45000 });
+
+    test('renders icon bullet', async ({ page }) => {
+      // Wait for content to load
+      await page.waitForTimeout(1000);
+      
+      // Look for the IconBullet component structure (d-flex container with icon and content)
+      const iconBulletContainer = frame.locator('.d-flex.align-start').first();
+      
+      if (await iconBulletContainer.count() > 0) {
+        await expect(iconBulletContainer).toBeVisible();
+        
+        // Verify icon is present
+        const icon = iconBulletContainer.locator('.v-icon, svg').first();
+        if (await icon.count() > 0) {
+          await expect(icon).toBeVisible();
+        }
+        
+        // Verify content is present
+        const content = iconBulletContainer.locator('div').nth(1);
+        if (await content.count() > 0) {
+          await expect(content).toBeVisible();
+        }
+      } else {
+        // Fallback: check for any visible content
+        const anyContent = frame.locator('body').first();
+        const htmlContent = await anyContent.innerHTML();
+        expect(htmlContent.length).toBeGreaterThan(0);
+      }
+    });
+
+    test('displays icon and content', async ({ page }) => {
+      const icon = frame.locator('svg, i, .icon, .v-icon').first();
+      if (await icon.count() > 0) {
+        await expect(icon).toBeVisible();
+      }
+      
+      const content = await frame.locator('body').textContent();
+      expect(content?.trim()).toBeTruthy();
+    });
+
+    test.skip('icon bullet list renders multiple items', async ({ page }) => {
+      // Skip this test due to frame detach issues
+      await page.goto('/?path=/story/wl-iconbullet-iconbulletlist--default');
+      
+      if (await frame.locator('[data-testid="root"]').count() > 0) {
+        const bulletItems = frame.locator('.icon-bullet, .bullet-point, .list-item');
+        const itemCount = await bulletItems.count();
+        expect(itemCount).toBeGreaterThan(0);
+      }
+    });
+  });
+
+  // Cross-component integration tests
+  test.describe('Component Integration', () => {
+    test('components work together in complex layouts', async ({ page }) => {
+      // Test with a complex story that combines multiple components
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      // Test tab navigation across multiple components
+      await page.keyboard.press('Tab');
+      
+      // Check for any focusable element
+      const focusableElements = frame.locator('button:visible, input:visible, select:visible, textarea:visible, a[href]:visible');
+      const firstFocusable = focusableElements.first();
+      
+      if (await firstFocusable.count() > 0) {
+        await expect(firstFocusable).toBeVisible();
+      }
+    });
+
+    test('components maintain state independently', async ({ page }) => {
+      // Navigate to a story with multiple interactive components
+      frame = await navigateToStory(page, '/?path=/story/wl-input--default');
+      
+      const inputs = frame.locator('input');
+      if (await inputs.count() > 1) {
+        // Fill first input
+        await inputs.nth(0).fill('First input');
+        await expect(inputs.nth(0)).toHaveValue('First input');
+        
+        // Fill second input
+        await inputs.nth(1).fill('Second input');
+        await expect(inputs.nth(1)).toHaveValue('Second input');
+        
+        // First input should maintain its value
+        await expect(inputs.nth(0)).toHaveValue('First input');
+      }
+    });
+  });
+
+  // Performance tests
+  test.describe('Component Performance', () => {
+    test('components render within acceptable time', async ({ page }) => {
+      const stories = [
+        '/?path=/story/wl-button--default',
+        '/?path=/story/wl-input--default',
+        '/?path=/story/wl-select--default'
+      ];
+
+      for (const story of stories) {
+        const startTime = Date.now();
+        await page.goto(story);
+        // Frame already loaded
+        const endTime = Date.now();
+        
+        const renderTime = endTime - startTime;
+        expect(renderTime).toBeLessThan(5000); // Should render within 5 seconds
+      }
+    });
+
+    test('components handle rapid interactions', async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-button--default');
+      
+      const button = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' }).first();
+      
+      if (await button.count() > 0) {
+        // Rapid clicking should not cause errors
+        for (let i = 0; i < 10; i++) {
+          await button.click({ delay: 50 });
+        }
+        
+        await expect(button).toBeVisible();
+      }
+    });
+  });
 });