test(e2e): add end-to-end tests using ProtractorDart

https://pub.dartlang.org/packages/protractor

Author: chirayuk

pubspec.lock

@@ -45,6 +45,10 @@ packages:
     description: intl
     source: hosted
     version: "0.9.9"
+  js:
+    description: js
+    source: hosted
+    version: "0.2.2"
   logging:
     description: logging
     source: hosted
@@ -65,6 +69,10 @@ packages:
     description: perf_api
     source: hosted
     version: "0.0.8"
+  protractor:
+    description: protractor
+    source: hosted
+    version: "0.0.2"
   route_hierarchical:
     description: route_hierarchical
     source: hosted

pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
   web_components: '>=0.3.3 <0.4.0'
 dev_dependencies:
   benchmark_harness: '>=1.0.0'
-  unittest: '>=0.10.1 <0.12.0'
-  mock: '>=0.10.0 <0.12.0'
   guinness: '>=0.1.3 <0.2.0'
+  mock: '>=0.10.0 <0.12.0'
+  protractor: '0.0.2'
+  unittest: '>=0.10.1 <0.12.0'

scripts/run-e2e-test.sh

@@ -0,0 +1,80 @@
+#!/bin/bash
+
+# Run E2E / Protractor tests.
+
+set -e
+
+. $(dirname $0)/env.sh
+
+SIGNALS=(ERR HUP INT QUIT PIPE TERM)
+
+_onSignal() {
+  EXIT_CODE=$?
+  # Kill all child processes (running servers.)
+  kill 0
+  # Need to explicitly kill ourselves to let the caller know we died from a
+  # signal.  Ref: http://www.cons.org/cracauer/sigint.html
+  sig=$1
+  trap - "${SIGNALS[@]}"  # disable signals so we don't capture them again.
+  if [[ "$sig" == "ERR" ]]; then
+    exit $EXIT_CODE
+  else
+    kill -$sig $$
+  fi
+}
+
+for s in "${SIGNALS[@]}" ; do
+  trap "_onSignal $s" $s
+done
+
+
+install_deps() {(
+  SELENIUM_VER="2.42"
+  SELENIUM_ZIP="selenium-server-standalone-$SELENIUM_VER.0.jar"
+  CHROMEDRIVER_VER="2.10"
+  # chromedriver
+  case "$(uname -s)" in
+    (Darwin) CHROMEDRIVER_ZIP="chromedriver_mac32.zip" ;;
+    (Linux)  CHROMEDRIVER_ZIP="chromedriver_linux64.zip" ;;
+    (*) echo Unsupported OS >&2; exit 2 ;;
+  esac
+  mkdir -p e2e_bin && cd e2e_bin
+  if [[ ! -e "$SELENIUM_ZIP" ]]; then
+    curl -O "http://selenium-release.storage.googleapis.com/$SELENIUM_VER/$SELENIUM_ZIP"
+  fi
+  if [[ ! -e "$CHROMEDRIVER_ZIP" ]]; then
+    curl -O "http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VER/$CHROMEDRIVER_ZIP"
+    unzip "$CHROMEDRIVER_ZIP"
+  fi
+)}
+
+
+start_servers() {
+  # Run examples.
+  ( 
+    cd example
+    pub install
+    pub build
+    rsync -rl --exclude packages web/ build/web/
+    rm -rf build/web/packages
+    ln -s $PWD/packages build/web/packages
+  )
+  PORT=28000
+  (cd example/build/web && python -m SimpleHTTPServer $PORT) >/dev/null 2>&1 &
+  export NGDART_EXAMPLE_BASEURL=http://127.0.0.1:$PORT
+
+  # Allow chromedriver to be found on the system path.
+  export PATH=$PATH:$PWD/e2e_bin
+
+  # Start selenium.  Kill all output - selenium is extremely noisy.
+  java -jar ./e2e_bin/selenium-server-standalone-2.42.0.jar >/dev/null 2>&1 &
+
+  sleep 4 # wait for selenium startup
+}
+
+
+# Main
+install_deps
+start_servers
+(cd test_e2e && pub install)
+./node_modules/.bin/protractor_dart test_e2e/examplesConf.js

scripts/run-test.sh

@@ -33,3 +33,5 @@ $NGDART_SCRIPT_DIR/analyze.sh &&
     --reporters=junit,dots --port=8765 --runner-port=8766 \
     --browsers=Dartium,Chrome,Firefox --single-run --no-colors
 
+# Run E2E tests
+$NGDART_BASE_DIR/scripts/run-e2e-test.sh

scripts/travis/build.sh

@@ -102,6 +102,13 @@ node "node_modules/karma/bin/karma" start karma.conf \
     --reporters=junit,dots --port=8765 --runner-port=8766 \
     --browsers=$BROWSERS --single-run --no-colors
 
+
+echo '---------------------------'
+echo '-- E2E TEST: AngularDart --'
+echo '---------------------------'
+$NGDART_BASE_DIR/scripts/run-e2e-test.sh
+
+
 echo '-------------------------'
 echo '-- DOCS: Generate Docs --'
 echo '-------------------------'

test_e2e/animation_ng_repeat_spec.dart

@@ -0,0 +1,90 @@
+part of angular.example.animation_spec;
+
+class NgRepeatAppState extends AppState {
+  var addBtn = element(by.buttonText("Add Thing"));
+  var removeBtn = element(by.buttonText("Remove Thing"));
+  var rows = element.all(by.repeater("outer in ctrl.items"));
+  var thingId = 0;  // monotonically increasing.
+  var things = [];
+
+  addThing() {
+    things.add(thingId++);
+    addBtn.click();
+  }
+
+  removeThing() {
+    if (things.length > 0) {
+      things.removeLast();
+    }
+    removeBtn.click();
+  }
+
+  cell(x, y) => rows.get(x).findElements(by.tagName("li"))
+      .then((e) => toDartArray(e)[y].getText());
+
+  assertState() {
+    expect(rows.count()).toBe(things.length);
+    for (int y = 0; y < things.length; y++) {
+      for (int x = 0; x < things.length; x++) {
+        expect(cell(x, y)).toEqual("Thing ${things[y]}");
+      }
+    }
+  }
+}
+
+animation_ng_repeat_spec() {
+  describe('ng-repeat', () {
+    var S;
+
+    beforeEach(() {
+      S = new NgRepeatAppState();
+      S.ngRepeatBtn.click();
+    });
+
+    it('should switch to the ng-repeat example', () {
+      expect(S.heading.getText()).toEqual("ng-repeat Demo");
+      S.assertState();
+    });
+
+    it('should add row', () {
+      S.addThing();
+      S.assertState();
+      S.addThing();
+      S.assertState();
+      S.removeThing();
+      S.addThing();
+      S.assertState();
+    });
+
+    it('should remove rows', () {
+      S.addThing();
+      S.addThing();
+      S.assertState();
+
+      S.removeThing();
+      S.assertState();
+
+      S.removeThing();
+      S.assertState();
+    });
+
+    it('should not remove rows that do not exist', () {
+      S.removeThing();
+      S.assertState();
+
+      S.addThing();
+      S.removeThing();
+      S.removeThing();
+      S.assertState();
+    });
+
+    it('should add things with monotonically increasing numbers', () {
+      S.addThing();
+      S.addThing(); S.removeThing(); S.addThing();
+      S.addThing(); S.removeThing(); S.addThing();
+      S.addThing();
+      expect(S.things).toEqual([0, 2, 4, 5]);
+      S.assertState();
+    });
+  });
+}

test_e2e/animation_spec.dart

@@ -0,0 +1,33 @@
+library angular.example.animation_spec;
+
+import 'dart:html';
+import 'package:js/js.dart';
+import 'package:protractor/protractor_api.dart';
+
+part 'animation_ng_repeat_spec.dart';
+part 'animation_visibility_spec.dart';
+
+class AppState {
+  var ngRepeatBtn = element(by.buttonText("ng-repeat"));
+  var visibilityBtn = element(by.buttonText("Visibility"));
+
+  var heading = element(by.css(".demo h2"));
+}
+
+
+main() {
+  describe('animation example', () {
+    beforeEach(() {
+      protractor.getInstance().get('animation.html');
+      element(by.tagName("body")).allowAnimations(false);
+    });
+
+    it('should start in about page', () {
+      var S = new AppState();
+      expect(S.heading.getText()).toEqual("About");
+    });
+
+    animation_ng_repeat_spec();
+    animation_visibility_spec();
+  });
+}

test_e2e/animation_visibility_spec.dart

