Merge pull request #146 from Safelite/feature/Digital/SSR-240
Feature/digital/ssr 240
This commit is contained in:
Jason Wheeler
GitHub
commit
4ee36065cf
2 changed files with 82 additions and 53 deletions
|
|
@ -15,7 +15,7 @@ describe("address-questions.vue", () => {
|
|||
});
|
||||
|
||||
describe("initial state", () => {
|
||||
test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
|
||||
test("Should hide addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
|
|
@ -24,17 +24,16 @@ describe("address-questions.vue", () => {
|
|||
const city = wrapper.findComponent({ ref: "city" });
|
||||
const state = wrapper.findComponent({ ref: "state" });
|
||||
const zipCode = wrapper.findComponent({ ref: "zipCode" });
|
||||
const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
|
||||
|
||||
// Assert
|
||||
expect(streetAddress.exists()).toBe(true);
|
||||
expect(city.exists()).toBe(true);
|
||||
expect(state.exists()).toBe(true);
|
||||
expect(zipCode.exists()).toBe(true);
|
||||
expect(city.exists()).toBe(false);
|
||||
expect(state.exists()).toBe(false);
|
||||
expect(zipCode.exists()).toBe(false);
|
||||
expect(streetAddress2.exists()).toBe(false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("happy paths", () => {
|
||||
test("full street address is passed in => address fields are displayed", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
|
|
@ -45,6 +44,7 @@ describe("address-questions.vue", () => {
|
|||
state: "OH",
|
||||
zipCode: "12312",
|
||||
},
|
||||
includeStreetAddress2: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -54,14 +54,40 @@ describe("address-questions.vue", () => {
|
|||
const cityField = wrapper.findComponent({ ref: "city" });
|
||||
const stateField = wrapper.findComponent({ ref: "state" });
|
||||
const zipField = wrapper.findComponent({ ref: "zipCode" });
|
||||
const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
|
||||
|
||||
expect(cityField.exists()).toBeTruthy();
|
||||
expect(cityField.isVisible()).toBeTruthy();
|
||||
expect(stateField.exists()).toBeTruthy();
|
||||
expect(cityField.isVisible()).toBeTruthy();
|
||||
expect(zipField.exists()).toBeTruthy();
|
||||
expect(cityField.isVisible()).toBeTruthy();
|
||||
expect(streetAddress2.isVisible()).toBeTruthy();
|
||||
});
|
||||
|
||||
test("address2 is hidden if includeStreetAddress2 is false", async () => {
|
||||
// Arrange/Act
|
||||
const { wrapper } = setupMocks({
|
||||
props: {
|
||||
modelValue: {
|
||||
streetAddress: "12345 Test Road",
|
||||
city: "Tests",
|
||||
state: "OH",
|
||||
zipCode: "12312",
|
||||
},
|
||||
includeStreetAddress2: false,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"});
|
||||
expect(streetAddress2.exists()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("happy paths", () => {
|
||||
test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
cmsWidgetName="AlertNoMatchWarningWidget"
|
||||
alertClass="alert-warning"
|
||||
v-bind:isDismissible="false" />
|
||||
|
||||
<div class="row mt-2 mb-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
|
|
@ -31,55 +30,55 @@
|
|||
@keydown.enter.prevent />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4" v-if="includeStreetAddress2">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="StreetAddress2QuestionWidget"
|
||||
v-model="addressModel.streetAddress2"
|
||||
aria-haspopup=""
|
||||
inputId="streetAddress2Field"
|
||||
disableAutoFill
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="row mb-4" aria-live="polite">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="CityQuestionWidget"
|
||||
v-model="addressModel.city"
|
||||
ref="city"
|
||||
inputId="cbf28188fdf2436688fd735915f7ee56"
|
||||
disableAutoFill
|
||||
validationRules="city-required" />
|
||||
<div v-if="showAllFields">
|
||||
<div class="row mt-2 mb-4" v-if="includeStreetAddress2">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
ref="streetAddress2"
|
||||
cmsWidgetName="StreetAddress2QuestionWidget"
|
||||
v-model="addressModel.streetAddress2"
|
||||
aria-haspopup=""
|
||||
inputId="streetAddress2Field"
|
||||
disableAutoFill
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4" aria-live="polite">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="CityQuestionWidget"
|
||||
v-model="addressModel.city"
|
||||
ref="city"
|
||||
inputId="cbf28188fdf2436688fd735915f7ee56"
|
||||
disableAutoFill
|
||||
validationRules="city-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4" aria-live="polite">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="addressModel.state"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
disableAutoFill
|
||||
validationRules="state-required" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="ZipQuestionWidget"
|
||||
v-model="addressModel.zipCode"
|
||||
ref="zipCode"
|
||||
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
|
||||
mask="#####"
|
||||
disableAutoFill
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="row mb-4" aria-live="polite">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="addressModel.state"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
disableAutoFill
|
||||
validationRules="state-required" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="ZipQuestionWidget"
|
||||
v-model="addressModel.zipCode"
|
||||
ref="zipCode"
|
||||
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
|
||||
mask="#####"
|
||||
disableAutoFill
|
||||
validationRules="zip-code-required|zip-code-format" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -130,6 +129,7 @@ export default {
|
|||
matchFound: null, // null = no attempted match, true = match was found, false = match was not found
|
||||
enterPressed: false,
|
||||
isAddressWatchActive: false, // Only deep watch the address model when a match was not found
|
||||
showAllFields: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -210,6 +210,8 @@ export default {
|
|||
// If a match has been previously found then do nothing
|
||||
// OR
|
||||
// If the user pressed "Enter" then do nothing
|
||||
this.showAllFields = true;
|
||||
|
||||
if (self.matchFound || self.enterPressed) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -307,6 +309,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.setupAddressLookup();
|
||||
this.showAllFields = !!this.addressModel.streetAddress;
|
||||
},
|
||||
watch: {
|
||||
matchFound: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue