Stackblitz:如何使用Angular执行测试?

时间:2018-11-22 17:19:37

标签: angular stackblitz

如何使用Angular项目使用Stackblitz执行测试脚本? 我在package.json中看到了一个业力软件包,所以我想知道是否有可能测试我的组件

https://stackblitz.com/edit/redux-in-actions?file=package.json

谢谢 安德里亚

1 个答案:

答案 0 :(得分:0)

一种方法是使用Jasmine(一种行为驱动的开发框架)在Stackblitz中运行Angular测试。

Stackblitz Demo

简述为step by step guide

主要步骤:

  1. 安装茉莉花
  • 将Jasmine添加为对stackblitz的依赖
  • 添加文件/src/global-jasmine.ts
    import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
    window.jasmineRequire = jasmineRequire;
    
  • 编辑/src/styles.scss
    @import 'jasmine-core/lib/jasmine-core/jasmine.css';
    
  • 添加/src/main-testing.ts file
    
     import './global-jasmine'
     import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
     import 'jasmine-core/lib/jasmine-core/boot.js';
    
     import './polyfills';
    
     // This file is required by karma.conf.js and loads recursively all the .spec and framework files
     import 'zone.js/dist/async-test';
     import 'zone.js/dist/fake-async-test';
     import 'zone.js/dist/long-stack-trace-zone';
     import 'zone.js/dist/proxy.js';
     import 'zone.js/dist/sync-test';
    
     // Requires 'zone.js/dist/proxy.js' and 'zone.js/dist/sync-test';
     import 'zone.js/dist/jasmine-patch';
    
     import { getTestBed } from '@angular/core/testing';
     import {
       BrowserDynamicTestingModule,
       platformBrowserDynamicTesting
     } from '@angular/platform-browser-dynamic/testing';
    
     // stuff to test
     import './app/app.component.spec.ts'
    
     jasmine.getEnv().configure({random: false});
     bootstrap();
    
     function bootstrap () {
       if (window.jasmineRef) {
         location.reload();
         return;
       } else {
         window.onload();
         window.jasmineRef = jasmine.getEnv();
       }
    
       // First, initialize the Angular testing environment.
       getTestBed().initTestEnvironment(
         BrowserDynamicTestingModule,
         platformBrowserDynamicTesting()
       );
     }
    
    
  1. 添加测试/src/app/app.component.spec.ts,例如:

    describe('Testing tests', () => {
      it('should succeed', () => expect(true).toEqual(true));
      it('should fail', () => expect(true).toEqual(false));
    });
    
    
    
  2. 运行测试

    在文件"main": "src/main-testing.ts",中使用"main": "src/main.ts",代替angular.json