UI/UX Testing

Unit

• javascript/html
• not css
• can run "headless"
  • no browser
  • phatomjs
• also runs in multiple browser and devices
  • Chrome, Firefox, Safari, IE, mobile platforms, etc

Functional

• html/css/javascript
• interacts with the ui
• must have a browser
• runs in multiple browsers and devices
  • Chrome, Firefox, Safari, IE, mobile platforms, etc
• best when ux interaction is complete

Types of Testing

Unit Testing

with Karma/Jasmine

Unit Testing

What To Test

• Atomic tests of Javascript/HTML Components
  • ex: buttons, lists, drop-downs, dialogs
• AngularJS's dependency injection helps a ton
• Mocks http/web socket traffic for getting data
• Attempts to "tame" asynch behavior
• Isolates components: controllers, services, directives
• Test the boundaries, public apis of components

Unit Testing

When To Test

• Test Driven Development
• Required to merge code
• Runs with every code change
• Runs quickly ( in seconds )
• BEST source of code documentation
• Git hooks - Commit, Pre-Merge
• Build server

Unit Testing

Test Coverage

• Multiple coverage reporters
• Istanbul - opensource javascript
  • (statement, line, function and branch coverage)
• Set coverage expectations and fail builds

Unit Testing

How can we get good tests?

• Training / Plan for it
• Team expectations / enforcement
• Test culture
• Software craftsmanship
• Pull request requirements
• Test coverage pride
• Management/QA support

• Emc-ui
• Skyline UI ( eCDM )
• Mocking dependencies
• Asynchronous challenges

Unit Testing

Demo Time

Functional Testing

with Protractor

Functional Testing

What's different than Karma

• It tests user interactions with UI
  • clicks, key strokes, mouse, drag-drop
• Special AngularJS integrations help
• Eliminates or hides wait / sleep
• Can expose CSS issues
• Can test position of UI elements

Functional Testing

What to Test?

• All user interactions
• Results of user changing data
• User manipulating "the system"
• Role based differences
• Adaptive UX for screen size

Functional Testing

Challenges to Development

• UX needs to be "finished"
• Depends on css selectors, angular models
• Potentially brittle with UX refactoring
• Provide an api to select page elements
• Common UX routines should be scripted for re-use
  • ex: login / logout
• Adaptive UX requires additional time

Functional Testing

Infrastructure Needs

• Repeated known system states
• Standup - Teardown quickly
• Multiple browsers
• Build system integration
• Requires system engineering resources

Functional Testing

Essential for code refactors

With a good set of functional tests, the underlying code can be rigorously refactored with much less fear.

Important before V2 development starts!

Library Upgrades ( Angular 2 )

Functional Testing

How do we get good tests?

• I've never done it successfully myself
• Raptor project started effort with QA
  • Page Objects
  • Re-usable routines
  • Integration with QA
• Sprint Demo of the tests too!

Functional Testing

Demo Time

• Look at page objects
• Run some eCDM tests

The End