Unit tests: Increase coverage in list component

src/frontend/app/shared/components/list/list.component.spec.ts

@@ -1,47 +1,243 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectorRef } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Store } from '@ngrx/store';
+import { BehaviorSubject, of as observableOf } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
 import { CoreModule } from '../../../core/core.module';
-import { EntityInfo } from '../../../store/types/api.types';
-import { createBasicStoreModule } from '../../../test-framework/store-test-helper';
+import { ListView } from '../../../store/actions/list.actions';
+import { AppState } from '../../../store/app-state';
+import { APIResource } from '../../../store/types/api.types';
+import { EndpointModel } from '../../../store/types/endpoint.types';
+import { createBasicStoreModule, getInitialTestStoreState } from '../../../test-framework/store-test-helper';
 import { EntityMonitorFactory } from '../../monitors/entity-monitor.factory.service';
 import { PaginationMonitorFactory } from '../../monitors/pagination-monitor.factory';
 import { SharedModule } from '../../shared.module';
 import { ApplicationStateService } from '../application-state/application-state.service';
+import { CfEndpointCardComponent } from './list-types/cf-endpoints/cf-endpoint-card/endpoint-card.component';
 import { EndpointsListConfigService } from './list-types/endpoint/endpoints-list-config.service';
 import { ListComponent } from './list.component';
-import { ListConfig } from './list.component.types';
-
+import { ListConfig, ListViewTypes } from './list.component.types';
 
 describe('ListComponent', () => {
-  let component: ListComponent<EntityInfo>;
-  let fixture: ComponentFixture<ListComponent<EntityInfo>>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: ListConfig, useClass: EndpointsListConfigService },
-        ApplicationStateService,
-        PaginationMonitorFactory,
-        EntityMonitorFactory
-      ],
-      imports: [
-        CoreModule,
-        SharedModule,
-        createBasicStoreModule(),
-        NoopAnimationsModule
-      ],
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent<ListComponent<EntityInfo>>(ListComponent);
-    component = fixture.componentInstance;
-    component.columns = [];
-    fixture.detectChanges();
+
+  describe('basic tests', () => {
+
+    function createBasicListConfig(): ListConfig<APIResource> {
+      return {
+        allowSelection: false,
+        cardComponent: null,
+        defaultView: 'table' as ListView,
+        enableTextFilter: false,
+        getColumns: () => null,
+        getDataSource: () => null,
+        getGlobalActions: () => null,
+        getInitialised: () => null,
+        getMultiActions: () => null,
+        getMultiFiltersConfigs: () => null,
+        getSingleActions: () => null,
+        isLocal: false,
+        pageSizeOptions: [1],
+        text: null,
+        viewType: ListViewTypes.BOTH
+      };
+    }
+
+    function setup(store: AppState, config: ListConfig<APIResource>, test: (component: ListComponent<APIResource>) => void) {
+      TestBed.configureTestingModule({
+        imports: [
+          createBasicStoreModule(store),
+        ],
+        providers: [
+          { provide: ChangeDetectorRef, useValue: { detectChanges: () => { } } }
+        ]
+      });
+      inject([Store, ChangeDetectorRef], (iStore: Store<AppState>, cd: ChangeDetectorRef) => {
+        const component = new ListComponent<APIResource>(iStore, cd, config);
+        test(component);
+      })();
+    }
+
+    it('initialised - default', (done) => {
+      const config = createBasicListConfig();
+
+      config.getInitialised = null;
+
+      setup(getInitialTestStoreState(), config, (component) => {
+        const componentDeTyped = (component as any);
+        spyOn<any>(componentDeTyped, 'initialise');
+        expect(componentDeTyped.initialise).not.toHaveBeenCalled();
+
+        component.ngOnInit();
+
+        component.initialised$.subscribe(res => {
+          expect(componentDeTyped.initialise).toHaveBeenCalled();
+          expect(res).toBe(true);
+
+          done();
+        });
+      });
+    });
+
+    it('initialised - custom', (done) => {
+      const config = createBasicListConfig();
+      spyOn<any>(config, 'getInitialised').and.returnValue(observableOf(true));
+
+      setup(getInitialTestStoreState(), config, (component) => {
+        const componentDeTyped = (component as any);
+        spyOn<any>(componentDeTyped, 'initialise');
+        expect(componentDeTyped.initialise).not.toHaveBeenCalled();
+
+        component.ngOnInit();
+        expect(config.getInitialised).toHaveBeenCalled();
+
+        component.initialised$.subscribe(res => {
+          expect(componentDeTyped.initialise).toHaveBeenCalled();
+          expect(res).toBe(true);
+          done();
+        });
+      });
+    });
   });
 
