Testing and CI in a nutshell

testing.md

Unit Testing

• Test small bits of code
  • Run javascript without involving the whole app
  • Faster to run
  • Great for adding to watch task
• Run via Karma
• Written in Jasmine

it('should return the proper value for functionName', function(){
	expect(scope.functionName('argument')).toBe('value');
});

E2E (Integration?) Testing

• Test app as a user interacting with a browser
  • Dependancies are automatic as you're just hitting a url
  • Sure beats clicking links over and over in different browsers
• Run via Protractor (Selenium plus angular magic)
• Written in Jasmine

it('should have an h1 of proper size', function() {
	browser.get('http://yoursite.whatever');
	expect(element(by.binding('boundData')).getCssValue('fontSize')).toBe('21px');
});

Visual

• Automatically generated screenshots compared to each other
  • easy to define
  • fast to run
• PhantomCSS runs on PhantomJS enhanced with CasperJS
• Screenshots are named and compared

casper.
    start( 'http://yoursite.whatever' ).
    then(function(){
        casper.viewport(1024, 768);
        phantomcss.screenshot('.btn-cta', 'Desktop: Call to action');
    });

Jenkins

• On git push, deploy code from a given branch if tests pass
• Store git hashes with test results and build status
• Slack push notifications

Recap

• Protractor is awesome!
  • Finding elements via bindings makes testing the frontend far less brittle
  • No dependencies to fuss with
• Unit testing is worth the effort
  • Most friction I found had to do with RequireJS
  • Great
• I'm not convinced that visual diffs are worth the effort
  • They're brittle
  • The test runner is fussy compared to the other tools
  • PhantomJS does not render exactly like chrome