fix(bits): table component unit tests

solarwinds · Sep 4, 2024 · 86b7291 · 86b7291
1 parent 83334c7
commit 86b7291
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 40 deletions.
diff --git a/packages/bits/src/lib/table/table-row/table-row.component.ts b/packages/bits/src/lib/table/table-row/table-row.component.ts
@@ -353,7 +353,7 @@ export class TableHeaderRowComponent
 
     public ngAfterViewInit(): void {
         if (
-            this.tableStateHandlerService.selectable &&
+            this.tableStateHandlerService.selectable ||
             this.tableStateHandlerService.selectionMode ===
                 TableSelectionMode.Multi
         ) {
@@ -402,7 +402,7 @@ export class TableHeaderRowComponent
                 [checked]="isRowSelected()"
                 (valueChange)="rowSelected()"
                 (click)="stopPropagation($event)"
-                #rowSelectionRadio
+                #rowSelectionElement
             >
             </nui-radio>
             <nui-checkbox
@@ -411,7 +411,7 @@ export class TableHeaderRowComponent
                 [checked]="isRowSelected()"
                 (valueChange)="rowSelected()"
                 (click)="stopPropagation($event)"
-                #rowSelectionCheckbox
+                #rowSelectionElement
             >
             </nui-checkbox>
         </td>
@@ -459,11 +459,8 @@ export class TableRowComponent extends CdkRow implements OnInit, OnDestroy {
         return this.density.toLowerCase() === "tiny";
     }
 
-    @ViewChild("rowSelectionCheckbox", { read: ElementRef, static: false })
-    private rowSelectionCheckbox: ElementRef;
-
-    @ViewChild("rowSelectionRadio", { read: ElementRef, static: false })
-    private rowSelectionRadio: ElementRef;
+    @ViewChild("rowSelectionElement", { read: ElementRef, static: false })
+    private rowSelectionElement: ElementRef;
 
     private onDestroy$ = new Subject<void>();
 
@@ -495,6 +492,7 @@ export class TableRowComponent extends CdkRow implements OnInit, OnDestroy {
                 this.selectable = selectable;
                 this.changeDetectorRef.markForCheck();
             });
+
         this.tableStateHandlerService.selectionModeChanged
             .pipe(takeUntil(this.onDestroy$))
             .subscribe((mode: TableSelectionMode) => {
@@ -530,22 +528,10 @@ export class TableRowComponent extends CdkRow implements OnInit, OnDestroy {
             return;
         }
 
-        // TODO refactor a bit
-        let rowSelector: Element | null = null;
-        if (this.selectionMode === TableSelectionMode.Multi) {
-            rowSelector = closestTableRow.querySelector("nui-checkbox");
-
-            if (rowSelector === this.rowSelectionCheckbox.nativeElement) {
-                this.rowSelected();
-                return;
-            }
-        }
-        if (this.selectionMode === TableSelectionMode.Radio) {
-            rowSelector = closestTableRow.querySelector("nui-radio");
-
-            if (rowSelector === this.rowSelectionRadio.nativeElement) {
-                this.rowSelected();
-            }
+        let rowSelector: Element | null = closestTableRow.querySelector(".nui-table__table-cell__checkbox");
+        if (rowSelector === this.rowSelectionElement?.nativeElement) {
+            this.rowSelected();
+            return;
         }
     }
 

diff --git a/packages/bits/src/lib/table/table.component.spec.ts b/packages/bits/src/lib/table/table.component.spec.ts
@@ -551,32 +551,32 @@ describe("components >", () => {
             });
 
             it("should emit selection from table on row click if clickable rows enabled", () => {
-                spyOn(component, "checkboxClicked");
+                spyOn(component, "rowSelected");
                 spyOnProperty(
                     tableStateHandlerService,
-                    "selectable",
+                    "selectionEnabled",
                     "get"
                 ).and.returnValue(true);
                 fixture.componentInstance.clickableRow = true;
 
-                const checkbox = {};
-                component.rowSelectionCheckbox = { nativeElement: checkbox };
+                const selectionElement = {};
+                component.rowSelectionElement = { nativeElement: selectionElement };
                 const eventTarget = constructEventTarget(
-                    { querySelector: () => checkbox },
+                    { querySelector: () => selectionElement },
                     null
                 );
 
                 fixture.componentInstance.rowClickHandler(
                     <HTMLElement>eventTarget
                 );
-                expect(component.checkboxClicked).toHaveBeenCalled();
+                expect(component.rowSelected).toHaveBeenCalled();
             });
 
             it("should not emit selection from table on row click if clickable rows enabled but an ignored element was clicked", () => {
-                spyOn(component, "checkboxClicked");
+                spyOn(component, "rowSelected");
                 spyOnProperty(
                     tableStateHandlerService,
-                    "selectable",
+                    "selectionEnabled",
                     "get"
                 ).and.returnValue(true);
                 fixture.componentInstance.clickableRow = true;
@@ -589,14 +589,14 @@ describe("components >", () => {
                 fixture.componentInstance.rowClickHandler(
                     <HTMLElement>eventTarget
                 );
-                expect(component.checkboxClicked).not.toHaveBeenCalled();
+                expect(component.rowSelected).not.toHaveBeenCalled();
             });
 
             it("should not emit selection from an unselectable table", () => {
-                spyOn(component, "checkboxClicked");
+                spyOn(component, "rowSelected");
                 spyOnProperty(
                     tableStateHandlerService,
-                    "selectable",
+                    "selectionEnabled",
                     "get"
                 ).and.returnValue(false);
                 fixture.componentInstance.clickableRow = true;
@@ -606,14 +606,14 @@ describe("components >", () => {
                 fixture.componentInstance.rowClickHandler(
                     <HTMLElement>eventTarget
                 );
-                expect(component.checkboxClicked).not.toHaveBeenCalled();
+                expect(component.rowSelected).not.toHaveBeenCalled();
             });
 
             it("should not emit selection from a selectable table when clickable rows are not enabled", () => {
-                spyOn(component, "checkboxClicked");
+                spyOn(component, "rowSelected");
                 spyOnProperty(
                     tableStateHandlerService,
-                    "selectable",
+                    "selectionEnabled",
                     "get"
                 ).and.returnValue(true);
                 fixture.componentInstance.clickableRow = false;
@@ -623,7 +623,7 @@ describe("components >", () => {
                 fixture.componentInstance.rowClickHandler(
                     <HTMLElement>eventTarget
                 );
-                expect(component.checkboxClicked).not.toHaveBeenCalled();
+                expect(component.rowSelected).not.toHaveBeenCalled();
             });
         });
         describe("columns types >", () => {

diff --git a/packages/bits/src/lib/table/table.component.ts b/packages/bits/src/lib/table/table.component.ts
@@ -104,7 +104,7 @@ export class TableComponent<T>
     @Input() sortable = false;
     @Input() resizable = false;
     /**
-     * @deprecated Use selectionMode instead.
+     * @deprecated Use selectionConfig instead.
      */
     @Input() selectable = false;
     @Input() selectionConfig: TableSelectionConfig = {