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

Fixing test pages and unit tests

Browse source
This commit is contained in:
Max 2022-01-20 10:10:47 -05:00
parent 80560902f0
commit 0301b0d3e3
5 changed files with 33 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/layouts/component-test/component-test.vue
View file

@ -243,6 +243,7 @@
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2021"
buttonLabel="2021"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -255,6 +256,7 @@
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2020"
buttonLabel="2020"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -267,6 +269,7 @@
groupName="demo-1"
ariaLabelBy="vehicle-year"
buttonID="2019"
buttonLabel="2019"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -286,6 +289,7 @@
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2018"
buttonLabel="2018"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -297,6 +301,7 @@
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2017"
buttonLabel="2017"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -308,6 +313,7 @@
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2016"
buttonLabel="2016"
isRequired=true
textPosition="text-start"
loaderColor="blue"
@ -333,6 +339,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Chevrolet"
buttonLabel="Chevrolet"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -345,6 +352,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Dodge"
buttonLabel="Dodge"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -357,6 +365,7 @@
groupName="demo-2"
ariaLabelBy="vehicle-make"
buttonID="Ford"
buttonLabel="Ford"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -376,6 +385,7 @@
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Honda"
buttonLabel="Honda"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -387,6 +397,7 @@
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Acura"
buttonLabel="Acura"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -398,6 +409,7 @@
groupName="demo-2-checkbox"
ariaLabelBy="vehicle-make"
buttonID="Infiniti"
buttonLabel="Infiniti"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-start"
loaderColor="blue"
@ -423,6 +435,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Corvette"
buttonLabel="Corvette"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -435,6 +448,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="Testarosa"
buttonLabel="Testarosa"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -447,6 +461,7 @@
groupName="demo-3"
ariaLabelBy="vehicle-model"
buttonID="S600"
buttonLabel="S600"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -466,6 +481,7 @@
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Accord"
buttonLabel="Accord"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -477,6 +493,7 @@
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Civic"
buttonLabel="Civic"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -488,6 +505,7 @@
groupName="demo-3-checkbox"
ariaLabelBy="vehicle-model"
buttonID="Ridgeline"
buttonLabel="Ridgeline"
buttonLabelSubCopy="Test sub-headline"
textPosition="text-center"
loaderColor="blue"
@ -515,6 +533,7 @@
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="1"
buttonLabel="1"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
@ -528,6 +547,7 @@
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="2"
buttonLabel="2"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
@ -541,6 +561,7 @@
groupName="demo-4"
ariaLabelBy="vehicle-model"
buttonID="3"
buttonLabel="3"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
@ -563,6 +584,7 @@
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="4"
buttonLabel="4"
textPosition="text-center"
loaderEnabled=true
loaderColor="blue"
@ -576,6 +598,7 @@
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="5"
buttonLabel="5"
textPosition="text-center"
loaderEnabled=true
loaderColor="blue"
@ -589,6 +612,7 @@
groupName="demo-4-checkbox"
ariaLabelBy="vehicle-model"
buttonID="6"
buttonLabel="6"
textPosition="text-center"
loaderEnabled=true
loaderColor="blue"

6
src/layouts/form-test/form-test.vue
View file

@ -23,6 +23,7 @@
groupName="demo"
aria-required="true"
buttonID="1"
buttonLabel="1"
value="1"
buttonLabelSubCopy=""
textPosition="text-center"
@ -35,6 +36,7 @@
groupName="demo"
aria-required="true"
buttonID="2"
buttonLabel="2"
value="2"
buttonLabelSubCopy=""
textPosition="text-center"
@ -47,6 +49,7 @@
groupName="demo"
aria-required="true"
buttonID="3"
buttonLabel="3"
value="3"
buttonLabelSubCopy=""
textPosition="text-center"
@ -69,18 +72,21 @@
<listButton
isMultiSelect
buttonID="Single Windshield"
buttonLabel="Single Windshield"
value="Single Windshield"
groupName="demo2"
/>
<listButton
isMultiSelect
buttonID="Driver Side"
buttonLabel="Driver Side"
value="Driver Side"
groupName="demo2"
/>
<listButton
isMultiSelect
buttonID="Passenger Side"
buttonLabel="Passenger Side"
value="Passenger Side"
groupName="demo2"
/>

33
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -183,37 +183,4 @@ describe("list-button-horizontal.vue", () => {
});
it("Should return first item if first item in group", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
positionInGroup: 1
},
});
// Assert
const label = wrapper.find("label");
expect(label.attributes('class')).toContain("first-item");
});
it("Should return last item if last item in group", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
positionInGroup: 3,
totalInGroup: 3
},
});
// Assert
const label = wrapper.find("label");
expect(label.attributes('class')).toContain("last-item");
});
});

59
src/ux-components/list-card/list-card.spec.js
View file

@ -22,65 +22,6 @@ describe("list-card.vue", () => {
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return input type radio if isRadio is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadio: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
});
it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isMultiSelectHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg"
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return input type radio if isRadioHorizontal is true", async () => {
// Act
const wrapper = shallowMount(listCard, {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
buttonID: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg"
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
});
it("Should return primary label text", async () => {
// Act
const wrapper = shallowMount(listCard, {

18
src/ux-components/list-card/list-card.vue
View file

@ -2,7 +2,7 @@
<!-- Heavily documented below -->
<div class="col">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
<img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
<p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@ -48,21 +48,9 @@ export default {
},
setup(props) {
const { groupName, value } = toRefs(props);
const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
if (props.isMultiSelect) {
return "checkbox";
} else if (props.isRadio) {
return "radio";
} else if (props.isMultiSelectHorizontal) {
return "checkbox";
} else if (props.isRadioHorizontal) {
return "radio";
}
}
props.isMultiSelect ? "checkbox" : "radio";
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const { checked, handleChange } = useField(groupName, undefined, {
type: inputType(),
type: inputType,
checkedValue: value,
});
return {