Angular 如何将方法的结果放入spec.js测试文件中？

我遇到了一个挑战，必须编写通过测试的代码，以检查我的方法是否生成特定的URL路径字符串。我的方法正确地创建了URL路径字符串，但是，由于我没有单元测试的经验，我不确定测试如何评估我的代码。我得到了测试，必须确保在运行

npm测试时通过测试

当我运行
npm test
时，我在spec.js文件中很难看到我的方法的结果。下面给出的测试创建了一个空url字符串，然后对其进行测试，这似乎很奇怪。当我通过插入
this.app.generateURLMethod
并将其值保存到变量来调用方法本身时，它表示该方法返回了一个未定义的值

这里有两个测试示例：

应用组件规范ts

describe('API', () => {
       it('should add a greater than or equal to filter to the url', () => {
        const url = '';
        expect(url).toBe('/items?price_gte=100');
    });
    it('should add a less than filter to the url', () => {
        const url = '';
        expect(url).toBe('/items?price_lt=1000');
    });
});

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


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

 userType = 'customer'; // Default user type is customer.
  lessThanValue;
  greaterThanValue;

  filterAdded;
  urlPathString;

constructor() {}

generateURLMethod(userType, greaterThanValue, lessThanValue, limitValue, offsetValue) {
    this.filterAdded = false;
    this.urlPathString = (`/${this.userType}`);

    if (greaterThanValue) {
        this.urlPathString += (`?price_gte=${greaterThanValue}`);
        this.filterAdded = true;
    }

    if (lessThanValue) {
      if (this.filterAdded === false) {
        this.urlPathString += (`?price_lt=${lessThanValue}`);
        this.filterAdded = true;
      } else {
        this.urlPathString += (`&price_lt=${lessThanValue}`);
      }
    }
window.location.href = this.urlPathString;

下面是我创建URL字符串的方法：

应用程序组件.ts

describe('API', () => {
       it('should add a greater than or equal to filter to the url', () => {
        const url = '';
        expect(url).toBe('/items?price_gte=100');
    });
    it('should add a less than filter to the url', () => {
        const url = '';
        expect(url).toBe('/items?price_lt=1000');
    });
});

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


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

 userType = 'customer'; // Default user type is customer.
  lessThanValue;
  greaterThanValue;

  filterAdded;
  urlPathString;

constructor() {}

generateURLMethod(userType, greaterThanValue, lessThanValue, limitValue, offsetValue) {
    this.filterAdded = false;
    this.urlPathString = (`/${this.userType}`);

    if (greaterThanValue) {
        this.urlPathString += (`?price_gte=${greaterThanValue}`);
        this.filterAdded = true;
    }

    if (lessThanValue) {
      if (this.filterAdded === false) {
        this.urlPathString += (`?price_lt=${lessThanValue}`);
        this.filterAdded = true;
      } else {
        this.urlPathString += (`&price_lt=${lessThanValue}`);
      }
    }
window.location.href = this.urlPathString;

}
我解决了我的问题，想在这里发布解决方案，以防将来对某人有所帮助

尽管我在阅读Angular 2测试文档之前从未处理过单元测试，该文档介绍了如何在组件上运行单元测试。我了解到，虽然我已经得到了我应该通过的测试，但我缺少初始化设置以及运行函数的实际代码。下面是成功运行并通过的完整测试文件

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ComponentFixtureAutoDetect } from '@angular/core/testing';
import { hostElement } from '@angular/core/src/render3/instructions';
import { HtmlParser } from '@angular/compiler';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [ FormsModule ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true }
      ],
    }).compileComponents();
  }));

  describe('API', () => {
    it('should build the url for the employees endpoint', () => {
        const fixture = TestBed.createComponent(AppComponent);
        const url = fixture.componentInstance.generateURLMethod('employees');
        expect(url).toBe('/employees');
    });

});

为了解释一下，我插入了Angular自动创建的标准测试初始化设置。然后我添加了FormsModule（在顶部导入，也在测试床配置中导入）。我还添加了AutoDetect作为自动检测更改的提供者，这可能不是必需的，特别是因为我没有显式地调用它。然后调用该函数并将返回值存储到一个变量中

然后，在实际的测试中，我了解到您需要实例化一个组件，因为测试实际上并不运行整个项目，而是运行它的各个部分

它是如何工作的

这将实例化该组件<代码>常量fixture=TestBed.createComponent（AppComponent）

这将函数的返回值从组件分配给变量<代码>常量url=fixture.componentInstance.generateURLMethod（'items？price_gte=100'）

最后，根据预定义的测试条件
expect（URL）.toBe（'/items？pricegte=100'）对包含我的URL字符串的变量进行评估