Angular 8 Unit Test, Cannot set property 'valueAccessor' of null

user_7346506 0
Viewed 2466

I'm trying to simply pass the test (should create - component=> toBeTruthy) for the custom component (angular component class) implemented with ControlValueAccessor. I've injected NgControl in constructor and pass the this keyword.

 constructor(@Optional() @Self() public controlDir?: NgControl) {
    this.controlDir.valueAccessor = this;
  }

And then on ngOnInit()

ngOnInit() {
    const control = this.controlDir.control;
    const validators = control.validator ? [control.validator] : [];
    const asyncValidators = control.asyncValidator ? [control.asyncValidator] : [];

    control.setValidators(validators);
    control.setAsyncValidators(asyncValidators);
    control.updateValueAndValidity();
  }

In the test file 

describe('TextInputComponent', () => {
  let component: TextInputComponent;
  let fixture: ComponentFixture<TextInputComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TextInputComponent],
      imports: [ReactiveFormsModule]
    })
      .compileComponents();
  }));

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

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

});

And the errors

TypeError: Cannot set property 'valueAccessor' of null

I'd be appreciated if anyone shares your ideas to solve this issue?

Thank you. Rabin

angular-test jasmine angular unit-testing
3 Answers

I got solved this issue by creating the new mock class component with calling the <app-text-input formControlName="test"></app-text-input> template including form.

Here is a code details: 

@Component({
  template: `
  <form [formGroup]="form">
   <app-text-input formControlName="input">
   </app-text-input>
  </form>`
})
class TestingInput {
  @ViewChild(TextInputComponent, { static: true })
  textInputComponent: TextInputComponent;

  form = new FormGroup({
    input: new FormControl('Test Value')
  });
}

describe('TextInputComponent', () => {
  let component: TextInputComponent;
  let fixture: ComponentFixture<TestingInput>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TextInputComponent, TestingInput],
      imports: [ReactiveFormsModule]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestingInput);
    component = fixture.componentInstance.textInputComponent;
  });

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

Thanks, Everyone for the answer and comments, all did not solve the exact issue though at least got the idea to figure out. Feel free to post the answer if you have any other better way to solve this issue. Much appreciated!

user_73465060

You can create a mock class NgControl for like this :

export class TestNgControl {
 valueAccessor : any = null;
}

Then in the providers for configureTestingModule method, you can write something like this :

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TextInputComponent],
      imports: [ReactiveFormsModule],
      providers : [{ provide : NgControl, useClass : TestNgControl}]
    })
      .compileComponents();
  }));

Please let me know if this works or not.

user_53689670

I've solved it by adding the @Optional decorator for controlDir, then wrapping the assignment of this to controlDir.valueAccessor in an if statement, since controlDir won't be assigned in the test.

  constructor(@Self() @Optional() public controlDir: NgControl) {
    if (controlDir) {
      controlDir.valueAccessor = this;
    }
  }

Then in your ngOnInit() you also need to wrap any calls to access controlDir in an if statement since it won't be set.

  ngOnInit() {
    if (this.controlDir) {
      const control = this.controlDir.control;
      const validators = control.validator
        ? [control.validator, this.validate]
        : this.validate;
      control.setValidators(validators);
      control.updateValueAndValidity();
    }
  }

Some folks have had issues building for prod with the above, and have also solved your problem using the directions at the URL below, which is using TestbedStatic.overrideComponent in the test.

https://github.com/angular/angular/issues/31632

user_666940
Related