jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

phone-number-question unit tests

Browse source
This commit is contained in:
Leah Schumann 2023-07-07 08:23:44 -04:00
parent 6cba28d494
commit 357c16539f
7 changed files with 160 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/digital-components/phone-number-question/phone-number-question.spec.js Normal file
View file

@ -0,0 +1,62 @@
// Components
import phoneNumberQuestion from "./phone-number-question";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
describe("phone-number-question.vue", () => {
it("Should render phoneNumberQuestion sub-component (textbox-question)", async () => {
// Arrange
const wrapper = shallowMount(phoneNumberQuestion, {});
wrapper.getCmsContent = jest.fn();
// Act
const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
// Assert
expect(phoneNumber.exists()).toBe(true);
});
it("Should emit new value when modelValue is changed", async () => {
// Act
const wrapper = shallowMount(phoneNumberQuestion, {
propsData: {
modelValue: "val",
},
});
const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
await phoneNumber.setValue("val2");
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
});
it("Should emit new value when modelValue is changed", async () => {
// Act
const wrapper = shallowMount(phoneNumberQuestion, {
propsData: {
modelValue: "val",
},
});
const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" });
await phoneNumber.setValue("val2");
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]);
});
it("Should combine external and internal validation rules to pass to textbox-question", async() => {
// Act
const wrapper = shallowMount(phoneNumberQuestion, {
propsData: {
validationRules: "outsideValidation",
},
});
// Assert
expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual("outsideValidation|phone-number-format");
});
});

95
src/digital-components/phone-number-question/phone-number-question.vue Normal file
View file

@ -0,0 +1,95 @@
<template>
<div class="phone-number-question d-flex flex-column">
<textboxQuestion
ref="phoneNumber"
type="text"
:max-length="12"
v-model="selectedValue"
:mask="mask"
:isRequired="isRequired"
:validationRules="validationRulesForTextBoxQuestion"
cmsWidgetName="PhoneNumberQuestionWidget" />
</div>
</template>
<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
// Supporting files
import { errorMessages } from "@/constants/error-messages";
import { regex } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
// Validation
defineRule(
"phone-number-format",
regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
);
export default {
name: "phoneNumberQuestion",
props: {
cmsWidgetName: String,
isRequired: Boolean,
validationRules: String,
hasError: Boolean,
centerErrorMessage: Boolean,
modelValue: String,
},
data() {
return {
phoneNumber: "",
};
},
computed: {
selectedValue: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
validationRulesForTextBoxQuestion() {
if (!this.validationRules || this.validationRules.length === 0) {
return "phone-number-format";
} else {
return this.validationRules + "|phone-number-format";
}
},
mask() {
return {
mask: "x##-###-####",
tokens: {
x: {
pattern: /[2-9]/,
},
},
};
},
},
components: {
textboxQuestion,
},
};
</script>
<style lang="scss">
.phone-number-question {
label {
color: $black;
}
input {
border-radius: 0.5rem;
border: 1px solid $gray-500;
height: 48px;
&:focus {
box-shadow: 0 0 0 2.5px $blue;
outline: none;
}
&:hover {
box-shadow: 0 0 0 4px $blue-300;
}
}
}
</style>

1
src/digital-components/phonenumber-question/phonenumber-question.spec.js
View file

@ -1 +0,0 @@
test.todo("some test to be written in the future");

119
src/digital-components/phonenumber-question/phonenumber-question.vue
View file

@ -1,119 +0,0 @@
<template>
<div class="phonenumber-question d-flex flex-column">
<textboxQuestion
type="text"
:max-length="12"
v-model="selectedValue"
:isRequired="isRequired"
:validationRules="validationRuleForTextBoxQuestion"
@input="filterNumber"
cmsWidgetName="phoneNumberQuestionWidget" />
</div>
</template>
<script>
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
//Supporting files
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { useField, validate } from "vee-validate";
//Validation
defineRule(
"phone-number-format",
regex(/^(?=(?:.*\d){10})(?=(?:.*-){2})[\d-]{12}$/, errorMessages.PHONE_FORMAT)
);
export default {
name: "phoneNumberQuestion",
props: {
cmsWidgetName: String,
isRequired: Boolean,
validationRules: String,
hasError: Boolean,
centerErrorMessage: Boolean,
modelValue: String,
},
data() {
return {
phoneNumber: "",
};
},
computed: {
phoneNumberQuestionWidget() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
selectedValue: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
const formattedNumber = this.formatPhoneNumber(newValue);
this.$emit("update:modelValue", formattedNumber);
},
},
validationRuleForTextBoxQuestion() {
if (!this.validationRules || this.validationRules.length === 0) {
return "phone-number-format";
} else {
return this.validationRules + "|phone-number-format";
}
},
},
methods: {
formatPhoneNumber(value) {
// Remove all non-digit characters from the phone number
let formattedNumber = value.replace(/\D/g, "");
// Insert hyphens after the first three and the next three digits
if (formattedNumber.length > 3) {
formattedNumber = formattedNumber.slice(0, 3) + "-" + formattedNumber.slice(3);
}
if (formattedNumber.length > 7) {
formattedNumber = formattedNumber.slice(0, 7) + "-" + formattedNumber.slice(7);
}
// Update the phone number with the formatted version
return formattedNumber;
},
filterNumber(event) {
const regex = /^(?!1)\d+/;
const inputValue = event.target.value;
if (!regex.test(inputValue)) {
// If the input violates the regex pattern, remove the leading 1
event.target.value = inputValue.replace(/^1/, "");
}
},
},
watch: {
async value(newValue) {
const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
if (result.valid) {
this.handleChange(newValue); // trigger full validation on this field only
}
},
},
components: {
textboxQuestion,
},
};
</script>
<style lang="scss">
.phonenumber-question {
label {
color: $black;
}
input {
border-radius: 0.5rem;
border: 1px solid $gray-500;
height: 48px;
&:focus {
box-shadow: 0 0 0 2.5px $blue;
outline: none;
}
&:hover {
box-shadow: 0 0 0 4px $blue-300;
}
}
}
</style>

2
src/layouts/customer-details/customer-details.spec.js
View file

@ -55,4 +55,4 @@ function setupMocks() {
);
return { wrapper };
}
}

2
src/layouts/customer-details/customer-details.vue
View file

@ -55,7 +55,7 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
import textBlock from "@/digital-components/text-block/text-block";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
//Supporting files

2
src/styles/common-error-styles.scss
View file

@ -103,7 +103,7 @@ html {
}
&.textbox-question,
&.dropdown-question,
&.phonenumber-question {
&.phone-number-question {
p {
color: $red;
}