fix(components/lists): reorderable repeater will not throw a warning …

…when no repeater items exist (#2492)
blackbaud · Jul 16, 2024 · a01a108 · a01a108
1 parent 4d96f27
commit a01a108
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/libs/components/lists/src/lib/modules/repeater/fixtures/repeater.component.fixture.ts b/libs/components/lists/src/lib/modules/repeater/fixtures/repeater.component.fixture.ts
@@ -22,7 +22,7 @@ export class RepeaterTestComponent {
 
   public expandMode: SkyRepeaterExpandModeType | undefined = 'single';
 
-  public items: { id?: string; title: string }[] = [
+  public items: { id?: string; title: string }[] | undefined = [
     {
       id: 'item1',
       title: 'Title 1',
@@ -82,7 +82,7 @@ export class RepeaterTestComponent {
       id: `item${nextItemId++}`,
       title: 'New record ' + nextItemId,
     };
-    this.items.push(newItem);
+    this.items?.push(newItem);
   }
 
   public onOrderChange(tags: any[]): void {

diff --git a/libs/components/lists/src/lib/modules/repeater/repeater.component.spec.ts b/libs/components/lists/src/lib/modules/repeater/repeater.component.spec.ts
@@ -1457,9 +1457,10 @@ describe('Repeater item component', () => {
     const fixture = TestBed.createComponent(
       RepeaterWithMissingTagsFixtureComponent,
     );
-    const consoleSpy = spyOn(console, 'warn');
+    const logService = TestBed.inject(SkyLogService);
+    const logServiceSpy = spyOn(logService, 'warn');
     detectChangesAndTick(fixture);
-    expect(consoleSpy).toHaveBeenCalled();
+    expect(logServiceSpy).toHaveBeenCalled();
   }));
 
   describe('dragula integration', () => {
@@ -1528,7 +1529,7 @@ describe('Repeater item component', () => {
     let cmp: RepeaterTestComponent;
     let el: any;
     let mockDragulaService: MockDragulaService;
-    let consoleSpy: jasmine.Spy;
+    let logServiceSpy: jasmine.Spy;
 
     function fireDragEvent(dragEvent: 'drag' | 'dragend', index: number): void {
       const groupName = fixture.componentInstance.repeater?.dragulaGroupName;
@@ -1551,7 +1552,8 @@ describe('Repeater item component', () => {
 
       cmp = fixture.componentInstance;
       el = fixture.nativeElement;
-      consoleSpy = spyOn(console, 'warn');
+      const logService = TestBed.inject(SkyLogService);
+      logServiceSpy = spyOn(logService, 'warn');
 
       fixture.detectChanges();
       cmp.reorderable = true;
@@ -1581,7 +1583,7 @@ describe('Repeater item component', () => {
 
     it('should not show a console warning if all item tags are defined', fakeAsync(() => {
       detectChangesAndTick(fixture);
-      expect(consoleSpy).not.toHaveBeenCalled();
+      expect(logServiceSpy).not.toHaveBeenCalled();
     }));
 
     it('should set newly added items to reorderable if repeater is reorderable', fakeAsync(() => {
@@ -1993,7 +1995,7 @@ describe('Repeater item component', () => {
       cmp.showRepeaterWithNgFor = true;
       detectChangesAndTick(fixture);
 
-      expect(consoleSpy).not.toHaveBeenCalled();
+      expect(logServiceSpy).not.toHaveBeenCalled();
 
       cmp.items = [
         {
@@ -2006,10 +2008,34 @@ describe('Repeater item component', () => {
       ];
       detectChangesAndTick(fixture);
 
-      expect(consoleSpy).toHaveBeenCalledWith(
+      expect(logServiceSpy).toHaveBeenCalledWith(
         'Please supply tag properties for each repeater item when reordering functionality is enabled.',
       );
     }));
+
+    it('should not show a console warning when the items change and no items exist', fakeAsync(() => {
+      cmp.showRepeaterWithNgFor = true;
+      detectChangesAndTick(fixture);
+
+      expect(logServiceSpy).not.toHaveBeenCalled();
+
+      cmp.items = [];
+      detectChangesAndTick(fixture);
+
+      expect(logServiceSpy).not.toHaveBeenCalled();
+    }));
+
+    it('should not show a console warning when the items change and items are undefined', fakeAsync(() => {
+      cmp.showRepeaterWithNgFor = true;
+      detectChangesAndTick(fixture);
+
+      expect(logServiceSpy).not.toHaveBeenCalled();
+
+      cmp.items = undefined;
+      detectChangesAndTick(fixture);
+
+      expect(logServiceSpy).not.toHaveBeenCalled();
+    }));
   });
 
   describe('aria roles', () => {

diff --git a/libs/components/lists/src/lib/modules/repeater/repeater.component.ts b/libs/components/lists/src/lib/modules/repeater/repeater.component.ts
@@ -389,10 +389,9 @@ export class SkyRepeaterComponent
   }
 
   #everyItemHasTag(): boolean {
-    /* sanity check */
-    /* istanbul ignore if */
+    /* safety check */
     if (!this.items || this.items.length === 0) {
-      return false;
+      return true;
     }
     return this.items.toArray().every((item) => {
       return item.tag !== undefined;
@@ -470,7 +469,7 @@ export class SkyRepeaterComponent
 
   #validateTags(): void {
     if (this.reorderable && !this.#everyItemHasTag()) {
-      console.warn(
+      this.#logSvc.warn(
         'Please supply tag properties for each repeater item when reordering functionality is enabled.',
       );
     }