运行测试后销毁App组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了运行测试后销毁App组件相关的知识,希望对你有一定的参考价值。

我正在开发一个有角度的网站,我在运行单元测试时遇到了问题。我有这样的应用程序组件

export class Appcomponent {
    constructor(private service: SomeService) {
        service.init()
    }
}

并且服务的init()方法具有

init() {
    setInterval(() => {
        this.http.get(' /api/configuration/v1/log').map(res=> res).subscribe(() => {});
    }, 30000)
}

现在的问题是,当我运行这样的单元测试时,

describe('Appapponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let app: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule(
      {
        declarations: APP_DECLARATIONS,
        imports: APP_IMPORTS,
        providers: [APP_PROVIDERS, { provide: APP_BASE_HREF, useValue: '/' }]
      }
    ).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    app = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(app).toBeDefined();
  });
});

当我运行测试时,测试运行正常,但http调用因设置间隔而继续运行,测试不会退出。如下所示

enter image description here

因此,构建会超时并失败。如何解决这个问题?请帮我。

编辑

COnfivguration补充道

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli'],
        plugins: [
            require('karma-jasmine'),
            require('karma-phantomjs-launcher'),
            require('karma-chrome-launcher'),
            require('karma-junit-reporter'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        client: {
            clearContext: false
        },
        files: [
            { pattern: './src/test.ts', watched: false }
        ],
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        coverageIstanbulReporter: {
            reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        angularCli: {
            environment: 'dev'
        },
        mime: {
            'text/x-typescript': ['ts']
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        mime: { 'text/x-typescript': ['ts', 'tsx'] },
        browsers: ['PhantomJS'],
        singleRun: false,
        captureTimeout: 200000,
        browserDisconnectTimeout: 2000,
        browserDisconnectTolerance: 3,
        browserNoActivityTimeout: 200000
    });
};
答案

我想知道什么

 this.http.get(' /api/configuration/v1/log').map(res=> res).subscribe(() => {});

您为什么使用该代码以及它的用途。我认为代码什么都不做。请确保此代码真的是您的应用程序???。


问题

但无论如何都要到了这一点。你为什么在$http里面使用controller.component服务电话?它应该写在service.componenet部分内。因为那时只有你可以在单元测试时编写mock service而不是真正的服务。

那么,你想在UI单元测试中做什么

您应该将此$http调用移动到服务类中,例如

export class SomeService{
    constructor(private http: $http) {

    }    
   get()
    {
      setInterval(() => {
      this.http.get(' /api/configuration/v1/log').map(res=> 
      res).subscribe(() => {});
    }, 30000)
  }
}
  • 然后你应该写一个相同的get()方法,在Mock Service class中返回模拟数据。

喜欢,

    export class MockSomeService{
    constructor(private http: $http) {            
    }    
    get()
    {
     return Observable.of({});   //{} send mock data which you want to be check          
    }
 }
  • 在配置测试组件时,通过提供程序传递模拟类而不是真正的类。

喜欢,

providers: [{ provide: SomeService, useClass: MockSomeService}]

现在真正的服务在测试时被嘲笑了。因此,您可以获取模拟数据而不是real data/real service call来检查测试用例期望。


SetTimout()问题的解决方案

通常,如果你在Settimeout()中使用controller.componenet函数。您需要在测试用例中的fixture.detectChanges();旁边添加以下代码行。

        tick(3000);
        fixture.whenStable().then(() => {
            expect(0).toEqual(0);// do your expectation 
        });

以上是关于运行测试后销毁App组件的主要内容,如果未能解决你的问题,请参考以下文章

运行/调试你的PHP代码

组件销毁并重新访问后,订阅在 ngOnInit 函数中运行

后堆栈在 Jetpack Navigation 中无法正常工作

如何使用导航架构组件修复动态功能模块中片段的发布版本中的ClassNotFoundException?

VUE-生命周期

为啥组件销毁后订阅仍然存在?