Angular 9 Tutorial For Beginners #68- Testing Fundamental Concepts

hi friends welcome back to Arcturians we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn some important concepts and basic fundamentals of testing angular applications welcome back my name is shredder I have over 10 years of experience as a full-stack developer on modern web technology applications and frameworks like angular node express MongoDB and much more I'm here to share my knowledge with you all and also to learn from you all during the course of this tutorial series if you have any doubts any queries any questions feel free to ask me in the comment section below I'll be happy to help you I am putting in a lot of hard work in bringing these tutorials for you I'll really appreciate if you can support me by subscribing to my channel and liking the videos thank you in advance this is part of the angular 9 full tutorial playlist where we have around 68 tutorials so far and the playlist link is in the description box below for you if you really want to learn and master angular 9 this is the playlist for you make sure you check it out thank you so we have started this mini series on angular testing in the previous episode we learned about some basic fundamentals and introduction about some of the frameworks which angular uses today we are going to learn some more important concepts and fundamentals before we actually start learning how to test our angular applications so today we will learn about some important fundamental concepts importantly what are the project files and folder structures related to testing what what are the files that you see which ends with speck tortillas in our angular application how do we distinguish between unit and it we test how do we see the code coverage folder where are the entry folders and scripts etc and much much more let's get started with each one by one and start learning about it so today's episode is less about code more about understanding the code so make sure you let's make some notes for you in order for you to learn and master the fundamentals so I will go ahead and make some notes for you angular testing fundamental concepts all right so the first thing that you have to understand in your angular application is there will be files which will end with spec dot TS so we know in the last episode we saw that angular supports two types of testing unit tests and end-to-end tests right so these are the two types of testings that are available right now angular supports unit tests and end to end tests and if you see the code carefully you would see that if you use angular CLI it will generate you to some of the files which ends with speck tortillas like for example here you see it is Edwin - home dot component speck tortillas right so remember that whenever whenever whenever you see a file ending with dot speck dot TS it means this is a unit test script right so this is a unit test what is a unit test it's a smaller granular level which is used to test this particular component or a module or a service so if you see any of the generated code generated components you will see a speck file ending with dot speck dot PS that means it is an end unit test script now similarly whenever you find you see a file inside the folder e to e right which is here if you see app source at source at top level you see eg folder right this folder this is the folder where you will see all your and to end test scripts okay all the test scripts are in your end-to-end test scripts and this will also have it with spec but the end here you will see with E - E - spec dot ts right so for unit test it is specters for end-to-end test it is dot E - E - E - spec dot TS ok so this is how you can differentiate between a unit test and an end-to-end test end-to-end test will always have dot E - E - spec tortillas unit tests will have dot spec dot TS file ending alright so that is about and as you see you can notice now that all of our end-to-end test scripts will be or / should be inside the e - e folder right since this is end-to-end we'll put it in the need to a folder unit tests can be in any folder right or I would say in respective folders with respective folders means if it's a service service will have its own service tortillas file if it's a component it will have its own file right so you can have it anywhere but usually we will the best practices keep the file where your code is best practices' keep your unit tests keep your unit tests where your code is right and then the next important thing to understand and know in the previous episodes we have learned that angular supports two main frameworks right one is Jasmin karma Jasmin / karma and the other is protractor right so Jasmin framework and karma are used for unit protractor is used for end-to-end tests right now whenever we were working with it we will need to configure right we will need to do some configurations for our running our test configurations for running our tests right so for unit tests you will configure karma file and for n 2 and you will configure the protractor configuration file config file and here we will take the karma config file where are they located if you see your project structure under app you should see karma dot JS not under app sorry under the source right under the source you would see karma dot config dot J's under app a sorry not under app under source sorry under source you will see karma dot conflict or chase file right so this is the main file you will do for configuration karma dot confidantes similarly for protractor you can find it under the e to e which is protractor protractor dot-com dot JS file right so these are the configuration files that you will edit whenever you want to make any changes in your settings right we will see these settings when we start actually unit tests and end-to-end tests but for now understand that which files to look for right where to look for when you want to change any of these so this these are some of the high level things that you should know about testing also remember that all these can be configured right so we can make configuration changes for unit tests unit tests and end-to-end tests right we can do a lot of things can do a lot of things with respect to testing like code generation code coverage reports configuring ports where it should run configuring tests which test to skip which one to execute which wants to execute and much much more we will learn about that when we come to the next episode where will started looking into detail about unit tests and end to end but these are some of the high-level things that you should know before you start anything about testing in angular applications now remember we can test any and all aspects of angular application right remember the purpose is to test our application logic logic and not to test angular framework right so this is very important because a lot of developers make mistake when they try to automate and try to write logic to test angular components angular features angular module don't do that the purpose of our East our testing needs to focus the angular application we have written that is our logic and not to test angular framework itself right finally last thing so we can extend our angular application to work and test with other testing frameworks right frameworks like you can use mocha you can use cucumber for BDD testing etc etc you can you can you if you name it you can use it here all right so that being said the last thing I will tell you today is I'll teach you how to do code coverage but remember that whenever you generate code coverage it will create a new folder called coverage here like this and you can see all the tests report and code coverage details their details are captured in this folder okay so in the next episode we will start using these files we'll start using these folders and we'll start building and writing some of our tests and also learning the utilities that are provided by angular CLI all right so that being said this answers the the questions or rather the topics fundamental concepts that I have written here before there's one thing I have to cover which is main tortillas and test tortillas let's cover that now so you under your application you'd in the source you would file find a file under source you will find a file called main dot TS now remember this is the file which tells angular what to start what to begin right so when you open it you will see there is a padule there is platform browser dynamic and you're telling would strap module right so and you're giving a module name correct so remember every angular application will require us to give a module name right this main tortillas is the starting point of our angular application right without this it will not work if you see notice carefully in the main tortillas we are telling start with app module right so app module is the default bootstrap module bootstrap module now don't get confused this is not our bootstrap framework CSS framework here the bootstrap means starting that means which module to load first when our application starts right that that is what here bootstrap means we can configure we can configure which module to start which module to start when our app loads we can always mention that by changing it in the app module here we can give them name of the module we we want to change now remember this is a most commonly used interview question that how do you use platform browser dynamic right so using platform browser dynamic we use to start the angular application all right using platform browser dynamic we start and let angular know which module to load right now similarly for each four main tortillas there is a test file which is used for testing this particular file component or code and that is called test dot TS which is again available here in your under source itself so you can see the script here tests what is there in the main dot is so test or TS is the file testing the pig code of main dot PS file right a lot of times in interviews they ask what C is the difference what is the difference between main dot tears and test dot TS right so you should be able to answer that after knowing this that the main dot TS is the main file that starts our angular application test dot TS is the file which has the code to test the main dot es file all right and lastly there will be some configurations that we can make for configuring our test methods or tests configs right that can be found in angular dot JSON so this file consists of your testing scripts like what you want to add what you want to remove where should we'll see that when we start our unit tests and end-to-end but understand under angular dot JSON you have this test which tells which one to start testing so here if you see main source slash test dot TS similarly under the build it would have main dot TSC here under build you have main dot TS under test you have test dot TS right and I said there is a configuration files which we can pass to for karma config ts config that we will learn in the next episode but know that we can always pass configurations why angular dot JSON alright so that being said I think this is what I want to cover today in fundamental concepts once you have understood it we are good to start our testing unit tests in the angular application which is in next episode make sure you don't miss it as always I welcome your queries and doubts in the comment section feel free to get help from me feel free to ask your questions to me thank you so much for joining if you enjoyed this video give a thumbs up to the video please like the video and courage me by liking it thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 6,728

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular testing tutorial, angular testing example, angular 9 testing tutorial examples, ng testing

Id: fDCRg8OQ1Do

Length: 16min 19sec (979 seconds)

Published: Fri Jul 17 2020