diff --git a/packages/core/forms/sandbox/model.json b/packages/core/forms/sandbox/model.json index fdbaa2c16c..a744412d7b 100644 --- a/packages/core/forms/sandbox/model.json +++ b/packages/core/forms/sandbox/model.json @@ -1,10 +1,7 @@ { "service-id": null, "name": null, - "protocols": [ - "http", - "https" - ], + "protocols": "http,https", "snis": null, "hosts": null, "sources": null, diff --git a/packages/core/forms/src/components/fields/FieldRadio.vue b/packages/core/forms/src/components/fields/FieldRadio.vue index 7afc8baccd..552bab2e01 100644 --- a/packages/core/forms/src/components/fields/FieldRadio.vue +++ b/packages/core/forms/src/components/fields/FieldRadio.vue @@ -6,7 +6,9 @@ :key="option.value" v-model="inputValue" :label="option.name" + :label-attributes="{ info: schema.help }" :name="schema.name" + :required="schema.required || undefined" :selected-value="option.value" @change="onChange" /> diff --git a/packages/core/forms/src/components/fields/FieldSwitch.vue b/packages/core/forms/src/components/fields/FieldSwitch.vue index fc45af3200..478eab1ef3 100644 --- a/packages/core/forms/src/components/fields/FieldSwitch.vue +++ b/packages/core/forms/src/components/fields/FieldSwitch.vue @@ -7,7 +7,9 @@ :class="schema.fieldClasses" :disabled="disabled || undefined" :label="inputValue ? schema.textOn || t('vfg.labels.on') : schema.textOff || t('vfg.labels.off')" + :label-attributes="{ info: schema.help }" :name="schema.inputName" + :required="schema.required || undefined" /> diff --git a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts index 5fc52bab72..c2fc614434 100644 --- a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts +++ b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts @@ -39,9 +39,9 @@ describe(' - FieldInput', () => { // check required state if (schema.fields[0].required) { - cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist') + cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist') } else { - cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist') + cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist') } // check help text diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts index 2c390a9e3b..56e6460b14 100644 --- a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts +++ b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts @@ -12,6 +12,7 @@ describe(' - FieldSwitch', () => { id: fieldKey, inputType: 'text', label: fieldLabel, + required: true, }], } @@ -34,6 +35,19 @@ describe(' - FieldSwitch', () => { // check VFG label is set correctly cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible') cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel) + + // check required state + if (schema.fields[0].required) { + cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist') + } else { + cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist') + } + + // check help text + if (schema.fields[0].help) { + cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible') + cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help) + } }) it('renders default state correctly - with model', () => {