From 63382362d2d8516d096bec73b0271329662667bb Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 30 Jul 2026 13:12:15 -0400
Subject: [PATCH] Update field name + unit tests

---
 .../available-appointment-date-chips.spec.js         |  4 ++--
 .../available-appointment-date-chips.vue             |  4 ++--
 .../inshop-scheduling-card.spec.js                   | 12 +++++++++---
 .../inshop-scheduling-card.vue                       |  2 +-
 .../mobile-scheduling-card.spec.js                   | 12 +++++++++---
 .../mobile-scheduling-card.vue                       |  2 +-
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.spec.js b/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.spec.js
index 98ec36a37..49602262b 100644
--- a/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.spec.js
+++ b/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.spec.js
@@ -5,7 +5,7 @@ describe("available-appointment-date-chips.vue", () => {
     test("renders a button for each date", () => {
         const wrapper = shallowMount(availableAppointmentDateChips, {
             props: {
-                dates: ["2026-06-11", "2026-06-16"],
+                displayedDates: ["2026-06-11", "2026-06-16"],
                 label: "Available appointments:",
             },
         });
@@ -21,7 +21,7 @@ describe("available-appointment-date-chips.vue", () => {
     test("emits date-selected when a chip is clicked", async () => {
         const wrapper = shallowMount(availableAppointmentDateChips, {
             props: {
-                dates: ["2026-06-11"],
+                displayedDates: ["2026-06-11"],
             },
         });
 
diff --git a/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.vue b/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.vue
index 87adefb8a..c454eca8a 100644
--- a/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.vue
+++ b/src/layouts/scheduling/available-appointment-date-chips/available-appointment-date-chips.vue
@@ -22,7 +22,7 @@ export default {
     name: "availableAppointmentDateChips",
     emits: ["date-selected"],
     props: {
-        dates: {
+        displayedDates: {
             type: Array,
             default: () => [],
         },
@@ -33,7 +33,7 @@ export default {
     },
     computed: {
         formattedDates() {
-            return this.dates.map(formatSchedulingDateChip);
+            return this.displayedDates.map(formatSchedulingDateChip);
         },
     },
 };
diff --git a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.spec.js b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.spec.js
index abed491f5..b424bc816 100644
--- a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.spec.js
+++ b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.spec.js
@@ -140,8 +140,14 @@ describe("inshop-scheduling-card.vue", () => {
             availableDateChips: ["2026-06-11", "2026-06-14", "2026-06-16"],
         });
         await wrapper.find(".inshop-scheduling-card__header").trigger("click");
-        expect(wrapper.text()).toContain("Available appointments:");
-        expect(wrapper.find("available-appointment-date-chips-stub").exists()).toBe(true);
+        const chipsComponent = wrapper.findComponent({ name: "availableAppointmentDateChips" });
+        expect(chipsComponent.exists()).toBe(true);
+        expect(chipsComponent.props("label")).toBe("Available appointments:");
+        expect(chipsComponent.props("displayedDates")).toEqual([
+            "2026-06-11",
+            "2026-06-14",
+            "2026-06-16",
+        ]);
         expect(wrapper.find(".inshop-scheduling-card__time-slots").exists()).toBe(false);
         wrapper.unmount();
     });
@@ -153,7 +159,7 @@ describe("inshop-scheduling-card.vue", () => {
         });
         await wrapper.find(".inshop-scheduling-card__header").trigger("click");
         await wrapper
-            .find("available-appointment-date-chips-stub")
+            .findComponent({ name: "availableAppointmentDateChips" })
             .vm.$emit("date-selected", "2026-06-11");
         expect(wrapper.emitted("date-selected")[0]).toEqual(["2026-06-11"]);
         wrapper.unmount();
diff --git a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
index 1316a41cd..291681bb1 100644
--- a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
+++ b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
@@ -39,7 +39,7 @@
             <div v-show="isExpanded" class="inshop-scheduling-card__body">
                 <availableAppointmentDateChips
                     v-if="showAvailableDateChips"
-                    :dates="availableDateChips"
+                    :displayedDates="availableDateChips"
                     :label="availableDatesLabel"
                     @date-selected="$emit('date-selected', $event)" />
                 <template v-else>
diff --git a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.spec.js b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.spec.js
index 4e581cf9b..f5fe1ec18 100644
--- a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.spec.js
+++ b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.spec.js
@@ -88,8 +88,14 @@ describe("mobile-scheduling-card.vue", () => {
             timeSlots: [],
             availableDateChips: ["2026-06-11", "2026-06-14", "2026-06-16"],
         });
-        expect(wrapper.text()).toContain("Available appointments:");
-        expect(wrapper.find("available-appointment-date-chips-stub").exists()).toBe(true);
+        const chipsComponent = wrapper.findComponent({ name: "availableAppointmentDateChips" });
+        expect(chipsComponent.exists()).toBe(true);
+        expect(chipsComponent.props("label")).toBe("Available appointments:");
+        expect(chipsComponent.props("displayedDates")).toEqual([
+            "2026-06-11",
+            "2026-06-14",
+            "2026-06-16",
+        ]);
         expect(wrapper.find(".mobile-scheduling-card__time-slots").exists()).toBe(false);
         wrapper.unmount();
     });
@@ -100,7 +106,7 @@ describe("mobile-scheduling-card.vue", () => {
             availableDateChips: ["2026-06-11"],
         });
         await wrapper
-            .find("available-appointment-date-chips-stub")
+            .findComponent({ name: "availableAppointmentDateChips" })
             .vm.$emit("date-selected", "2026-06-11");
         expect(wrapper.emitted("date-selected")[0]).toEqual(["2026-06-11"]);
         wrapper.unmount();
diff --git a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
index 87f8fe8d1..5c1523868 100644
--- a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
+++ b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
@@ -53,7 +53,7 @@
             <div v-show="isExpanded" class="mobile-scheduling-card__body">
                 <availableAppointmentDateChips
                     v-if="showAvailableDateChips"
-                    :dates="availableDateChips"
+                    :displayedDates="availableDateChips"
                     :label="availableDatesLabel"
                     @date-selected="$emit('date-selected', $event)" />
                 <fieldset v-else class="mobile-scheduling-card__time-slots">