Refactored Checkbox comp and added tests for Checkbox Group (#214)

Co-authored-by: Vishal <[email protected]>
pegasystems · Oct 29, 2024 · b16b02a · b16b02a
1 parent 110011b
commit b16b02a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 55 deletions.
diff --git a/src/components/fields/Checkbox/index.ts b/src/components/fields/Checkbox/index.ts
@@ -197,8 +197,8 @@ class CheckBox extends FormComponentBase {
           .pConn=${this.thePConn}
           ?disabled=${this.bReadonly}
           label=${this.caption}
-          value=${this.value}
           ?checked=${this.isChecked}
+          value=${this.value}
           testId=${this.testId}
         >
         </lion-checkbox>
@@ -215,26 +215,22 @@ class CheckBox extends FormComponentBase {
       listOfCheckboxes.push(label);
       listSourceItems.forEach((element, index) => {
         const multiChecked = this.selectedvalues?.some?.(data => data[dataField] === element.key);
-        const content = multiChecked
-          ? html`
-                <lion-checkbox
-                    id=${index}
-                    dataTestId=${this.testId}+':'+${element.value}
-                    checked
-                    .model-value=${{ value: element.text ?? element.value, key: element.key, checked: this.selectedvalues?.some?.(data => data[dataField] === element.key) }}
-                    @blur=${this.fieldOnBlur} @change=${this.handleChangeMultiMode}>
-                    <span slot="label">${element.text ?? element.value}</span>
-                </lion-checkbox>
-              `
-          : html`
-                <lion-checkbox
-                    id=${index}
-                    dataTestId=${this.testId}+':'+${element.value}
-                    .model-value=${{ value: element.text ?? element.value, key: element.key, checked: this.selectedvalues?.some?.(data => data[dataField] === element.key) }}
-                    @blur=${this.fieldOnBlur} @change=${this.handleChangeMultiMode}>
-                    <span slot="label">${element.text ?? element.value}</span>
-                </lion-checkbox>
-              `;
+        const content = html`
+          <lion-checkbox
+            id=${index}
+            ?checked=${multiChecked}
+            dataTestId=${this.testId || element.value}
+            .model-value=${{
+              value: element.text ?? element.value,
+              key: element.key,
+              checked: this.selectedvalues?.some?.(data => data[dataField] === element.key)
+            }}
+            @blur=${this.fieldOnBlur}
+            @change=${this.handleChangeMultiMode}
+          >
+            <span slot="label">${element.text ?? element.value}</span>
+          </lion-checkbox>
+        `;
         listOfCheckboxes.push(content);
       });
       const labelEnd = html`</div>`;
@@ -244,40 +240,21 @@ class CheckBox extends FormComponentBase {
       const theContent = html` ${this.bVisible
         ? html` <div class="check-box-form">
             ${bHideLabel === true ? nothing : html`${this.label}`}
-            ${this.isChecked
-              ? html` <lion-checkbox
-                  id=${this.theComponentId}
-                  dataTestId=${this.testId}
-                  checked
-                  .fieldName=${this.label}
-                  .validators=${this.lionValidatorsArray}
-                  .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-                  ?readonly=${this.bReadonly}
-                  ?disabled=${this.bDisabled}
-                  .model-value=${{ value: this.caption, checked: this.isChecked }}
-                  @click=${this.fieldOnChange}
-                  @blur=${this.fieldOnBlur}
-                  @change=${this.fieldOnChange}
-                >
-                  <span slot="label">${this.caption}</span>
-                </lion-checkbox>`
-              : html`
-                  <lion-checkbox
-                    id=${this.theComponentId}
-                    dataTestId=${this.testId}
-                    .fieldName=${this.label}
-                    .validators=${this.lionValidatorsArray}
-                    .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
-                    ?readonly=${this.bReadonly}
-                    ?disabled=${this.bDisabled}
-                    .model-value=${{ value: this.caption, checked: this.isChecked }}
-                    @click=${this.fieldOnChange}
-                    @blur=${this.fieldOnBlur}
-                    @change=${this.fieldOnChange}
-                  >
-                    <span slot="label">${this.caption}</span>
-                  </lion-checkbox>
-                `}
+            ${html` <lion-checkbox
+              id=${this.theComponentId}
+              ?checked=${this.isChecked}
+              dataTestId=${this.testId}
+              .fieldName=${this.label}
+              .validators=${this.lionValidatorsArray}
+              .feedbackCondition=${this.requiredFeedbackCondition.bind(this)}
+              ?readonly=${this.bReadonly}
+              ?disabled=${this.bDisabled}
+              .model-value=${{ value: this.caption, checked: this.isChecked }}
+              @blur=${this.fieldOnBlur}
+              @change=${this.fieldOnChange}
+            >
+              <span slot="label">${this.caption}</span>
+            </lion-checkbox>`}
           </div>`
         : nothing}`;
       this.renderTemplates.push(theContent);

diff --git a/tests/e2e/DigV2/ComplexFields/DataReference.spec.js b/tests/e2e/DigV2/ComplexFields/DataReference.spec.js
@@ -155,6 +155,24 @@ test.describe('E2E test', () => {
 
     await page.locator('button:has-text("Previous")').click();
 
+    /** MultiSelect mode type test */
+    await page.selectOption('lion-select[datatestid="9463d5f18a8924b3200b56efaad63bda"] select', 'Mode');
+
+    await page.selectOption('lion-select[datatestid="6f64b45d01d11d8efd1693dfcb63b735"] select', 'MultiSelect');
+
+    /** Checkbox group mode type test */
+    await page.selectOption('lion-select[datatestid="4aa668349e0970901aa6b11528f95223"] select', 'Checkbox group');
+
+    await page.check('lion-checkbox[datatestid="5817eb8c-b1c7-449b-b323-705ca25734b4"] input');
+    await page.check('lion-checkbox[datatestid="660a4217-d193-4c12-b8b4-193ee8441f86"] input');
+
+    await page.locator('button:has-text("Next")').click();
+
+    await expect(assignment.locator('td:has-text("Washing Machine")')).toBeVisible();
+    await expect(assignment.locator('td:has-text("Mobile")')).toBeVisible();
+
+    await page.locator('button:has-text("Previous")').click();
+
     /** Readonly mode type test */
     await page.selectOption('lion-select[datatestid="9463d5f18a8924b3200b56efaad63bda"] select', 'Mode');