@zap-wunschlachen/wl-shared-components 1.0.37 → 1.0.38

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

@@ -1,136 +1,136 @@
-import { test, expect } from '@playwright/test';
-
-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.describe('Component Tests', () => {
-  test('Button - default', 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();
-  });
-
-  test('Button - with 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();
-  });
-
-  test('Button - loading', 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();
-  });
-
-  test('Input - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-input--default');
-    const frame = await getFrame(page);
-    const input = frame.locator('input:visible').first();
-    await expect(input).toBeVisible();
-    await input.fill('Test');
-    await expect(input).toHaveValue('Test');
-  });
-
-  test('Select - default', 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();
-  });
-
-  test('Checkbox - default', 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('Accordion - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-accordion--outlined-inset');
-    const frame = await getFrame(page);
-    const accordion = frame.locator('.v-expansion-panels').first();
-    await expect(accordion).toBeVisible();
-  });
-
-  test('Dialog - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
-    const frame = await getFrame(page);
-    const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
-    await expect(trigger).toBeVisible();
-  });
-
-  test('DateInput - default', 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 expect(input).toBeVisible();
-  });
-
-  test('OtpInput - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
-    const frame = await getFrame(page);
-    await frame.waitForSelector('input.v-otp-input__field', { state: 'attached', timeout: 3000 });
-    const inputs = frame.locator('input.v-otp-input__field');
-    const count = await inputs.count();
-    expect(count).toBe(6);
-  });
-
-  test('Audio - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-audio--default');
-    const frame = await getFrame(page);
-    const audio = frame.locator('.audio-component, .waveform, audio').first();
-    await expect(audio).toBeVisible();
-  });
-
-  test('TextArea - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-textarea--default');
-    const frame = await getFrame(page);
-    const textarea = frame.locator('textarea, .v-textarea').first();
-    await expect(textarea).toBeVisible();
-  });
-
-  test('PhoneInput - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-phoneinput--default');
-    const frame = await getFrame(page);
-    const input = frame.locator('.phone-input, .v-field, input').first();
-    await expect(input).toBeVisible();
-  });
-
-  test('EditField - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-editfield--text-field');
-    const frame = await getFrame(page);
-    const field = frame.locator('.wl-edit-field, .v-field, .v-input').first();
-    await expect(field).toBeVisible();
-  });
-
-  test('TickBox - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-tickbox--default');
-    const frame = await getFrame(page);
-    const tickbox = frame.locator('.tick-box, .v-checkbox, input[type="checkbox"]').first();
-    await expect(tickbox).toBeVisible();
-  });
-
-  test.skip('Modal - default', async ({ page }) => {
-    // Skip test - Modal component story doesn't exist
-    await page.goto('http://localhost:7000/?path=/story/wl-modal--default');
-    const frame = await getFrame(page);
-    const trigger = frame.locator('button').first();
-    await expect(trigger).toBeVisible();
-  });
-
-  test('NotificationBubble - default', async ({ page }) => {
-    await page.goto('http://localhost:7000/?path=/story/wl-notificationbubble--default');
-    const frame = await getFrame(page);
-    const notification = frame.locator('.notification-bubble, .v-alert, .notification').first();
-    await expect(notification).toBeVisible();
-  });
+import { test, expect } from '@playwright/test';
+
+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.describe('Component Tests', () => {
+  test('Button - default', 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();
+  });
+
+  test('Button - with 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();
+  });
+
+  test('Button - loading', 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();
+  });
+
+  test('Input - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-input--default');
+    const frame = await getFrame(page);
+    const input = frame.locator('input:visible').first();
+    await expect(input).toBeVisible();
+    await input.fill('Test');
+    await expect(input).toHaveValue('Test');
+  });
+
+  test('Select - default', 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();
+  });
+
+  test('Checkbox - default', 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('Accordion - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-accordion--outlined-inset');
+    const frame = await getFrame(page);
+    const accordion = frame.locator('.v-expansion-panels').first();
+    await expect(accordion).toBeVisible();
+  });
+
+  test('Dialog - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
+    const frame = await getFrame(page);
+    const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
+    await expect(trigger).toBeVisible();
+  });
+
+  test('DateInput - default', 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 expect(input).toBeVisible();
+  });
+
+  test('OtpInput - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
+    const frame = await getFrame(page);
+    await frame.waitForSelector('input.v-otp-input__field', { state: 'attached', timeout: 3000 });
+    const inputs = frame.locator('input.v-otp-input__field');
+    const count = await inputs.count();
+    expect(count).toBe(6);
+  });
+
+  test('Audio - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-audio--default');
+    const frame = await getFrame(page);
+    const audio = frame.locator('.audio-component, .waveform, audio').first();
+    await expect(audio).toBeVisible();
+  });
+
+  test('TextArea - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-textarea--default');
+    const frame = await getFrame(page);
+    const textarea = frame.locator('textarea, .v-textarea').first();
+    await expect(textarea).toBeVisible();
+  });
+
+  test('PhoneInput - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-phoneinput--default');
+    const frame = await getFrame(page);
+    const input = frame.locator('.phone-input, .v-field, input').first();
+    await expect(input).toBeVisible();
+  });
+
+  test('EditField - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-editfield--text-field');
+    const frame = await getFrame(page);
+    const field = frame.locator('.wl-edit-field, .v-field, .v-input').first();
+    await expect(field).toBeVisible();
+  });
+
+  test('TickBox - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-tickbox--default');
+    const frame = await getFrame(page);
+    const tickbox = frame.locator('.tick-box, .v-checkbox, input[type="checkbox"]').first();
+    await expect(tickbox).toBeVisible();
+  });
+
+  test.skip('Modal - default', async ({ page }) => {
+    // Skip test - Modal component story doesn't exist
+    await page.goto('http://localhost:7000/?path=/story/wl-modal--default');
+    const frame = await getFrame(page);
+    const trigger = frame.locator('button').first();
+    await expect(trigger).toBeVisible();
+  });
+
+  test('NotificationBubble - default', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-notificationbubble--default');
+    const frame = await getFrame(page);
+    const notification = frame.locator('.notification-bubble, .v-alert, .notification').first();
+    await expect(notification).toBeVisible();
+  });
 });