commit
This commit is contained in:
Kulbhushan Kaushik
parent
0ac2cb9eac
commit
93e576a012
8 changed files with 285 additions and 79 deletions
|
|
@ -8,7 +8,9 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-animations.scss";
|
||||
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
@import "@/styles/common-styles.scss";
|
||||
@import "@/styles/common-typography-styles.scss";
|
||||
@import "@/styles/common-error-styles.scss";
|
||||
@import "@/styles/common-animations.scss";
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
jest.mock("@/store", () => { return {}; }, { virtual: true });
|
||||
|
||||
|
|
@ -111,80 +110,8 @@ describe("buttonQuestion.vue", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should trigger event modelValue change to new value on when radio button selected", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}}));
|
||||
await wrapper.setProps({
|
||||
answers: ["2022", "2021", "2020"],
|
||||
isMultiSelect: false,
|
||||
modelValue: []
|
||||
});
|
||||
const val = { checkValue: true, value: "2021", }
|
||||
wrapper.vm.handleCheckedChanged(val);
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should add values to array on checkbox click", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, setupMocks({
|
||||
propsData: {
|
||||
modelValue: ["2022", "2021", "2020"],
|
||||
isMultiSelect: true,
|
||||
groupName: "group-name"
|
||||
}
|
||||
}));
|
||||
const val = { checkValue: true, value: "2019", }
|
||||
wrapper.vm.handleCheckedChanged(val);
|
||||
// Assert
|
||||
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, setupMocks({
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
modelValue: ['a', 'b'],
|
||||
groupName: "group-name"
|
||||
}
|
||||
}));
|
||||
const val = { checkValue: true, value: "2021", }
|
||||
wrapper.vm.handleCheckedChanged(val);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.selectedValues).toEqual(["a", "b", "2021"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buttonQuestion.vue", () => {
|
||||
it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(buttonQuestion, setupMocks({
|
||||
propsData: {
|
||||
isMultiSelect: true,
|
||||
modelValue: ['a', 'b'],
|
||||
groupName: "group-name"
|
||||
}
|
||||
}));
|
||||
|
||||
const val = { checkValue: false, value: "a", }
|
||||
wrapper.vm.handleCheckedChanged(val);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.selectedValues).toEqual(["b"]);
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks(mountOptionsMockData = {}) {
|
||||
const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } };
|
||||
const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
|
||||
const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
|
||||
const defaultMountOptions = { route: { query: { issPage: 'page-name' } } };
|
||||
|
||||
return allMountOptions;
|
||||
return defaultMountOptions;
|
||||
}
|
||||
|
|
|
|||
151
src/styles/common-error-styles.scss
Normal file
151
src/styles/common-error-styles.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
html {
|
||||
.has-error {
|
||||
&.list-button,
|
||||
&.list-card,
|
||||
&.list-card.list-button {
|
||||
border: none;
|
||||
color: $red;
|
||||
input[type=checkbox]:focus + label,
|
||||
input[type=radio]:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
label {
|
||||
border: 1px solid $red;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
label:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: 10px;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
&.list-button-horizontal {
|
||||
color: $red;
|
||||
label {
|
||||
border: 1px solid $red;
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
}
|
||||
}
|
||||
input[type=checkbox]:focus + label,
|
||||
input[type=radio]:focus + label {
|
||||
box-shadow: 0 0 1px $red;
|
||||
}
|
||||
}
|
||||
&.ui-radio,
|
||||
&.ui-checkbox {
|
||||
input[type=checkbox],
|
||||
input[type=radio],
|
||||
input[type=radio]+label:before,
|
||||
input[type=checkbox]+label:before {
|
||||
border: 1px solid $red;
|
||||
background-color: initial;
|
||||
}
|
||||
input[type=checkbox]:checked + label:before {
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
&.textbox-question,
|
||||
&.dropdown-question {
|
||||
input:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Restore to default style if alert box is present
|
||||
.alertError {
|
||||
.has-error {
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
input:not(:focus) {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $gray-500;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input:checked:focus {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input:checked:not(:focus) {
|
||||
+ label {
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input:focus {
|
||||
border: 1px solid $gray-500;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
color: $red;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
&.btn.btn-primary {
|
||||
color: $gray-600;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&.btn.btn-primary:hover {
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.btn.btn-primary:focus,
|
||||
&.btn.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
60
src/styles/common-styles.scss
Normal file
60
src/styles/common-styles.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// Common/Global Styles
|
||||
// Use this file for global styles that don't or won't have their own stylesheet
|
||||
body {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
color: #4D5151;
|
||||
.container-fluid {
|
||||
max-width: 576px; //Remove once desktop app is complete
|
||||
&.container-shadow {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
|
||||
}
|
||||
&.make-tall {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.prevent-squish{
|
||||
overflow-x: unset;
|
||||
}
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.container,
|
||||
.container-fluid {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sub-container{
|
||||
&.make-tall {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container-grouped-styles {
|
||||
@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
|
||||
}
|
||||
|
||||
//Footer modal backdrop adjustments for positioning
|
||||
.modal-backdrop {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 576px;
|
||||
height: calc(100% - 72px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
67
src/styles/common-typography-styles.scss
Normal file
67
src/styles/common-typography-styles.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
//Typography
|
||||
p,
|
||||
body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.625;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
//Headings
|
||||
//add helper fw-bold to any element to get bold style (500)
|
||||
h1,.h1 {
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
}
|
||||
h2,.h2 {
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
}
|
||||
h3,.h3 {
|
||||
line-height: 1.375;
|
||||
font-weight: 300;
|
||||
}
|
||||
h4,.h4 {
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
h5,.h5 {
|
||||
line-height: 1.325;
|
||||
font-weight: 400;
|
||||
}
|
||||
h6,.h6 {
|
||||
line-height: 1.7;
|
||||
letter-spacing: .75px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: .875rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
caption,
|
||||
.caption {
|
||||
font-size: .75rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// Font size
|
||||
.fs-5 {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -82,7 +82,6 @@ describe("radio.vue", () => {
|
|||
wrapper.vm.handleCheckChange();
|
||||
// Assert
|
||||
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);;
|
||||
expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue