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

使用Angular CLI进行单元测试和E2E测试

首先创建一个angular项目, 带路由的: ng new sales --routing 创建好项目后, 直接执行命令测试: ng test ? 然后会弹出一个页面, 就是测试的结果数据....使用ng test -sr或者ng test -w false 执行单次测试  测试代码覆盖率: ng test --cc 的报告默认是生成/coverage文件夹下, 但是可以通过修改.angular-cli.json...然后spec里面也设置一个断点: ? 最后点击浏览器的刷新按钮即可: ? E2E测试的参数. 实际上angular cli是配合着protractor来进行这个测试的. 它的命令是 ng e2e....而测试文件是e2e目录下. 看一下spec和po文件: ? ? 再看一下app.component.html里面的值: ? 应该是没问题的. 所以执行ng e2e: ?...如果我想debug e2e, 那么执行这个命令: ng e2e -ee 由于我使用的是mac, 当前这个命令mac上貌似确实有一个bug: ?

2.7K70
您找到你想要的搜索结果了吗?
是的
没有找到

干货 | 关于前端构建大型知识应用,你知道多少?

很多时候我们的项目搭建的时候通常都不会定位为大型项目,但我们还是需要考虑到拓展性,或者说是在当项目开始变得较难维护的时候,要进行调整的一些方面。...项目设计 项目开始之前,我们需要做一系列的规划,像项目的定位(to B/C)、大小,像框架和工具的选型,还有很重要的一点是,项目和团队规范。 1.1框架选择 通常来说,框架选择是准备项目的第一步。...我们规划项目路由的时候,会推动我们对项目业务、功能区块化有更加深入的认识和理解。...我们可以把首屏相关的东西打包到 bundle,其他模块分块打包到 chunk,来需要的时候再进行加载。 路由异步加载 通常情况下,我们会结合路由进行分块打包,路由管理工具大部分都支持异步加载。...这允许我们架构于现有工具和模块之上,而不会增加额外的依赖或使项目的大小膨胀。 同时 Webpack 2 里也加入了 Tree-shaking 新特性。

1K10

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

该方法接受当前和上一属性值的 SimpleChanges 对象 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 Angular 销毁指令/组件之前调用。...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng.../pages目录下创建我们的博客项目模块(带路由配置模块):   我们开发一个项目可能会存在多个模块,比如说一个商城。...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,【routes】对象中声明新模块路由,以及项目默认调转页面地址修改。 ?

3.9K20

读书笔记“使用AngularJs开发下一代web应用”

P29 有两种主要的方法可以把控制器关联到DOM节点上,第一种是模板中通过ng-controller 属性来声明,另一种是通过路由把它绑定到一个动态加载的DOM 模板片段上,这个模板叫做视图。...currency date number uppercase ,还可以自定义过滤器 P44 JSON格式的脆弱性和XSRF P49 使用Karma编写并运行单元测试和场景测试 ,默认运行在9876端口,e2e...端对端测试是通过Angular场景执行器执行的。...未来某一时刻(主要是异步调用)会从服务器端返回或者被填充属性。 P85 Angular自动检测,如果发现引入了完整的jQquery库, 它就不会使用自己的jQlite实现。...P89 resolve对象 当每个resolve键都是符合条件才把路由显示给用户。 P116 JSON数组攻击

71620

Angular 1 vs. Angular 2 深度比较

开始之前,让我们看看 Angular 1 的绑定机制是如何实现的,然后如何使它更透明。...Angular 启动时会给所有的异步交互点打补丁: 超时 Ajax 请求 浏览器事件 Websockets,等等 在那些交互点,Angular 会对 scope 对象进行变动检查,如果发现有变动就激发相应的监视器...同时这种依赖注入器是类似层级结构,不同层次的组件树,有可能实现对相同类型的不同实现。 如果一个组件没有定义依赖,它会代理给上层注入器查找依赖,依次往上。...web component 的行为跟浏览器组件的行为类似,比如有 img 标签。 因此,页面初始化并且 Angular 介入之前Angular 表达式将被传给组件,并直接作用于它。...为了避免跟 web component 互操作问题,普通属性里绝不会出现 Angular 表达式。 支持 Shadow DOM Web 组件的主要特征之一就是 Shadow DOM。

2.8K100

Angular学习(02)--Angular-CLI命令

