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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (235) hide show
  1. package/.github/workflows/playwright.yml +205 -205
  2. package/.github/workflows/static.yml +61 -61
  3. package/.github/workflows/update-snapshots.yml +37 -37
  4. package/.prettierrc +5 -5
  5. package/.storybook/main.ts +18 -18
  6. package/.storybook/preview.ts +37 -37
  7. package/.storybook/storyWrapper.vue +18 -18
  8. package/.storybook/withVuetifyTheme.decorator.ts +21 -21
  9. package/App.vue +149 -149
  10. package/README.md +56 -56
  11. package/heroicons.ts +75 -75
  12. package/index.html +19 -19
  13. package/package.json +67 -67
  14. package/playwright.config.ts +48 -48
  15. package/public/background.svg +60 -60
  16. package/public/style.css +187 -187
  17. package/public/technologies.svg +22 -22
  18. package/src/assets/css/base.css +235 -235
  19. package/src/assets/css/variables.css +96 -96
  20. package/src/components/Accordion/Accordion.css +59 -59
  21. package/src/components/Accordion/AccordionGroup.vue +51 -51
  22. package/src/components/Accordion/AccordionItem.vue +66 -66
  23. package/src/components/Appointment/Card/Actions.css +34 -28
  24. package/src/components/Appointment/Card/Actions.vue +73 -72
  25. package/src/components/Appointment/Card/Card.css +80 -80
  26. package/src/components/Appointment/Card/Card.vue +87 -87
  27. package/src/components/Appointment/Card/Details.css +50 -50
  28. package/src/components/Appointment/Card/Details.vue +43 -43
  29. package/src/components/Audio/Audio.vue +187 -187
  30. package/src/components/Audio/Waveform.vue +117 -117
  31. package/src/components/Button/Button.vue +119 -119
  32. package/src/components/CheckBox/CheckBox.css +185 -185
  33. package/src/components/CheckBox/Checkbox.vue +130 -130
  34. package/src/components/DateInput/DateInput.css +2 -2
  35. package/src/components/DateInput/DateInput.vue +262 -262
  36. package/src/components/Dialog/Dialog.css +6 -6
  37. package/src/components/Dialog/Dialog.vue +29 -29
  38. package/src/components/EditField/EditField.css +19 -19
  39. package/src/components/EditField/EditField.vue +202 -202
  40. package/src/components/IconBullet/IconBullet.vue +86 -86
  41. package/src/components/IconBullet/IconBulletList.vue +41 -41
  42. package/src/components/Icons/AdvanceAppointments.vue +153 -153
  43. package/src/components/Icons/Audio/CloudFailed.vue +20 -20
  44. package/src/components/Icons/Audio/CloudSaved.vue +21 -21
  45. package/src/components/Icons/Audio/Delete.vue +15 -15
  46. package/src/components/Icons/Audio/Pause.vue +18 -18
  47. package/src/components/Icons/Audio/Play.vue +15 -15
  48. package/src/components/Icons/CalendarNotification.vue +126 -126
  49. package/src/components/Icons/Chair.vue +32 -32
  50. package/src/components/Icons/ChairNotification.vue +35 -35
  51. package/src/components/Icons/Circle.vue +66 -66
  52. package/src/components/Icons/FavIcon.vue +22 -22
  53. package/src/components/Icons/FilledCircle.vue +11 -11
  54. package/src/components/Icons/Group3.vue +46 -46
  55. package/src/components/Icons/RingNotification.vue +54 -54
  56. package/src/components/Icons/SolidArrowRight.vue +14 -14
  57. package/src/components/Icons/calendar.vue +17 -17
  58. package/src/components/Icons/checkbox.vue +19 -19
  59. package/src/components/Icons/outlineChecked.vue +27 -27
  60. package/src/components/Icons/play.vue +5 -5
  61. package/src/components/Input/Input.css +187 -187
  62. package/src/components/Input/Input.vue +247 -247
  63. package/src/components/Laboratory/AppointmentCard/AppointmentCard.css +7 -7
  64. package/src/components/Laboratory/AppointmentCard/AppointmentCard.vue +116 -116
  65. package/src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue +81 -81
  66. package/src/components/Laboratory/ChatMessage/ChatMessage.vue +113 -113
  67. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.css +4 -4
  68. package/src/components/Laboratory/ChatMessage/ChatMessageBadge.vue +99 -99
  69. package/src/components/Laboratory/ChatNotification/ChatNotification.vue +130 -130
  70. package/src/components/Laboratory/DocumentCard/DocumentCard.css +3 -3
  71. package/src/components/Laboratory/DocumentCard/DocumentCard.vue +50 -50
  72. package/src/components/Laboratory/DocumentCard/DocumentCardItem.vue +53 -53
  73. package/src/components/Laboratory/InfoCard/InfoCard.vue +162 -162
  74. package/src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue +102 -102
  75. package/src/components/Laboratory/ProgressCircle/ProgressCircle.vue +152 -152
  76. package/src/components/Laboratory/ProgressLinear/ProgressLinear.css +33 -33
  77. package/src/components/Laboratory/ProgressLinear/ProgressLinear.vue +75 -75
  78. package/src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue +92 -92
  79. package/src/components/Laboratory/StatusNotification/StatusNotification.vue +49 -49
  80. package/src/components/Laboratory/TagLabel/TagLabel.vue +126 -126
  81. package/src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue +97 -97
  82. package/src/components/Laboratory/TicketCard/TicketCard.css +3 -3
  83. package/src/components/Laboratory/TicketCard/TicketCard.vue +143 -143
  84. package/src/components/Laboratory/TimeLine/TimeLineEvent.css +18 -18
  85. package/src/components/Laboratory/TimeLine/TimeLineEvent.vue +119 -119
  86. package/src/components/Laboratory/TimeLine/Timeline.css +4 -4
  87. package/src/components/Laboratory/TimeLine/Timeline.vue +30 -30
  88. package/src/components/Loader/Loader.css +51 -51
  89. package/src/components/Loader/Loader.vue +1 -1
  90. package/src/components/Modal/Modal.css +5 -5
  91. package/src/components/Modal/Modal.vue +22 -22
  92. package/src/components/NotificationBubble/NotificationBubble.css +4 -4
  93. package/src/components/NotificationBubble/NotificationBubble.vue +90 -90
  94. package/src/components/OtpInput/OtpInput.css +39 -39
  95. package/src/components/OtpInput/OtpInput.vue +143 -143
  96. package/src/components/PhoneInput/PhoneInput.css +31 -31
  97. package/src/components/PhoneInput/PhoneInput.vue +113 -113
  98. package/src/components/Select/Select.css +150 -150
  99. package/src/components/Select/Select.vue +304 -304
  100. package/src/components/TextArea/TextArea.css +3 -3
  101. package/src/components/TextArea/TextArea.vue +126 -126
  102. package/src/components/TickBox/TickBox.css +49 -49
  103. package/src/components/TickBox/TickBox.vue +126 -126
  104. package/src/components/index.ts +23 -23
  105. package/src/constants/iconEnums.ts +3 -3
  106. package/src/i18n/i18n.ts +15 -15
  107. package/src/i18n/locales/de.json +27 -27
  108. package/src/i18n/locales/en.json +27 -27
  109. package/src/index.ts +34 -31
  110. package/src/main.ts +11 -11
  111. package/src/plugins/vuetify.ts +131 -131
  112. package/src/shims-vue.d.ts +10 -10
  113. package/src/stories/Accordion.stories.ts +650 -650
  114. package/src/stories/Audio.stories.ts +28 -28
  115. package/src/stories/Button.stories.ts +263 -263
  116. package/src/stories/CheckBox.stories.ts +348 -348
  117. package/src/stories/DateInput.stories.ts +53 -53
  118. package/src/stories/Dialog.stories.ts +147 -147
  119. package/src/stories/EditField.stories.ts +78 -78
  120. package/src/stories/IconBullet/IconBullet.stories.ts +201 -201
  121. package/src/stories/IconBullet/IconBulletList.stories.ts +275 -275
  122. package/src/stories/Input.stories.ts +351 -351
  123. package/src/stories/Laboratory/Cards/AppointmentCard/AppointmentCard.stories.ts +260 -260
  124. package/src/stories/Laboratory/Cards/DocumentCard/DocumentCard.stories.ts +176 -176
  125. package/src/stories/Laboratory/Cards/DocumentCard/DocumentCardItem.stories.ts +119 -119
  126. package/src/stories/Laboratory/Cards/InfoCard/InfoCard.stories.ts +320 -320
  127. package/src/stories/Laboratory/Cards/TicketCard/TicketCard.stories.ts +335 -335
  128. package/src/stories/Laboratory/Chat/ChatBoxImage.stories.ts +82 -82
  129. package/src/stories/Laboratory/Chat/ChatMessage.stories.ts +198 -198
  130. package/src/stories/Laboratory/Chat/ChatMessageBadge.stories.ts +204 -204
  131. package/src/stories/Laboratory/Chat/ChatNotification.stories.ts +144 -144
  132. package/src/stories/Laboratory/Chat/ProgressLinear.stories.ts +186 -186
  133. package/src/stories/Laboratory/Chat/StatusNotification.stories.ts +111 -111
  134. package/src/stories/Laboratory/MainColumnsBar.stories.ts +48 -48
  135. package/src/stories/Laboratory/ProgressCircle.stories.ts +261 -261
  136. package/src/stories/Laboratory/SelectionColumnBar.stories.ts +234 -234
  137. package/src/stories/Laboratory/TagLabel.stories.ts +418 -418
  138. package/src/stories/Laboratory/TagLabelGroup.stories.ts +234 -234
  139. package/src/stories/Laboratory/Timeline.stories.ts +403 -403
  140. package/src/stories/NotificationBubble.stories.ts +194 -194
  141. package/src/stories/OtpInput.stories.ts +100 -100
  142. package/src/stories/PhoneInput.stories.ts +52 -52
  143. package/src/stories/Select.stories.ts +419 -419
  144. package/src/stories/TextArea.stories.ts +112 -112
  145. package/src/stories/TickBox.stories.ts +294 -294
  146. package/src/stories/v-icon.stories.ts +91 -91
  147. package/src/types/index.ts +1 -0
  148. package/src/utils/index.ts +100 -100
  149. package/src/vite-env.d.ts +1 -1
  150. package/tests/e2e/README.md +220 -220
  151. package/tests/e2e/accessibility.spec.ts +638 -638
  152. package/tests/e2e/accordion.spec.ts +42 -42
  153. package/tests/e2e/additional-components.spec.ts +437 -437
  154. package/tests/e2e/all-components.spec.ts +135 -135
  155. package/tests/e2e/appointment-card.spec.ts +816 -816
  156. package/tests/e2e/button-fixed.spec.ts +58 -58
  157. package/tests/e2e/button.spec.ts +76 -76
  158. package/tests/e2e/checkbox.spec.ts +50 -50
  159. package/tests/e2e/date-input.spec.ts +46 -46
  160. package/tests/e2e/debug.spec.ts +51 -51
  161. package/tests/e2e/dialog.spec.ts +58 -58
  162. package/tests/e2e/input.spec.ts +55 -55
  163. package/tests/e2e/laboratory-components.spec.ts +320 -320
  164. package/tests/e2e/otp-input.spec.ts +50 -50
  165. package/tests/e2e/select.spec.ts +52 -52
  166. package/tests/e2e/storybook-utils.ts +59 -59
  167. package/tests/e2e/test-basic.spec.ts +33 -33
  168. package/tests/e2e/visual-regression.spec.ts +350 -350
  169. package/tests/unit/components/Accordion/AccordionGroup.spec.ts.skip +342 -342
  170. package/tests/unit/components/Accordion/AccordionItem.spec.ts.skip +383 -383
  171. package/tests/unit/components/Appointment/Card/Actions.spec.ts +407 -407
  172. package/tests/unit/components/Appointment/Card/Card.spec.ts +485 -485
  173. package/tests/unit/components/Appointment/Card/Details.spec.ts +397 -397
  174. package/tests/unit/components/Audio/Audio.spec.ts +403 -403
  175. package/tests/unit/components/Audio/Waveform.spec.ts +483 -483
  176. package/tests/unit/components/Core/Button.spec.ts +336 -336
  177. package/tests/unit/components/Core/Checkbox.spec.ts +544 -544
  178. package/tests/unit/components/Core/DateInput.spec.ts +690 -690
  179. package/tests/unit/components/Core/Dialog.spec.ts +485 -485
  180. package/tests/unit/components/Core/EditField.spec.ts +782 -782
  181. package/tests/unit/components/Core/Input.spec.ts +512 -512
  182. package/tests/unit/components/Core/Modal.spec.ts +518 -518
  183. package/tests/unit/components/Core/NotificationBubble.spec.ts +606 -606
  184. package/tests/unit/components/Core/OtpInput.spec.ts +708 -708
  185. package/tests/unit/components/Core/PhoneInput.spec.ts +619 -619
  186. package/tests/unit/components/Core/Select.spec.ts +712 -712
  187. package/tests/unit/components/Core/TextArea.spec.ts +565 -565
  188. package/tests/unit/components/Core/TickBox.spec.ts +779 -779
  189. package/tests/unit/components/IconBullet/IconBullet.spec.ts +356 -356
  190. package/tests/unit/components/IconBullet/IconBulletList.spec.ts +371 -371
  191. package/tests/unit/components/Icons/Audio/CloudFailed.spec.ts +108 -108
  192. package/tests/unit/components/Icons/Audio/CloudSaved.spec.ts +149 -149
  193. package/tests/unit/components/Icons/Audio/Delete.spec.ts +158 -158
  194. package/tests/unit/components/Icons/Audio/Pause.spec.ts +208 -208
  195. package/tests/unit/components/Icons/Audio/Play.spec.ts +217 -217
  196. package/tests/unit/components/Icons/CalendarNotification.spec.ts +186 -186
  197. package/tests/unit/components/Icons/Chair.spec.ts +234 -234
  198. package/tests/unit/components/Icons/ChairNotification.spec.ts +311 -311
  199. package/tests/unit/components/Icons/Circle.spec.ts +255 -255
  200. package/tests/unit/components/Icons/FavIcon.spec.ts +251 -251
  201. package/tests/unit/components/Icons/FilledCircle.spec.ts +274 -274
  202. package/tests/unit/components/Icons/Group3.spec.ts +355 -355
  203. package/tests/unit/components/Icons/RingNotification.spec.ts +393 -393
  204. package/tests/unit/components/Icons/calendar.spec.ts +286 -286
  205. package/tests/unit/components/Icons/checkbox.spec.ts +315 -315
  206. package/tests/unit/components/Icons/outlineChecked.spec.ts +434 -434
  207. package/tests/unit/components/Icons/play.spec.ts +308 -308
  208. package/tests/unit/components/Laboratory/AppointmentCard.spec.ts +167 -167
  209. package/tests/unit/components/Laboratory/ChatBoxImage.spec.ts +179 -179
  210. package/tests/unit/components/Laboratory/ChatMessage.spec.ts +263 -263
  211. package/tests/unit/components/Laboratory/ChatMessageBadge.spec.ts +282 -282
  212. package/tests/unit/components/Laboratory/ChatNotification.spec.ts +256 -256
  213. package/tests/unit/components/Laboratory/DocumentCard.spec.ts +228 -228
  214. package/tests/unit/components/Laboratory/DocumentCardItem.spec.ts +236 -236
  215. package/tests/unit/components/Laboratory/InfoCard.spec.ts +308 -308
  216. package/tests/unit/components/Laboratory/MainColumnsBar.spec.ts +251 -251
  217. package/tests/unit/components/Laboratory/ProgressCircle.spec.ts +290 -290
  218. package/tests/unit/components/Laboratory/ProgressLinear.spec.ts +275 -275
  219. package/tests/unit/components/Laboratory/SelectionColumnBar.spec.ts +288 -288
  220. package/tests/unit/components/Laboratory/StatusNotification.spec.ts +296 -296
  221. package/tests/unit/components/Laboratory/TagLabel.spec.ts +353 -353
  222. package/tests/unit/components/Laboratory/TagLabelGroup.spec.ts +377 -377
  223. package/tests/unit/components/Laboratory/TicketCard.spec.ts +351 -351
  224. package/tests/unit/components/Laboratory/TimeLineEvent.spec.ts +381 -381
  225. package/tests/unit/components/Laboratory/Timeline.spec.ts +419 -419
  226. package/tests/unit/constants/iconEnums.spec.ts +39 -39
  227. package/tests/unit/i18n/i18n.spec.ts +88 -88
  228. package/tests/unit/plugins/vuetify.spec.ts +220 -220
  229. package/tests/unit/setup.ts +189 -189
  230. package/tests/unit/src/components/index.spec.ts.skip +192 -192
  231. package/tests/unit/src/index.spec.ts.skip +182 -182
  232. package/tests/unit/src/main.spec.ts +151 -151
  233. package/tsconfig.json +26 -26
  234. package/vite.config.ts +29 -29
  235. package/vitest.config.ts +83 -83
