@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/e2e/button.spec.ts

@@ -0,0 +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();
+  });
+});

package/tests/e2e/checkbox.spec.ts

@@ -0,0 +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();
+  });
+});

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

@@ -0,0 +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();
+    }
+  });
+});

package/tests/e2e/debug.spec.ts

@@ -0,0 +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}`);
+      }
+    }
+  });
+});

package/tests/e2e/dialog.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Dialog 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 trigger button', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
+    const frame = await getFrame(page);
+    
+    // Look for the button with the specific text
+    const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
+    await expect(trigger).toBeVisible();
+  });
+
+  test('opens dialog on trigger click', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
+    const frame = await getFrame(page);
+    
+    // Look for the button with the specific text
+    const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
+    await trigger.click();
+    
+    await page.waitForTimeout(500);
+    const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
+    if (await dialog.count() > 0) {
+      await expect(dialog).toBeVisible();
+    }
+  });
+
+  test('closes dialog with close button', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
+    const frame = await getFrame(page);
+    
+    // Look for the button with the specific text
+    const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
+    await trigger.click();
+    
+    await page.waitForTimeout(500);
+    const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
+    if (await dialog.count() > 0) {
+      // Look for 'Nein' button which closes the dialog
+      const closeButton = page.locator('button:has-text("Nein")').first();
+      if (await closeButton.count() > 0) {
+        await closeButton.click();
+        await page.waitForTimeout(500);
+        const dialogAfterClose = page.locator('.v-dialog:visible, [role="dialog"]:visible').first();
+        await expect(dialogAfterClose).toHaveCount(0);
+      }
+    }
+  });
+});

package/tests/e2e/input.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Input 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 input', 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();
+  });
+
+  test('accepts text input', 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 input.fill('Test input');
+    await expect(input).toHaveValue('Test input');
+  });
+
+  test('shows placeholder text', 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();
+  });
+
+  test('displays error state', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-input--error');
+    const frame = await getFrame(page);
+    
+    const errorMessage = frame.locator('.v-messages__message, .error--text').first();
+    if (await errorMessage.count() > 0) {
+      await expect(errorMessage).toBeVisible();
+    }
+  });
+
+  test('handles disabled state', async ({ page }) => {
+    await page.goto('http://localhost:7000/?path=/story/wl-input--disabled');
+    const frame = await getFrame(page);
+    
+    const input = frame.locator('input').first();
+    await expect(input).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,321 @@
+import { test, expect, Frame } from '@playwright/test';
+import { navigateToStory } from './storybook-utils';
+
+test.describe('Laboratory Components', () => {
+  let frame: Frame;
+  
+  test.describe('Appointment Card', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-appointmentcard--draft-status');
+    });
+
+    test('renders appointment card', async ({ page }) => {
+      const card = frame.locator('.appointment-card').first();
+      await expect(card).toBeVisible();
+    });
+
+    test('displays appointment information', async ({ page }) => {
+      const card = frame.locator('.appointment-card').first();
+      const cardText = await card.textContent();
+      expect(cardText?.trim()).toBeTruthy();
+    });
+
+    test('is clickable', async ({ page }) => {
+      const card = frame.locator('.appointment-card').first();
+      await card.click();
+      // Should not throw errors
+      await expect(card).toBeVisible();
+    });
+  });
+
+  test.describe('Document Card', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-documentcard-documentcard--default');
+    });
+
+    test('renders document card', async ({ page }) => {
+      const card = frame.locator('.v-card').first();
+      await expect(card).toBeVisible();
+    });
+
+    test('displays document information', async ({ page }) => {
+      const card = frame.locator('.v-card').first();
+      const cardText = await card.textContent();
+      expect(cardText?.trim()).toBeTruthy();
+    });
+  });
+
+  test.describe('Info Card', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-infocard--draft-done');
+    });
+
+    test('renders info card', async ({ page }) => {
+      const card = frame.locator('.info-card, .v-card').first();
+      await expect(card).toBeVisible();
+    });
+
+    test('displays information content', async ({ page }) => {
+      const card = frame.locator('.info-card, .v-card').first();
+      const cardText = await card.textContent();
+      expect(cardText?.trim()).toBeTruthy();
+    });
+  });
+
+  test.describe('Ticket Card', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-cards-ticketcard--default');
+    });
+
+    test('renders ticket card', async ({ page }) => {
+      const card = frame.locator('.ticket-card, .v-card').first();
+      await expect(card).toBeVisible();
+    });
+
+    test('has interactive elements', async ({ page }) => {
+      const card = frame.locator('.ticket-card, .v-card').first();
+      await card.click();
+      await expect(card).toBeVisible();
+    });
+  });
+
+  test.describe('Chat Message', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatmessage--income-message');
+    });
+
+    test('renders chat message', async ({ page }) => {
+      const message = frame.locator('.v-alert').first();
+      await expect(message).toBeVisible();
+    });
+
+    test('displays message content', async ({ page }) => {
+      const message = frame.locator('.v-alert').first();
+      const messageText = await message.textContent();
+      expect(messageText?.trim()).toBeTruthy();
+    });
+  });
+
+  test.describe('Chat Notification', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatnotification--empty');
+    });
+
+    test('renders chat notification', async ({ page }) => {
+      const notification = frame.locator('.d-flex.flex-column').first();
+      await expect(notification).toBeVisible();
+    });
+
+    test('is dismissible if enabled', async ({ page }) => {
+      const closeButton = frame.locator('button[aria-label*="close"], .close-button, [class*="close"]').first();
+      
+      if (await closeButton.count() > 0) {
+        await closeButton.click();
+        await page.waitForTimeout(500);
+        const notification = frame.locator('.d-flex.flex-column').first();
+        // Check if notification still exists but might be hidden
+        const isVisible = await notification.isVisible().catch(() => false);
+        expect(isVisible).toBeFalsy();
+      }
+    });
+  });
+
+  test.describe('Progress Circle', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-progresscircle--default');
+    });
+
+    test('renders progress circle', async ({ page }) => {
+      const progressCircle = frame.locator('.progress-circle, .v-progress-circular, svg').first();
+      await expect(progressCircle).toBeVisible();
+    });
+
+    test('displays progress value', async ({ page }) => {
+      const progressText = frame.locator('.progress-text, text, .progress-value');
+      
+      if (await progressText.count() > 0) {
+        const text = await progressText.first().textContent();
+        expect(text?.trim()).toBeTruthy();
+      }
+    });
+  });
+
+  test.describe('Progress Linear', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-progresslinear--default');
+    });
+
+    test('renders progress linear', async ({ page }) => {
+      const progressLinear = frame.locator('.progress-linear, .v-progress-linear').first();
+      await expect(progressLinear).toBeVisible();
+    });
+
+    test('shows progress animation', async ({ page }) => {
+      const progressBar = frame.locator('.v-progress-linear__determinate, .v-progress-linear__buffer').first();
+      
+      if (await progressBar.count() > 0) {
+        const width = await progressBar.evaluate((el) => el.style.width || getComputedStyle(el).width);
+        expect(width).toBeTruthy();
+      }
+    });
+  });
+
+  test.describe('Tag Label', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-taglabel--draft');
+    });
+
+    test('renders tag label', async ({ page }) => {
+      const tag = frame.locator('button.v-btn').first();
+      await expect(tag).toBeVisible();
+    });
+
+    test('displays tag text', async ({ page }) => {
+      const tag = frame.locator('button.v-btn').first();
+      const tagText = await tag.textContent();
+      expect(tagText?.trim()).toBeTruthy();
+    });
+
+    test('is clickable if interactive', async ({ page }) => {
+      const tag = frame.locator('button.v-btn').first();
+      await tag.click({ force: true }); // Force click as button may be readonly
+      await expect(tag).toBeVisible();
+    });
+  });
+
+  test.describe('Tag Label Group', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-taglabelgroup--default');
+    });
+
+    test('renders multiple tags', async ({ page }) => {
+      const tags = frame.locator('button.v-btn');
+      const tagCount = await tags.count();
+      expect(tagCount).toBeGreaterThan(0);
+    });
+
+    test('all tags are visible', async ({ page }) => {
+      const tags = frame.locator('button.v-btn');
+      const firstTag = tags.first();
+      await expect(firstTag).toBeVisible();
+    });
+  });
+
+  test.describe('Timeline', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-timeline--default-timeline');
+    });
+
+    test('renders timeline component', async ({ page }) => {
+      const timeline = frame.locator('.timeline, .v-timeline').first();
+      await expect(timeline).toBeVisible();
+    });
+
+    test('displays timeline events', async ({ page }) => {
+      const timelineItems = frame.locator('.timeline-item, .v-timeline-item');
+      const itemCount = await timelineItems.count();
+      expect(itemCount).toBeGreaterThan(0);
+    });
+
+    test('timeline events have content', async ({ page }) => {
+      const timelineItem = frame.locator('.timeline-item, .v-timeline-item').first();
+      const itemText = await timelineItem.textContent();
+      expect(itemText?.trim()).toBeTruthy();
+    });
+  });
+
+  test.describe('Status Notification', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-statusnotification--default');
+    });
+
+    test('renders status notification', async ({ page }) => {
+      const notification = frame.locator('.d-flex.flex-column').first();
+      await expect(notification).toBeVisible();
+    });
+
+    test('displays status message', async ({ page }) => {
+      const notification = frame.locator('.d-flex.flex-column').first();
+      const notificationText = await notification.textContent();
+      expect(notificationText?.trim()).toBeTruthy();
+    });
+  });
+
+  test.describe('Main Columns Bar', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-maincolumnsbar--default');
+    });
+
+    test('renders columns bar', async ({ page }) => {
+      const columnsBar = frame.locator('.d-flex.flex-row.justify-space-between').first();
+      await expect(columnsBar).toBeVisible();
+    });
+
+    test('has interactive elements', async ({ page }) => {
+      const buttons = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' });
+      if (await buttons.count() > 0) {
+        const firstButton = buttons.first();
+        await firstButton.click();
+        await expect(firstButton).toBeVisible();
+      }
+    });
+  });
+
+  test.describe('Selection Column Bar', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-selectioncolumnbar--default');
+    });
+
+    test('renders selection column bar', async ({ page }) => {
+      const selectionBar = frame.locator('.v-sheet').first();
+      await expect(selectionBar).toBeVisible();
+    });
+
+    test('handles selection interactions', async ({ page }) => {
+      const selectableItems = frame.locator('button.v-btn').filter({ hasNotText: 'Set string' });
+      if (await selectableItems.count() > 0) {
+        const firstItem = selectableItems.first();
+        await firstItem.click();
+        await expect(firstItem).toBeVisible();
+      }
+    });
+  });
+
+  test.describe('Chat Box Image', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatboximage--with-1-image');
+    });
+
+    test('renders chat box image', async ({ page }) => {
+      const chatBox = frame.locator('.chat-box-image, .v-img, img').first();
+      await expect(chatBox).toBeVisible();
+    });
+
+    test('image is accessible', async ({ page }) => {
+      const image = frame.locator('img').first();
+      if (await image.count() > 0) {
+        const src = await image.getAttribute('src');
+        expect(src).toBeTruthy();
+      }
+    });
+  });
+
+  test.describe('Chat Message Badge', () => {
+    test.beforeEach(async ({ page }) => {
+      frame = await navigateToStory(page, '/?path=/story/wl-laboratory-chat-chatmessagebadge--default');
+    });
+
+    test('renders message badge', async ({ page }) => {
+      const badge = frame.locator('.message-badge, .v-badge').first();
+      await expect(badge).toBeVisible();
+    });
+
+    test('displays badge content', async ({ page }) => {
+      const badgeContent = frame.locator('.v-badge__badge, .badge-content, .v-badge');
+      if (await badgeContent.count() > 0) {
+        const badge = frame.locator('.v-badge').first();
+        await expect(badge).toBeVisible();
+      }
+    });
+  });
+});