在Angular中对组件进行单元测试时检查局部变量会产生错误 [英] Checking local variable while unit testing on a component in Angular gives error

问题描述

假设有2个组件:AppComponent和TestComponent.我正在使用AppComponent的HTML模板中的指令调用TestComponent.现在，TestComponent具有@Input()属性(将其设为myTitle).

Suppose there are 2 components : AppComponent and TestComponent. I am calling TestComponent using it's directive in the HTML template of AppComponent. Now TestComponent has an @Input() property ( let it be myTitle ).

我仅对TestComponent进行单元测试.对于标题，我在测试本身中传递了一个随机值.这是相同的代码:

I am doing unit testing for TestComponent only. For title, i am passing a random value in the test itself. Here is the code for the same :

app.component.html

app.component.html

<span><app-test [myTitle]="title"></app-test></span>

app.component.ts

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent{
    title = {name: 'hello-world'};
}

test.component.html

test.component.html

<p>test works!!{{myTitle.name}}</p>
<button (click)="onClick()">Click Please !!!</button>

test.component.ts

test.component.ts

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit{
    @Input() myTitle;
    filter;
    constructor(){

    }

    ngOnInit():void{
        this.myTitle.name = "Hi!!";
    }
    onClick(){
       this.filter="GokuSSj3";
    }
}

test.component.spec.ts

test.component.spec.ts

describe('Test component',() =>{
    let temp;
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;

    beforeEach(async(() =>{
       TestBed.configureTestingModule({
           declarations: [TestComponent],
           schemas: [NO_ERRORS_SCHEMA]
       }) 
       .compileComponents();
    }));

    beforeEach(()=>{
        temp = {name: "Heloooo"};
       fixture = TestBed.createComponent(TestComponent);
       component = fixture.componentInstance;
    });

    it('should check First',()=>{
       component.myTitle = temp;
       console.log(component.myTitle.name);
       console.log(temp.name);

       fixture.detectChanges();

       console.log(component.myTitle.name);
       console.log(temp.name);
       expect(component.myTitle.name).toEqual(temp.name);
    });

    it('should check whether onClick is called on button click or not and also the value of filter',()=>{
       component.myTitle = temp;
       spyOn(component,'onClick');
       fixture.detectChanges();

       let btn = fixture.debugElement.query(By.css('button'));
       btn.triggerEventHandler('click',null);

       fixture.whenStable().then(()=>{
          expect(component.onClick).toHaveBeenCalled();
          expect(component.filter).toEqual("GokuSSj3");
    });
});

第二个测试用例显示错误:预期的undefined等于'GokuSSj3'.为什么会这样呢?即使已调用onClick.

The second test case shows the error : Expected undefined to equal 'GokuSSj3'. Why is it so? Even though onClick has been called.

我是这个社区的新手，所以如果有任何失败，请帮助我改善问题.

I am new to this community, so please help me improve the question if there are any fails.

推荐答案

在onClick函数上添加了间谍程序之后，它将永远不会触发并更新过滤器的值.

As you have added spy on onClick function, it will never fire and update value of filter.

您需要删除该间谍功能并查看实际值更改.

You need to remove that spy function and see the actual value change.

更改测试，如下所示:

it('should check whether onClick is called on button click or not and also the value of filter', () => {
      component.myTitle = temp;
      fixture.detectChanges();

      let btn = fixture.debugElement.query(By.css('button'));
      btn.triggerEventHandler('click', null);

      fixture.whenStable().then(() => {
        expect(component.filter).toEqual("GokuSSj3");
      });

这篇关于在Angular中对组件进行单元测试时检查局部变量会产生错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！