How to Write Unit Tests for your Ionic Angular App

Learn the basics for Angular unit tests with Ionic so you can really put that *.spec file next to all of your components to use!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/write-unit-test...
⚡️ NEW: 46 Pages Ionic QUICKSTART GUIDE
ionicacademy.com/ionic-quicks...
➡️ Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️ Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join our Facebook group:
/ simonics
#############################
00:00 About unit tests
01:43 Testing an Angular service
13:04 Testing Ionic pages
22:39 Testing asynchronous code
31:23 Testing API calls with Observables
40:29 Teardown
#ionic #angular #unittests

[@irohwavez]

Oh man, this is the thing that's been on my backburner to learn and do properly for over a year now. Thank you!

[@galaxies_dev]

Now is the time Jason :)

[@dansteveadekanbi9899]

I have been waiting for this video. Thank you so so much.

[@galaxies_dev]

Glad I could help Dansteve!

[@vveerrgg416]

OMG !!! ... the one thing I have never understood and promised myself i would do next time I build a project from scratch .... SOOO now you've got me wanting to build something new to follow this method. Thanks ... (no seriously thank you... this is awesome)

[@galaxies_dev]

Glad I could help! And it's always a good feeling to start a new project :)

[@geronimovelasco]

Just when I need this topic, ty Simon!

[@galaxies_dev]

🙌

[@user-is5bs8qb4y]

Love your work man, thank you. Shout out from Brazil.

[@galaxies_dev]

Thanks for watching!

[@iridixgu7537]

Thanks for this awesome video!

[@galaxies_dev]

Glad you liked it!

[@alanbique2548]

one more top quality video!! Thankss!!

[@galaxies_dev]

Thank you!

[@Eyezbergslim]

Great tutorial as usual, but I"m having issues with a unit test that requires me mocking the GooglePlace Module. Do you have an example of how to do that?

[@duanehodges3146]

SImon, how would you inject the Google Place Module into a unit test?

[@mostafaosman1437]

Thank you for this

[@galaxies_dev]

No problem 😊

[@cinematicvideosbyrumel7216]

How do you test it when you use functions like adding a doc to/ reading a doc from a firestore collection in the service.ts? One good video tutorial would be a good resource for us since we don't find enough resources regarding testing firestore related functions.

[@TheSaceone]

I'm gonna need to see this video more than a couple of times... Testing is mindblowing, thank you so much for explaining them! One question Simon, is it necessary to keep track of the subscription when testing observables and unsubscribe afterEach test block?

[@galaxies_dev]

Not 100% sure if it's necessary but can't hurt to clean up :D

[@vladimirkolesnikov8672]

Thanks a lot! What about unit testing functionality connected with Capacitor's native features?

[@galaxies_dev]

In those cases you would most likely create a Mock object of the Capacitor class since you can't really trigger a native plugin within a test!

[@w3tweaks408]

can I get jest unit test case for ionic capacitor plugin?

[@igorigor806]

Thanks!

[@galaxies_dev]

Thank you Igor!

[@TheLukedb]

Can you make a new video with Jest since Angular is moving away from Karma?

[@vishh__]

Hey Simon can please make a video on auto verification of phone number using ionic capacitor

[@ravijatav1938]

Hi Simon
I am trying to integrate paid api for voice and video calling in ionic Cordova app but unable to implement it. So will you please guide me for that how can I implement this. Please provide me a solution for that as soon as possible.

[@mohammadaamir7741]

i am also integrated same but facing same issue please provide best possible solution for that.

[@PlaidFox]

Tried walking through this tutorial and got to about 4:16 when my npm Test threw the following error:
"Error: src/app/services/data.service.ts:12:31 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. 12 const result = JSON.parse(localStorage.getItem('todos'));"
Not sure if there's a newer version of this video tutorial with updated code or if I'm doing something wrong on my end.

[@Gabriel-pe6oi]

do this:
getTodos(): any[] {
const data = localStorage.getItem('todos');
const result = data ? JSON.parse(data) : [];
return result;
}

[@carlosmontiel7078]

Can you make a vide on how to do ionic build android/ios and then install it ?
I was wondering the way you can sign apps with ionic.

[@galaxies_dev]

Sounds good Carlos, sure!

[@supadek]

Ehrenmann!

[@galaxies_dev]

🤝