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

package/tests/e2e/button-fixed.spec.ts

@@ -1,59 +1,59 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Button Component', () => {
-  test('renders default button', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    
-    await frame.waitForSelector('body', { timeout: 10000 });
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    await expect(button).toHaveText('Button');
-  });
-
-  test('can be clicked', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    
-    await frame.waitForSelector('body', { timeout: 10000 });
-    const button = frame.locator('button.v-btn:visible').first();
-    await button.click();
-    await expect(button).toBeVisible();
-  });
-
-  test('displays prepend icon', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--with-prepend-icon');
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    
-    await frame.waitForSelector('body', { timeout: 10000 });
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    const icon = button.locator('i').first();
-    await expect(icon).toBeVisible();
-  });
-
-  test('shows loading state', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--loading-state');
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    
-    await frame.waitForSelector('body', { timeout: 10000 });
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    await expect(button).toHaveText('Loading...');
-    
-    const loadingSpinner = frame.locator('.v-progress-circular').first();
-    await expect(loadingSpinner).toBeVisible();
-  });
+import { test, expect } from '@playwright/test';
+
+test.describe('Button Component', () => {
+  test('renders default button', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    
+    await frame.waitForSelector('body', { timeout: 10000 });
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveText('Button');
+  });
+
+  test('can be clicked', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    
+    await frame.waitForSelector('body', { timeout: 10000 });
+    const button = frame.locator('button.v-btn:visible').first();
+    await button.click();
+    await expect(button).toBeVisible();
+  });
+
+  test('displays prepend icon', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--with-prepend-icon');
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    
+    await frame.waitForSelector('body', { timeout: 10000 });
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    const icon = button.locator('i').first();
+    await expect(icon).toBeVisible();
+  });
+
+  test('shows loading state', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--loading-state');
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    
+    await frame.waitForSelector('body', { timeout: 10000 });
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveText('Loading...');
+    
+    const loadingSpinner = frame.locator('.v-progress-circular').first();
+    await expect(loadingSpinner).toBeVisible();
+  });
 });

package/tests/e2e/button.spec.ts

@@ -1,76 +1,76 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Button Component', () => {
-  async function getFrame(page) {
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
-    await page.waitForTimeout(1000); // Give time for Vue components to mount
-    return frame;
-  }
-
-  test('renders default button', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    await expect(button).toHaveText('Button');
-  });
-
-  test('can be clicked', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await button.click();
-    await expect(button).toBeVisible();
-  });
-
-  test('displays prepend icon', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--with-prepend-icon');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    const icon = button.locator('i').first();
-    await expect(icon).toBeVisible();
-  });
-
-  test('shows loading state', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--loading-state');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-    await expect(button).toHaveText('Loading...');
-    
-    const loadingSpinner = frame.locator('.v-progress-circular').first();
-    await expect(loadingSpinner).toBeVisible();
-  });
-
-  test('displays custom color', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--custom-color');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-  });
-
-  test('handles different sizes', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--small-button');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-  });
-
-  test('supports different variants', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--outlined-variant');
-    const frame = await getFrame(page);
-    
-    const button = frame.locator('button.v-btn:visible').first();
-    await expect(button).toBeVisible();
-  });
-});
+import { test, expect } from '@playwright/test';
+
+test.describe('Button Component', () => {
+  async function getFrame(page) {
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
+    await page.waitForTimeout(1000); // Give time for Vue components to mount
+    return frame;
+  }
+
+  test('renders default button', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveText('Button');
+  });
+
+  test('can be clicked', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await button.click();
+    await expect(button).toBeVisible();
+  });
+
+  test('displays prepend icon', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--with-prepend-icon');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    const icon = button.locator('i').first();
+    await expect(icon).toBeVisible();
+  });
+
+  test('shows loading state', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--loading-state');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveText('Loading...');
+    
+    const loadingSpinner = frame.locator('.v-progress-circular').first();
+    await expect(loadingSpinner).toBeVisible();
+  });
+
+  test('displays custom color', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--custom-color');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+  });
+
+  test('handles different sizes', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--small-button');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+  });
+
+  test('supports different variants', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--outlined-variant');
+    const frame = await getFrame(page);
+    
+    const button = frame.locator('button.v-btn:visible').first();
+    await expect(button).toBeVisible();
+  });
+});

package/tests/e2e/checkbox.spec.ts

