is it possible to dump and restore window.angular to create a restorable snapshot

Question

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.

Any suggestions on how this can be achieved?

I'm not looking for a restored snapshot to be functional, eg it needn't have active watchers or broadcast subscriptions. It just needs to faithfully render a view for visual inspection.

--edit--

I'm starting to think this can't be done.

What I have come to realise is that all of my Angular projects from now on will have a single service called VmStateService, and basically, every single item of VM data that affects the rendered view must live in this single service, which is injected into every controller. That way I only have a single, clean object (it has no functions), that I can dump to a string, or save to local storage, and restore to create any view that I want to test.

I guess it's unfortunate that everybody learns AngularJS by doing $scope.foo = "bar", and then spends the rest of their career realising what a mess that creates.

Answer 1

If you do your testing with karma then you can use karma-fixtures-preprocessor.

The gist:

1. create a service that returns a mock or create test fixtures
2. using dependency injection (angular for the win); inject your mock / mock data and test your logic in isolation.

If you have problems with this approach; then you most likely have weak separation of concerns.

Check out these great resources:

• 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

my $0.02 analysis

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.

This does sound a lot like weak separation of concerns. If you are given all the data; it should be easy to trigger a view, or go to a state.

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.

This does sound a lot like using fixtures. As for what data you would need to record; using http interceptors to log the content could work for you (don't do that in prod). You could then use the content you just logged for use in your mock data.

testing a view with different inputs

That usually means you want to test custom directives with different data. You could do this with:

• as many fixtures as needed for each testcase,
• beforeEach to load the proper data for a group of testcases,
• using $digest() to update the view,
• checking the updated markup with .find() or .attr(), etc, on the element.
• checking the rendering with .clientHeight, .clientWidth, etc.

validating (visually) many different UI elements

There is a lot you can do for manually checking elements.

Adding a "test page", where the same elements are shown with different data, classes, styles, etc. When some of the data is provided as a user input, and it is difficult to check in an automated fashion; this may be a valuable approach. Examples are: Bootswatch which lets you check many UI elements of bootstrap under different themes. jquery UI ThemeRoller which lets you quickly check many elements under different themes.

dump / restore functionality

This question has some good points about accessing child scopes from parent scope: AngularJS - Access to child scope

Additional points:

• you need to know what the markup is before it gets updated,
• dumping may be easy if you manage to get data from all the necessary scopes,
• however doing the restore may not work at all due to how you would do the updates. e.g. doing one element at a time may trigger updates, not doing it in the proper order may trigger updates that may modify elements, etc.

This gets very hairy. I don't know a library that provides generic dump / restore functionality.