首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular运行单/组单元测试

要在Angular中运行单个或一组单元测试,你需要使用Karma测试运行器和Jasmine测试框架

  1. 在Angular项目中创建一个测试文件(如果尚未创建)。测试文件的命名通常以.spec.ts结尾。例如,要为example.component.ts创建一个测试文件,可以创建名为example.component.spec.ts的文件:
  2. 在测试文件中,编写单元测试。使用Jasmine框架提供的API编写测试用例和断言。例如:
代码语言:javascript
复制
import { ExampleComponent } from './example.component';

describe('ExampleComponent', () => {
  let component: ExampleComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ExampleComponent ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ExampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
  1. angular.json文件中配置测试环境。找到test字段并将其配置为以下格式:
代码语言:javascript
复制
"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.spec.json",
    "karmaConfig": "karma.conf.js",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  }
}
  1. karma.conf.js文件中配置Karma。确保你已正确配置了所有需要的环境和依赖项。例如:
代码语言:javascript
复制
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    files: [
      'src/**/*.spec.ts'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};
  1. 在终端中运行以下命令以执行单个测试:
代码语言:javascript
复制
ng test --include src/app/example/example.component.spec.ts

如果要运行一组测试,可以使用通配符*指定多个文件:

代码语言:javascript
复制
ng test --include src/app/**/*.spec.ts
  1. 若要运行所有测试,请省略--include标志:
代码语言:javascript
复制
ng test

这样,你就可以在Angular中运行单个或一组单元测试了。在开发过程中,请确保你的测试覆盖率足够高,以便在更改代码时能够快速发现问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 之 单元测试

组件的测试 单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...通过将测试代码放到特殊的异步测试区域来运行,async函数简化了异步测试程序的代码。 接受无参数的函数方法,返回无参数的函数方法,变成Jasmine的it函数的参数。...然后测试程序继续运行,并开始另一轮的变化检测(fixture.detectChanges ),通知Angular使用名言来更新DOM。...fakeAsync函数通过在特殊的fakeAsync测试区域运行测试程序,让测试代码更加简单直观。 对于async来说,fakeAsync最重要的好处是测试程序看起来像同步的。里面没有任何承诺。...就是因为是自己对单元测试还没哟掌握,所以出了错,不要紧,重要的是以后不能再犯!

