Retrospective #2 - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Fake data

• Issue: need to test component with amount of data
• Solution: Use library mocker-data-generator to generate data
• Ref: DataStreamGenerator class in the project

Recall two-way binding

• Issue: apply two-way binding with custom component [(counter)]="someValue"
• Solution: [(counter)] give us a convention property binding @Input() counter and event binding @Output() counterChange: EventEmitter<>
• Ref: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

Service returns observable instead of using async/await

Async pipe

• Issue: Show data in template
• Solution: use async pipe. The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. Ex:

<app-widget-list
      *ngIf="widgets$ | async"
      [widgets]="widgets$ | async"
      [errorMessage]="errorMessage$ | async"
      (onLaunch)="launch($event)"
      (onEdit)="edit($event)"
      (onDelete)="remove($event)"
    >

Testing

• Issue: There is an error ERROR CONTEXT: ...
• Solution: Spy the service's method that returns an observable

widgetServiceSpy = jasmine.createSpyObj('widgetService', ['get', 'update']);
// ...
 TestBed
      .configureTestingModule({
        // ...
        providers: [
          // ...
          {provide: WidgetService, useValue: widgetServiceSpy}
        ]
      })
      .compileComponents();
describe('init', () => {
    it('should get widget from service', () => {
      widgetServiceSpy.get.and.returnValue(Observable.of(mockBarWidget()));

      fixture.detectChanges();

      expect(widgetServiceSpy.get).toHaveBeenCalledTimes(1);
      expect(widgetServiceSpy.get).toHaveBeenCalledWith(1);
    });
  });