Summary list component

projects/components/src/summary-list/summary-list.component.test.ts

@@ -0,0 +1,32 @@
+import { SummaryListComponent } from '@hypertrace/components';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+describe('Summary List component', () => {
+  let spectator: Spectator<SummaryListComponent>;
+
+  const createComponent = createComponentFactory({
+    component: SummaryListComponent,
+    shallow: true,
+    declarations: []
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+  });
+
+  test('formats label', () => {
+    expect(spectator.component.getFormattedLabel('TEST_UNDERSCORE')).toEqual('Test Underscore');
+    expect(spectator.component.getFormattedLabel('TEST-DASH')).toEqual('Test Dash');
+    expect(spectator.component.getFormattedLabel('Test_mixed-LABEL')).toEqual('Test Mixed Label');
+    expect(spectator.component.getFormattedLabel('test MORE')).toEqual('Test More');
+  });
+
+  test('gets value array', () => {
+    expect(spectator.component.getValuesArray(1)).toEqual([1]);
+    expect(spectator.component.getValuesArray([1])).toEqual([1]);
+    expect(spectator.component.getValuesArray('two')).toEqual(['two']);
+    expect(spectator.component.getValuesArray(['two', 'three'])).toEqual(['two', 'three']);
+    expect(spectator.component.getValuesArray(true)).toEqual([true]);
+    expect(spectator.component.getValuesArray([true, false])).toEqual([true, false]);
+  });
+});

projects/components/src/summary-list/summary-list.component.ts

@@ -15,10 +15,10 @@ import { SummaryItem } from './summary-list-api';
         <ht-label class="summary-title" [label]="this.title"></ht-label>
       </div>
       <ng-container *ngFor="let item of this.items">
-        <ht-label class="summary-value-title" [label]="this.getFormattedLabel(item)"></ht-label>
+        <ht-label class="summary-value-title" [label]="this.getFormattedLabel(item.label)"></ht-label>
         <ul class="summary-value-list">
-          <li class="summary-value" *ngIf="this.getValuesArray(item).length === 0">None</li>
-          <li class="summary-value" *ngFor="let value of this.getValuesArray(item)">{{ value }}</li>
+          <li class="summary-value" *ngIf="this.getValuesArray(item.value).length === 0">None</li>
+          <li class="summary-value" *ngFor="let value of this.getValuesArray(item.value)">{{ value }}</li>
         </ul>
       </ng-container>
     </div>
@@ -34,11 +34,11 @@ export class SummaryListComponent {
   @Input()
   public items?: SummaryItem[] = [];
 
-  public getFormattedLabel(item: SummaryItem): string {
-    return startCase(item.label.trim().toLowerCase());
+  public getFormattedLabel(label: string): string {
+    return startCase(label.toLowerCase());
   }
 
-  public getValuesArray(item: SummaryItem): PrimitiveValue[] {
-    return Array.isArray(item.value) ? item.value : [item.value];
+  public getValuesArray(value: PrimitiveValue | PrimitiveValue[]): PrimitiveValue[] {
+    return Array.isArray(value) ? value : [value];
   }
 }