@zap-wunschlachen/wl-shared-components 1.0.0 → 1.0.2

package/.github/workflows/playwright.yml

@@ -1,6 +1,7 @@
 name: Playwright Tests
 
 on:
+  workflow_dispatch:
   push:
     branches: [develop]
   pull_request:
@@ -34,10 +35,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --project=${{ matrix.browser }}"
+        run: npx playwright test --project=${{ matrix.browser }}
 
       - name: Upload test results
         uses: actions/upload-artifact@v4
@@ -45,7 +43,6 @@ jobs:
         with:
           name: playwright-results-${{ matrix.browser }}
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -71,10 +68,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run accessibility tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --grep 'accessibility|Accessibility' --project=chromium"
+        run: npx playwright test --grep 'accessibility|Accessibility' --project=chromium
 
       - name: Upload accessibility results
         uses: actions/upload-artifact@v4
@@ -82,7 +76,6 @@ jobs:
         with:
           name: accessibility-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -108,10 +101,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run visual regression tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium"
+        run: npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium
 
       - name: Upload visual test results
         uses: actions/upload-artifact@v4
@@ -119,7 +109,6 @@ jobs:
         with:
           name: visual-regression-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -145,10 +134,7 @@ jobs:
         run: npm run build-storybook
 
       - name: Run mobile tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 7000 --silent" \
-            "npx wait-on http://localhost:7000 && npx playwright test --project='Mobile Chrome' --project='Mobile Safari'"
+        run: npx playwright test --project='Mobile Chrome' --project='Mobile Safari'
 
       - name: Upload mobile test results
         uses: actions/upload-artifact@v4
@@ -156,7 +142,6 @@ jobs:
         with:
           name: mobile-test-results
           path: |
-            test-results/
             playwright-report/
           retention-days: 7
 
@@ -207,9 +192,15 @@ jobs:
             echo "- ❌ Mobile tests failed" >> test-summary.md
           fi
 
+      - name: Convert markdown to HTML
+        run: |
+          npm install -g markdown-cli
+          npx markdown-cli test-summary.md > test-summary.html
       - name: Upload consolidated report
         uses: actions/upload-artifact@v4
         with:
           name: consolidated-test-report
-          path: test-summary.md
+          path: |
+            test-summary.md
+            test-summary.html
           retention-days: 30

package/.github/workflows/update-snapshots.yml

@@ -0,0 +1,38 @@
+name: Visual Regression Snapshots
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-snapshots:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Run visual regression tests
+        run: npx playwright test tests/e2e/visual-regression.spec.ts --update-snapshots
+
+      - name: Upload updated snapshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-snapshots
+          path: | 
+            tests/e2e/
+            playwright-report/
+          # <-- this is exactly where your pathTemplate points,
+          # so you’ll get all of the fresh baseline images as an artifact.

package/App.vue

@@ -2,9 +2,11 @@
   <div class="app">
     <div class="element-container">
       <div style="width: 100%; display: flex; flex-direction: column; gap: 20px;">
-        <Card :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" />
-        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" />
-        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" />
+        <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card disabled :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card disabled :appointment="value4" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
       </div>
      </div>
   </div>
@@ -12,8 +14,39 @@
 
 <script setup lang="ts">
 import {ref} from 'vue';
-import Card from '@/components/Appointment/Card/Card.vue';
 import type { AppointmentData } from '@/types';
