如何在测试时访问Angular2组件方法?

时间:2017-04-10 18:59:22

标签: angular testing typescript jasmine

所以,我有一个看起来像这样的Angular2组件:

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    user = {
        username: '',
        password: ''
    };

    constructor() {
    }

    login() {
    }

    ngOnInit() {
    }

}

我设置了测试套件(仅显示相关部分):

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
it('should define method login()', () => {
    console.log(component);  //access data from component
    console.log(fixture.debugElement.nativeElement);  //access dom of component
  });

});

我正在尝试使用Karma和Jasmine为该login()函数编写测试。但我无法访问登录方法。我查看了很多网站,其中大多数都展示了如何访问属性的示例,但从未显示过方法。我是否通过尝试访问测试套件中的类方法在概念上做错了什么? (我在测试时并不擅长)

1 个答案:

答案 0 :(得分:0)

您在第一个之前分配的组件是angular使用see here的LoginComponent的实例。由于登录是公开的,您应该可以直接调用该方法,即component.login