小编San*_*nju的帖子

我一直在尝试对角度2应用程序执行测试,单击调用函数的提交按钮.我通常使用两种方法来执行相同的操作.

element.nativeElement.click()

和

element.triggerEventHandler('click',null);

我认为这两种方法都是一样的,直到我遇到触发事件处理程序方法不起作用的情况.

element = fixture.debugElement.query(By.css('.dropList li'));
element.triggerEventHandler('click',null);  //Click event works here
fixture.detectChanges();
let button = fixture.debugElement.query(By.css('button'));
//button.triggerEventHandler('click',null);    //Does not call function
button.nativeElement.click();    //Calls function
fixture.detectChanges();

模板供您参考:

<form (ngSubmit)="printSelection()">
   <div class="dropList">
     <ul>
        <li *ngFor="let element of data.elements" (click)="selectElement(element)"> </li>
    </ul>
   </div>
   <button type="submit">Submit</button>
</form>

那么,这两种方法之间有什么区别,或者您认为我的代码中某处可能出错？

我是 vuejs 的新手，我来自 angular 背景。我正在尝试在 v-model 中绑定我的 setter/getter 以进行输入。但这并不像我打算的那样工作。但是当我尝试将它直接绑定到变量时，它工作正常。

以下是我的代码：

我的组件 TS 文件：

import { Component, Vue } from 'vue-property-decorator';

@Component({
    components: {}
})
export default class MyComponent extends Vue {
    private _username: string = '';
    private _password: string = '';


    get username(): string {
        return this._username;
    }

    set username(value: string) {
        this._username = value;
    }

    get password(): string {
        return this._password;
    }

    set password(value: string) {
        this._password = value;
    }

    public login() {
        console.log(this.username, this.password);
    }
}

MyComponent Vue …

我正在尝试对(角度2)组件进行单元测试routerLink,routerLinkActive但是所有测试用例都会失败,并显示以下错误消息.(注意:我已经删除了路由器和其他相关的依赖项.这是我用于相同的参考.).

无法读取undefined的属性'subscribe'

我也注意到,当routerLink和routerLinkActive从我的模板被删除,所有测试用例将没有任何错误运行.

我认为错误是由RouterTestingModule或SharedModule(包含用于显示和验证密码输入字段的组件)引起的.所以我尝试删除或添加它们以找到实际导致问题的原因.这是我观察到的.

• 我得到' Cannot read property 'subscribe' of undefined'如果 RouterTestingModule或SharedModule现在.
• 我没有得到任何链接到路由器的错误,只有当我删除两个RouterTestingModule,SharedModules但是组件中的元素SharedModules不会被加载到组件中,并且一些测试用例仍然因此而失败.

TestBed配置:

TestBed.configureTestingModule({

            imports: [CoreModule,SharedModule,RouterTestingModule],
            declarations: [ MyComponent,RouterLinkStubDirective,RouterOutletStubComponent ],
            providers: [
                FormBuilder,
                { provide: Router, useClass: RouterStub },
                { provide: ActivatedRoute, userClass: ActivatedRouteStub}
            ],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .overrideComponent(MyComponent, {
                set: {
                    providers: [
                        {provide: AuthModel, useClass: MockAuthModel}    
                    ],
                }
            })
            .compileComponents(); …

我正在试图弄清楚fakeAsync的tick()方法与堆栈溢出的done()一些答案所建议的区别.

使用tick()我们可以模拟超时,但我们可以完成相同的使用done()吗？

为什么angular认为它比使用或更可行的方法？asyncfakeAsync

举个例子.

这个方法对我有用......

it("Should display names",(done:any) => {
        component.names = [
            {
                "firstname": "abc",
                "lastname": "max"
            },
            {
                "firstname": "def",
                "lastname": "max"
            },
        ];
        done();
        fixture.detectChanges();
        let wrapBox = fixture.debugElement.queryAll(By.css('.wrapBox'));
        console.log(wrapBox);
});

但是以下方法返回' 6 timer(s) still in queue'错误...

it("Should display names",fakeAsync(() => {
        component.names = [
            {
                "firstname": "abc",
                "lastname": "max"
            },
            {
                "firstname": "def",
                "lastname": "max"
            },
        ];
        tick();
        fixture.detectChanges();
        let wrapBox …

我正在尝试测试下拉切换功能。但是我无法使它正常工作。我也已导入BsDropdownModule到规格文件。注意：我正在使用ngx-bootstrap。

这是我尝试过的：

HTML：

<div class="btnBox" dropdown placement="bottom right">
    <button class="btnIcon dropdown-toggle" dropdownToggle>
    </button>
    <ul class="btnOptionBox dropdown-menu dropdown-menu-right" *dropdownMenu>
       <li class="iconBtn" (click)="someFun()" type="button"><span>Edit</span></li>
       <li class="iconBtn" (click)="someFun1()" type="button"><span>Delete</span></li>
    </ul>
 </div>

测试规格：

it("Should show options when toggle option is clicked",() => {
     fixture.detectChanges();
     let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
     toggleButton[0].nativeElement.click();
     fixture.detectChanges();
     /*Unable to access li tag directly. That's why I have used it's parent*/
     let list = fixture.debugElement.queryAll(By.css('div.ellipsisBox'));  
     console.log(list[0]); /*Shows the list in the children array*/
     console.log(list[0].children);  /*Doesn't show the list*/
});

有人可以建议正确的方法吗？