Testing a custom Angular Form Control with Jest / Jasmine

json-form-control.component.spec.ts

// ...

describe('JsonFormControlComponent', () => {
  let fixture: ComponentFixture < JsonFormControlComponent > ;
  let emitValueSpy: jasmine.Spy;

  beforeEach(() =>
    TestBed.configureTestingModule({
      declarations: [JsonFormControlComponent], // the component we want to test
      schemas: [NO_ERRORS_SCHEMA] // optional: ignore other custom elements
    })
  );
 
  beforeEach(() => {
    fixture = TestBed.createComponent(JsonFormControlComponent);
    emitValueSpy = spyOn(fixture.componentInstance, 'propagateChange').and.callThrough();
    const currentValue = {
      id: '123',
      email: '[email protected]'
    };
    fixture.componentInstance.writeValue(currentValue);
    fixture.detectChanges();
  });
 
  it('emits the new value if it is valid JSON', fakeAsync(() => {
    fixture.componentInstance.editorFormControl.setValue(JSON.stringify({
      active: false
    }));
    tick(300);
    
    expect(emitValueSpy).toHaveBeenCalledWith({
      active: false
    });
  }));

  it('does not emit the new value if it is invalid JSON', fakeAsync(() => {
    fixture.componentInstance.editorFormControl.setValue({
      active: false
    });
    tick(300);

    expect(emitValueSpy).not.toHaveBeenCalled();
  }));
 
});