Tests for Ex Libris Cloud App Scaffolding

cloud-app-testing.ts

import { ComponentFixture } from "@angular/core/testing";
import { CloudAppRestService, EntityType, PageInfo } from "@exlibris/exl-cloudapp-angular-lib";
import { of, Subject } from "rxjs";
import { map } from "rxjs/operators";

const PAGE_INFO: PageInfo = {
  entities: [{
    "id": "23140519980000561",
    "type": EntityType.ITEM,
    "description": "AUT1469",
    "link": "/bibs/99242439000561/holdings/22140539880000561/items/23140519980000561"
  }, {
    "id": "23139149860000561",
    "type": EntityType.ITEM,
    "description": "AUTO1365",
    "link": "/bibs/99242439000561/holdings/22138939940000561/items/23139149860000561"
  }, {
    "id": "23139149850000561",
    "type": EntityType.ITEM,
    "description": "4356",
    "link": "/bibs/99242439000561/holdings/22138939940000561/items/23139149850000561"
  }]
};

const EMPTY_PAGE_INFO: PageInfo = {
  entities: [],
}

const REST_RESPONSE = {
  "link": "/bibs/99242439000561/holdings/22138939940000561/items/23139149860000561",
  "holding_data": {
    "link": "string",
    "holding_id": "224831320000121",
    "copy_id": "142312420001021",
  },
  "item_data": {
    "barcode": "AUTO1365",
    "physical_material_type": {
      "value": "ROOM"
    },
    "policy": {
      "value": "09"
    }
  }
}

const onPageLoadSubject$ = new Subject<any>();
const mockEventsService = {
  onPageLoad: handler => onPageLoadSubject$.subscribe(data => handler(data)),
  entities$: onPageLoadSubject$.asObservable().pipe(map(info => info.entities)),
  refreshPage: () => of(true),
}

const restSpy = (fixture: ComponentFixture<any>) => {
  let mockRestService = fixture.debugElement.injector.get(CloudAppRestService);
  return spyOn<any>(mockRestService, 'call').and.callFake((request: any) => {
    return of(REST_RESPONSE);
  });
}

export { PAGE_INFO, EMPTY_PAGE_INFO, REST_RESPONSE, onPageLoadSubject$, mockEventsService, restSpy }

main.component.spec.ts

import { waitForAsync, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatRadioButtonHarness } from '@angular/material/radio/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MatCardHarness } from '@angular/material/card/testing';
import { MainComponent } from './main.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { CloudAppEventsService, HttpMethod, MaterialModule } from '@exlibris/exl-cloudapp-angular-lib';
import { EMPTY_PAGE_INFO, PAGE_INFO, REST_RESPONSE, mockEventsService, onPageLoadSubject$, restSpy } from './cloud-app-testing';
import { By } from '@angular/platform-browser';

const ENTITY_INDEX = 1;

describe('MainComponent', () => {
  let component: MainComponent;
  let fixture: ComponentFixture<MainComponent>;
  let loader: HarnessLoader;
  let spy: jasmine.Spy;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        RouterTestingModule,
      ],
      declarations: [ MainComponent ],
      providers: [ 
        { provide: CloudAppEventsService, useValue: mockEventsService },
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MainComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  beforeEach(() => {
    /* Load entities */
    onPageLoadSubject$.next(PAGE_INFO);
    fixture.detectChanges();  
  })

  beforeEach(() => {
    spy = restSpy(fixture);
  })

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should show a list of entities', async () => {
    /* Check entity list */
    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
    expect(buttons.length).toBe(PAGE_INFO.entities.length);
  });

  it('should display entity selected', async () => {
    expect(component.selectedEntity).toBeFalsy();
    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
    await buttons[ENTITY_INDEX].check();
    expect(component.selectedEntity).toBeTruthy();
    const cards = await loader.getAllHarnesses(MatCardHarness.with({ title: 'Selected Entity' }));
    expect(cards.length).toBe(1);
  });

  it('should call REST api when entity selected', async () => {
    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
    await buttons[ENTITY_INDEX].check();
    expect(spy).toHaveBeenCalledWith(PAGE_INFO.entities[ENTITY_INDEX].link);
  })

  it('should populate text area with data', async () => {
    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
    await buttons[ENTITY_INDEX].check();
    let textarea = fixture.debugElement.query(By.css('textarea')).nativeElement;
    expect(textarea.value).toContain(REST_RESPONSE.item_data.barcode);
  })

  it('should call POST API when update button clicked', async () => {
    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
    await buttons[ENTITY_INDEX].check();
  
    let buttonHarness = MatButtonHarness;
    const button = await loader.getHarness(buttonHarness.with({text: 'Update'}));
    await button.click();
    expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ 
      method: HttpMethod.PUT,
      url: PAGE_INFO.entities[ENTITY_INDEX].link,
    }));
  });

  it('should show welcome message when no entities', () => {
    onPageLoadSubject$.next(EMPTY_PAGE_INFO);
    fixture.detectChanges(); 

    let h1 = fixture.debugElement.query(By.css('h1')).nativeElement;
    expect(h1).toBeTruthy();
    expect(h1.textContent).toContain('Welcome!');
  })

});