e2e.md

End-to-End Testing AngularJS

End-to-End Testing Frameworks

• Angular Scenario
• Protractor

Angular Scenario ↑

Angular Scenario is a simple browser based end to end test runner.

Install Dependencies

• Install angular-scenario by running bower install angular-scenario --save-dev

Configure Scenario Runner

There isn't really anything to configure you only need to create a file that includes the runner and the scenarios you want to run (example file).

Testing Patterns

• Suggested Setup
• Routes
  • have a default route configured
• Contents
  • should contain expected text
  • should contain my directive tag
  • should contain my directive attribute
  • should contain my directive class name
• Interactions
  • pull request welcome!
• Have a good pattern?
  • pull request welcome!

####Suggested Scenario Unit Test Setup ↑

# CoffeeScript
describe 'My App', ->
  # Add specs

// JavaScript
describe('My App', function () {
  // Add specs
});

My app should:

#####have a default route configured ↑

# CoffeeScript
describe 'default route', ->
  it 'should automatically redirect to / when location hash/fragment is empty', ->
    browser().navigateTo 'index.html'
    expect(browser().location().url()).toBe '/'

  it 'should automatically redirect to / when location hash/fragment is invalid', ->
    browser().navigateTo '#/foo-bar-bas'
    expect(browser().location().url()).toBe '/'

  it 'should not automatically redirect to / when location hash/fragment is valid', ->
    browser().navigateTo '#/about'
    expect(browser().location().url()).toBe '/about'

// JavaScript
describe('default route', function () {
  it('should automatically redirect to / when location hash/fragment is empty', function () {
    browser().navigateTo('index.html');
    expect(browser().location().url()).toBe('/');
  });

  it('should automatically redirect to / when location hash/fragment is invalid', function () {
    browser().navigateTo('#/foo-bar-bas');
    expect(browser().location().url()).toBe('/');
  });

  it('should not automatically redirect to / when location hash/fragment is valid', function () {
    browser().navigateTo('#/about');
    expect(browser().location().url()).toBe('/about');
  });
});

#####should contain expected text ↑

# CoffeeScript
describe 'my view', ->
  beforeEach ->
    browser().navigateTo '#/'

  it 'should contain expected text', ->
    expect(element('[ng-view] p:first')
      .text()).toBe 'this is the home page.'

// JavaScript
describe('my view', function () {
  beforeEach(function () {
    browser().navigateTo('#/');
  });

  it('should contain expected text', function () {
    expect(element('[ng-view] p:first').text())
      .toBe('this is the home page.');
  });
});

#####should contain my directive tag ↑

# CoffeeScript
describe 'my view', ->
  beforeEach ->
    browser().navigateTo '#/'

  it 'should contain my directive tag', ->
    elm = element('[ng-view] my-dir')
    expect(elm.count()).toBe 1

// JavaScript
describe('my view', function () {
  beforeEach(function () {
    browser().navigateTo('#/');
  });

  it('should contain my directive tag', function () {
    var elm = element('[ng-view] my-dir');
    expect(elm.count()).toBe(1);
  });
});

#####should contain my directive attribute ↑

# CoffeeScript
describe 'my view', ->
  beforeEach ->
    browser().navigateTo '#/'

  it 'should contain my directive attribute', ->
    elm = element('[ng-view] [my-dir]')
    expect(elm.count()).toBe 1

// JavaScript
describe('my view', function () {
  beforeEach(function () {
    browser().navigateTo('#/');
  });

  it('should contain my directive attribute', function () {
    var elm = element('[ng-view] [my-dir]');
    expect(elm.count()).toBe(1);
  });
});

#####should contain my directive class name ↑

# CoffeeScript
describe 'my view', ->
  beforeEach ->
    browser().navigateTo '#/'

  it 'should contain my directive class name', ->
    elm = element('[ng-view] .my-dir')
    expect(elm.count()).toBe 1

// JavaScript
describe('my view', function () {
  beforeEach(function () {
    browser().navigateTo('#/');
  });

  it('should contain my directive class name', function () {
    var elm = element('[ng-view] .my-dir');
    expect(elm.count()).toBe(1);
  });
});

---

Protractor ↑

Protractor is an end to end test framework for Angular applications built on top of WebDriverJS.

Install Dependencies

• Install protractor by running npm install protractor --save-dev

JavaScript ↑

Disclaimer: I haven't used protractor yet and frankly it looked a bit complicated to get setup correctly, whereas using angular-scenario is dead simple.

pull request welcome!

CoffeeScript ↑

Looks like it does have a CoffeeScript preprocessor plugin.