diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml index e8ccbbc826..699201714a 100644 --- a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml +++ b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/checkboxgroup/.content.xml @@ -3,5 +3,5 @@ jcr:primaryType="cq:Component" jcr:title="Adaptive Form CheckBox Group" jcr:description="Add checkboxes to select one or more of the available options." - sling:resourceSuperType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" + sling:resourceSuperType="core/fd/components/form/checkboxgroup/v2/checkboxgroup" componentGroup="Core Components Examples - Adaptive Form"/> diff --git a/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/.content.xml b/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/.content.xml new file mode 100644 index 0000000000..27ceb8ec10 --- /dev/null +++ b/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/.content.xml @@ -0,0 +1,22 @@ + + + diff --git a/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/customfooterlibs.html b/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/customfooterlibs.html new file mode 100644 index 0000000000..2d858eeed2 --- /dev/null +++ b/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/page-dynamicoptionsv1/customfooterlibs.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml new file mode 100755 index 0000000000..de0e81ebaf --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml @@ -0,0 +1,6 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/basic/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml similarity index 82% rename from it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/basic/.content.xml rename to it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml index 5f2376f365..5c5fbd3bd4 100755 --- a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/basic/.content.xml +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml @@ -1,8 +1,8 @@ - + title="basic"/> diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml new file mode 100755 index 0000000000..de0e81ebaf --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml @@ -0,0 +1,6 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml new file mode 100755 index 0000000000..5c5fbd3bd4 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml @@ -0,0 +1,21 @@ + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml new file mode 100755 index 0000000000..aecaaab4b2 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml @@ -0,0 +1,23 @@ + + + + + + \ No newline at end of file diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/dynamicenumenumnames/dynamicoptionsv2/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/dynamicenumenumnames/dynamicoptionsv2/.content.xml new file mode 100644 index 0000000000..f526f99e84 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/dynamicenumenumnames/dynamicoptionsv2/.content.xml @@ -0,0 +1,23 @@ + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/af2-form-translation/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/af2-form-translation/.content.xml index e4df0943fb..dab11d370f 100755 --- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/af2-form-translation/.content.xml +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/af2-form-translation/.content.xml @@ -44,7 +44,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="Check Box Group" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enum="[0,1]" enumNames="[Item 1, Item 2]" fieldType="checkbox-group" @@ -224,7 +224,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="<p><b>Select Animal</b></p>" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" areOptionsRichText="true" enabled="{Boolean}true" enum="[0,1]" diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml new file mode 100755 index 0000000000..8f415a05ec --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/.content.xml @@ -0,0 +1,5 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml similarity index 98% rename from it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/basic/.content.xml rename to it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml index 2b87557fc7..df0addbc5f 100755 --- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/basic/.content.xml +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic/.content.xml @@ -63,7 +63,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="Check Box Group 3" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[0,1]" enumNames="[Item 1, Item 2]" @@ -118,7 +118,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="Check Box Group 5" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[0,1]" enumNames="[Item 1, Item 2]" @@ -141,7 +141,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="Check Box Group 6" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[0,1,0]" enumNames="[Item 1, Item 2,Item 3]" @@ -160,7 +160,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="<p><b>Select Animal</b></p>" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" areOptionsRichText="true" enabled="{Boolean}true" enum="[0,1]" diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/.content.xml new file mode 100644 index 0000000000..2c26fbd49b --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest/.content.xml @@ -0,0 +1,57 @@ + + + + + + + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml new file mode 100755 index 0000000000..8f415a05ec --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/.content.xml @@ -0,0 +1,5 @@ + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml new file mode 100755 index 0000000000..f1535245f1 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic/.content.xml @@ -0,0 +1,196 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/focustest/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest/.content.xml similarity index 100% rename from it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/focustest/.content.xml rename to it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest/.content.xml diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkbox/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkbox/.content.xml index fa12cfbd69..20d376016d 100755 --- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkbox/.content.xml +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkbox/.content.xml @@ -33,7 +33,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="checkbox with no options" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" fieldType="checkbox-group" hideTitle="false" @@ -109,7 +109,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="len(current options) = len(enums/enumNames)" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[1,2,3]" enumNames="[country1,country2,country3]" @@ -187,7 +187,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="len(current options) < len(enums/enumNames)" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[1,2]" enumNames="[country1,country2]" @@ -265,7 +265,7 @@ jcr:lastModifiedBy="admin" jcr:primaryType="nt:unstructured" jcr:title="len(current options) > len(enums/enumNames)" - sling:resourceType="forms-components-examples/components/form/checkboxgroup" + sling:resourceType="core/fd/components/form/checkboxgroup/v1/checkboxgroup" enabled="{Boolean}true" enum="[1,2,3,4]" enumNames="[country1,country2,country3,country4]" diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml new file mode 100755 index 0000000000..d37671f337 --- /dev/null +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/customfunctions/populate-checkboxv2/.content.xml @@ -0,0 +1,360 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/dynamicenumenumnames/dynamicoptions/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/dynamicenumenumnames/dynamicoptions/.content.xml index b664212d88..52d4324ab3 100755 --- a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/dynamicenumenumnames/dynamicoptions/.content.xml +++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/dynamicenumenumnames/dynamicoptions/.content.xml @@ -11,7 +11,7 @@ jcr:primaryType="cq:PageContent" jcr:title="dynamicOptions" sling:configRef="/conf/forms/core-components-it/samples/dynamicenumenumnames/dynamicoptions" - sling:resourceType="core/fd/components/page/v2/page"> + sling:resourceType="forms-core-components-it/components/page-dynamicoptionsv1"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all-xfa/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all-xfa/.content.xml index 2811d2b483..34e36d5911 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all-xfa/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all-xfa/.content.xml @@ -5,4 +5,4 @@ cssProcessor="[default:none,min:none]" jsProcessor="[default:none,min:none]" categories="[core.forms.components.runtime.all.xfa]" - embed="[core.forms.components.runtime.base.xfa,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v2.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v3.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime]"/> + embed="[core.forms.components.runtime.base.xfa,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v2.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v2.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v3.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime]"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml index d69f17261b..19acdf17de 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml @@ -5,4 +5,4 @@ cssProcessor="[default:none,min:none]" jsProcessor="[default:none,min:none]" categories="[core.forms.components.runtime.all]" - embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v2.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v4.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime,core.forms.components.scribble.v1.runtime,core.forms.components.datetime.v1.runtime]"/> + embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v2.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v2.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v4.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.hcaptcha.v1.runtime,core.forms.components.review.v1.runtime, core.forms.components.turnstile.v1.runtime,core.forms.components.scribble.v1.runtime,core.forms.components.datetime.v1.runtime]"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/.content.xml new file mode 100644 index 0000000000..5e25fbe65e --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/.content.xml @@ -0,0 +1,4 @@ + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/.content.xml new file mode 100644 index 0000000000..a52f6f2f99 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/.content.xml @@ -0,0 +1,8 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.html new file mode 100644 index 0000000000..d4c690a2fc --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.js new file mode 100644 index 0000000000..659d1e2d96 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/checkboxgroup.js @@ -0,0 +1,35 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ Copyright 2025 Adobe + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + + use(function () { + + var clientlibsArr = ['core.forms.components.base.v1.editor']; + var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html'; + var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html"; + var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html"; + var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html" + var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html"; + var legendPath = "core/fd/components/af-commons/v1/fieldTemplates/legend.html" + return { + labelPath: labelPath, + shortDescriptionPath: shortDescriptionPath, + longDescriptionPath: longDescriptionPath, + questionMarkPath: questionMarkPath, + errorMessagePath: errorMessagePath, + legendPath: legendPath, + clientlibs: clientlibsArr + } + }); \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/.content.xml new file mode 100644 index 0000000000..491392d539 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/.content.xml @@ -0,0 +1,3 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/.content.xml new file mode 100644 index 0000000000..3509e665e5 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/.content.xml @@ -0,0 +1,6 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js.txt new file mode 100644 index 0000000000..31f64068cd --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js.txt @@ -0,0 +1,18 @@ +############################################################################### +# Copyright 2022 Adobe +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +############################################################################### + +#base=js +checkboxgroupview.js diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js/checkboxgroupview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js/checkboxgroupview.js new file mode 100644 index 0000000000..b30244639a --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/clientlibs/site/js/checkboxgroupview.js @@ -0,0 +1,232 @@ +/******************************************************************************* + * Copyright 2022 Adobe + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ******************************************************************************/ +(function() { + + + "use strict"; + class CheckBoxGroup extends FormView.FormOptionFieldBase { + + static NS = FormView.Constants.NS; + /** + * Each FormField has a data attribute class that is prefixed along with the global namespace to + * distinguish between them. If a component wants to put a data-attribute X, the attribute in HTML would be + * data-{NS}-{IS}-x="" + * @type {string} + */ + static IS = "adaptiveFormCheckBoxGroup"; + static bemBlock = 'cmp-adaptiveform-checkboxgroup' + static checkboxBemBlock = 'cmp-adaptiveform-checkbox' + static selectors = { + self: "[data-" + this.NS + '-is="' + this.IS + '"]', + widgets: `.${CheckBoxGroup.bemBlock}__widget`, + widget: `.${CheckBoxGroup.bemBlock}__option__widget`, + widgetLabel: `.${CheckBoxGroup.bemBlock}__label`, + label: `.${CheckBoxGroup.bemBlock}__label`, + description: `.${CheckBoxGroup.bemBlock}__longdescription`, + qm: `.${CheckBoxGroup.bemBlock}__questionmark`, + errorDiv: `.${CheckBoxGroup.bemBlock}__errormessage`, + tooltipDiv: `.${CheckBoxGroup.bemBlock}__shortdescription`, + item: `.${CheckBoxGroup.bemBlock}-item`, + optionLabel: `${CheckBoxGroup.bemBlock}__option-label`, + optionLink: `${CheckBoxGroup.bemBlock}__links` + }; + + constructor(params) { + super(params); + this.qm = this.element.querySelector(CheckBoxGroup.selectors.qm) + this.widgetLabel = this.element.querySelector(CheckBoxGroup.selectors.widgetLabel) + } + + getWidgets() { + return this.element.querySelector(CheckBoxGroup.selectors.widgets); + } + + getWidget() { + return this.element.querySelectorAll(CheckBoxGroup.selectors.widget); + } + + getDescription() { + return this.element.querySelector(CheckBoxGroup.selectors.description); + } + + getLabel() { + return this.element.querySelector(CheckBoxGroup.selectors.label); + } + + getErrorDiv() { + return this.element.querySelector(CheckBoxGroup.selectors.errorDiv); + } + + getQuestionMarkDiv() { + return this.element.querySelector(CheckBoxGroup.selectors.qm); + } + + getTooltipDiv() { + return this.element.querySelector(CheckBoxGroup.selectors.tooltipDiv); + } + + getOptions() { + return this.element.querySelectorAll(CheckBoxGroup.selectors.item); + } + + #addWidgetListeners(optionWidget) { + optionWidget.addEventListener('change', (e) => { + this.#updateModelValue(optionWidget); + }); + optionWidget.addEventListener('focus', (e) => { + this.setActive(); + }); + optionWidget.addEventListener('blur', (e) => { + this.setInactive(); + }); + } + + setModel(model) { + super.setModel(model); + this.widget.forEach(optionWidget => { + this.#addWidgetListeners(optionWidget); + }); + let optionLinks = this.element.querySelectorAll(`.${CheckBoxGroup.selectors.optionLink}`); + const actionKeys = ['Enter', ' ', 'Spacebar', 'Space']; + optionLinks.forEach(optionLink => { + optionLink.addEventListener('keydown', (e)=>{ + if(actionKeys.includes(e.key)) { + optionLink.click(); + } + }); + }); + this.#updateModelValue(); + } + + #updateModelValue() { + let value = []; + this.widget.forEach(widget => { + if (widget.checked) { + value.push(widget.value) + } + }, this); + if (value.length !== 0 || this._model.value != null) { + this.setModelValue(value) + } + } + + updateValidity(validity) { + if(validity.valid === undefined) { + this.element.removeAttribute(FormView.Constants.DATA_ATTRIBUTE_VALID); + this.widget.forEach(widget => widget.removeAttribute(FormView.Constants.ARIA_INVALID)); + } else { + this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_VALID, validity.valid); + this.widget.forEach(widget => widget.setAttribute(FormView.Constants.ARIA_INVALID, !validity.valid)); + } + } + + updateValue(modelValue) { + modelValue = [].concat(modelValue); + let selectedWidgetValues = modelValue.map(String); + this.widget.forEach(widget => { + if (selectedWidgetValues.includes((widget.value))) { + widget.checked = true + widget.setAttribute(FormView.Constants.HTML_ATTRS.CHECKED, FormView.Constants.HTML_ATTRS.CHECKED); + } else { + widget.checked = false + widget.removeAttribute(FormView.Constants.HTML_ATTRS.CHECKED); + } + }, this) + super.updateEmptyStatus(); + } + + #createCheckBoxItem(value, itemLabel) { + // This doesn't cater for optionLink __links as toggelablelink component is hidden + let richScreenReaderText = `${this._model.label.value}: ${itemLabel}`; + let plainScreenReaderText = window.DOMPurify ? window.DOMPurify.sanitize(richScreenReaderText, { ALLOWED_TAGS: [] }) : richScreenReaderText; + const optionTemplate = ` + + + + ${itemLabel} + + `; + + const container = document.createElement('div'); // Create a container element to hold the template + container.innerHTML = optionTemplate; + let addedOptionWidget = container.querySelector(CheckBoxGroup.selectors.widget); + if(this._model.readOnly === true || this._model.enabled === false) { + addedOptionWidget.setAttribute("disabled", true); + if(this._model.readOnly === true) { + addedOptionWidget.setAttribute("aria-readonly", true); + } + } + this.#addWidgetListeners(addedOptionWidget); + return container.firstElementChild; // Return the first child, which is the created option + } + updateEnum(newEnums) { + super.updateEnumForRadioButtonAndCheckbox(newEnums, this.#createCheckBoxItem); + // refresh the widget references, to dynamically added options + this.widget = this.getWidget(); + } + + updateEnumNames(newEnumNames) { + super.updateEnumNamesForRadioButtonAndCheckbox(newEnumNames, this.#createCheckBoxItem); + // refresh the widget references, to dynamically added options + this.widget = this.getWidget(); + } + + updateEnabled(enabled, state) { + this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled); + let widgets = this.widget; + widgets.forEach(widget => { + if (enabled === false) { + if(state.readOnly === false){ + widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled"); + } + } else if (state.readOnly === false) { + widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED); + } + }); + } + + updateReadOnly(readonly) { + let widgets = this.widget; + this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_READONLY, readonly); + widgets.forEach(widget => { + if (readonly === true) { + widget.setAttribute(FormView.Constants.HTML_ATTRS.DISABLED, "disabled"); + widget.setAttribute("aria-readonly", true); + } else { + widget.removeAttribute(FormView.Constants.HTML_ATTRS.DISABLED); + widget.removeAttribute("aria-readonly"); + } + }); + } + updateRequired(required, state) { + if (this.widget) { + this.element.toggleAttribute("required", required); + this.element.setAttribute("data-cmp-required", required); + } + } + + syncMarkupWithModel() { + super.syncMarkupWithModel(); + this.updateEnum(this._model.enum); + this.updateEnumNames(this._model.enumNames); + } + } + + FormView.Utils.setupField(({element, formContainer}) => { + return new CheckBoxGroup({element, formContainer}) + }, CheckBoxGroup.selectors.self); + +})(); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/widget.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/widget.html new file mode 100644 index 0000000000..b4346e27c2 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v2/checkboxgroup/widget.html @@ -0,0 +1,35 @@ + + + + + + + + + ${checkboxgroup.enumNames[itemList.index] @ context = 'html'} + + + + + + \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/widget.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/widget.html index efd6bd1ba3..0789d8630d 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/widget.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v2/radiobutton/widget.html @@ -24,7 +24,7 @@ value="${item.toString}" checked="${radiobutton.enums[itemList.index] == radiobutton.default[0]}" disabled="${!radiobutton.enabled || radiobutton.readOnly}" - aria-readonly="${radiobutton.readOnly ? 'true' : ''}"/> + aria-readonly="${radiobutton.readOnly ? 'true' : ''}" tabindex="0"/> ${radiobutton.enumNames[itemList.index] @ context = 'html'} diff --git a/ui.frontend/src/view/FormOptionFieldBase.js b/ui.frontend/src/view/FormOptionFieldBase.js index dea46b3361..6edad7efff 100644 --- a/ui.frontend/src/view/FormOptionFieldBase.js +++ b/ui.frontend/src/view/FormOptionFieldBase.js @@ -126,7 +126,9 @@ class FormOptionFieldBase extends FormFieldBase { span.innerHTML = purifiedValue; let richScreenReaderText = `${this._model.label.value}: ${purifiedValue}`; let plainScreenReaderText = window.DOMPurify ? window.DOMPurify.sanitize(richScreenReaderText, { ALLOWED_TAGS: [] }) : richScreenReaderText; - input.setAttribute("aria-label", plainScreenReaderText); + if (input.hasAttribute("aria-label")) { + input.setAttribute("aria-label", plainScreenReaderText); + } }); } else { [...this.getOptions()].forEach((option, index) => { @@ -136,7 +138,7 @@ class FormOptionFieldBase extends FormFieldBase { if(span) { span.innerHTML = purifiedValue; } - if(input) { + if (input && input.hasAttribute("aria-label")) { let richScreenReaderText = `${this._model.label.value}: ${purifiedValue}`; let plainScreenReaderText = window.DOMPurify ? window.DOMPurify.sanitize(richScreenReaderText, { ALLOWED_TAGS: [] }) : richScreenReaderText; input.setAttribute("aria-label", plainScreenReaderText); diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js index f095eca80c..31e7d1bf0c 100644 --- a/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js +++ b/ui.tests/test-module/specs/checkboxgroup/checkboxgroup.runtime.cy.js @@ -15,7 +15,7 @@ ******************************************************************************/ describe("Form Runtime with CheckBoxGroup Input", () => { - const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/basic.html" + const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/basic.html" const bemBlock = 'cmp-adaptiveform-checkboxgroup' const IS = "adaptiveFormCheckBoxGroup" const selectors = { @@ -253,7 +253,7 @@ describe("Form Runtime with CheckBoxGroup Input", () => { describe("setFocus on checkboxgroup via rules", () => { - const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/focustest.html" + const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv1/focustest.html" let formContainer = null beforeEach(() => { diff --git a/ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js b/ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js new file mode 100644 index 0000000000..fcfb73ed0e --- /dev/null +++ b/ui.tests/test-module/specs/checkboxgroup/checkboxgroupv2.runtime.cy.js @@ -0,0 +1,281 @@ +/******************************************************************************* + * Copyright 2022 Adobe + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ******************************************************************************/ +describe("Form Runtime with CheckBoxGroup Input", () => { + + const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/basic.html" + const bemBlock = 'cmp-adaptiveform-checkboxgroup' + const IS = "adaptiveFormCheckBoxGroup" + const selectors = { + checkboxgroup : `[data-cmp-is="${IS}"]` + } + + let formContainer = null + + beforeEach(() => { + cy.previewForm(pagePath).then(p => { + formContainer = p; + }) + }); + + const checkHTML = (id, state) => { + const visible = state.visible; + const passVisibleCheck = `${visible === true ? "" : "not."}be.visible`; + const passDisabledAttributeCheck = `${state.enabled === false || state.readOnly === true ? "" : "not."}have.attr`; + const value = state.value + cy.get(`#${id}`) + .should(passVisibleCheck) + .invoke('attr', 'data-cmp-visible') + .should('eq', visible.toString()); + cy.get(`#${id}`) + .invoke('attr', 'data-cmp-enabled') + .should('eq', state.enabled.toString()); + return cy.get(`#${id}`).within((root) => { + cy.get('*').should(passVisibleCheck) + cy.get('input') + .should('have.length', 4) + cy.get('input') + .should(passDisabledAttributeCheck, 'disabled'); + cy.get('input').eq(1).should('be.checked') + }) + } + + it(" should get model and view initialized properly ", () => { + expect(formContainer, "formcontainer is initialized").to.not.be.null; + expect(formContainer._model.items.length, "model and view elements match").to.equal(Object.keys(formContainer._fields).length); + Object.entries(formContainer._fields).forEach(([id, field]) => { + expect(field.getId()).to.equal(id) + expect(formContainer._model.getElement(id), `model and view are in sync`).to.equal(field.getModel()) + }); + }) + + it(" model's changes are reflected in the html ", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[0] + const model = formContainer._model.getElement(id) + const val = Array('1','2') + model.value = '1' + cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.class', 'VERTICAL') + const [id2, fieldView2] = Object.entries(formContainer._fields)[1] + cy.get(`#${id2}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.class', 'HORIZONTAL') + + + checkHTML(model.id, model.getState()).then(() => { + model.visible = false + return checkHTML(model.id, model.getState()) + }).then(() => { + model.enable = false + return checkHTML(model.id, model.getState()) + }) + }); + + it(" html changes are reflected in model ", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1] + const model = formContainer._model.getElement(id) + + cy.log(model.getState().value) + cy.get(`#${id}`).find("input").eq(1).click().then(x => { + cy.log(model.getState().value) + expect(model.getState().value).to.contain('1'); + }) + + cy.get(`#${id}`).find("input").eq(2).click().then(x => { + cy.log(model.getState().value) + expect(model.getState().value).to.contain('2'); + }) + }); + + it(" should show error messages in the HTML ", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[1] + const model = formContainer._model.getElement(id) + + cy.get(`#${id}`).find("input").eq(1).click().then(x => { + cy.log(model.getState().value) + expect(model.getState().value).to.contain('1'); + }) + + cy.get(`#${id}`).find("input").eq(1).click().then(x => { + cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"This is a custom required checkboxgroup") + }) + + cy.get(`#${id}`).find("input").eq(1).click().then(x => { + cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"") + }) + }); + + it("should toggle description and tooltip", () => { + cy.toggleDescriptionTooltip(bemBlock, 'tooltip_scenario_test'); + }) + + it("should show and hide components on certain checkbox input", () => { + // Rule on checkbox2: When checkbox2 has Item 1 AND Item 3 selected => Show checkbox3 and Hide checkBox4 + + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + const [checkBox3, checkBox3FieldView] = Object.entries(formContainer._fields)[2]; + const [checkBox4, checkBox4FieldView] = Object.entries(formContainer._fields)[3]; + + cy.get(`#${checkBox2}`).find("input").check(["0","3"]).then(x => { + cy.get(`#${checkBox3}`).should('be.visible') + cy.get(`#${checkBox4}`).should('not.be.visible') + }) + }) + + it("Checkbox group should not have aria-disabled attribute if enable is false", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[0]; + cy.get(`#${id}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('not.have.attr', 'aria-disabled'); + }) + + it("should enable and disable components on certain checkbox input", () => { + // Rule on checkbox4: When checkbox4 has Item 3 selected => Enable checkbox1 and Disable checkBox2 + + const [checkBox1, checkBox1FieldView] = Object.entries(formContainer._fields)[0]; + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + const [checkBox4, checkBox4FieldView] = Object.entries(formContainer._fields)[3]; + + cy.get(`#${checkBox4}`).find("input").check(["2"]).then(x => { + cy.get(`#${checkBox1}`).find("input").should('be.enabled') + cy.get(`#${checkBox2}`).find("input").should('not.be.enabled') + }) + }) + + it("should show validation error messages based on expression rules", () => { + // Rule on checkBox5: Validate checkBox using Expression: checkBox5 === checkBox3 + + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + const [checkBox3, checkBox3FieldView] = Object.entries(formContainer._fields)[2]; + const [checkBox5, checkBox5FieldView] = Object.entries(formContainer._fields)[4]; + + // Making checkBox3 visible + cy.get(`#${checkBox2}`).find("input").check(["0","3"]) + + cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => { + cy.get(`#${checkBox5}`).find("input").uncheck().check(["1"]) + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"Please enter a valid value.") + cy.get(`#${checkBox5}`).should('have.attr', 'data-cmp-valid', 'false') + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('not.have.attr', 'aria-checked') + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.attr', 'aria-describedby', `${checkBox5}__errormessage`) + }) + + cy.get(`#${checkBox3}`).find("input").uncheck().check(["0"]).blur().then(x => { + cy.get(`#${checkBox5}`).find("input").uncheck().check(["0"]) + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__errormessage").should('have.text',"") + cy.get(`#${checkBox5}`).should('have.attr', 'data-cmp-valid', 'true') + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__option__widget").should('have.attr', 'aria-invalid', 'false'); + cy.get(`#${checkBox5}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('have.attr', 'aria-describedby', ''); + }) + }) + + it("should set and clear value based on rules", () => { + // Rule on checkBox3: When input has Item2 selected, set value of checkBox5 to Item 1 and clear value of checkBox2 + + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + const [checkBox3, checkBox3FieldView] = Object.entries(formContainer._fields)[2]; + const [checkBox5, checkBox5FieldView] = Object.entries(formContainer._fields)[4]; + + // Make checkbox3 visible + cy.get(`#${checkBox2}`).find("input").check(["0", "3"]) + cy.get(`#${checkBox3}`).find("input").check("1").blur().then(x => { + cy.get(`#${checkBox5}`).find("input").should('be.checked') + cy.get(`#${checkBox2}`).find("input").should('not.be.checked') + }) + }) + + it("should update enum values on providing duplicate enums", () => { + + const [checkBox6, checkBox6FieldView] = Object.entries(formContainer._fields)[5]; + cy.get(`#${checkBox6}`).find(".cmp-adaptiveform-checkboxgroup-item").should('have.length', 2); + cy.get(`#${checkBox6}`).find(".cmp-adaptiveform-checkboxgroup__option-label").contains('Item 3'); + cy.get(`#${checkBox6}`).find(".cmp-adaptiveform-checkboxgroup__option-label").contains('Item 2'); + cy.get(`#${checkBox6}`).find(".cmp-adaptiveform-checkboxgroup__option-label").contains('Item 1').should('not.exist'); + + }) + + it("rich text should render correctly", () => { + const [checkBox7, checkBox7FieldView] = Object.entries(formContainer._fields)[6]; + cy.get(`#${checkBox7}`).find(".cmp-adaptiveform-checkboxgroup-item").should('have.length', 2); + cy.get(`#${checkBox7}`).find(".cmp-adaptiveform-checkboxgroup__label").contains('Select Animal').should('have.css', 'font-weight', '700'); + cy.get(`#${checkBox7}`).find(".cmp-adaptiveform-checkboxgroup__option-label span").contains('Dog').should('have.css', 'font-style', 'italic'); + cy.get(`#${checkBox7}`).find(".cmp-adaptiveform-checkboxgroup__option-label span").contains('Cat').should('have.css', 'text-decoration', 'underline solid rgb(50, 50, 50)'); + }); + + it("decoration element should not have same class name", () => { + expect(formContainer, "formcontainer is initialized").to.not.be.null; + cy.wrap().then(() => { + const id = formContainer._model._children[0].id; + cy.get(`#${id}`).parent().should("not.have.class", bemBlock); + }) + + }) + + it(" should add filled/empty class at container div ", () => { + const [id, fieldView] = Object.entries(formContainer._fields)[2] + cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-checkboxgroup--empty'); + cy.get(`#${id}`).invoke('attr', 'data-cmp-required').should('eq', 'false'); + cy.get(`#${id}`).invoke('attr', 'data-cmp-readonly').should('eq', 'false'); + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${checkBox2}`).find("input").check(["0","3"]) + cy.get(`#${id}`).find("input").eq(1).click().then(x => { + cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-checkboxgroup--filled'); + }); + }); + + it("test if required property updated in model is reflected in view", () => { + const [id, checkboxview] = Object.entries(formContainer._fields)[5]; + cy.get(`#${id}`).invoke('attr', 'data-cmp-required').should('eq', 'false').then(() => { + checkboxview._model.required = true; + }) + cy.get(`#${id}`).invoke('attr', 'data-cmp-required').should('eq', 'true'); + }); + + it("reset of checkbox group resulting in invalidation", () => { + expect(formContainer, "formcontainer is initialized").to.not.be.null; + const [resetButton, resetButtonView] = Object.entries(formContainer._fields)[7]; + const [checkBox2, checkBox2FieldView] = Object.entries(formContainer._fields)[1]; + cy.get(`#${checkBox2}`).find("input").check(["0","3"]); + cy.get(`#${checkBox2}`).invoke('attr', 'data-cmp-valid').should('eq', 'true'); + cy.get(`#${resetButton} button`).click().then(() => { + cy.get(`#${checkBox2}`).find("input").should('not.be.checked'); + cy.get(`#${checkBox2}`).invoke('attr', 'data-cmp-valid').should('not.exist'); + }); + }) + + it("checkbox group MUST be wrapped in a and have a legend", () => { + const [checkBox1] = Object.entries(formContainer._fields)[0]; + cy.get(`#${checkBox1}`).then($el => { + expect($el.prop('tagName')).to.eq('FIELDSET'); + }); + cy.get(`#${checkBox1}`).find('legend').should('exist'); + }) +}) + +describe("setFocus on checkboxgroup via rules", () => { + + const pagePath = "content/forms/af/core-components-it/samples/checkboxgroup/checkboxgroupv2/focustest.html" + let formContainer = null + + beforeEach(() => { + cy.previewForm(pagePath).then(p => { + formContainer = p; + }) + }); + + it("should focus on checkbox group when button is clicked", () => { + const [button] = Object.entries(formContainer._fields).filter(it => it[1].getModel()._jsonModel.fieldType==='button')[0]; + const [radioButton] = Object.entries(formContainer._fields).filter(it => it[1].getModel()._jsonModel.fieldType==='checkbox-group')[0]; + cy.get(`#${radioButton}`).find("input").eq(0).should('not.have.focus'); + cy.get(`#${button}-widget`).click().then(() => { + cy.get(`#${radioButton}`).find("input").eq(0).should('have.focus') + }) + }) +}) diff --git a/ui.tests/test-module/specs/customfunctions/checkboxv2.enum.enumName.cy.js b/ui.tests/test-module/specs/customfunctions/checkboxv2.enum.enumName.cy.js new file mode 100644 index 0000000000..a79b0fd9b5 --- /dev/null +++ b/ui.tests/test-module/specs/customfunctions/checkboxv2.enum.enumName.cy.js @@ -0,0 +1,205 @@ +/* + * + * ADOBE CONFIDENTIAL + * ___________________ + * + * Copyright 2023 Adobe Systems Incorporated + * All Rights Reserved. + * + * NOTICE: All information contained herein is, and remains + * the property of Adobe Systems Incorporated and its suppliers, + * if any. The intellectual and technical concepts contained + * herein are proprietary to Adobe Systems Incorporated and its + * suppliers and are protected by trade secret or copyright law. + * Dissemination of this information or reproduction of this material + * is strictly forbidden unless prior written permission is obtained + * from Adobe Systems Incorporated. + */ + +describe('Test UpdateEnum, UpdateEnumName for Checkbox', () => { + const pagePath = "/content/forms/af/core-components-it/samples/customfunctions/populate-checkboxv2.html"; + let formContainer = null; + + let addEnumNameBtn1= '#button-63e4112562-widget', + addEnumBtn1 = '#button-d3f0135b2a-widget', + addBothBtn1 = '#button-b8030d3ba9-widget', + + addEnumNameBtn2 = '#button-a267804deb-widget', + addEnumBtn2 = '#button-dfeea3ad14-widget', + addBothBtn2 = '#button-8fefc34d70-widget', + + addEnumNameBtn3 = '#button-47854ea2ca-widget', + addEnumBtn3 = '#button-db8c627349-widget', + addBothBtn3 = '#button-83abf9e912-widget', + + addEnumNameBtn4 = '#button-a19425d446-widget', + addEnumBtn4 = '#button-c23e50636b-widget', + addBothBtn4 = '#button-59054d2649-widget', + clearBtn = '#button-f7826f3a39-widget'; + + let checkbox1 = '#checkboxgroup-72fdea5dfd-widget', + checkbox2 = '#checkboxgroup-5f607707dc-widget', + checkbox3 = '#checkboxgroup-36e44551e0-widget', + checkbox4 = '#checkboxgroup-146eaab9bf-widget'; + + let enums = ["one", "two", "three"], + enumNames = ["India", "US", "Singapore"]; + + /** + * initialization of form container before every test + * */ + beforeEach(() => { + cy.previewForm(pagePath).then(p => { + formContainer = p; + }) + }); + + describe('Checkbox with no options', () => { + it('add enums', () => { + cy.get(addEnumBtn1).click().then(() => { + cy.get(checkbox1).children().should('have.length', 3); + cy.get(checkbox1).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enums[index]); + }) + }) + }); + + it('add enums Names', () => { + cy.get(addEnumNameBtn1).click().then(() => { + cy.get(checkbox1).children().should('have.length', 3); + cy.get(checkbox1).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enumNames[index]); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + + it('add both', () => { + cy.get(addBothBtn1).click().then(() => { + cy.get(checkbox1).children().should('have.length', 3); + cy.get(checkbox1).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + }); + + describe('length of current options = length of new enums, enumNames', () => { + it('add enums', () => { + cy.get(addEnumBtn2).click().then(() => { + cy.get(checkbox2).children().should('have.length', 3); + cy.get(checkbox2).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(`country${index + 1}`); + }) + }) + }); + + it('add enums Names', () => { + cy.get(addEnumNameBtn2).click().then(() => { + cy.get(checkbox2).children().should('have.length', 3); + cy.get(checkbox2).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(`${index + 1}`); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + + it('add both', () => { + cy.get(addBothBtn2).click().then(() => { + cy.get(checkbox2).children().should('have.length', 3); + cy.get(checkbox2).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + }); + + describe('length of current options < length of new enums, enumNames', () => { + it('add enums', () => { + cy.get(addEnumBtn3).click().then(() => { + cy.get(checkbox3).children().should('have.length', 3); + cy.get(checkbox3).children().each((option, index) => { + if(index < 2) { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(`country${index + 1}`); + } else { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enums[index]); + } + }) + }) + }); + + it('add enums Names', () => { + cy.get(addEnumNameBtn3).click().then(() => { + cy.get(checkbox3).children().should('have.length', 2); + cy.get(checkbox3).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(`${index + 1}`); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + + it('add both', () => { + cy.get(addBothBtn3).click().then(() => { + cy.get(checkbox3).children().should('have.length', 3); + cy.get(checkbox3).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + }); + + describe('length of current options > length of new enums, enumNames', () => { + it('add enums', () => { + cy.get(addEnumBtn4).click().then(() => { + cy.get(checkbox4).children().should('have.length', 3); + cy.get(checkbox4).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(`country${index + 1}`); + }) + }) + }); + + it('add enums Names', () => { + cy.get(addEnumNameBtn4).click().then(() => { + cy.get(checkbox4).children().should('have.length', 4); + cy.get(checkbox4).children().each((option, index) => { + if(index < 3) { + expect(option.find('input').val()).to.be.eq(`${index + 1}`); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + } else { + expect(option.find('input').val()).to.be.eq(`${index + 1}`); + expect(option.find('span').text()).to.be.eq(`${index + 1}`); + } + + }) + }) + }); + + it('add both', () => { + cy.get(addBothBtn4).click().then(() => { + cy.get(checkbox4).children().should('have.length', 3); + cy.get(checkbox4).children().each((option, index) => { + expect(option.find('input').val()).to.be.eq(enums[index]); + expect(option.find('span').text()).to.be.eq(enumNames[index]); + }) + }) + }); + + }); + + describe('Clear all Checkbox options', () => { + it('check clear', () => { + cy.get(clearBtn).click().then(() => { + cy.get(checkbox4).children().should('have.length', 0); // only the blank option + }) + }); + }); + +}) diff --git a/ui.tests/test-module/specs/dynamicOptionsv2.cy.js b/ui.tests/test-module/specs/dynamicOptionsv2.cy.js new file mode 100644 index 0000000000..868271ea37 --- /dev/null +++ b/ui.tests/test-module/specs/dynamicOptionsv2.cy.js @@ -0,0 +1,283 @@ +/******************************************************************************* + * Copyright 2025 Adobe + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ******************************************************************************/ + +describe("Dynamic Options v2: Enum and EnumNames for CheckboxGroup v2 and RadioButton v2", () => { + + const pagePath = "content/forms/af/core-components-it/samples/dynamicenumenumnames/dynamicoptionsv2.html" + const selectors = { + checkboxgroupItem : '.cmp-adaptiveform-checkboxgroup-item', + checkboxgroupOptionLabel : '.cmp-adaptiveform-checkboxgroup__option-label', + radiobuttonOption : '.cmp-adaptiveform-radiobutton__option', + radiobuttonOptionLabel : '.cmp-adaptiveform-radiobutton__option-label', + dropdownOptionLabel : '.cmp-adaptiveform-dropdown__option', + checkboxgroupWidget : '.cmp-adaptiveform-checkboxgroup__option__widget', + radiobuttonWidget : '.cmp-adaptiveform-radiobutton__option__widget', + radiobuttonGroupWidget : '.cmp-adaptiveform-radiobutton__widget', + dropdownWidget : '.cmp-adaptiveform-dropdown__widget', + } + + let formContainer = null + let componentIds = {} + + beforeEach(() => { + cy.previewForm(pagePath).then(p => { + formContainer = p; + // Create name-to-ID mapping from form container model children + componentIds = {}; + formContainer._model._children.forEach(child => { + if (child.name) { + componentIds[child.name] = child.id; + } + }); + }) + }); + + it("should get model and view initialized properly for all components", () => { + expect(formContainer, "formcontainer is initialized").to.not.be.null; + expect(formContainer._model.items.length, "model and view elements match").to.equal(Object.keys(formContainer._fields).length); + Object.entries(formContainer._fields).forEach(([id, field]) => { + expect(field.getId()).to.equal(id) + expect(formContainer._model.getElement(id), `model and view are in sync`).to.equal(field.getModel()) + }); + }) + + it("should render dynamic options for checkboxgroup v2 components", () => { + // Test changeOptions checkboxgroup - should have 4 options (a, b, c, d) + const changeOptionsId = componentIds['changeOptions']; + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupItem).should('have.length', 4); + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('a'); + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('b'); + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('c'); + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('d'); + + // Test addOptions checkboxgroup - should have 4 options (a, b, c, d) and be readonly + const addOptionsId = componentIds['addOptions']; + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupItem).should('have.length', 4); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupWidget).should('be.disabled'); + cy.get(`#${addOptionsId}`).invoke('attr', 'data-cmp-readonly').should('eq', 'true'); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('a'); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('b'); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('c'); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupOptionLabel).contains('d'); + }) + + it("should render dynamic options for dropdown components", () => { + // Test dynamicDropDown - should have 4 options (a, b, c, d) and be multi-select + const dynamicDropDownId = componentIds['dynamicDropDown']; + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownOptionLabel).should('have.length', 4); + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownWidget).should('have.attr', 'multiple'); + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownOptionLabel).contains('a'); + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownOptionLabel).contains('b'); + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownOptionLabel).contains('c'); + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownOptionLabel).contains('d'); + + // Test newdropdown - should be disabled and readonly + const newDropDownId = componentIds['newdropdown']; + cy.get(`#${newDropDownId}`).find(selectors.dropdownWidget).should('be.disabled'); + cy.get(`#${newDropDownId}`).invoke('attr', 'data-cmp-readonly').should('eq', 'true'); + + // Test newdropdown options + cy.get(`#${newDropDownId}`).find(selectors.dropdownOptionLabel).should('have.length', 4); + cy.get(`#${newDropDownId}`).find("option[value='a']").should('exist'); + cy.get(`#${newDropDownId}`).find("option[value='b']").should('exist'); + cy.get(`#${newDropDownId}`).find("option[value='c']").should('exist'); + cy.get(`#${newDropDownId}`).find("option[value='d']").should('exist'); + }) + + it("should render dynamic options for radiobutton v2 components", () => { + // Test dynamicRadio - should have 4 options (a, b, c, d) + const dynamicRadioId = componentIds['dynamicRadio']; + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonOption).should('have.length', 4); + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonOptionLabel).contains('a'); + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonOptionLabel).contains('b'); + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonOptionLabel).contains('c'); + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonOptionLabel).contains('d'); + + // Test newradio - should be disabled + const newRadioId = componentIds['newradio']; + cy.get(`#${newRadioId}`).find(selectors.radiobuttonWidget).should('be.disabled'); + cy.get(`#${newRadioId}`).invoke('attr', 'data-cmp-enabled').should('eq', 'false'); + cy.get(`#${newRadioId}`).find(selectors.radiobuttonOptionLabel).contains('a'); + cy.get(`#${newRadioId}`).find(selectors.radiobuttonOptionLabel).contains('b'); + cy.get(`#${newRadioId}`).find(selectors.radiobuttonOptionLabel).contains('c'); + cy.get(`#${newRadioId}`).find(selectors.radiobuttonOptionLabel).contains('d'); + + // Test extraRadio - should have 2 options with different labels (Alpha, Beta) + const extraRadioId = componentIds['extraRadio']; + cy.get(`#${extraRadioId}`).find(selectors.radiobuttonOption).should('have.length', 2); + cy.get(`#${extraRadioId}`).find(selectors.radiobuttonOptionLabel).contains('Alpha'); + cy.get(`#${extraRadioId}`).find(selectors.radiobuttonOptionLabel).contains('Beta'); + }) + + it("should handle model changes and reflect in HTML for checkboxgroup v2", () => { + const changeOptionsId = componentIds['changeOptions']; + const model = formContainer._model.getElement(changeOptionsId); + + // Test selecting options + cy.get(`#${changeOptionsId}`).find(`${selectors.checkboxgroupWidget}[value='a']`).check().then(() => { + expect(model.getState().value).to.contain('a'); + }); + + cy.get(`#${changeOptionsId}`).find(`${selectors.checkboxgroupWidget}[value='c']`).check().then(() => { + expect(model.getState().value).to.contain('c'); + }); + + // Test unchecking options + cy.get(`#${changeOptionsId}`).find(`${selectors.checkboxgroupWidget}[value='a']`).uncheck().then(() => { + expect(model.getState().value).to.not.contain('a'); + }); + }) + + it("should handle model changes and reflect in HTML for dropdown", () => { + const dynamicDropDownId = componentIds['dynamicDropDown']; + const model = formContainer._model.getElement(dynamicDropDownId); + + // Test selecting options in multi-select dropdown + cy.get(`#${dynamicDropDownId}`).find(selectors.dropdownWidget).select(["a", "c"]).then(() => { + expect(model.value).to.deep.equal(['a', 'c']); + }); + }) + + it("should handle model changes and reflect in HTML for radiobutton v2", () => { + const dynamicRadioId = componentIds['dynamicRadio']; + const model = formContainer._model.getElement(dynamicRadioId); + + // Test selecting radio button + cy.get(`#${dynamicRadioId}`).find(`${selectors.radiobuttonWidget}[value='b']`).check().then(() => { + expect(model.getState().value).to.equal('b'); + }); + + cy.get(`#${dynamicRadioId}`).find(`${selectors.radiobuttonWidget}[value='d']`).check().then(() => { + expect(model.getState().value).to.equal('d'); + }); + }) + + it("should not have aria-disabled attribute when disabled", () => { + const addOptionsId = componentIds['addOptions']; + const newDropDownId = componentIds['newdropdown']; + const newRadioId = componentIds['newradio']; + + cy.get(`#${addOptionsId}`).find(".cmp-adaptiveform-checkboxgroup__widget").should('not.have.attr', 'aria-disabled'); + cy.get(`#${newDropDownId}`).find(selectors.dropdownWidget).should('not.have.attr', 'aria-disabled'); + cy.get(`#${newRadioId}`).find(selectors.radiobuttonWidget).should('not.have.attr', 'aria-disabled'); + }) + + it("should maintain proper data attributes for all components", () => { + const changeOptionsId = componentIds['changeOptions']; + const dynamicDropDownId = componentIds['dynamicDropDown']; + const dynamicRadioId = componentIds['dynamicRadio']; + + // Test data-cmp-visible attribute + cy.get(`#${changeOptionsId}`).invoke('attr', 'data-cmp-visible').should('eq', 'true'); + cy.get(`#${dynamicDropDownId}`).invoke('attr', 'data-cmp-visible').should('eq', 'true'); + cy.get(`#${dynamicRadioId}`).invoke('attr', 'data-cmp-visible').should('eq', 'true'); + + // Test data-cmp-enabled attribute + cy.get(`#${changeOptionsId}`).invoke('attr', 'data-cmp-enabled').should('eq', 'true'); + cy.get(`#${dynamicDropDownId}`).invoke('attr', 'data-cmp-enabled').should('eq', 'true'); + cy.get(`#${dynamicRadioId}`).invoke('attr', 'data-cmp-enabled').should('eq', 'true'); + + // Test data-cmp-required attribute + cy.get(`#${changeOptionsId}`).invoke('attr', 'data-cmp-required').should('eq', 'false'); + cy.get(`#${dynamicDropDownId}`).invoke('attr', 'data-cmp-required').should('eq', 'false'); + cy.get(`#${dynamicRadioId}`).invoke('attr', 'data-cmp-required').should('eq', 'false'); + }) + + it("should handle readonly state correctly", () => { + const addOptionsId = componentIds['addOptions']; + const newDropDownId = componentIds['newdropdown']; + + // Test readonly checkboxgroup v2 + cy.get(`#${addOptionsId}`).invoke('attr', 'data-cmp-readonly').should('eq', 'true'); + cy.get(`#${addOptionsId}`).find("input").should('be.disabled'); + + // Test readonly dropdown + cy.get(`#${newDropDownId}`).invoke('attr', 'data-cmp-readonly').should('eq', 'true'); + cy.get(`#${newDropDownId} select`).should('be.disabled'); + cy.get(`#${newDropDownId} select`).should('have.attr', 'aria-readonly', 'true'); + }) + + // it("should have proper role attributes for radiobutton v2 groups", () => { + // const dynamicRadioId = componentIds['dynamicRadio']; + // const newRadioId = componentIds['newradio']; + // const extraRadioId = componentIds['extraRadio']; + + // // Test radiogroup role + // cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonGroupWidget).should('have.attr', 'role', 'radiogroup'); + // cy.get(`#${newRadioId}`).find(selectors.radiobuttonGroupWidget).should('have.attr', 'role', 'radiogroup'); + // cy.get(`#${extraRadioId}`).find(selectors.radiobuttonGroupWidget).should('have.attr', 'role', 'radiogroup'); + // }) + + it("should have proper tabindex attributes for interactive elements", () => { + const changeOptionsId = componentIds['changeOptions']; + const addOptionsId = componentIds['addOptions']; + const dynamicRadioId = componentIds['dynamicRadio']; + + // Test checkboxgroup v2 tabindex + cy.get(`#${changeOptionsId}`).find(selectors.checkboxgroupWidget).should('have.attr', 'tabindex', '0'); + cy.get(`#${addOptionsId}`).find(selectors.checkboxgroupWidget).should('have.attr', 'tabindex', '0'); + + // Test radiobutton v2 tabindex + cy.get(`#${dynamicRadioId}`).find(selectors.radiobuttonWidget).should('have.attr', 'tabindex', '0'); + }) + + it("should add filled/empty class for checkboxgroup v2", () => { + const changeOptionsId = componentIds['changeOptions']; + + // Initially should be empty + cy.get(`#${changeOptionsId}`).should('have.class', 'cmp-adaptiveform-checkboxgroup--empty'); + + // After selecting an option, should be filled + cy.get(`#${changeOptionsId}`).find(`${selectors.checkboxgroupWidget}[value='a']`).check().then(() => { + cy.get(`#${changeOptionsId}`).should('have.class', 'cmp-adaptiveform-checkboxgroup--filled'); + }); + + // After unchecking all, should be empty again + cy.get(`#${changeOptionsId}`).find(`${selectors.checkboxgroupWidget}[value='a']`).uncheck().then(() => { + cy.get(`#${changeOptionsId}`).should('have.class', 'cmp-adaptiveform-checkboxgroup--empty'); + }); + }) + + it("should add filled/empty class for radiobutton v2", () => { + const dynamicRadioId = componentIds['dynamicRadio']; + + // Initially should be empty + cy.get(`#${dynamicRadioId}`).should('have.class', 'cmp-adaptiveform-radiobutton--empty'); + + // After selecting an option, should be filled + cy.get(`#${dynamicRadioId}`).find(`${selectors.radiobuttonWidget}[value='a']`).check().then(() => { + cy.get(`#${dynamicRadioId}`).should('have.class', 'cmp-adaptiveform-radiobutton--filled'); + }); + }) + + it("checkboxgroup v2 and radiobutton v2 should be wrapped in fieldset with legend", () => { + const changeOptionsId = componentIds['changeOptions']; + const dynamicRadioId = componentIds['dynamicRadio']; + + // Test checkboxgroup v2 is wrapped in fieldset + cy.get(`#${changeOptionsId}`).then($el => { + expect($el.prop('tagName')).to.eq('FIELDSET'); + }); + cy.get(`#${changeOptionsId}`).find('legend').should('exist'); + + // Test radiobutton v2 is wrapped in fieldset + cy.get(`#${dynamicRadioId}`).then($el => { + expect($el.prop('tagName')).to.eq('FIELDSET'); + }); + cy.get(`#${dynamicRadioId}`).find('legend').should('exist'); + }) + +})