Testing Angular

Testing Angular

• 1.
  MedTech Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Chp6-Testing Angular Unit Testing and End-to-end Testing 1 MedTech – Mediterranean Institute of Technology CS-Web and Mobile Development MedTech
• 2.
  MedTech Testing • Writing testsis intended to explore and confirm the behaviour of the application • Testing does the following: • Guards against changes that break existing code (“regressions”). • Clarifies what the code does both when used as intended and when faced with deviant conditions. • Reveals mistakes in design and implementation. • Tests shine a harsh light on the code from many angles. • When a part of the application seems hard to test, the root cause is often a design flaw, something to cure now rather than later when it becomes expensive to fix. 2 Testing Angular
• 3.
  MedTech (Some) Types ofTesting • Unit Tests • Smallest possible unit of testing • Cover one small unit and don’t bother about how multiple units work together. • Fast, reliable and point in the exact direction of the bug. • Integration Tests • Cover multiple units. • Point out important bugs that would show up when multiple components run together in the application. • End-to-end Tests • Simulate a production like environment. • It’s as simple as testing your application from start to finish – just like a user. • We can run end to end tests on multiple browsers and find bugs that emerge in certain environments / browsers – such as… Internet Explorer. 3 Testing Angular
• 4.
  MedTech Tools and Technologies •You can write and run Angular tests with a variety of tools and technologies • Jasmine • Behaviour-driven development framework for testing JavaScript code. • Provides everything needed to write basic tests. • Angular testing utilities • Create a test environment for the Angular application code under test. • Used to condition and control parts of the application as they interact within the Angular environment. • Karma • Ideal for writing and running unit tests while developing the application. • Can be an integral part of the project's development and continuous integration processes. • Protractor • Run end-to-end (e2e) tests to explore the application as users experience it. • One process runs the real application and a second process runs protractor tests that simulate user behaviour and assert that the application responds in the browser as expected. 4 Testing Angular
• 5.
  MedTech Testing Recommandations • Putunit test spec files in the same folder as the application source code files they test • Such tests are easy to find. • You see at a glance if a part of your application lacks tests. • Nearby tests can reveal how a part works in context. • When you move the source (inevitable), you remember to move the test. • When you rename the source file (inevitable), you remember to rename the test file. • Application integration or end-to-end specs should be defined in a separate test folder • As they test the interactions of multiple parts spread across folders and modules, they don't really belong to any part in particular 5 Testing Angular
• 6.
  MedTech UNIT TESTING WITHJASMINE AND KARMA 6 Testing Angular
• 7.
  MedTech Unit Testing withJasmine • Behaviour-driven development framework for testing JavaScript code • Does not depend on any other JavaScript frameworks • Does not require a DOM • Jasmine tests are a set of Test Suites each composed of a set of Test Specs • Call describe to define a test suite, and it to define a spec • A spec contains one or more expectations that test the state of the code • A spec with all true expectations is a passing spec. • A spec with one or more false expectations is a failing spec. • Provides the global beforeEach, afterEach, beforeAll, and afterAll functions • Help a test suite DRY (Don't Repeat Yourself ) up any duplicated setup 7 Testing Angular
• 8.
  MedTech Unit Testing withJasmine 8 Testing Angular describe("A spec using beforeEach and afterEach", function() { var foo = 0; beforeEach(function() { foo += 1; }); afterEach(function() { foo = 0; }); it("is just a function, so it can contain any code", function() { expect(foo).toEqual(1); }); it("can have more than one expectation", function() { expect(foo).toEqual(1); expect(true).toEqual(true); }); });
• 9.
  MedTech Karma Test Runner •Karma provides a suitable testing environment to any web developer • browsers do not have natively a concept of loading tests files, running them, and reporting results. • Karma: 1.Starts a small web server to serve "client-side" javascript files to be tested 2.Serves the "client-side" javascript files with the tests (or Specs, as they're often called) 3.Serves a custom web page that will run javascript code for the tests 4.Starts a browser to load this page 5.Reports the results of the test to the server 6.Reports the results to text files, console, etc... 9 Testing Angular
• 10.
  MedTech Angular Testing Utilities •Isolated unit tests • Examine an instance of a class all by itself without any dependencies on Angular or any injected values • The tester creates a test instance of the class with new, supplying test doubles for the constructor parameters as needed, and then probes the test instance API surface. • Should be written for pipes and services • Angular Testing Utilities • Helper functions from @angular/core/testing • Used for components • Contrary to isolated unit tests, they can show how components interact with Angular, and how they interact with their own templates 10 Testing Angular
• 11.
  MedTech Writing Tests • Inorder to write and run unit tests: • Create a spec file in the same folder : usually, they have the same name as the file they are testing, with the .spec.ts extension • Run with karma using: npm test • Focus on the console output to see the result, that should look like this: • [0] is the compiler output, [1] is Karma output 11 Testing Angular
• 12.
  MedTech Testing a Component •TestBed • Most important Angular testing utility • Creates an Angular testing module (@NgModule class) that you configure using configureTestingModule to add importas, dependencies… • Enables the framework to detach the tested component from its own application module and re-attach it to the test module • TestBed.createComponent • Creates an instance of the component under test • Closes the TestBed to any further configuration • ComponentFixture • A handle on the test environment surrounding the created component • Provides access to the component instance itself 12 Testing Angular
• 13.
  MedTech Testing a Component •DebugElement • Handle on the component's DOM element • Used to query for any HTML element of the component's template • By • Angular testing utility that produces useful predicates • By.css produces a standard CSS selector • nativeElement • Returns the queried DOM element from the DebugElement • fixture.detectChanges • Detects changes of the component code to trigger data bindings and propagation • createComponent does not automatically trigger change detection, you have to do it manually 13 Testing Angular
• 14.
  MedTech Testing a Componentwith External Template • TestBed.createComponent is a synchronous method, whereas the Angular template compiler reads the external files from the system asynchronously • The test setup for the component must give the Angular template compiler time to read the files • A first beforeEach must handle asynchronous compilation (use async()) • Call the asynchronous compileComponents method to compile all the components of the testing module • A synchronous beforeEach containing the remaining setup steps follows the asynchronous beforeEach. 14 Testing Angular // async beforeEach beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ BannerComponent ], // declare the test component }) .compileComponents(); // compile template and css }));
• 15.
  MedTech Testing a Componentwith Dependency • If a component has a service dependency, it should be tested without really calling this service • For testing the component, a dependency must be added to the providers, but not the real service dependency • Provide service test doubles (also called stubs, fakes, spies or mocks) • Get the injected service from an injector (never call the created stub) • Proceed normally 15 Testing Angular beforeEach(() => { userServiceStub = {isLoggedIn: true, user: { name: 'Test User'}}; TestBed.configureTestingModule({ declarations: [ WelcomeComponent ], providers: [ {provide: UserService, useValue: userServiceStub } ] }); fixture = TestBed.createComponent(WelcomeComponent); userService = TestBed.get(UserService); de = fixture.debugElement.query(By.css('.welcome')); el = de.nativeElement; });
• 16.
  MedTech END TO ENDTESTING WITH PROTRACTOR 16 Testing Angular
• 17.
  MedTech End-to-End Testing withProtractor • Protractor is a framework dedicated to end-to-end testing of Angular applications • It is a Node.js program that supports the Jasmine and Mocha Test frameworks • Protractor works in conjunction with Selenium (a browser automation framework) to provide an automated test infrastructure that can simulate a user’s interaction with an Angular application running in a browser or mobile device. 17 Testing Angular
• 18.
  MedTech Running Protractor • Weneed two things to run the tests: • A server running our application • An instance of a webdriver through protractor • Use the global variable browser to navigate in the web page • Use element and by to call an HTML element: • callButton = element(by.tagName('button')); • First run the pretest to update the webdriver • When running the test, a browser will briefly appear and disappear, and the test results will be displayed in the console 18 Testing Angular
• 19.
  MedTech Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi References 19 •Sites • Angular2 official documentation, https://angular.io/docs, consulted in March 2017 • Protractor, http://www.protractortest.org/#/tutorial, consulted in March 2017