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

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

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