Angular 应用级别的依赖 Fake

简介: Angular 应用级别的依赖 Fake

原文:Faking dependencies in Angular applications


使用 Angular 依赖注入系统的强大功能,我们可以伪造特定的用例。 这对于自动化测试很有用,但在本文中,我们将研究一种将其用于手动测试的方法。


为了让我们的生活更轻松,我们将创建一个浏览器伪造组件,由于自定义结构指令,该组件仅在开发模式下启用。 为了好玩,我们将添加文本管道以在我们的组件模板中使用常见的字符串操作。


Simulating a browser environment

Dynamically replacing a dependency using a class-based service

用户代理令牌工厂只对每个模块注入器评估一次,如果它没有被祖先组件或指令提供的元素注入器替换,我们必须使用另一种技术来伪造依赖项。 我们将使用基于类的服务依赖替换依赖注入令牌依赖。

image.png

image.png首先,我们从依赖注入令牌中提取 Internet Explorer 11 检测到我们新创建的 InternetExplorerService 类。 Internet Explorer 11 检测令牌现在在根据用户代理评估其值时委托给服务。


如前所述,我们不会使用元素注入器在模板中以声明方式动态替换用户代理令牌。 相反,我们将强制更改状态。


Creating an observable state

下面展示的办法不使用 userAgent token 的 injection token,而是使用 Observable. 这个 Observable 对象从另一个 Browser service 里获得。

image.png

browser service 实现里,还是会使用 user agent injection token:


image.png

我们将当前用户代理状态存储在 BehaviorSubject 中,它暴露在 BrowserService 的可观察 userAgent$ 属性中。 当整个应用程序需要用户代理时,它应该依赖于这个 observable。


最初,behavior subject 的初始值来自用户代理令牌的真实用户代理字符串。 该值也被存储以备后用,因为我们允许通过两个命令更改浏览器状态。


我们公开了 fakeUserAgent 方法,该方法将用户代理状态设置为假用户代理字符串。 此外,我们允许依赖者调用 stopFakingUserAgent 方法,该方法将用户代理状态重置为真实的用户代理字符串。


Internet Explorer Service 现在公开一个名为 isInternetExplorer11$ 的可观察属性,只要浏览器服务的可观察用户代理属性发出值,就会评估该属性。


The Internet Explorer service now exposes an observable property called isInternetExplorer11$ which is evaluated whenever the observable user agent property of the browser service emits a value.


我们现在需要的只是让弃用横幅组件依赖于可观察的 Internet Explorer 11 检测属性,而不是我们替换的常规属性。

image.png

现在 banner 是否 visible,是由两个 boolean 值控制了,所以使用 combineLatest.


image.png

在弃用横幅组件中,我们将 Boolean isDismissed 属性替换为 BehaviorSubject ,该属性最初被清除(设置为 false)。 我们现在有一个可观察的 isBannerVisible$ 属性,它是来自 isDismissed 和 InternetExplorerService#isInternetExplorer11$ 的可观察状态的组合。 UI 行为逻辑与之前类似,不同之处在于它现在表示为 observable 管道的一部分。


现在,onDismiss 事件处理程序不再为属性分配布尔值,而是通过 isDismissed 行为主体发出布尔值。


此时,应用程序的行为与我们引入 Internet Explorer 服务和浏览器服务之前的行为完全相同。 我们有浏览器状态更改命令,但我们需要某种机制来触发它们。


为此,我们将开发一个浏览器伪造器组件,使我们能够为应用程序的其余部分伪造浏览器环境。

image.pngimage.png

browser faker 组件注入浏览器服务。 它有一个绑定到本机 select 控件的表单控件。 选择浏览器后,我们开始通过浏览器服务伪造其用户代理。 选择默认浏览器选项后,我们会停止伪造用户代理。


现在我们有一个浏览器伪造组件,但我们只希望在开发过程中启用它。 让我们创建一个仅在开发模式下有条件地呈现的结构指令。


创建一个 injection token:

image.png

image.png

image.png

如果应用程序在开发模式下运行,则此结构指令仅呈现它所附加的组件或元素,正如其测试套件所验证的那样。

现在,剩下的就是将弃用横幅和浏览器伪装器添加到我们的应用程序中。

image.png

最后的效果:选择 IE 11 时,出现 deprecation 提示:

image.png

为了能够模拟用户环境,我们创建了一个在开发模式下有条件地呈现的浏览器伪造组件。 我们将浏览器状态封装在一个基于类的服务中,并让应用程序依赖它。 这与浏览器伪造者使用的服务相同。


浏览器伪造器是在 Angular 应用程序中伪造依赖项的一个简单示例。 我们讨论了动态配置 Angular 依赖注入机制的其他技术。


本文提到的测试程序地址:https://stackblitz.com/edit/testing-and-faking-angular-dependencies-app?file=src%2Fapp%2Fbrowser%2Fbrowser-faker.component.html


相关文章
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2
|
1月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
15 1
|
10天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
2月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
26 0
|
3月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
4月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0
|
4月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
52 0
|
4月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
23 0
|
4月前
|
缓存 JavaScript 中间件
如何在 Angular 应用中发起 HTTP 302 redirect
如何在 Angular 应用中发起 HTTP 302 redirect
29 0

热门文章

最新文章