Angular Testing Tutorial #11 - Angular TestBed Tutorial

hi friends welcome to art tutorials this is angular testing full tutorial series this is the part 11 of the series and in today's episode we will focus and learn about angular test bed also known as atb in a shortcut so if you hear the terms atb or angular test bed they are the same before we get started let me inform your friends i have angular 9 full tutorial series as well as angular correct series in this particular channel the playlist links are in the description box below make sure you check it out to learn and master angular we will need a sample project for our angular testing tutorial and we will use the products feature module that i have developed as part of angular crud tutorial series i've also shown you how to install how to set it up in the episode number one and also given you the github link so make sure you you clone the project as well as you set it up in your local to test and learn angular testing alrighty so let's talk about today's focus topic which is angular test bed also known as atb right so what is a test bed the test bed is the first and the largest of the angular testing utilities that means angular test bed provides a lot of utilities which provides like component fixture debug element etc there are so many things to mention it's short here we don't have time for covering each thing but i will definitely cover it in the hands-on so remember that testbed is the first and the largest of the angular testing utilities it creates an angular testing module okay a simple ng module class so what is a testing module nothing but it's just ng module class if you want to learn what is ng module please refer to my angular 9 module series i have covered in depth that will clear any doubts you have so let's come back here so it creates an angular testing module that you can configure with the configured testing module that's a method which is inside the test bed we will write test bed dot configure testing module use by writing that we will create a testing module which is ready to produce the module environment for the class you want to test this is an important extremely important extremely important concept if you are attending an interview or for your understanding remember this testbed will create a testing module which is required to produce the module environment for testing and we do it by using the method configure testing module it helps us in configuring and initializing the environment for unit testing and provides methods for creating components and services in unit test it also helps us in creating a dependency injection context because we are injecting the providers and that's the way we can also use dependency injection context it compiles instantiates and renders to html our component attaching them to fixture instance so what is a fixture it's nothing but a wrapper around the component and the template which means we can now work with the component as well as with the template using the testbed fixture finally after setting the configuration we call the compile components function which means that is where we are starting to build the components for our testing this this i hope this is the theoretical explanation it is clear i will now take you to the code and make you understand even better okay let's get started and see the code so this is take a example of appcomponent.spec.ts right so what i will do i will make some notes right here just so that you can easily relate to the code and the theoretical explanation so you see here test bed we first import it from angular core testing right so import test bed from test bed from angular core slash testing okay that's the first step we have to import once you get that right we will use a method called configure testing module method right to set up a module to set up a module environment right why do we need this now let me show you that so if you see app module you have a module here right and the name of the module is app module that's what you're using here and you're declaring you're importing your provide your injecting providers you're writing bootstrap this is exactly what a configured testing module will also look like it will have imports it will have declaration you can have providers right whatever you want to have you can have them here just like how you would have it in a module file right so does it look simple to you does it can you relate to it this is a simple module the same thing you are writing inside configured testing module right you are you have imports you will import all your modules you have declarations you will import all your components now let's take a look at other things like here configure testing module i need only components so i've import i've declared only components but if you want modules you can inject modules you can inject services right so configure testing module is nothing but it's just a module ng module class right remember that just a ng module class and you can do everything that you can do with a module with an angular module this is extremely important almost asked in all interview questions right interviews that you let in right explain explain configure test module so you now you should be able to answer and explain them right also you can use test bed we can also use test bed to create components we can also use test bed to create components right let's let me show you go to the components and you would see inside before each here you see testbed dot create component and type of component which is reviews component in this case what it gives you is a fixture okay so remember that so we can use it we can create component using test bed dot create component method right what this gives is a fixture right so again this is also a very very important question lot of times it's asked what's a fixture right so it's a wrapper basically right so it's a wrapper around component and its template right in simple words in simple words using fixture we can access the components the components class properties as well as template elements right that's the beauty of it and that's what makes it so powerful let me show you again here you go you can see component right so this is a component right similarly using debug element we can query any ui element that is there in that right and you can use dot css you can use dot name you can use dot id sorry dot directive dot name so there are different ways of how you can target a particular element in the component template so that's why test bed is extremely important for you to understand before we start writing our code right i hope you are now clear about test bed what it does and its importance in terms of creating a configuring module and importance in terms of creating a component if you want to see what other types are there you can just type test bed dot and you would see all the different types of details that you can get like you can use inject you can use dot name dot override pipe you can use all of this to override right and this is an extremely important concept that lot of people do not know how to use it like we can use test bed to override right so for example if you have some kind of a pipe directive module which you cannot provide data directly right so what we can do is we can overwrite them right we can overwrite them to to so that we can use some kind of mock data right so these are all things we will cover uh when we get to that but just understand it's the most important it is the largest of all and you can reset you can overwrite template providers module directive component there are so many things that we will do as we will learn coding uh starting next episode uh the it's an ocean okay it's a notion we have to learn a lot we have to practice a lot right we have to to to we have to practice a lot which means we have to try a lot of use cases right which we will do starting next episode but i hope uh the topic of test bed is clear to you and you will be confident in writing and answering and in explaining what angular testbed is if you are clear with it drop me in the comments how you like this tutorial do give a thumbs up to this video don't forget to subscribe to my channel thank you so much in the next starting next episode we will start writing our test specs extremely important from next episode we are doing hands-on coding we will write lot of automated scripts to automate our application components services modules much much more stay tuned for that i look forward to joining me in the next episode if you have any comments feedback please drop them in the comments and don't forget to like share subscribe to my channel thank you

Channel: ARC Tutorials

Views: 7,049

Keywords: angular testbed tutorial, angular unit testing testbed, angular testbed, angular testbed override provider, angular testing tutorial, angular testing components, angular testing services, angular testing forms, angular testing mock service, angular writing tests in jasmine framework, angular e2e tests, angular e2e testing, angular run e2e tests, angular testing with karma and jasmine, angular jasmine karma tutorial, angular jasmine testing tutorial, testbed jasmine angular

Id: gcQaEsfjBVo

Length: 10min 44sec (644 seconds)

Published: Tue Sep 15 2020