因为这系列文章,更多的会带有我个人的一些理解和解读,由于目前我也才刚开始接触 Angular 不久,该阶段的一些理解并不一定是正确的,担心会有所误导,所以还是以官网为主。...,跑起来后,运行 e2e 测试 lint l 对项目进行 lint 检查 test t 运行单元测试 help 查看命令的帮助信息 ... ......也就是 projects 里选择当前项目,然后再其 schematics 下进行配置,至于 @schematics/angular:component 这串怎么来的,可以去开头第一行所指的那份 schema.json...文件中查找。...有时候,前端和后端的工作都由同一个人开发,此时本地调试时,前端就没必要造假数据,可以直接将 Angular 项目编译输出到后端项目的容器中,直接在本地调试后端接口。

2.6K10

使用 Github Actions 自动部署 Angular 应用到 Github Pages

插件会自动把打包生成的文件发布到 github 上,并创建一个 gh-pages 分支作为 github page 显示的站点 ng deploy --base-href=/ingos-admin/ 之前学习...angular路由时有提到, angular 应用中,框架会将 index.html 文件中的 base 标签的 href 属性值配置为组件、模板、模块文件以及其它一些静态文件的基础路径地址。...": "ng e2e" } } ?...npm install 命令来还原项目所需的各种依赖,因此这里执行 install 命令之前,我们可以通过官方的 actions/cache@v2 来缓存项目依赖,以加快构建的过程 这里还原依赖时...复制生成的 token 信息,打开电脑的凭据管理器, Windows 凭据标签内,找到 github 相关的凭据,此时你可以将已经存在的凭据密码更新成刚才复制的 token 信息,或者直接将已经存在的

1.4K10

AngularDart 4.0 高级-路由概述 顶

并且路由浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库中,该库自带软件包。...配置 当浏览器的URL更改时,路由器会查找相应的RouteDefinition,从中可以确定要显示的组件。 直到您配置它,路由器才有路由。 以下示例创建一些路由定义。...但是大多数情况下,由于某些用户操作(如点击锚标签)迫使您导航。...危机详情显示列表下方的同一页面上的子视图中。 改变危机的名称。 请注意危机列表中的相应名称不会更改。 ?...这种行为的后面是路由的routerCanDeactivate挂钩。 离开当前视图导航之前,挂钩使您有机会清理或询问用户的许可。

6.1K20

Angular2入坑指南

angular.js 官网:http://www.apjs.net/ angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。...AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。因为背靠google也收到了开发者的推崇。...概念与区别 本人也React与Angular两大体系里纠结了好久,还使用React Native做了几个UI,彷徨于两大前端框架之前。...有官方的UI方案Material Design供选择 官工具链相对于React要成熟 有angular-cli这个便利化的工具,并提供E2E的测试,用以方便测试,并保证项目的质量。...Angular2快速安装与入门 安装angular-cli npm install -g angular-cli 创建项目 ng new PROJECT_NAMEcd PROJECT_NAMEng serve

2K70

Angular10配置webpack打包 「详细教程」

使用CLI创建一个新的Angular项目 从零搭建Angular10项目 先决条件 开始之前,请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。...第二步:创建工作区和初始应用 Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用的文件。 每个项目都是一组由应用、库或端到端(e2e)测试构成的文件。...第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...如果设置为 false,则不会进行模块分离。 cacheGroups: 该属性值的数据类型为对象,它的值可以继承 splitChunks.* 中的内容。...仅允许您添加一些块(例如,仅单元测试块) chunksSortMode {String、Function} auto 允许控制将块包含到HTML中之前应如何对其进行排序。

4.8K20

Angular性能优化实践——巧用第三方组件和懒加载技术

开始优化之前,我们先来分析一下是什么因素影响了项目的性能。 影响项目性能的因素 集成 SpreadJS 表格组件后,项目的公式数据处理速度符合预期,页面在运行也较为流畅。...懒加载会在首次加载时,将必须的模块加载,而其余暂时用不到的模块则不会加载。例如在商城系统中,用户打开首页时,只需展示商品,此时用不上支付模块,所以支付模块就可以使用懒加载技术。 项目优化 1....三个a标签分别代表主页以及两个需要懒加载的模块。 ? 3. 导入与路由配置 CLI会将每个特性模块自动添加到应用级的路由映射表中,最后通过添加默认路由来最终完成。 ? 4. 特性模块内部 ?...确认它正常工作 我们可以通过Chrome的开发者工具的网络页标签来确认这些模块是否懒加载。...这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以多个模块中使用 forChild()。