+import Card from '@/components/Appointment/Card/Card.vue';
+
+function onConfirmed(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} confirmed`);
+}
+
+function onCancelled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} cancelled`);
+}
+
+function onRescheduled(appointmentId: string | undefined) {
+  console.log(`Appointment ${appointmentId} rescheduled`);
+}
+
+const value0 = ref<AppointmentData>({
+  id: "0",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "upcoming", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: true,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
 
 const value1 = ref<AppointmentData>({
   id: "1",
@@ -26,8 +59,8 @@ const value1 = ref<AppointmentData>({
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",
@@ -45,8 +78,8 @@ const value2 = ref<AppointmentData>({
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",
@@ -64,8 +97,27 @@ const value3 = ref<AppointmentData>({
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
-    gender: '',
-    imageSrc: ''
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
+  },
+  type: 0,
+  address: "Musterstraße 1, 12345 Musterstadt",
+  district: "Musterstadt-Mitte"
+});
+
+const value4 = ref<AppointmentData>({
+  id: "4",
+  patientName: "Max Mustermann",
+  start: "2025-09-23T16:00:00Z",
+  end: "2025-09-23T16:30:00Z",
+  status: "past", // Change to 'past' or 'cancelled' to test other states
+  is_confirmed: false,
+  template_name: ["Routine Checkup", "Cleaning"],
+  description: "ABCD-1234",
+  dentist: {
+    name: "Dr. Erika Mustermann",
+    gender: 'weiblich',
+    imageSrc: 'https://staging.wunschlachen.app/assets/78f58165-cc22-4bb1-9103-bda43796b652'
   },
   type: 0,
   address: "Musterstraße 1, 12345 Musterstadt",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,8 @@
     "test:e2e": "playwright test",
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:report": "playwright show-report"
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",

package/playwright.config.ts

@@ -5,8 +5,11 @@ export default defineConfig({
   fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: 1,
-  reporter: 'html',
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+  ],
   timeout: 60000,
   use: {
     baseURL: 'http://localhost:7000',
@@ -17,6 +20,12 @@ export default defineConfig({
   },
   expect: {
     timeout: 15000,
+
+    toHaveScreenshot: {
+      pathTemplate: '{testDir}/snapshots/{testFileName}/{platform}/{projectName}/{arg}{ext}',
+      threshold: 0.01,
+      maxDiffPixelRatio: 0.10,
+    }
   },
 
   projects: [
@@ -24,6 +33,10 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'Mobile Chrome', use: { ...devices['Pixel 9'] } },
+    { name: 'Mobile Safari', use: { ...devices['iPhone 16'] } },
   ],
 
   webServer: {

package/src/components/Appointment/Card/Actions.css

@@ -2,7 +2,7 @@
 .actions-grid {
   margin-bottom: 1.25rem;
   display: flex;
-  gap: 0;
+  gap: 20px;
   color: var(--Dental-Blue-0);
 }
 
@@ -12,7 +12,6 @@
 }
 
 .action-button:first-child {
-  border-right: 1px solid #e5e7eb;
   padding-right: 0.5rem;
 }
 

package/src/components/Appointment/Card/Actions.vue

@@ -1,25 +1,25 @@
 <template>
     <template v-if="appointment.status === 'upcoming'">
         <div class="actions-grid">
-            <Button class="action-button" variant="text" prependIcon="heroicons:x-circle"
+            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
                 label='Termin stornieren' size="small" @click="handleCancel" />
 
-            <Button class="action-button" variant="text" prependIcon="heroicons:arrows-up-down"
+            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down" :disabled="disabled"
                 label='Termin verschieben' size="small" @click="handleReschedule" />
         </div>
 
 
-        <Button v-if="confirmable" class="full-width-button" label="Termin bestätigen"
+        <Button v-if="confirmable" class="full-width-button" label="Termin bestätigen" :disabled="disabled"
             @click="confirmAppointment" />
     </template>
 
     <template v-else-if="appointment.status === 'past'">
-        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
+        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path" :disabled="disabled"
             label='Diesen Termin nochmal buchen' @click="handleReschedule" />
     </template>
     <template v-else-if="appointment.status === 'cancelled'">
         <Button class="full-width-button-opacity" color="var(--error-red-0)" variant="text" prependIcon="heroicons:x-circle"
-            readonly label='Termin storniert' :disabled="false" />
+            readonly label='Termin storniert' :disabled="disabled" />
     </template>
 </template>
 
@@ -29,15 +29,19 @@ import { AppointmentData } from '@/types';
 import { computed } from 'vue';
 import Button from '../../Button/Button.vue';
 
-const { appointment } = defineProps<{
-    appointment: AppointmentData
+const { appointment, disabled } = defineProps<{
+    appointment: AppointmentData,
+    disabled?: Boolean,
 }>();
 
+console.log('Actions component - appointment:', appointment);
+console.log('Actions component - disabled:', disabled);
+
 // Emit events upward when actions occur
 const emit = defineEmits<{
-    (e: 'confirm', id: string): void
-    (e: 'cancel', id: string): void
-    (e: 'reschedule', id: string): void
+    (e: 'confirmed', id: string): void
+    (e: 'cancelled', id: string): void
+    (e: 'rescheduled', id: string): void
 }>()
 
 // Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
@@ -50,15 +54,15 @@ const confirmable = computed(() => {
 
 // Log confirmation when the button is clicked
 const confirmAppointment = async () => {
-    emit('confirm', appointment.id)
+    emit('confirmed', appointment.id)
 }
 
 const handleCancel = async () => {
-    emit('cancel', appointment.id)
+    emit('cancelled', appointment.id)
 }
 
 const handleReschedule = async () => {
-    emit('reschedule', appointment.id)
+    emit('rescheduled', appointment.id)
 }
 
 </script>

package/src/components/Appointment/Card/Card.vue

@@ -28,7 +28,7 @@
             </div>
         </a>
         <div class="card-footer">
-            <Actions :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
+            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
                 @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
         </div>
     </div>
@@ -42,11 +42,16 @@ import type { AppointmentData } from '@/types';
 import Details from './Details.vue'
 import Actions from './Actions.vue'
 
-defineProps<{
+const props = defineProps<{
     appointment: AppointmentData,
-    appointmentLink?: string,
-    dentistImageSrc?: string
-}>()
+    appointmentLink?: String,
+    dentistImageSrc?: String,
+    disabled?: Boolean,
+}>();
+
+console.log('Rendering Card for appointment:', props.appointment);
+console.log('Disabled state:', props.disabled);
+console.log('Appointment Link:', props.appointmentLink);
 
 // Emit events upward when confirmed or cancelled
 const emit = defineEmits(['confirm', 'cancel', 'reschedule'])

package/src/components/Appointment/Card/Details.vue

@@ -37,7 +37,7 @@
 import type { AppointmentData } from '@/types';
 defineProps<{
     appointment: AppointmentData,
-    dentistImageSrc?: string
+    dentistImageSrc?: String
 }>()
 </script>
 

package/src/components/index.ts

@@ -18,3 +18,4 @@ export { default as OtpInput } from './OtpInput/OtpInput.vue';
 export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
 export { default as EditField } from './EditField/EditField.vue';
 export { default as Modal } from './Modal/Modal.vue';
+export { default as AppointmentCard } from './Appointment/Card/Card.vue';

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

@@ -78,9 +78,10 @@ test.describe('Component Tests', () => {
   test('OtpInput - default', async ({ page }) => {
     await page.goto('http://localhost:7000/?path=/story/wl-otpinput--default');
     const frame = await getFrame(page);
-    const inputs = frame.locator('input');
+    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).toBeGreaterThan(3);
+    expect(count).toBe(6);
   });
 
   test('Audio - default', async ({ page }) => {