Update field name + unit tests

This commit is contained in:
Chloe Herd 2026-07-30 13:12:15 -04:00
parent ff5b6b0ad2
commit 63382362d2
6 changed files with 24 additions and 12 deletions

View file

@ -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"],
},
});

View file

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

View file

@ -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();

View file

@ -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>

View file

@ -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();

View file

@ -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">