Skip to content

Commit 5d64a65

Browse files
TomSmith27TomSmithjacobmllr95
authored
fix(b-form-radio-group) make sure to pass state to form radio options for contextual feedback (closes bootstrap-vue#6357) (bootstrap-vue#6366)
* fix(b-form-radio-group) make sure to pass state to form radio options for contextual feedback * Update form-radio.js * Update form-radio-check-group.js * Update form-radio-group.spec.js * Update form-checkbox-group.spec.js * Update form-radio-group.spec.js Co-authored-by: TomSmith <tom.smith@3squared.com> Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent 1e6b369 commit 5d64a65

File tree

4 files changed

+112
-23
lines changed

4 files changed

+112
-23
lines changed

‎src/components/form-checkbox/form-checkbox-group.spec.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,60 @@ describe('form-checkbox-group', () => {
184184
wrapper.destroy()
185185
})
186186

187+
it('has checkboxes with input validation class "is-valid" when `state` is `true`', async () => {
188+
const wrapper = mount(BFormCheckboxGroup, {
189+
attachTo: createContainer(),
190+
propsData: {
191+
options: ['one', 'two', 'three'],
192+
checked: '',
193+
state: true
194+
}
195+
})
196+
197+
const $checkboxes = wrapper.findAll('input[type=checkbox]')
198+
expect($checkboxes.length).toBe(3)
199+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(true)
200+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
201+
202+
wrapper.destroy()
203+
})
204+
205+
it('has checkboxes with input validation class "is-invalid" when `state` is `false`', async () => {
206+
const wrapper = mount(BFormCheckboxGroup, {
207+
attachTo: createContainer(),
208+
propsData: {
209+
options: ['one', 'two', 'three'],
210+
checked: '',
211+
state: false
212+
}
213+
})
214+
215+
const $checkboxes = wrapper.findAll('input[type=checkbox]')
216+
expect($checkboxes.length).toBe(3)
217+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
218+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(true)
219+
220+
wrapper.destroy()
221+
})
222+
223+
it('has checkboxes with no input validation class when `state` is `null`', async () => {
224+
const wrapper = mount(BFormCheckboxGroup, {
225+
attachTo: createContainer(),
226+
propsData: {
227+
options: ['one', 'two', 'three'],
228+
checked: '',
229+
state: null
230+
}
231+
})
232+
233+
const $checkboxes = wrapper.findAll('input[type=checkbox]')
234+
expect($checkboxes.length).toBe(3)
235+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
236+
expect($checkboxes.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
237+
238+
wrapper.destroy()
239+
})
240+
187241
// --- Button mode structure ---
188242

189243
it('button mode has classes button-group and button-group-toggle', async () => {

‎src/components/form-radio/form-radio-group.spec.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,60 @@ describe('form-radio-group', () => {
167167
wrapper.destroy()
168168
})
169169

170+
it('has radios with input validation class "is-valid" when `state` is `true`', async () => {
171+
const wrapper = mount(BFormRadioGroup, {
172+
attachTo: createContainer(),
173+
propsData: {
174+
options: ['one', 'two', 'three'],
175+
checked: '',
176+
state: true
177+
}
178+
})
179+
180+
const $radios = wrapper.findAll('input[type=radio]')
181+
expect($radios.length).toBe(3)
182+
expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(true)
183+
expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
184+
185+
wrapper.destroy()
186+
})
187+
188+
it('has radios with input validation class "is-invalid" when `state` is `false`', async () => {
189+
const wrapper = mount(BFormRadioGroup, {
190+
attachTo: createContainer(),
191+
propsData: {
192+
options: ['one', 'two', 'three'],
193+
checked: '',
194+
state: false
195+
}
196+
})
197+
198+
const $radios = wrapper.findAll('input[type=radio]')
199+
expect($radios.length).toBe(3)
200+
expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
201+
expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(true)
202+
203+
wrapper.destroy()
204+
})
205+
206+
it('has radios with no input validation class when `state` is `null`', async () => {
207+
const wrapper = mount(BFormRadioGroup, {
208+
attachTo: createContainer(),
209+
propsData: {
210+
options: ['one', 'two', 'three'],
211+
checked: '',
212+
state: null
213+
}
214+
})
215+
216+
const $radios = wrapper.findAll('input[type=radio]')
217+
expect($radios.length).toBe(3)
218+
expect($radios.wrappers.every(c => c.classes().includes('is-valid'))).toBe(false)
219+
expect($radios.wrappers.every(c => c.classes().includes('is-invalid'))).toBe(false)
220+
221+
wrapper.destroy()
222+
})
223+
170224
// --- Button mode structure ---
171225

172226
it('button mode has classes button-group and button-group-toggle', async () => {

‎src/components/form-radio/form-radio.js

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
11
import { Vue } from '../../vue'
22
import { NAME_FORM_RADIO } from '../../constants/components'
33
import { looseEqual } from '../../utils/loose-equal'
4-
import { sortKeys } from '../../utils/object'
54
import { makePropsConfigurable } from '../../utils/props'
6-
import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
75
import {
86
MODEL_EVENT_NAME,
97
formRadioCheckMixin,
108
props as formRadioCheckProps
119
} from '../../mixins/form-radio-check'
12-
import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
13-
import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
14-
import { idMixin, props as idProps } from '../../mixins/id'
1510

1611
// --- Props ---
1712

18-
export const props = makePropsConfigurable(
19-
sortKeys({
20-
...idProps,
21-
...formControlProps,
22-
...formRadioCheckProps,
23-
...formSizeProps,
24-
...formStateProps
25-
}),
26-
NAME_FORM_RADIO
27-
)
13+
export const props = makePropsConfigurable(formRadioCheckProps, NAME_FORM_RADIO)
2814

2915
// --- Main component ---
3016

3117
// @vue/component
3218
export const BFormRadio = /*#__PURE__*/ Vue.extend({
3319
name: NAME_FORM_RADIO,
34-
mixins: [
35-
idMixin,
36-
formRadioCheckMixin, // Includes shared render function
37-
formControlMixin,
38-
formSizeMixin,
39-
formStateMixin
40-
],
20+
mixins: [formRadioCheckMixin],
4121
inject: {
4222
bvGroup: {
4323
from: 'bvRadioGroup',

‎src/mixins/form-radio-check-group.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@ export const formRadioCheckGroupMixin = Vue.extend({
132132
// We don't need to include these, since the input's will know they are inside here
133133
// form: this.form || null,
134134
// name: this.groupName,
135-
// required: Boolean(this.name && this.required)
135+
// required: Boolean(this.name && this.required),
136+
// state: this.state
136137
},
137138
attrs,
138139
key

0 commit comments

Comments
 (0)