@@ -1,50 +1,50 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Checkbox Component', () => {
-  async function getFrame(page) {
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
-    await page.waitForTimeout(1000); // Give time for Vue components to mount
-    return frame;
-  }
-
-  test('renders default checkbox', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
-    const frame = await getFrame(page);
-    
-    const checkbox = frame.locator('input[type="checkbox"]').first();
-    await expect(checkbox).toBeAttached();
-  });
-
-  test('can be checked and unchecked', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
-    const frame = await getFrame(page);
-    
-    const input = frame.locator('input[type="checkbox"]').first();
-    const label = frame.locator('label').first();
-    
-    await label.click();
-    await expect(input).toBeChecked();
-    
-    await label.click();
-    await expect(input).not.toBeChecked();
-  });
-
-  test('displays label', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
-    const frame = await getFrame(page);
-    
-    const label = frame.locator('label').first();
-    await expect(label).toBeVisible();
-  });
-
-  test('handles disabled state', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--disabled');
-    const frame = await getFrame(page);
-    
-    const input = frame.locator('input[type="checkbox"]').first();
-    await expect(input).toBeDisabled();
-  });
-});
+import { test, expect } from '@playwright/test';
+
+test.describe('Checkbox Component', () => {
+  async function getFrame(page) {
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
+    await page.waitForTimeout(1000); // Give time for Vue components to mount
+    return frame;
+  }
+
+  test('renders default checkbox', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
+    const frame = await getFrame(page);
+    
+    const checkbox = frame.locator('input[type="checkbox"]').first();
+    await expect(checkbox).toBeAttached();
+  });
+
+  test('can be checked and unchecked', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
+    const frame = await getFrame(page);
+    
+    const input = frame.locator('input[type="checkbox"]').first();
+    const label = frame.locator('label').first();
+    
+    await label.click();
+    await expect(input).toBeChecked();
+    
+    await label.click();
+    await expect(input).not.toBeChecked();
+  });
+
+  test('displays label', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--default');
+    const frame = await getFrame(page);
+    
+    const label = frame.locator('label').first();
+    await expect(label).toBeVisible();
+  });
+
+  test('handles disabled state', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-checkbox--disabled');
+    const frame = await getFrame(page);
+    
+    const input = frame.locator('input[type="checkbox"]').first();
+    await expect(input).toBeDisabled();
+  });
+});

package/tests/e2e/date-input.spec.ts

@@ -1,46 +1,46 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('DateInput Component', () => {
-  async function getFrame(page) {
-    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
-    const frame = page.frame({ url: /iframe\.html/ });
-    if (!frame) throw new Error('Frame not found');
-    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
-    await page.waitForTimeout(1000); // Give time for Vue components to mount
-    return frame;
-  }
-
-  test('renders date input', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
-    const frame = await getFrame(page);
-    
-    const dateInput = frame.locator('.v-text-field, input[type="date"], input[type="text"]').first();
-    await expect(dateInput).toBeVisible();
-  });
-
-  test('accepts date input', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
-    const frame = await getFrame(page);
-    
-    const input = frame.locator('input').first();
-    await input.fill('2024-01-01');
-    await expect(input).toHaveValue(/2024|01/);
-  });
-
-  test('opens date picker on icon click', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
-    const frame = await getFrame(page);
-    
-    // Click on the native date input that overlays the icon
-    const nativeDateInput = frame.locator('input[type="date"].native-date').first();
-    if (await nativeDateInput.count() > 0) {
-      await nativeDateInput.click({ force: true });
-      // Native date picker behavior is browser-specific, so we just verify the input exists
-      await expect(nativeDateInput).toBeAttached();
-    } else {
-      // Fallback: check that the date wrapper exists
-      const dateWrapper = frame.locator('.date-wrapper').first();
-      await expect(dateWrapper).toBeVisible();
-    }
-  });
-});
+import { test, expect } from '@playwright/test';
+
+test.describe('DateInput Component', () => {
+  async function getFrame(page) {
+    await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
+    const frame = page.frame({ url: /iframe\.html/ });
+    if (!frame) throw new Error('Frame not found');
+    await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
+    await page.waitForTimeout(1000); // Give time for Vue components to mount
+    return frame;
+  }
+
+  test('renders date input', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
+    const frame = await getFrame(page);
+    
+    const dateInput = frame.locator('.v-text-field, input[type="date"], input[type="text"]').first();
+    await expect(dateInput).toBeVisible();
+  });
+
+  test('accepts date input', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
+    const frame = await getFrame(page);
+    
+    const input = frame.locator('input').first();
+    await input.fill('2024-01-01');
+    await expect(input).toHaveValue(/2024|01/);
+  });
+
+  test('opens date picker on icon click', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dateinput--default');
+    const frame = await getFrame(page);
+    
+    // Click on the native date input that overlays the icon
+    const nativeDateInput = frame.locator('input[type="date"].native-date').first();
+    if (await nativeDateInput.count() > 0) {
+      await nativeDateInput.click({ force: true });
+      // Native date picker behavior is browser-specific, so we just verify the input exists
+      await expect(nativeDateInput).toBeAttached();
+    } else {
+      // Fallback: check that the date wrapper exists
+      const dateWrapper = frame.locator('.date-wrapper').first();
+      await expect(dateWrapper).toBeVisible();
+    }
+  });
+});

package/tests/e2e/debug.spec.ts

@@ -1,52 +1,52 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Debug DOM Structure', () => {
-  test('inspect Storybook DOM structure', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
-    
-    // Wait for page load
-    await page.waitForLoadState('networkidle');
-    
-    // Check what's actually in the DOM
-    const bodyContent = await page.locator('body').innerHTML();
-    console.log('Body HTML:', bodyContent.substring(0, 1000));
-    
-    // Look for common Storybook selectors
-    const possibleSelectors = [
-      '#storybook-root',
-      '#root', 
-      '.sb-main-padded',
-      '.docs-story',
-      '#story--wl-button--default',
-      '[data-testid]',
-      '.sb-show-main',
-      '#storybook-preview-iframe'
-    ];
-    
-    for (const selector of possibleSelectors) {
-      const exists = await page.locator(selector).count();
-      console.log(`${selector}: ${exists > 0 ? 'EXISTS' : 'NOT FOUND'} (${exists} elements)`);
-    }
-    
-    // Check if we're in an iframe
-    const frames = page.frames();
-    console.log(`Number of frames: ${frames.length}`);
-    
-    for (let i = 0; i < frames.length; i++) {
-      const frame = frames[i];
-      const frameUrl = frame.url();
-      console.log(`Frame ${i}: ${frameUrl}`);
-      
-      if (frameUrl.includes('iframe.html')) {
-        console.log('Found iframe frame!');
-        
-        // Check content inside iframe
-        const iframeContent = await frame.locator('body').count();
-        console.log(`Iframe body elements: ${iframeContent}`);
-        
-        const button = await frame.locator('button').count();
-        console.log(`Buttons in iframe: ${button}`);
-      }
-    }
-  });
+import { test, expect } from '@playwright/test';
+
+test.describe('Debug DOM Structure', () => {
+  test('inspect Storybook DOM structure', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default');
+    
+    // Wait for page load
+    await page.waitForLoadState('networkidle');
+    
+    // Check what's actually in the DOM
+    const bodyContent = await page.locator('body').innerHTML();
+    console.log('Body HTML:', bodyContent.substring(0, 1000));
+    
+    // Look for common Storybook selectors
+    const possibleSelectors = [
+      '#storybook-root',
+      '#root', 
+      '.sb-main-padded',
+      '.docs-story',
+      '#story--wl-button--default',
+      '[data-testid]',
+      '.sb-show-main',
+      '#storybook-preview-iframe'
+    ];
+    
+    for (const selector of possibleSelectors) {
+      const exists = await page.locator(selector).count();
+      console.log(`${selector}: ${exists > 0 ? 'EXISTS' : 'NOT FOUND'} (${exists} elements)`);
+    }
+    
+    // Check if we're in an iframe
+    const frames = page.frames();
+    console.log(`Number of frames: ${frames.length}`);
+    
+    for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+      const frameUrl = frame.url();
+      console.log(`Frame ${i}: ${frameUrl}`);
+      
+      if (frameUrl.includes('iframe.html')) {
+        console.log('Found iframe frame!');
+        
+        // Check content inside iframe
+        const iframeContent = await frame.locator('body').count();
+        console.log(`Iframe body elements: ${iframeContent}`);
+        
+        const button = await frame.locator('button').count();
+        console.log(`Buttons in iframe: ${button}`);
+      }
+    }
+  });
 });