Skip to content

Commit

Permalink
Merge pull request #35 from reside-ic/RESIDE-248
Browse files Browse the repository at this point in the history
RESIDE-248 Bind inputs to labels in dynamic forms
  • Loading branch information
LekanAnni authored Jan 19, 2022

Verified

This commit was signed with the committer’s verified signature.
DeckerSU DeckerSU
2 parents f45ac80 + e7dbd25 commit 0c537c7
Showing 12 changed files with 88 additions and 10 deletions.
2 changes: 1 addition & 1 deletion dist/js/index.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/vue-dynamic-form.min.js

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion src/DynamicFormControl.vue
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
<span v-if="formControl.required && !readonly" class="small" :class="{'text-danger': valueIsEmpty(formControl.value)}">({{requiredText}})</span>
</label>
<component :is="dynamicComponent"
:group-label="groupLabel"
v-model="formControlLocal"
:select-text="selectText"></component>
</b-col>
@@ -36,6 +37,7 @@
requiredText?: string
selectText?: string,
readonly?: boolean
groupLabel: string
}
export default FormsMixin.extend<{}, unknown, Computed, Props>({
@@ -49,7 +51,8 @@
colWidth: String,
requiredText: String,
selectText: String,
readonly: Boolean
readonly: Boolean,
groupLabel: String
},
computed: {
formControlLocal: {
3 changes: 2 additions & 1 deletion src/DynamicFormControlGroup.vue
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@
</label>
<dynamic-form-control v-for="(control, index) in controlGroup.controls"
:key="control.name"
:group-label="controlGroup.label"
:form-control="control"
:readonly="readonly"
@mousedown.native="confirm"
@@ -99,4 +100,4 @@
}
});
</script>
</script>
5 changes: 4 additions & 1 deletion src/DynamicFormMultiSelect.vue
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
<div>
<tree-select :multiple="true"
:clearable="false"
:aria-label="formControl.label ? formControl.label : groupLabel"
v-model="value"
:options="formControl.options"
:placeholder="selectText"></tree-select>
@@ -17,6 +18,7 @@
interface Props {
formControl: MultiSelectControl
selectText?: string
groupLabel: string
}
interface Computed {
@@ -33,7 +35,8 @@
formControl: {
type: Object
},
selectText: String
selectText: String,
groupLabel: String
},
computed: {
value: {
5 changes: 4 additions & 1 deletion src/DynamicFormNumberInput.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<b-form-input :name="formControl.name"
:aria-label="formControl.label ? formControl.label : groupLabel"
type="number"
:number="true"
v-model="value"
@@ -15,6 +16,7 @@
interface Props {
formControl: NumberControl
groupLabel: string
}
interface Computed {
@@ -30,7 +32,8 @@
props: {
formControl: {
type: Object
}
},
groupLabel: String
},
computed: {
value: {
5 changes: 4 additions & 1 deletion src/DynamicFormSelect.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<select class="form-control"
:aria-label="formControl.label ? formControl.label : groupLabel"
v-model="value"
:name="formControl.name"
:required="formControl.required">
@@ -20,6 +21,7 @@
interface Props {
formControl: SelectControl
selectText?: string
groupLabel: string
}
interface Computed {
@@ -32,7 +34,8 @@
formControl: {
type: Object
},
selectText: String
selectText: String,
groupLabel: String
},
model: {
prop: "formControl",
6 changes: 5 additions & 1 deletion test/dynamicFormControl.test.ts
Original file line number Diff line number Diff line change
@@ -40,7 +40,8 @@ describe('Dynamic form control component', function () {
formControl: formControl,
requiredText: 'compulsory',
selectText: 'Select',
readonly
readonly,
groupLabel: 'test'
}
});
};
@@ -95,6 +96,7 @@ describe('Dynamic form control component', function () {
const control = {...fakeNumber};
const rendered = getWrapper(control, mount);
expect(rendered.findAll(DynamicFormNumberInput).length).toBe(1);
expect(rendered.findAll(DynamicFormNumberInput).at(0).props("groupLabel")).toBe("test");
rendered.find("input").setValue(123);
expect(rendered.emitted("change")[0][0]).toStrictEqual({...control, value: 123})
});
@@ -104,6 +106,7 @@ describe('Dynamic form control component', function () {
const rendered = getWrapper(control, mount);
expect(rendered.findAll(DynamicFormSelect).length).toBe(1);
expect(rendered.findAll(DynamicFormSelect).at(0).props("selectText")).toBe("Select");
expect(rendered.findAll(DynamicFormSelect).at(0).props("groupLabel")).toBe("test");
rendered.find("select").trigger("change");
expect(rendered.emitted("change")[0][0]).toStrictEqual({...fakeSelect, value: ""});
});
@@ -112,6 +115,7 @@ describe('Dynamic form control component', function () {
const rendered = getWrapper(fakeMultiSelect, mount);
expect(rendered.findAll(DynamicFormMultiSelect).length).toBe(1);
expect(rendered.findAll(DynamicFormMultiSelect).at(0).props("selectText")).toBe("Select");
expect(rendered.findAll(DynamicFormMultiSelect).at(0).props("groupLabel")).toBe("test");
rendered.find(DynamicFormMultiSelect).find(TreeSelect).vm.$emit("input", "opt1");
expect(rendered.emitted("change")[0][0]).toStrictEqual({...fakeMultiSelect, value: "opt1"})
});
3 changes: 2 additions & 1 deletion test/dynamicFormControlGroup.test.ts
Original file line number Diff line number Diff line change
@@ -130,6 +130,7 @@ describe('Dynamic form control group component', function () {
expect(rendered.findAll(DynamicFormControl).at(0).props("selectText")).toBe("Select");
expect(rendered.findAll(DynamicFormControl).at(0).props("requiredText")).toBe("compulsory");
expect(rendered.findAll(DynamicFormControl).at(0).props("readonly")).toBe(true);
expect(rendered.findAll(DynamicFormControl).at(0).props("groupLabel")).toBe("Test 1");
});

it("emits change event when a control changes", () => {
@@ -198,4 +199,4 @@ describe('Dynamic form control group component', function () {
expect(rendered.emitted().confirm.length).toBe(1);
});

});
});
22 changes: 21 additions & 1 deletion test/dynamicFormMultiSelect.test.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {shallowMount} from "@vue/test-utils";
import {shallowMount, mount} from "@vue/test-utils";
import {SelectControl} from "../src/types";
import TreeSelect from "@riophae/vue-treeselect";
import DynamicFormMultiSelect from "../src/DynamicFormMultiSelect.vue";
@@ -63,4 +63,24 @@ describe('Dynamic form multi-select component', function () {
expect((rendered.find("[name=id_1]").element as HTMLInputElement).value).toBe("opt2");
});

it("renders aria-label as groupLabel if no label given", () => {
const rendered = mount(DynamicFormMultiSelect, {
propsData: {
formControl: fakeSelect,
groupLabel: "groupLabel"
}
});
expect(rendered.find(".vue-treeselect").attributes("aria-label")).toBe("groupLabel");
});

it("renders aria-label as control label if label given", () => {
const rendered = mount(DynamicFormMultiSelect, {
propsData: {
formControl: {...fakeSelect, label: "controlLabel"},
groupLabel: "groupLabel"
}
});
expect(rendered.find(".vue-treeselect").attributes("aria-label")).toBe("controlLabel");
});

});
20 changes: 20 additions & 0 deletions test/dynamicFormNumberInput.test.ts
Original file line number Diff line number Diff line change
@@ -50,6 +50,26 @@ describe('Dynamic form number input component', function () {
expect(inputElement.value).toBe("");
});

