CODEWITHSUNDEEP
angularunit-testingangular-test
Winnemucca
Winnemucca

Reputation: 3458

Unit test angular @Input() with get set

I am working with a similar @Input to Angular2 @Input to a property with get/set. I have been having some trouble figuring out how to set up my unit tests though. Here is my component 

get order(): any {
    return this._order;
}

@Input()
set order(value: any) {

    this._order = value;
}

Here is my test setup 

 TestBed.configureTestingModule({
            declarations: [
                OrderDetailsComponent,
                OrdersGridComponent,
                KeyValuePipe
            ],
            schemas: [
                CUSTOM_ELEMENTS_SCHEMA
            ],
            providers: [
            ],
            imports: [
                // AppModule
            ]
        }).compileComponents();

With an additional before each where I define the component

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

Before I can run this simple test 

 it("should set this.enable button to false", () => {
    component.signOrderFromOrderDetails();
    expect(component.signButtonEnable).toBe(false);
});

I am getting the error 

TypeError: undefined is not an object (evaluating 'this._order.hasOwnProperty') in karma-test-shim.js (line 106886)

My initial was to create a mock order constant and assign it to my component inside of a before each like so...

  const order = {
    orderSections: [],
    patient: {}
  };
 component.order = order;

However, I am not allowed to make that assignment

TypeError: Attempted to assign to readonly property. in karma-test-shim.js (line 94033)

My next assumption is that I must need to mock the parent component OrdersGridComponent as OrdersDetails is the child. But if that is the case I am not seeing how to set that up in my unit test. Any feedback would be much appreciated.

Upvotes: 2

Views: 5261

Answers (1)

Boris Yakubchik
Boris Yakubchik

Reputation: 4463

I'm pretty sure the magic is with async()

Component:

@Input()
set myVar(data: number) {
   this._myVar = data;
}

Test:

it('myVar input should set _myVar', async(() => {
  component.myVar = 42;
  expect(component._myVar).toBe(42);
}));

Upvotes: 2

Related Questions