angularjs – 是可能的转储和恢复window.angular创建一个可恢复的快照

前端之家收集整理的这篇文章主要介绍了angularjs – 是可能的转储和恢复window.angular创建一个可恢复的快照前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的应用程序需要在UX中的复杂步骤达到其许多状态。这使得开发/测试周期对于必须在宽范围的状态下进行视觉验证的简单布局改变是非常麻烦的。

所以,我正在研究对运行应用程序(例如window.angular,或者$ rootscope)的转储/快照的实用性,使我可以从该快照快速恢复,运行$ rootscope。$ digest()和et voila。

关于如何实现这一点的任何建议?

我不是在寻找恢复的快照是功能,例如它不需要有活动监视器或广播订阅。它只需要忠实地呈现视觉检查。

– 编辑 –

我开始认为这不可能做到。

我已经意识到的是,从现在开始,我的所有Angular项目将有一个称为VmStateService的服务,基本上,影响渲染视图的每一个VM数据项必须存在于这个单一的服务,注入到每个控制器。这样我只有一个单一的,干净的对象(它没有函数),我可以转储到一个字符串,或保存到本地存储,并还原创建任何视图,我想测试。

我想这是不幸的是,每个人都学习AngularJS通过做$ scope.foo =“bar”,然后花他们的职业生涯的其余部分,意识到一个混乱创造。

如果你用karma做你的测试,那么你可以使用 karma-fixtures-preprocessor

要点:

>创建一个返回模拟或创建测试夹具的服务
>使用dependency injection(角赢得);注入你的模拟/模拟数据和测试你的逻辑隔离。

如果你有这个方法的问题;那么你很可能有weak separation of concerns

查看这些巨大的资源:

> Loading a mock JSON file within Karma+AngularJS test
> http://angular-tips.com/blog/categories/unit-test/
> https://docs.angularjs.org/guide/services#unit-testing
> https://docs.angularjs.org/guide/unit-testing
> https://docs.angularjs.org/guide/e2e-testing
> https://github.com/kbaltrinic/http-backend-proxy

我的$ 0.02分析

My app requires complex steps within the UX to reach some of its many states. This is making the dev/test cycle extremely cumbersome for simple layout changes which have to be visually verified for a wide range of states.

这听起来很像弱分离的关注。如果你给所有的数据;它应该很容易触发一个视图,或者去一个状态。

So,I’m looking into the practicality of taking a dump/snapshot of the running app (ie. window.angular,or perhaps $rootscope) in such a way that I can quickly restore from that snapshot,run a $rootscope.$digest() and et voila.

这听起来很像使用夹具。至于你需要记录什么数据;使用http interceptors来记录内容可以为你工作(不要在prod中做)。然后,您可以使用刚刚记录的内容在模拟数据中使用。

测试具有不同输入的视图

这通常意味着你想用不同的数据测试自定义指令。你可以这样做:

>每个测试用例所需的夹具数量
> beforeEach为一组测试用例加载适当的数据,
>使用$ digest()来更新视图,
>在元素上使用.find()或.attr()等检查更新的标记
>使用.clientHeight,.clientWidth等检查呈现。

验证(视觉上)许多不同的UI元素

有很多你可以做手动检查元素。

添加“测试页”,其中相同的元素被示出为具有不同的数据,类,样式等。当一些数据被提供为用户输入时,并且难以以自动方式检查;这可能是一个有价值的方法。示例:Bootswatch,它允许您检查不同主题下的许多引导程序的UI元素。 jquery UI ThemeRoller,让您快速检查不同主题下的许多元素。

转储/恢复功能

这个问题有一些关于从父作用域访问子作用域的好点:
AngularJS – Access to child scope

其他要点:

>你需要知道什么是标记之前它被更新,
>转储可能很容易,如果你设法从所有必要的范围获取数据,
>然而,由于您将如何执行更新,所以执行还原可能不工作。例如一次执行一个元素可能触发更新,不按正确的顺序执行可能会触发可能修改元素的更新等。

这变得非常毛茸茸。我不知道提供通用转储/恢复功能的库。

猜你在找的Angularjs相关文章