fix: updating checkbox component in multi-select (#730)

* fix: updating checkbox component in multi-select

* fix: fixing uts

* fix: refactoring uts

* fix: fixing uts

* fix: roll back to last PR with variable renaming

* fix: linter

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/multi-select/multi-select.component.scss

@@ -80,11 +80,16 @@
     height: 34px;
     padding: 4px 16px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 15px;
     align-items: center;
 
     .checkbox {
       margin: 0px;
+      color: $gray-3;
+
+      ::ng-deep .mat-ripple {
+        display: none;
+      }
     }
 
     .icon {

projects/components/src/multi-select/multi-select.component.test.ts

@@ -6,6 +6,7 @@ import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectato
 import { MockComponent } from 'ng-mocks';
 import { NEVER } from 'rxjs';
 import { ButtonComponent } from '../button/button.component';
+import { CheckboxComponent } from '../checkbox/checkbox.component';
 import { DividerComponent } from '../divider/divider.component';
 import { LabelComponent } from '../label/label.component';
 import { LoadAsyncModule } from '../load-async/load-async.module';
@@ -30,7 +31,8 @@ describe('Multi Select Component', () => {
       MockComponent(LabelComponent),
       MockComponent(DividerComponent),
       MockComponent(SearchBoxComponent),
-      MockComponent(ButtonComponent)
+      MockComponent(ButtonComponent),
+      MockComponent(CheckboxComponent)
     ],
     shallow: true
   });
@@ -91,8 +93,11 @@ describe('Multi Select Component', () => {
     });
 
     spectator.tick();
-    const selectedElements = spectator.queryAll('input:checked', { root: true });
-    expect(selectedElements.length).toBe(2);
+    const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true });
+    expect(
+      selectedCheckboxElements.filter(checkboxElement => checkboxElement.getAttribute('ng-reflect-checked') === 'true')
+        .length
+    ).toBe(2);
   }));
 
   test('should display provided options with icons when clicked', fakeAsync(() => {
@@ -121,8 +126,11 @@ describe('Multi Select Component', () => {
     expect(spectator.query('.multi-select-content', { root: true })).toExist();
     expect(optionElements.length).toBe(6);
 
-    const selectedElements = spectator.queryAll('input:checked', { root: true });
-    expect(selectedElements.length).toBe(2);
+    const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true });
+    expect(
+      selectedCheckboxElements.filter(checkboxElement => checkboxElement.getAttribute('ng-reflect-checked') === 'true')
+        .length
+    ).toBe(2);
 
     optionElements.forEach((element, index) => {
       expect(element).toHaveText(selectionOptions[index].label);
@@ -216,7 +224,12 @@ describe('Multi Select Component', () => {
     spectator.click(clearSelectedButton!);
 
     spectator.tick();
-    expect(spectator.queryAll('input:checked', { root: true }).length).toBe(0);
+
+    expect(
+      spectator
+        .queryAll('ht-checkbox', { root: true })
+        .filter(checkboxElement => checkboxElement.getAttribute('ng-reflect-checked') === 'true').length
+    ).toBe(0);
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([]);
     expect(spectator.query(LabelComponent)?.label).toEqual('Select options');
@@ -226,8 +239,8 @@ describe('Multi Select Component', () => {
     spectator.click(allOptionElement!);
 
     spectator.tick();
-    const selectedElements = spectator.queryAll('input:checked', { root: true });
-    expect(selectedElements.length).toBe(6);
+    const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true });
+    expect(selectedCheckboxElements.length).toBe(6);
 
     expect(onChange).toHaveBeenCalledWith(selectionOptions.map(option => option.value));
     expect(spectator.query(LabelComponent)?.label).toEqual('first and 5 more');

projects/components/src/multi-select/multi-select.component.ts

@@ -92,7 +92,7 @@ import { MultiSelectJustify } from './multi-select-justify';
                 (click)="this.onSelectionChange(item)"
                 class="multi-select-option"
               >
-                <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
+                <ht-checkbox class="checkbox" [checked]="this.isSelectedItem(item)"></ht-checkbox>
                 <ht-icon
                   class="icon"
                   *ngIf="item.icon"

projects/components/src/multi-select/multi-select.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ButtonModule } from '../button/button.module';
+import { TraceCheckboxModule } from '../checkbox/checkbox.module';
 import { DividerModule } from '../divider/divider.module';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
@@ -18,7 +19,8 @@ import { MultiSelectComponent } from './multi-select.component';
     DividerModule,
     TraceSearchBoxModule,
     ButtonModule,
-    LoadAsyncModule
+    LoadAsyncModule,
+    TraceCheckboxModule
   ],
   declarations: [MultiSelectComponent],
   exports: [MultiSelectComponent]