-  it('should be created', () => {
-    expect(component).toBeTruthy();
+  describe('full test bed', () => {
+
+    let component: ListComponent<EndpointModel>;
+    let fixture: ComponentFixture<ListComponent<EndpointModel>>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          { provide: ListConfig, useClass: EndpointsListConfigService },
+          ApplicationStateService,
+          PaginationMonitorFactory,
+          EntityMonitorFactory
+        ],
+        imports: [
+          CoreModule,
+          SharedModule,
+          createBasicStoreModule(),
+          NoopAnimationsModule
+        ],
+      })
+        .compileComponents();
+      fixture = TestBed.createComponent<ListComponent<EndpointModel>>(ListComponent);
+      component = fixture.componentInstance;
+      component.columns = [];
+    });
+
+    it('should be created', async(() => {
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    }));
+
+
+    describe('Header', () => {
+      it('Nothing enabled', async(() => {
+        component.config.getMultiFiltersConfigs = () => [];
+        component.config.enableTextFilter = false;
+        component.config.viewType = ListViewTypes.CARD_ONLY;
+        component.config.defaultView = 'card' as ListView;
+        component.config.cardComponent = CfEndpointCardComponent;
+        component.config.text.title = null;
+        const columns = component.config.getColumns();
+        columns.forEach(column => column.sort = false);
+        component.config.getColumns = () => columns;
+        fixture.detectChanges();
+
+        const hostElement = fixture.nativeElement;
+
+        // No multi filters
+        const multiFilterSection: HTMLElement = hostElement.querySelector('.list-component__header__left--multi-filters');
+        expect(multiFilterSection.hidden).toBeFalsy();
+        expect(multiFilterSection.childElementCount).toBe(0);
+
+        const headerRightSection = hostElement.querySelector('.list-component__header__right');
+        // No text filter
+        const filterSection: HTMLElement = headerRightSection.querySelector('.filter');
+        expect(filterSection.hidden).toBeTruthy();
+
+        // No sort
+        const sortSection: HTMLElement = headerRightSection.querySelector('.sort');
+        expect(sortSection.hidden).toBeTruthy();
+
+        component.initialised$.pipe(
+          switchMap(() => component.hasControls$)
+        ).subscribe(hasControls => {
+          expect(hasControls).toBeFalsy();
+        });
+
+      }));
+
+      it('Everything enabled', async(() => {
+        component.config.getMultiFiltersConfigs = () => {
+          return [
+            {
+              key: 'filterTestKey',
+              label: 'filterTestLabel',
+              list$: observableOf([
+                {
+                  label: 'filterItemLabel',
+                  item: 'filterItemItem',
+                  value: 'filterItemValue'
+                }
+              ]),
+              loading$: observableOf(false),
+              select: new BehaviorSubject(false)
+            }
+          ];
+        };
+        component.config.enableTextFilter = true;
+        component.config.viewType = ListViewTypes.CARD_ONLY;
+        component.config.defaultView = 'card' as ListView;
+        component.config.cardComponent = CfEndpointCardComponent;
+        component.config.getColumns = () => [
+          {
+            columnId: 'filterTestKey',
+            headerCell: () => 'a',
+            cellDefinition: {
+              getValue: (row) => `${row}`
+            },
+            sort: true,
+          }
+        ];
+
+        fixture.detectChanges();
+
+        const hostElement = fixture.nativeElement;
+
+        // multi filters
+        const multiFilterSection: HTMLElement = hostElement.querySelector('.list-component__header__left--multi-filters');
+        expect(multiFilterSection.hidden).toBeFalsy();
+        expect(multiFilterSection.childElementCount).toBe(1);
+
+        // text filter
+        const headerRightSection = hostElement.querySelector('.list-component__header__right');
+        const filterSection: HTMLElement = headerRightSection.querySelector('.filter');
+        expect(filterSection.hidden).toBeFalsy();
+
+        // sort - hard to test for sort, as it relies on
+        // const sortSection: HTMLElement = headerRightSection.querySelector('.sort');
+        // expect(sortSection.hidden).toBeFalsy();
+      }));
+    });
+
+
+    it('No rows', async(() => {
+      fixture.detectChanges();
+
+      const hostElement = fixture.nativeElement;
+
+      // No paginator
+      const sortSection: HTMLElement = hostElement.querySelector('.list-component__paginator');
+      expect(sortSection.hidden).toBeTruthy();
+
+      // Shows empty message
+      const noEntriesMessage: HTMLElement = hostElement.querySelector('.list-component__default-no-entries');
+      expect(noEntriesMessage.hidden).toBeFalsy();
+    }));
+
   });
+
 });

src/frontend/app/store/helpers/entity-relations/entity-relations-from-parent.spec.ts

@@ -1,4 +1,4 @@
-import { inject, TestBed } from '@angular/core/testing';
+import { async, inject, TestBed } from '@angular/core/testing';
 import { Store } from '@ngrx/store';
 import { first } from 'rxjs/operators';
 
@@ -47,7 +47,7 @@ describe('Entity Relations - populate from parent', () => {
 
   });
 
-  it('List in parent', (done) => {
+  it('List in parent', async(() => {
     const spaces: APIResource<ISpace>[] = [
       helper.createEmptySpace('1', 'space1`', orgGuid),
       helper.createEmptySpace('2', 'space2`', orgGuid),
@@ -64,6 +64,7 @@ describe('Entity Relations - populate from parent', () => {
       populatePaginationFromParent(iStore, new GetAllOrganizationSpaces(pagKey, orgGuid, cfGuid, [], true))
         .pipe(first()).subscribe((action: WrapperRequestActionSuccess) => {
           expect(action).toBeDefined();
+          expect(action).not.toBeNull();
           expect(action.type).toBe(RequestTypes.SUCCESS);
           expect(action.totalResults).toBe(spaces.length);
           expect(action.totalPages).toBe(1);
@@ -72,10 +73,9 @@ describe('Entity Relations - populate from parent', () => {
             map[space.metadata.guid] = space;
             return map;
           }, {}));
-          done();
         });
     })();
 
-  });
+  }));
 
 });

src/frontend/app/store/helpers/entity-relations/entity-relations-validate.spec.ts

@@ -26,7 +26,7 @@ import {
 } from './entity-relations.spec';
 import { createEntityRelationKey, createEntityRelationPaginationKey, EntityTreeRelation } from './entity-relations.types';
 
-fdescribe('Entity Relations - validate', () => {
+describe('Entity Relations - validate', () => {
 
   const helper = new EntityRelationSpecHelper();
 

src/frontend/app/store/helpers/entity-relations/entity-relations.types.ts

@@ -124,8 +124,8 @@ export interface EntityInlineChildAction {
 export function isEntityInlineChildAction(anything): EntityInlineChildAction {
   return anything &&
     !!anything['parentGuid'] &&
-    !!anything['parentEntitySchema'] &&
-    !!anything['child'] ? anything as EntityInlineChildAction : null;
+    !!anything['parentEntitySchema']
+    ? anything as EntityInlineChildAction : null;
 }
 
 /**