it("renders aria-label as groupLabel if no label given", () => {
const rendered = mount(DynamicFormNumberInput, {
propsData: {
formControl: fakeNumber,
groupLabel: "groupLabel"
}
});
expect(rendered.find("input").attributes("aria-label")).toBe("groupLabel");
});

it("renders aria-label as control label if label given", () => {
const rendered = mount(DynamicFormNumberInput, {
propsData: {
formControl: {...fakeNumber, label: "controlLabel"},
groupLabel: "groupLabel"
}
});
expect(rendered.find("input").attributes("aria-label")).toBe("controlLabel");
});

it("is required if formControl.required is true", () => {
const rendered = mount(DynamicFormNumberInput, {
propsData: {
20 changes: 20 additions & 0 deletions test/dynamicFormSelect.test.ts
Original file line number Diff line number Diff line change
@@ -99,4 +99,24 @@ describe('Dynamic form select component', function () {
expect((select.element as HTMLSelectElement).required).toBe(false);
});

it("renders aria-label as groupLabel if no label given", () => {
const rendered = mount(DynamicFormSelect, {
propsData: {
formControl: fakeSelect,
groupLabel: "groupLabel"
}
});
expect(rendered.find("select").attributes("aria-label")).toBe("groupLabel");
});

it("renders aria-label as control label if label given", () => {
const rendered = mount(DynamicFormSelect, {
propsData: {
formControl: {...fakeSelect, label: "controlLabel"},
groupLabel: "groupLabel"
}
});
expect(rendered.find("select").attributes("aria-label")).toBe("controlLabel");
});

});

0 comments on commit 0c537c7

Please sign in to comment.