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

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

@@ -1,50 +1,50 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('OtpInput 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: 10000 });
-    return frame;
-  }
-
-  test('renders OTP input fields', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
-    const frame = await getFrame(page);
-    
-    const inputs = frame.locator('input');
-    const count = await inputs.count();
-    expect(count).toBeGreaterThan(3);
-  });
-
-  test('accepts numeric input', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
-    const frame = await getFrame(page);
-    
-    const firstInput = frame.locator('input').first();
-    await firstInput.fill('1');
-    await expect(firstInput).toHaveValue('1');
-  });
-
-  test('moves focus between fields', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
-    const frame = await getFrame(page);
-    
-    const inputs = frame.locator('input');
-    const firstInput = inputs.nth(0);
-    const secondInput = inputs.nth(1);
-    
-    await firstInput.fill('1');
-    // Focus should move to next field
-    await page.waitForTimeout(100);
-    
-    const focusedElement = await frame.evaluateHandle(() => document.activeElement);
-    const isFocused = await secondInput.evaluate((el, focused) => el === focused, focusedElement);
-    
-    // Some implementations auto-focus, some don't
-    if (isFocused) {
-      expect(isFocused).toBeTruthy();
-    }
-  });
-});
+import { test, expect } from '@playwright/test';
+
+test.describe('OtpInput 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: 10000 });
+    return frame;
+  }
+
+  test('renders OTP input fields', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
+    const frame = await getFrame(page);
+    
+    const inputs = frame.locator('input');
+    const count = await inputs.count();
+    expect(count).toBeGreaterThan(3);
+  });
+
+  test('accepts numeric input', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
+    const frame = await getFrame(page);
+    
+    const firstInput = frame.locator('input').first();
+    await firstInput.fill('1');
+    await expect(firstInput).toHaveValue('1');
+  });
+
+  test('moves focus between fields', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
+    const frame = await getFrame(page);
+    
+    const inputs = frame.locator('input');
+    const firstInput = inputs.nth(0);
+    const secondInput = inputs.nth(1);
+    
+    await firstInput.fill('1');
+    // Focus should move to next field
+    await page.waitForTimeout(100);
+    
+    const focusedElement = await frame.evaluateHandle(() => document.activeElement);
+    const isFocused = await secondInput.evaluate((el, focused) => el === focused, focusedElement);
+    
+    // Some implementations auto-focus, some don't
+    if (isFocused) {
+      expect(isFocused).toBeTruthy();
+    }
+  });
+});

package/tests/e2e/select.spec.ts

@@ -1,52 +1,52 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Select 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 select', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
-    const frame = await getFrame(page);
-    
-    const select = frame.locator('.wl-select').first();
-    await expect(select).toBeVisible({ timeout: 15000 });
-  });
-
-  test('opens dropdown on click', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
-    const frame = await getFrame(page);
-    
-    const select = frame.locator('.wl-select').first();
-    await expect(select).toBeVisible({ timeout: 15000 });
-    await select.click();
-    
-    // Wait for menu to open
-    await page.waitForTimeout(500);
-    const menu = page.locator('.v-menu, .v-overlay').first();
-    if (await menu.count() > 0) {
-      await expect(menu).toBeVisible();
-    }
-  });
-
-  test('displays placeholder', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
-    const frame = await getFrame(page);
-    
-    const select = frame.locator('.wl-select').first();
-    await expect(select).toBeVisible({ timeout: 15000 });
-  });
-
-  test('handles multiple selection', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-select--multiple-with-chips');
-    const frame = await getFrame(page);
-    
-    const select = frame.locator('.wl-select').first();
-    await expect(select).toBeVisible({ timeout: 15000 });
-  });
-});
+import { test, expect } from '@playwright/test';
+
+test.describe('Select 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 select', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
+    const frame = await getFrame(page);
+    
+    const select = frame.locator('.wl-select').first();
+    await expect(select).toBeVisible({ timeout: 15000 });
+  });
+
+  test('opens dropdown on click', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
+    const frame = await getFrame(page);
+    
+    const select = frame.locator('.wl-select').first();
+    await expect(select).toBeVisible({ timeout: 15000 });
+    await select.click();
+    
+    // Wait for menu to open
+    await page.waitForTimeout(500);
+    const menu = page.locator('.v-menu, .v-overlay').first();
+    if (await menu.count() > 0) {
+      await expect(menu).toBeVisible();
+    }
+  });
+
+  test('displays placeholder', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-select--default');
+    const frame = await getFrame(page);
+    
+    const select = frame.locator('.wl-select').first();
+    await expect(select).toBeVisible({ timeout: 15000 });
+  });
+
+  test('handles multiple selection', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-select--multiple-with-chips');
+    const frame = await getFrame(page);
+    
+    const select = frame.locator('.wl-select').first();
+    await expect(select).toBeVisible({ timeout: 15000 });
+  });
+});

package/tests/e2e/storybook-utils.ts

@@ -1,59 +1,59 @@
-import { Page, Frame, Locator } from '@playwright/test';
-
-export async function getStorybookFrame(page: Page): Promise<Frame> {
-  // Wait for iframe with proper timeout
-  const iframe = page.locator('#storybook-preview-iframe');
-  await iframe.waitFor({ state: 'attached', timeout: 30000 });
-  
-  // Get frame with retries
-  let frame: Frame | null = null;
-  for (let i = 0; i < 10; i++) {
-    frame = page.frame({ url: /iframe\.html/ });
-    if (frame) break;
-    await page.waitForTimeout(500);
-  }
-  
-  if (!frame) {
-    const iframeElement = page.locator('#storybook-preview-iframe');
-    frame = await iframeElement.contentFrame();
-  }
-  
-  if (!frame) {
-    throw new Error('Could not find Storybook iframe');
-  }
-  
-  // Wait for content
-  await frame.waitForLoadState('domcontentloaded');
-  await frame.waitForSelector('body', { state: 'attached', timeout: 30000 });
-  await page.waitForTimeout(1000); // Give time for Vue components to mount
-  
-  return frame;
-}
-
-export async function navigateToStory(page: Page, storyPath: string): Promise<Frame> {
-  await page.goto(storyPath, { waitUntil: 'domcontentloaded', timeout: 30000 });
-  
-  // Wait for iframe
-  await page.waitForSelector('#storybook-preview-iframe', { state: 'attached', timeout: 30000 });
-  
-  // Get frame
-  const frame = await getStorybookFrame(page);
-  
-  // Wait for story content
-  await frame.waitForSelector('#storybook-root, body > div', { state: 'attached', timeout: 30000 });
-  await page.waitForTimeout(500); // Additional time for component rendering
-  
-  return frame;
-}
-
-export function getComponentButton(frame: Frame): Locator {
-  return frame.locator('button.v-btn:visible, button.wl-button:visible').first();
-}
-
-export function getComponentInput(frame: Frame): Locator {
-  return frame.locator('#storybook-root input:visible, .v-input input:visible').first();
-}
-
-export function getComponentElement(frame: Frame, selector: string): Locator {
-  return frame.locator(selector).locator('visible=true').first();
-}
+import { Page, Frame, Locator } from '@playwright/test';
+
+export async function getStorybookFrame(page: Page): Promise<Frame> {
+  // Wait for iframe with proper timeout
+  const iframe = page.locator('#storybook-preview-iframe');
+  await iframe.waitFor({ state: 'attached', timeout: 30000 });
+  
+  // Get frame with retries
+  let frame: Frame | null = null;
+  for (let i = 0; i < 10; i++) {
+    frame = page.frame({ url: /iframe\.html/ });
+    if (frame) break;
+    await page.waitForTimeout(500);
+  }
+  
+  if (!frame) {
+    const iframeElement = page.locator('#storybook-preview-iframe');
+    frame = await iframeElement.contentFrame();
+  }
+  
+  if (!frame) {
+    throw new Error('Could not find Storybook iframe');
+  }
+  
+  // Wait for content
+  await frame.waitForLoadState('domcontentloaded');
+  await frame.waitForSelector('body', { state: 'attached', timeout: 30000 });
+  await page.waitForTimeout(1000); // Give time for Vue components to mount
+  
+  return frame;
+}
+
+export async function navigateToStory(page: Page, storyPath: string): Promise<Frame> {
+  await page.goto(storyPath, { waitUntil: 'domcontentloaded', timeout: 30000 });
+  
+  // Wait for iframe
+  await page.waitForSelector('#storybook-preview-iframe', { state: 'attached', timeout: 30000 });
+  
+  // Get frame
+  const frame = await getStorybookFrame(page);
+  
+  // Wait for story content
+  await frame.waitForSelector('#storybook-root, body > div', { state: 'attached', timeout: 30000 });
+  await page.waitForTimeout(500); // Additional time for component rendering
+  
+  return frame;
+}
+
+export function getComponentButton(frame: Frame): Locator {
+  return frame.locator('button.v-btn:visible, button.wl-button:visible').first();
+}
+
+export function getComponentInput(frame: Frame): Locator {
+  return frame.locator('#storybook-root input:visible, .v-input input:visible').first();
+}
+
+export function getComponentElement(frame: Frame, selector: string): Locator {
+  return frame.locator(selector).locator('visible=true').first();
+}

package/tests/e2e/test-basic.spec.ts

@@ -1,34 +1,34 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Basic Storybook Test', () => {
-  test('can load storybook', async ({ page }) => {
-    await page.goto('http://localhost:7000', { timeout: 30000 });
-    await expect(page).toHaveTitle(/Storybook/);
-  });
-
-  test('can load a story directly', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-button--default', { timeout: 30000 });
-    
-    // Wait for iframe
-    const iframe = page.locator('#storybook-preview-iframe');
-    await expect(iframe).toBeVisible({ timeout: 30000 });
-    
-    // Get the frame
-    const frame = page.frame({ url: /iframe\.html/ });
-    expect(frame).toBeTruthy();
-    
-    if (frame) {
-      // Wait for content
-      await frame.waitForSelector('body', { timeout: 10000 });
-      
-      // Look for the actual component button, not Storybook controls
-      const componentRoot = frame.locator('#storybook-root').first();
-      await expect(componentRoot).toBeVisible({ timeout: 10000 });
-      
-      // Now find the button within the component
-      const button = frame.locator('button.v-btn, button.wl-button').locator('visible=true').first();
-      await expect(button).toBeVisible({ timeout: 10000 });
-      await expect(button).toHaveText('Button');
-    }
-  });
+import { test, expect } from '@playwright/test';
+
+test.describe('Basic Storybook Test', () => {
+  test('can load storybook', async ({ page }) => {
+    await page.goto('http://localhost:7000', { timeout: 30000 });
+    await expect(page).toHaveTitle(/Storybook/);
+  });
+
+  test('can load a story directly', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-button--default', { timeout: 30000 });
+    
+    // Wait for iframe
+    const iframe = page.locator('#storybook-preview-iframe');
+    await expect(iframe).toBeVisible({ timeout: 30000 });
+    
+    // Get the frame
+    const frame = page.frame({ url: /iframe\.html/ });
+    expect(frame).toBeTruthy();
+    
+    if (frame) {
+      // Wait for content
+      await frame.waitForSelector('body', { timeout: 10000 });
+      
+      // Look for the actual component button, not Storybook controls
+      const componentRoot = frame.locator('#storybook-root').first();
+      await expect(componentRoot).toBeVisible({ timeout: 10000 });
+      
+      // Now find the button within the component
+      const button = frame.locator('button.v-btn, button.wl-button').locator('visible=true').first();
+      await expect(button).toBeVisible({ timeout: 10000 });
+      await expect(button).toHaveText('Button');
+    }
+  });
 });