Question

我需要测试功能提交。我有这段代码：

onAddProd() {
    this.areWeWaiting = true;
    let newProd= new Product(
      this.addProdForm.value
    );
    this.ws.createProduct(newProd).subscribe( //createProduct is function service
      result => {
        if (result === true) {
          this.router.navigate(['/home']);
        } else {
          this.areWeWaiting = false;
        }
      },
      error => {
        this.areWeWaiting = false;
      }
    );
  }

我基本上需要测试。 - 如果结果为true，则应导航ti /home

你能告诉我任何想法吗？

Answer 1

在beforeEach函数声明

之前

Providers: [
....
{ provide: Router, useValue: jasmine.createSpyObj("router", ["navigate"]) }
]
const injector = getTestBed();
router = injector.get(Router);

并在函数中，

expect(router.navigate).toHaveBeenCalledWith(["/home"]);

Answer 2

首先是第一个：你的功能有很多。单独测试所有服务是个好主意。

特别是<{> 1}}的路由由/home模块管理，必须在单独的文件中进行测试。有关here的更多详情。

测试您的功能的关键是能够模拟所有被调用的服务。您通常必须在Route函数

之前声明这些模拟

describe

接下来，您必须启动模拟并覆盖测试期间应返回的值：

let wsMock
let routerMock

describe('MyComponentUnderTest', () => {
  let component: MyComponentUnderTest
  let fixture: ComponentFixture<MyComponentUnderTest>
  ...
})

最后但并非最不重要的是，您的beforeEach(async(() => { wsMock = jasmine.createSpyObj('ws', ['createProduct']) wsMock.createProduct.and.returnValue(of(SOME_VALUE_THAT_YOU_HAVE_TO_SET)) routerMock = jasmine.createSpyObj('Router', ['navigate']) }))功能由测试模块的配置决定，您必须在其中注入模拟服务：

beforeEach

它是锅炉板的。让我们继续测试：

TestBed.configureTestingModule({
  declarations: [ LoginComponent ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
    {provide: ws, useValue: wsMock},
    {provide: Router, useValue: routerMock}
  ]
})
.compileComponents()

您可以访问Angular web site了解有关组件测试的更多详细信息。

使用Angular 5在Component + Service中测试函数submit（）

2 个答案: