introduction to Unit testing in Angular.pptx

introduction to Unit testing in Angular.pptx

• 1.
  Unit Testing in Angular ParasJain & Aanchal Agarwal
• 2.
  1. What isUnit Testing? 2. Prerequisites 3. Angular CLI Setup 4. Angular Testing Tools 5. Jasmine Test Spec 6. Setup and Tear Down 7. Demo  Testing A Simple Component  Debugging and Code Coverage  Testing Http Services
• 3.
  Lack of etiquetteand manners is a huge turn off. KnolX Etiquettes  Punctuality Join the session 5 minutes prior to the session start time. We start on time and conclude on time!  Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter.  Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call.  Avoid Disturbance Avoid unwanted chit chat during the session.
• 5.
  What is UnitTesting? What is testing? Testing your Angular application helps you check that your application is working as you expect.  A Unit Testing is a method, where each unit or component of a software is tested to determine whether it is fit for use or not  A single unit is any block of code (i.e. function or class) that has one and only one responsibility  A function might have multiple unit tests according to the uses and output of the function.
• 7.
  Prerequisites Before writing testsfor your Angular application, you should have a basic understanding of the following concepts:  Angular fundamentals  JavaScript  HTML  CSS  Angular CLI Note : In the next Side we are talking about Angular CLI.
• 8.
  Benefits and Objectivesof Unit Testing
• 10.
  Angular CLI Setup Node6.9+ Run Test Angular CLI Create New Project www.nodejs.org npm install –g @angular/cli ng new appName ng test
• 11.
  Test Framework TestUtilities Test Runner Karma Jasmine Angular (TestBed, ComponentFixture) Angular Testing Tools
• 12.
  Setup and TearDown beforeAll() Called once, before all the specs in a test suite run afterAll() Called once, after all the specs in a test suite finished beforeEach() Called before each test spec run afterEach() Called after each test spec run
• 13.
  02 01 Jasmine Test Spec 03 •A Test Suite • Contains Test Specs describe (str,fn) 04 • A Test Spec • Contains 1 or more test exceptions It(str,fn) • An expected piece of behavior expect(actual) • Does a boolean comparison • toEqual, toContain, toBeNull matcher(expected)
• 14.
  Important Points AboutJasmine  describe() blocks define a test suit and each it block is for individual test.  beforeEach() runs before each test and is used for the setup part of a test.  afterEach() runs after each test and is used for the teardown part of a test.  You can also use beforeAll() and afterAll() and tehse run once before or after all tests.  You test an assertion in Jasmine with except and using a matcher like toBeDefined, toBeTruthy, toContain, toEqual, … Example: expect(myValue).toBeGreaterThan(2);  You can do negative assertion with not: expect(myValue).not.toBeGreaterThan(2);
• 15.
  Code Coverage  TheCLI can run unit tests and create code coverage reports. Code coverage reports show you any part of your code base that might not be properly tested by your unit tests.  To generate a coverage report run the following command in the root of your project. ng test –no-watch –code-coverage  When the tests are complete, the command creates a new / coverage folder in the project. Open the index.html file to see a report with your source code and code coverage values.  If you want to create code coverage every time you test, set the following option in the CLI configuration file, angular.json: "test":{ "options":{ "codeCoverage": true } }