Updating tests for new radio buttons and adjustment to margin for year page.
This commit is contained in:
parent
f934e9345e
commit
3ffbf80d9b
4 changed files with 31 additions and 8 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="radio_question">
|
<div class="radio_question">
|
||||||
<div class="needed_car_info mt-4 mb-3 d-flex">
|
<div class="needed_car_info mt-4 mb-2 d-flex">
|
||||||
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
|
<span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
|
||||||
questionText
|
questionText
|
||||||
}}</span>
|
}}</span>
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export default {
|
||||||
|
|
||||||
.car_list {
|
.car_list {
|
||||||
// Height will be determined by overall height of content above list
|
// Height will be determined by overall height of content above list
|
||||||
height: calc(100% - 260px);
|
height: calc(100% - 255px);
|
||||||
width: calc(100% - 1rem);
|
width: calc(100% - 1rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,21 +2,46 @@ import { shallowMount } from "@vue/test-utils";
|
||||||
import radio from "./radio";
|
import radio from "./radio";
|
||||||
|
|
||||||
describe("radio.vue", () => {
|
describe("radio.vue", () => {
|
||||||
it("Should render the 'radioID' prop value as a span value for the radio button label.", () => {
|
it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
|
||||||
// Act
|
// Act
|
||||||
const wrapper = shallowMount(radio, {
|
const wrapper = shallowMount(radio, {
|
||||||
propsData: {
|
propsData: {
|
||||||
radioID: "2023",
|
radioID: "2023",
|
||||||
groupName: "TestGroup"
|
groupName: "TestGroup",
|
||||||
|
loaderColor: "blue",
|
||||||
|
loaderPosition: "right",
|
||||||
|
sizeInRem: "1.5",
|
||||||
|
errorMessage: 'null'
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
expect(wrapper.find("input").attributes()).toEqual({
|
const input = wrapper.find("input");
|
||||||
|
const label = wrapper.find("label");
|
||||||
|
const paragraph = wrapper.find("p");
|
||||||
|
|
||||||
|
await label.trigger('click');
|
||||||
|
|
||||||
|
expect(input.attributes()).toEqual({
|
||||||
id: "2023",
|
id: "2023",
|
||||||
type: "radio",
|
type: "radio",
|
||||||
value: "2023",
|
value: "2023",
|
||||||
name: "TestGroup",
|
name: "TestGroup",
|
||||||
})
|
});
|
||||||
|
|
||||||
|
expect(label.attributes()).toEqual({
|
||||||
|
role: "radio",
|
||||||
|
tabindex: "0",
|
||||||
|
for: "2023",
|
||||||
|
class: "d-flex align-items-center justify-content-between p-2",
|
||||||
|
"aria-checked": "false"
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(label.text()).toEqual('2023');
|
||||||
|
|
||||||
|
expect(paragraph.text()).toEqual('null');
|
||||||
|
|
||||||
|
expect(wrapper.vm.display).toBe(true);
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -25,13 +25,11 @@ export default {
|
||||||
name: "radioList",
|
name: "radioList",
|
||||||
props: [
|
props: [
|
||||||
"groupName",
|
"groupName",
|
||||||
"ariaLabelBy",
|
|
||||||
"radioID",
|
"radioID",
|
||||||
"errorMessage",
|
"errorMessage",
|
||||||
"loaderColor",
|
"loaderColor",
|
||||||
"loaderPosition",
|
"loaderPosition",
|
||||||
"sizeInRem"
|
"sizeInRem"
|
||||||
|
|
||||||
],
|
],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue