name: Testing 101 class: middle, center
- Test small bits of code
- Run javascript without involving the whole app
- Faster to run
- Great for adding to a (grunt) watch task
- Written in Jasmine
it('should return the proper value for functionName', function(){
expect(scope.functionName('argument')).toBe('value');
});
- 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 Web Driver (aka Selenium) or Protractor (adds angular magic to Web Driver)
- Also can be 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');
});
- 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');
});
- A dialect of English used to describe desired behavior.
- Can be used as a cross team way to describe features
- Step definitions look a bit messy to me
Feature: whatever layout test
As a user I want visual consistency on the http://whatever.dev website
Scenario: Contact form
Given I visit "http://whatever.dev"
Then "line of copy" should have "font-size" of "14px"
Then "line of copy" should have "color" of "rgba(97, 97, 97, 1)"
Then "label, .label" should have "font-size" of "12px"
Then "label, .label" should have "color" of "rgba(97, 97, 97, 1)"
Given the window size is "1400" by "768"
I made a small app to show how little you need to configure to start using jasmine.
A simple app to demonstrate using protractor to test a page without angular.
- On git push, deploy code from a given branch if tests pass
- Store git hashes with test results and build status
- Slack push notifications
- 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