4K20

Angular 应用是怎么工作的?

angular.json 包含应用的所有配置信息。Angular builder 将通过这份文件,查找到应用的入口。 我们来看下 angular.json 文件包含什么,下面是一个例子。...Note:接到新任务时候,开始一个新的 Angular 应用之前,我都会先看 angular.json 和 package.json 文件。我会通过这两个文件了解应用的初始信息。... 标签里面的内容的更改是基于 URL的。这就引出了 app.routing.module.ts。...通过 app.component.html 模版文件(如下)路由出口 Router-outlet ,页面组件可以和 URL 一一对应,然后 标签内渲染。... 下面是它们之间匹配的插图: 目前为止,你不需要知道路由权限。并不是所有的组件都需要路由守卫,目前知道有这么一回事就好。

1.4K30

Angular 从入坑到挖坑 - Angular 使用入门

全局安装 Angular CLI ## 电脑上以全局安装的方式安装 angular cli npm install -g @angular/cli ?...解释 --force 强制覆盖现有文件 --skipInstall 创建项目时跳过 npm install 命令 --strict 代码中使用更严格的 typescript 编译选项 ?...e2e - 端到端测试文件 src - 单元测试源代码路径 app.e2e-spec.ts - 针对当前应用的端到端单元测试文件 app.po.ts - 单元测试源文件 protractor.conf.js...继承于工作空间根目录的 typescript 配置文件 src - 工作空间 1 最外层根项目的源代码路径 app - 系统所提供的各种功能 app-routing.module.ts - 项目的路由模块...,用来定义项目的前端路由信息 app.component.html - 项目的根组件所关联的 HTML 页面 app.component.scss - 项目的根组件 HTML 页面的样式信息 app.component.spec.ts

1.9K20

AngularJs ng-route路由详解

更多内容参考:Angularjs总结 前提 首先需要在页面引入angularangular-route,注意要在angular-route之前引入angular <script src="../....,而这个参数只有<em>在</em>加载完<em>angular</em>才会出现。...redirectTo:重定向地址 reloadOnSearch:设置是否<em>在</em>只有地址改变时,才加载对应的模板;search和params改变都<em>不会</em>加载模板 caseInsensitiveMatch:路径区分大小写...<em>路由</em>有几个常用的事件: $routeChangeStart:这个事件会在<em>路由</em>跳转前触发 $routeChangeSuccess:这个事件<em>在</em><em>路由</em>跳转成功后触发 $routeChangeError:这个事件<em>在</em><em>路由</em>跳转失败后触发...使用 <em>在</em>页面中,写入URL跳转的按钮链接 以及 ng-view<em>标签</em> <a href

1.9K61

Angular学习(01)-架构概览

举个简单的例子,不同模块中声明相同的变量名,或相同的 css 的类选择器,它们之间并不会起冲突。...路由 一个项目这么多模块,Angular不会一开始就把所有模块都加载,而是惰性加载,按需加载。 那么,什么时候会去加载呢?...因为组件的模板,其实就是一份 HTML 文件,基于 HTML 的标签之上,加上一些 Angular 的模板语法,而 Angular 将这份 HTML 文件代码交给浏览器解析之前,会先自行解析一遍,去将模板中不属于...这个时候,就可以将这些工作都封装到指令内部,然后每个按钮标签上加上该指令,Angular 解析模板时,发现了这个指令,就会为每个按钮都加上这么一段程序逻辑。...而 Angular 引入了 TypeScript,Scss 等浏览器并不无法识别的语言,自然,要让浏览器运行 Angular 项目之前,需要进行一次编译,一次转换。

3.5K50

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

Windows 上安装 Angular CLI 首先,您需要在开发计算机上安装 Node 和 npm。...doc (d): 浏览器中打开 Angular 官方文档 (angular.io),并搜索给定的关键字。...e2e (e): 构建并提供 Angular 应用程序,然后使用 Protractor 运行端到端测试。 generate (g): 根据原理图生成和/或修改文件。...如前所述,CLI 会询问您是否要添加 Angular 路由?,您可以通过输入 y(是)或 n(否)来回答,这是默认选项。它还会询问您要使用的样式表格式(例如 CSS)。...我们看看各个文件的作用: /e2e/:包含网站的端到端(模拟用户行为)测试 /node_modules/:使用 npm install 将所有 3rd 方库安装到此文件夹 /src/:包含应用程序的源代码

12300
领券