Unit testing in Angular with ng-lottie element

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

My setup is trivial angular unit testing with karma and jasmine.

What is this request about?

@arturovt Thank you for developing this library. It is really great and easy to work with. Excuse me if my more of a support request does not belong here and should be deleted.

One issue I am facing in my current setup is when I test Lottie in a *ngIf directive. In this case, when the animation should be displayed but really quickly I change the binding of the *ngIf to be false I have the LottieEventFacade calling dispose method which calls destroy on an animatiionItem of null `private dispose(): void { if (isPlatformServer(this.platformId)) { return; }

// destroy() will remove all events listeners
this.animationItem!.destroy(); // in here this.animationItem is not shown.
this.animationItem = null;

}` And later in time the loadAnimation method is triggered.

Since I am not proficient with testing and what to mock in this case, I currently have added CUSTOM_ELEMENTS_SCHEMA to the tests so I can go around the issue. Another way around for me was to Provide the PLATFORM_ID token as “server” because then the destroy is not called.

All in all my question is how is the best approach to test this scenario:

  1. Lottie directive starts
  2. The ng-lottie element is destroyed before it has loaded and initialized the animationItem
  3. An error is thrown that cannot call destroy() of null

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
arturovtcommented, Dec 16, 2019

I have published 5.3.1. Could you check it up?

0reactions
kzndzhirocommented, Dec 16, 2019

@arturovt
You are awesome 🥇 Thank you for fixing it up! It does work like a charm now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ngx-lottie - npm
ngx -lottie. TypeScript icon, indicating that this package has built-in type declarations · Readme · Code Beta · 2 Dependencies · 11 Dependents...
Read more >
Angular unit testing tutorial with examples - LogRocket Blog
An Angular unit test aims to uncover issues such as incorrect logic, misbehaving functions, etc. by isolating pieces of code. This is sometimes ......
Read more >
Adding Animated Illustrations to an Angular App with Lottie ...
Here's how I got animations from Lottie's free library into a re-usable angular component using the ngx-lottie package and angular's data ...
Read more >
Is Not a Known Element Angular Test
This error means that you have Non-Angular elements and trying to test them. You need to go spec.ts file (with this error )...
Read more >
ngx-lottie/README.md - UNPKG
The `ngx-lottie` listens to `AnimationItem` events outside of the Angular zone. It would be best if you didn't worry that animation events will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found