5.5K20
  • 小心 Angular 中的单例 Service

    原文: Angular Services do NOT have to be Singletons 你可能知道,当我们通过@NgModule()装饰器来声明一个service时,它将符合单例模式,...providers: [AdminService, AdminDataService] }) 这样做的好处是,当Angular注销组件实例时,Angular将同时注销与之绑定的service实例,y...(https://github.com/angular/angular/blob/674c3def319e2c444823319ae43394d46f3973b7/packages/core/src/view...译者注 之所以翻译了这篇文章,是因为今天在整理项目代码的时候,偶然发现了这个问题,虽然我使用Angular也有一段时间了,但是依然将很多没有必要声明在NgModule中的服务以单例模式的方式声明了。...大体总结一下Angular中声明service的不同方式和应用场景。

    2K30

    浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构。 众所周知,现在移动Webapp越来越多,例如天猫、京东、国美这些都是很好的例子。...而在Webapp中,又要数单页面架构体验最好,更像原生app。简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多。...废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1、requirejs+angular+angular-route(+zepto)   最后这个zepto可有可无,主要是给团队中实在用不爽...这一篇,先说说第1种:requirejs+angular+angular-route 移动端单页面Web相对多页面来说,模块化管理显得非常重要,因为如果没有模块化,页面初始化时就把所有的js和所有模版都加载进来...另外,说说三个重点的根目录文件: index.html,这个就是单页面唯一一个html了,其他都只是片段模版(tpl.html)。

    3.4K20

    如何使用Angular CLI和PM2运行Angular应用程序

    Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。 这允许您在开发期间连续运行应用程序。...$ cd sysmon-app $ sudo ng serve 使用Angular CLI提供Angular App 从ng serve命令的输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符...终止正在运行的Angular App 第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

    2.9K40

    创建并运行TestNG单元测试

    2、在弹出的窗口中选择“TestNG”并选择要创建的单元测试方法后点击“OK”按钮创建单元测试。(建议把所有方法都加单元测试) ?...设置方法:file -> Project Structure -> Modules 运行单元测试 idea 1.在测试方法上鼠标右键或者单元测试方法左边行数栏: 方法一: ?...运行通过的单元测试在控制台全绿色通过, ? 运行不通过则则会有提示: ?...maven 要通过maven运行单元测试,要保证pom配置没有跳过单元测试,检查设置如下: org.apache.maven.plugins...,进入工程根目录后执行:mvn test 执行具体的单元测试类,多个测试类可用逗号分开:mvn test -Dtest=ClassTest1,ClassTest2 执行具体的单元测试类的方法

    74720

    如何使用Angular CLI和PM2运行Angular应用程序

    Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...从ng serve命令的输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符。 因此,在运行时不能执行任何其他命令。...第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。...CLI和PM2流程管理器运行Angular应用程序。

    2.2K30

    Angular开发实践(二):HRM运行机制

    引言 在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能,关于如何在angular-cli启用HRM,请查看HRM配置 那HMR是个什么东西呢...HMR是webpack提供的一个功能,angular-cli使用了它,它会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。...主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态 只更新变更内容,以节省宝贵的开发时间 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式 这一切是如何运行的...我们先看看具体的效果: 1、启动angular-start项目,在控制台你可以看到HRM已经启用的消息: ? image 2、然后通过浏览器控制台可以看到,第一次加载请求了所有的资源: ?...为了运行追加补丁,style-loader实现了HMR接口;当它通过HMR接收到更新,它会使用新的样式替换旧的样式。 类似的,当在一个模块中实现了HMR接口,你可以描述出当模块被更新后发生了什么。

    1.7K70

    Go单测系列1—单元测试基础

    这是Go语言单元测试从零到溜系列教程的第1篇,主要讲解在Go语言中如何编写单元测试以及介绍了表格驱动测试、回归测试和单元测试中常用的断言工具。...《Go单测从零到溜系列》的示例代码已上传至Github,点击https://github.com/qo-quiz/golang-unit-test-demo 查看完整源代码。...总之我们需要确保这些组件是能够正常运行的。单元测试是一些利用各种方法测试单元组件的程序,它会将结果与预期输出进行比较。...Go1.7+中新增了子测试,支持在测试函数中使用t.Run执行一组测试用例,这样就不需要为不同的测试数据定义多个测试函数了。...通常我们使用的都是语句的覆盖率,也就是在测试中至少被运行一次的代码占总代码的比例。在公司内部一般会要求测试覆盖率达到80%左右。

    35420

    探索Angular 1.3 的单次绑定(one -time bindings)

    这是“探索Angular 1.3”系列的第一篇,包含了有史以来最重要的功能:单次绑定(one-time binding)。 等等!Angular的数据绑定不是自动和Ui保持同步么?...然而,为了实现数据绑定,Angular需要时刻监听相关的值,这就导致了性能问题,而单次绑定就是为此而生。...此刻,你想象下在你的视图中有大量的动态值需要被Angular赋值,譬如国际化,这在开发者使用Angular数据绑定来本地化app是一个很常见的场景,甚至当应用的语言在运行不能被改变,只是在初始化的时候设置...这将会一个很大开支,特别是当你的语言无需再运行时更改。 让单次绑定(one-time binding)来解决这个问题! 这就是单次绑定出现的原因。那么,什么是单次绑定呢?...那么,当我们在使用单次绑定到底是怎么样子的呢?Angular 1.3带来了新的插入指令和表达式以此来告诉Angular这个特殊的插入值应该被只绑定一次。 使用单次绑定我们只需要以::开始表达式即可。

    3.1K10
    领券