@@ -0,0 +1,46 @@
+part of angular.example.animation_spec;
+
+class VisibilityAppState extends AppState {
+  var toggleBtn = element(by.buttonText("Toggle Visibility"));
+  var visibleIf = element(by.css(".visible-if"));
+  var visibleHide = element(by.css(".visible-hide"));
+
+  hasClass(var element, String expectedClass) {
+    return element.getAttribute("class").then((_class) =>
+      "$_class".split(" ").contains(expectedClass));
+  }
+
+  assertState({bool toggled: false}) {
+      expect(hasClass(visibleHide, "ng-hide")).toEqual(toggled);
+      expect(visibleIf.isPresent()).toEqual(toggled);
+  }
+}
+
+animation_visibility_spec() {
+  var S;
+
+  describe('visibility', () {
+    beforeEach(() {
+      S = new VisibilityAppState();
+      S.visibilityBtn.click();
+    });
+
+    it('should switch to the visibility example in initial state', () {
+      expect(S.heading.getText()).toEqual("Visibility Demo");
+      expect(S.visibleHide.getText()).toEqual(
+          "Hello World. ng-hide will add and remove the .ng-hide class "
+          "from me to show and hide this view of text.");
+      S.assertState(toggled: false);
+    });
+
+    it('should toggle ng-hide and ng-if', () {
+      S.toggleBtn.click();
+      S.assertState(toggled: true);
+      S.toggleBtn.click();
+      S.assertState(toggled: false);
+      S.toggleBtn.click();
+      S.assertState(toggled: true);
+    });
+
+  });
+}

test_e2e/configQuery.js

@@ -0,0 +1,72 @@
+var env = process.env,
+    fs = require('fs'),
+    path = require('path');
+
+
+var runningOnTravis = (env.TRAVIS !== undefined);
+
+
+function getBaseUrl() {
+  if (env.NGDART_EXAMPLE_BASEURL) {
+    return env.NGDART_EXAMPLE_BASEURL;
+  } else if (env.USER == 'chirayu') {
+    return 'http://example.ngdart.localhost';
+  } else {
+    // Default host:port when you run "pub serve" from the example
+    // subdirectory of the AngularDart repo.
+    return 'http://localhost:8080';
+  }
+}
+
+
+function getDartiumBinary() {
+  var ensure = function(condition) {
+    if (!condition) throw "Unable to locate Dartium.  Please set the DARTIUM environment variable.";
+  };
+
+  if (env.DARTIUM) {
+    return env.DARTIUM;
+  }
+  var platform = require('os').platform();
+  var DART_SDK = env.DART_SDK;
+  if (DART_SDK) {
+    // Locate the chromium directory as a sibling of the DART_SDK
+    // directory.  (It's there if you unpacked the full Dart distribution.)
+    var chromiumRoot = path.join(DART_SDK, "../chromium");
+    ensure(fs.existsSync(chromiumRoot));
+    var binary = path.join(chromiumRoot,
+        (platform == 'darwin') ? 'Chromium.app/Contents/MacOS/Chromium' : 'chrome');
+    ensure(fs.existsSync(binary));
+    return binary;
+  }
+  // Last resort: Try the standard location on Macs for the AngularDart team.
+  var binary = '/Applications/dart/chromium/Chromium.app/Contents/MacOS/Chromium';
+  ensure(platform == 'darwin' && fs.existsSync(binary));
+  return binary;
+}
+
+
+function getChromeOptions() {
+  if (!runningOnTravis) {
+    return {'binary': getDartiumBinary()};
+  }
+  // In Travis, the list of browsers to test is specified as a CSV in the
+  // BROWSERS environment variable.
+  // TODO(chirayu): Parse the BROWSERS csv so we also test on Firefox.
+  if (env.TESTS == "vm") {
+    return {'binary': env.DARTIUM_BIN};
+  }
+  if (env.TESTS == "dart2js") {
+    return {
+      'binary': env.CHROME_BIN,
+      // Ref: https://github.com/travis-ci/travis-ci/issues/938
+      //      https://sites.google.com/a/chromium.org/chromedriver/help/chrome-doesn-t-start
+      'args': ['no-sandbox=true']
+    };
+  }
+  throw new Error("Unknown Travis configuration specified by TESTS variable");
+}
+
+
+exports.getBaseUrl = getBaseUrl;
+exports.getChromeOptions = getChromeOptions;