What is unit testing in Angular, Read More !!!
Testing means whatever the product or software is made by the developer is working fine as per the client requirement. There are several ways of testing like unit testing, Interated testing, System Testing, Acceptance testing. But the unit testing is basic building block while performing coding and testing.
What is Unit Testing?
For example, developer check the code by passing some value let’s say the function accept only integer value and what happen if we insert string or other type of values. This type of testing which only check individual block of code or module or component is termed as a unit testing.Unit testing also termed as a White box testing.. It means the developer know the CODE very well.
To perform testing in angular like testing your pipe, component or project we required several tools.
In angular we have pre-configured tool named Karma and Jasime. Karma is the task runner.
We have another testing framework named “Jasmine”. There is other tool but mostly Karma and Jasmine used for testing purpose.
What is difference between unit testing and integration testing?
Integration testing means to test your module which are connected to each other in holistic way. Check the image in which we have two textbox And I want to add the text data which is entered in to the textbox in database and display it in down below table or grid.
So, what are the steps must work perfectly like Your website main page works perfectly fine, when I click on the ADD/Registration button make sure that Registration page loaded perfectly fine. Data inserted successfully and display into the grid.
Integration testing also named as Black box testing. Here the people who visit your site performing testing operation.
How to write simple test cases?
First, we specify what we are going to test. In our testing code we have 2 FUNCTION Describe() and IT().
Describe block, Describe(str,fn)
Describe means describe your application when it is running.
Str: – for angular perspective APP Component.
Fn: – Call back function.
We wrap all the test cases related to the component within the describe block.
The describe can have multiple IT.
To understand in more details when we use angular by default 3 test cases present. For ex. App component must be initialized.
All the test file end with spec.ts extension.SPEC termed as a specification.
Here I have created new test.spec.ts file. In main APP Folder, but make sure that remove the default spec.ts file from the folder.
When you trying to run the above code you MAY see the below error
is not digitally about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.At line:1 char:1
+ ng test
+ ~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
When you see the above error IN YOUR VISUAL STUDIO CODE, write down the command as shown below.
Run the ng test and you will see the output.
Let’s understand in details about how the Karma and Jasmine works with angular.
In above code we just performed the basic testing operation.
Jasime is open-source unit testing framework, and using it we write the test case code. We have karma.config.js file in our angular project, which runs the code of our testing. It works as a RUNNER, Like open your browser automatically all the operation works by KARMA. The Karma file is automatically configured so leave now it just concentrate on Jasmine or YOUR_FILENAME.spec.ts file code.
By default, the app.component.spec.ts file has a 3 IT (), means 3 test case. But here we are interested to write our own code for registration page.
The Jasmine syntax related to BDD Behaviors driven development process. That means what END-USER expects from the WEBSITE/PROJECT.
As the default file has 3 test case / IT() in describe(). That means Describe works as a Test-Suite, which has multiple test cases.
How beforeEach() and afterEach() works in Describe?
Imagine that before performing certain operation (Before Every IT/Test Case) you want to check that user is login or not. So, all the code is written inside the beforeEach () and whenever the code runs, before executing any number of IT block it will execute the beforeEach(). As the beforeEach() execute before each IT execution sameway the afterEach() will gets executed after EACH and EVERY IT/TEST CASES execute.
How beforeAll() works in Describe?
It will execute ONLY ONCE and BEFORE all the test cases gets executed.
What is TESTBED API?
It will help you to create any angular Object from angular framework.
In Angular first Module execute/Load and based on the details perticular Component works/Load. So, during testing we have to do the same
What is compileComponent() in testing file?
This function make sure that all the necessary thing compile and added into the SINGLEJS file. Means it take all the references of the component and create SingleJS file.
What is Fixture in Angular testing?
It refers to Fix State. Imagine that you are performing testing operation on one device which has HIGHER amount GB space and later you test the same code in LESSER amount of GB SPACE. And try to compare those result. This is not perfect. So here the FIXTURE came into the picture. It ensure that any test which is run on this component instance is on fixed base line.