Added additional field for apartment number or business name

This commit is contained in:
Leah Schumann 2023-01-24 10:42:58 -05:00
parent dfed22aa18
commit 0fd8a16548
2 changed files with 93 additions and 2 deletions

View file

@ -58,6 +58,78 @@ describe("address-questions.vue", () => {
expect(state.exists()).toBe(true); expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true); expect(zipCode.exists()).toBe(true);
}); });
test("Should render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = true", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: true
},
});
await wrapper.setData({
showAddressFields: true
});
// Act
const streetAddress = wrapper.findComponent({ ref: "autocomplete" });
const apartmentNumberOrBusinessName = wrapper.findComponent({ ref: "apartmentNumberOrBusinessName" });
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(true);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should *not* render apartmentNumberOrBusinessName textbox-question when captureApartmentNumberOrBusinessName = false", async () => {
// Arrange
const { wrapper } = setupMocks({
props: {
modelValue: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
captureApartmentNumberOrBusinessName: false
},
});
await wrapper.setData({
showAddressFields: true
});
// Act
const streetAddress = wrapper.findComponent({ ref: "autocomplete" });
const apartmentNumberOrBusinessName = wrapper.findComponent({ ref: "apartmentNumberOrBusinessName" });
const city = wrapper.findComponent({ ref: "city" });
const state = wrapper.findComponent({ ref: "state" });
const zipCode = wrapper.findComponent({ ref: "zipCode" });
// Assert
expect(streetAddress.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.exists()).toBe(true);
expect(apartmentNumberOrBusinessName.isVisible()).toBe(false);
expect(city.exists()).toBe(true);
expect(state.exists()).toBe(true);
expect(zipCode.exists()).toBe(true);
});
test("Should set this.showAddressFields to true when the model is prepopulated", async () => { test("Should set this.showAddressFields to true when the model is prepopulated", async () => {
// Arrange // Arrange

View file

@ -16,6 +16,18 @@
@keydown.enter.prevent /> @keydown.enter.prevent />
</div> </div>
</div> </div>
<transition name="fade" mode="out-in">
<div class="row mb-4" v-show="showAddressFields && showApartmentNumberOrBusinessNameField" aria-live="polite">
<div class="col">
<textboxQuestion
cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
v-model="addressModel.apartmentNumberOrBusinessName"
ref="apartmentNumberOrBusinessName"
inputId="639b0aaa35f64609ad6995f86a74322b"
disableAutoFill />
</div>
</div>
</transition>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="row mb-4" v-show="showAddressFields" aria-live="polite"> <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
<div class="col"> <div class="col">
@ -95,12 +107,14 @@ export default {
type: Object, type: Object,
default: () => ({ default: () => ({
streetAddress: "", streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "", city: "",
state: "", state: "",
zipCode: "", zipCode: "",
}), }),
}, },
validationRules: String, validationRules: String,
captureApartmentNumberOrBusinessName: false,
}, },
data() { data() {
return { return {
@ -180,6 +194,11 @@ export default {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
}, },
}, },
showApartmentNumberOrBusinessNameField: {
get: function () {
return this.captureApartmentNumberOrBusinessName;
},
}
}, },
methods: { methods: {
setupAddressLookup() { setupAddressLookup() {