@@ -1,58 +1,58 @@
1
- import { test, expect } from '@playwright/test';
2
-
3
- test.describe('Dialog Component', () => {
4
- async function getFrame(page) {
5
- await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
6
- const frame = page.frame({ url: /iframe\.html/ });
7
- if (!frame) throw new Error('Frame not found');
8
- await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
9
- await page.waitForTimeout(1000); // Give time for Vue components to mount
10
- return frame;
11
- }
12
-
13
- test('renders trigger button', async ({ page }) => {
14
- await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
15
- const frame = await getFrame(page);
16
-
17
- // Look for the button with the specific text
18
- const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
19
- await expect(trigger).toBeVisible();
20
- });
21
-
22
- test('opens dialog on trigger click', async ({ page }) => {
23
- await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
24
- const frame = await getFrame(page);
25
-
26
- // Look for the button with the specific text
27
- const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
28
- await trigger.click();
29
-
30
- await page.waitForTimeout(500);
31
- const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
32
- if (await dialog.count() > 0) {
33
- await expect(dialog).toBeVisible();
34
- }
35
- });
36
-
37
- test('closes dialog with close button', async ({ page }) => {
38
- await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
39
- const frame = await getFrame(page);
40
-
41
- // Look for the button with the specific text
42
- const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
43
- await trigger.click();
44
-
45
- await page.waitForTimeout(500);
46
- const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
47
- if (await dialog.count() > 0) {
48
- // Look for 'Nein' button which closes the dialog
49
- const closeButton = page.locator('button:has-text("Nein")').first();
50
- if (await closeButton.count() > 0) {
51
- await closeButton.click();
52
- await page.waitForTimeout(500);
53
- const dialogAfterClose = page.locator('.v-dialog:visible, [role="dialog"]:visible').first();
54
- await expect(dialogAfterClose).toHaveCount(0);
55
- }
56
- }
57
- });
58
- });
1
+ import { test, expect } from '@playwright/test';
2
+
3
+ test.describe('Dialog Component', () => {
4
+ async function getFrame(page) {
5
+ await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
6
+ const frame = page.frame({ url: /iframe\.html/ });
7
+ if (!frame) throw new Error('Frame not found');
8
+ await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
9
+ await page.waitForTimeout(1000); // Give time for Vue components to mount
10
+ return frame;
11
+ }
12
+
13
+ test('renders trigger button', async ({ page }) => {
14
+ await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
15
+ const frame = await getFrame(page);
16
+
17
+ // Look for the button with the specific text
18
+ const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
19
+ await expect(trigger).toBeVisible();
20
+ });
21
+
22
+ test('opens dialog on trigger click', async ({ page }) => {
23
+ await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
24
+ const frame = await getFrame(page);
25
+
26
+ // Look for the button with the specific text
27
+ const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
28
+ await trigger.click();
29
+
30
+ await page.waitForTimeout(500);
31
+ const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
32
+ if (await dialog.count() > 0) {
33
+ await expect(dialog).toBeVisible();
34
+ }
35
+ });
36
+
37
+ test('closes dialog with close button', async ({ page }) => {
38
+ await page.goto('http://localhost:7000/?path=/story/wl-dialog--default-dialog');
39
+ const frame = await getFrame(page);
40
+
41
+ // Look for the button with the specific text
42
+ const trigger = frame.locator('button:has-text("Neuen Entwurf erstellen")').first();
43
+ await trigger.click();
44
+
45
+ await page.waitForTimeout(500);
46
+ const dialog = page.locator('.v-dialog, [role="dialog"], .v-overlay--active').first();
47
+ if (await dialog.count() > 0) {
48
+ // Look for 'Nein' button which closes the dialog
49
+ const closeButton = page.locator('button:has-text("Nein")').first();
50
+ if (await closeButton.count() > 0) {
51
+ await closeButton.click();
52
+ await page.waitForTimeout(500);
53
+ const dialogAfterClose = page.locator('.v-dialog:visible, [role="dialog"]:visible').first();
54
+ await expect(dialogAfterClose).toHaveCount(0);
55
+ }
56
+ }
57
+ });
58
+ });
@@ -1,55 +1,55 @@
1
- import { test, expect } from '@playwright/test';
2
-
3
- test.describe('Input Component', () => {
4
- async function getFrame(page) {
5
- await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
6
- const frame = page.frame({ url: /iframe\.html/ });
7
- if (!frame) throw new Error('Frame not found');
8
- await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
9
- await page.waitForTimeout(1000); // Give time for Vue components to mount
10
- return frame;
11
- }
12
-
13
- test('renders default input', async ({ page }) => {
14
- await page.goto('http://localhost:7000/?path=/story/wl-input--default');
15
- const frame = await getFrame(page);
16
-
17
- const input = frame.locator('input:visible').first();
18
- await expect(input).toBeVisible();
19
- });
20
-
21
- test('accepts text input', async ({ page }) => {
22
- await page.goto('http://localhost:7000/?path=/story/wl-input--default');
23
- const frame = await getFrame(page);
24
-
25
- const input = frame.locator('input:visible').first();
26
- await input.fill('Test input');
27
- await expect(input).toHaveValue('Test input');
28
- });
29
-
30
- test('shows placeholder text', async ({ page }) => {
31
- await page.goto('http://localhost:7000/?path=/story/wl-input--default');
32
- const frame = await getFrame(page);
33
-
34
- const input = frame.locator('input:visible').first();
35
- await expect(input).toBeVisible();
36
- });
37
-
38
- test('displays error state', async ({ page }) => {
39
- await page.goto('http://localhost:7000/?path=/story/wl-input--error');
40
- const frame = await getFrame(page);
41
-
42
- const errorMessage = frame.locator('.v-messages__message, .error--text').first();
43
- if (await errorMessage.count() > 0) {
44
- await expect(errorMessage).toBeVisible();
45
- }
46
- });
47
-
48
- test('handles disabled state', async ({ page }) => {
49
- await page.goto('http://localhost:7000/?path=/story/wl-input--disabled');
50
- const frame = await getFrame(page);
51
-
52
- const input = frame.locator('input').first();
53
- await expect(input).toBeDisabled();
54
- });
55
- });
1
+ import { test, expect } from '@playwright/test';
2
+
3
+ test.describe('Input Component', () => {
4
+ async function getFrame(page) {
5
+ await page.waitForSelector('#storybook-preview-iframe', { timeout: 30000 });
6
+ const frame = page.frame({ url: /iframe\.html/ });
7
+ if (!frame) throw new Error('Frame not found');
8
+ await frame.waitForSelector('body', { timeout: 30000, state: 'attached' });
9
+ await page.waitForTimeout(1000); // Give time for Vue components to mount
10
+ return frame;
11
+ }
12
+
13
+ test('renders default input', async ({ page }) => {
14
+ await page.goto('http://localhost:7000/?path=/story/wl-input--default');
15
+ const frame = await getFrame(page);
16
+
17
+ const input = frame.locator('input:visible').first();
18
+ await expect(input).toBeVisible();
19
+ });
20
+
21
+ test('accepts text input', async ({ page }) => {
22
+ await page.goto('http://localhost:7000/?path=/story/wl-input--default');
23
+ const frame = await getFrame(page);
24
+
25
+ const input = frame.locator('input:visible').first();
26
+ await input.fill('Test input');
27
+ await expect(input).toHaveValue('Test input');
28
+ });
29
+
30
+ test('shows placeholder text', async ({ page }) => {
31
+ await page.goto('http://localhost:7000/?path=/story/wl-input--default');
32
+ const frame = await getFrame(page);
33
+
34
+ const input = frame.locator('input:visible').first();
35
+ await expect(input).toBeVisible();
36
+ });
37
+
38
+ test('displays error state', async ({ page }) => {
39
+ await page.goto('http://localhost:7000/?path=/story/wl-input--error');
40
+ const frame = await getFrame(page);
41
+
42
+ const errorMessage = frame.locator('.v-messages__message, .error--text').first();
43
+ if (await errorMessage.count() > 0) {
44
+ await expect(errorMessage).toBeVisible();
45
+ }
46
+ });
47
+
48
+ test('handles disabled state', async ({ page }) => {
49
+ await page.goto('http://localhost:7000/?path=/story/wl-input--disabled');
50
+ const frame = await getFrame(page);
51
+
52
+ const input = frame.locator('input').first();
53
+ await expect(input).toBeDisabled();
54
+ });
55
+ });