testing angular js applications with jasmine ??testing angular js applications with jasmine karma...

Download Testing Angular JS Applications with Jasmine   ??Testing Angular JS Applications with Jasmine  Karma Training Workshop ... •   ... 'node_modules/angular/ ',

Post on 26-Apr-2018

212 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Testing Angular JS Applications with

    Jasmine & Karma

  • Testing Angular JS Applications with Jasmine & Karma Training Workshop Copyright 2016 by Zenergy Technologies, Inc. All rights reserved. This material may not be reproduced, displayed, modified or distributed without the express prior written permission of Zenergy Technologies, Inc. For permission, contact info@zenergytechnologies.com. If you have comments or questions regarding this document please send them via e-mail to: chris.lawson@zenergytechnologies.com Zenergy Technologies, Inc. 306 Pomona Dr., Suite F Greensboro, North Carolina 27407 Telephone: 877-375-7041 Fax: 336-358-4974

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    CourseResources

    You can download the course material at the following location:

    www.zenergytechnologies.com/qai-training-resources/

    Password: allaboutQAI

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    CourseOutline

    Introduction Overview of course Logistics Expectations

    Core Testing Concepts Levels of testing Testing practices BDD and TDD overview

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    CourseOutline

    Working with Jasmine and Karma Overview Syntax, setup, teardown and matchers Stubs, spies and mocks

    Testing with Angular JS Configuration Concepts Directives Filters Two-way data binding Example tests

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    CourseOutline

    Protractor & Selenium WebDriver Configuration and framework components Using element & by Finding Page Objects Utilizing Promises

    Advanced Topic Conversations Continuous integration Code coverage Remote/distributed testing

    Recap, Case Studies and Exercises

  • Introduction

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    Overview

    Course Overview

    Logistics

    Expectations

  • Core Testing Concepts

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    LevelsofTes4ng

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    LevelsofTes4ng

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    Tes4ngPrac4ces

    Reviews and Inspections

    Entry and Exit Criteria

    Functional

    Exploratory

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    WhatisTDD?

    Test-Driven Development is a programming technique that requires you to write actual code and automated test code simultaneously. This ensures that you test your code and enables you to retest your code quickly and easily, since it's automated.

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    TDDProcess

    Test-Driven Development process means taking the following steps:

    Red: Write your test first and see it fail

    Green: Write just enough code to make your test pass

    Refactor: Using your tests to keep you safe, refactor your code to be more elegant, understandable and maintainable.

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    TDDProcess

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    BDD&TDDProcess

    TDD invests in automated unit tests

    BDD invests in automated acceptance tests

  • Jasmine and Karma

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    WhatisKarma?

    JavaScript command line tool that can be used to spawn a web server, which loads application source code and executes tests

    Can be configured to run against a number of browsers, which is useful for ensuring application works on all supported browsers

    Has command line execution options that display the test results once they have run in the browser

    Runs on Node.js and is available as NPM package

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    WhatisNodeJS?

    JavaScript runtime built on Chrome V8 JavaScript engine

    Uses an event-driven, non-blocking I/O model that makes it lightweight and efficient

    Its package ecosystem (NPM) is the largest ecosystem of open source libraries in the world

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    NodeJSInstall

    Must be installed before you are able to install Karma https://nodejs.org/en/

    Click on either the Download prompt on the homepage for Windows or go to the Download tab and select the corresponding version for Apple or Linux

    Select and run the installer in order to complete set up

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    KarmaSetup

    Open a command window

    Enter npm install karma g

    Enter npm install karma-jasmine

    Enter npm install karma-cli

    Enter npm karma init

    Enter karma start to launch karma server

    Enter karma run to run tests

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    KarmaConfigura4onSetup

    Karma needs to know about your project in order to test, which is done via a configuration file

    Configuration file can be written in JavaScript and is loaded as a regular Node.js module

    Unless provided as argument, the Karma CLI will look for a configuration file at the following locations and in this order:

    ./karma.conf.js

    ./karma.conf.coffee

    ./.config/karma.conf.js

    ./.config/karma.conf.coffee

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    RunningIni4a4ngTests

    Open a new command window

    Enter npm

    Enter karma init

    The command window will prompt a series of questions

    For testing framework select Jasmine

    Select browser plug in PhantomJS tests without loading a browser

    The finished file will be saved as karma.conf.js find and load in IDE

    In the command window karma start loads karma.conf file

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    Tes4ngHelloWorld

    Create a new JavaScript file

    Add that file path to the karma.conf.js file

    Save both files

    Initiate with karma start in the command window (should pass)

    Change the variable value to see the test fail

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    WhatisJasmine?

    Behavior-driven development framework

    Does not depend on any other JavaScript frameworks

    Specifications for your JavaScript code

    Write expectations

    Uses matchers

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    JasmineSetup

    The first thing youll need to do is download Jasmine standalone from GitHub

    https://github.com/jasmine/jasmine/releases

    Extract the contents of the zip file into the folder youd like to use for the project

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    BasicJasmineSyntax

    Make a suite of tests for a particular subject by creating a describe function with the first argument as the subject and the second as an anonymous function

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    BasicJasmineSyntax

    The anonymous function block can either be more specific with nested describe blocks or an it function

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    BasicJasmineSyntax

    The it function takes a string as the first argument about what it is testing and an anonymous function that contains an expect function that compares your code to the expected outcome

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    BasicJasmineSyntax

    Multiple tests can be added to the describe function (test suite) by adding additional it blocks

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    SetupandTeardown

    Test suites may also have beforeEach and afterEach blocks, which will run before or after each it block regardless of whether the block passes or fails

    The beforeAll and afterAll functions are also available

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    Matchers

    Jasmine passes or fails a test based on a matcher boolean comparison between the actual value and the expected value

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    PassorFail?

    Evaluate this user sort test

    What would be the result?

  • A Testing Partner You Can Trust

    Copyright 2016 Zenergy Technologies, Inc.

    DisablingSuitesandTests

    Suites can be disabled by placing an x in front of describe block (i.e. xdescribe). These suites and any specs inside them are skipped when run and their results will not appear in the results.

    Pending specs do no