#10 testing nightwatch.

.gitignore

@@ -1,2 +1,2 @@
 node_modules/
-test/log/
+test/reports/

gulpfile.babel.js

@@ -1,66 +1,67 @@
-import gulp from 'gulp';
-import plumber from 'gulp-plumber';
-import postcss from 'gulp-postcss';
+import gulp from "gulp";
+import plumber from "gulp-plumber";
+import postcss from "gulp-postcss";
 import stylelint from "stylelint";
 import reporter from "postcss-reporter";
-import sourcemaps from 'gulp-sourcemaps';
-import babel from 'gulp-babel';
-import uglify from 'gulp-uglify';
+import sourcemaps from "gulp-sourcemaps";
+import babel from "gulp-babel";
+import uglify from "gulp-uglify";
 import eslint from "gulp-eslint";
-import sync from 'browser-sync';
-import autoprefixer from 'autoprefixer';
-import conventionalChangelog from 'gulp-conventional-changelog';
+import sync from "browser-sync";
+import autoprefixer from "autoprefixer";
+import conventionalChangelog from "gulp-conventional-changelog";
+import nightwatch from "nightwatch";
 
-gulp.task('server', () => {
+gulp.task("server", () => {
   return sync({
     server: {
-      baseDir: './'
+      baseDir: "./"
     },
-    open: 'external',
+    open: "external",
     port: 9000
   });
 });
 
-gulp.task('reload', () => {
+gulp.task("reload", () => {
   return sync.reload();
 });
 
-gulp.task('css', () => {
-  return gulp.src('./src/cssnext/*.css')
+gulp.task("css", () => {
+  return gulp.src("./src/cssnext/*.css")
     .pipe(sourcemaps.init())
     .pipe(plumber({
       errorHandler: err => {
         console.log(err.messageFormatted);
-        this.emit('end');
+        this.emit("end");
       }
     }))
     .pipe(postcss([
       autoprefixer(),
-      require('postcss-nested'),
-      require('postcss-simple-vars'),
-      require('postcss-calc'),
+      require("postcss-nested"),
+      require("postcss-simple-vars"),
+      require("postcss-calc"),
       stylelint(),
       reporter({ clearMessages: true }),
-      require('cssnano'),
+      require("cssnano"),
       require("postcss-cssnext")(),
     ]))
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('./dist/css'));
+    .pipe(sourcemaps.write("."))
+    .pipe(gulp.dest("./dist/css"));
 });
 
-gulp.task('babel', ["lint"], () => {
-  return gulp.src('./src/js/*.es6')
+gulp.task("babel", ["lint"], () => {
+  return gulp.src("./src/js/*.es6")
     .pipe(plumber({
       errorHandler: err => {
         console.log(err.messageFormatted);
-        this.emit('end');
+        this.emit("end");
       }
     }))
     .pipe(babel({
-      presets: ['es2015']
+      presets: ["es2015"]
     }))
-    .pipe(uglify({preserveComments: 'some'}))
-    .pipe(gulp.dest('./dist/js/'))
+    .pipe(uglify({preserveComments: "some"}))
+    .pipe(gulp.dest("./dist/js/"))
 });
 
 gulp.task("lint", () => {
@@ -70,22 +71,49 @@ gulp.task("lint", () => {
     .pipe(eslint.failAfterError());
 });
 
-gulp.task('changelog', () => {
-  return gulp.src('CHANGELOG.md')
+gulp.task("changelog", () => {
+  return gulp.src("CHANGELOG.md")
     .pipe(conventionalChangelog({
-      preset: 'angular'
+      preset: "angular"
     }))
-    .pipe(gulp.dest('./'));
+    .pipe(gulp.dest("./"));
+});
+
+gulp.task("serve:test", function (callback) {
+  sync.init({
+    notify: false,
+    port: 9100,
+    open: false,
+    server: { baseDir: ["./"] },
+    snippetOptions: { blacklist: ["/"] },
+    ui: false
+  }, function() {
+    callback();
+  });
+});
+
+gulp.task("test", ["serve:test"], function () {
+  nightwatch.runner({
+    config: "nightwatch.json",
+    env: "default"
+  }, function (passed) {
+    if (passed) {
+      process.exit();
+    }
+    else {
+      process.exit(1);
+    }
+  });
 });
 
-gulp.task('w', ['build', 'server'], () => {
-  gulp.watch('./src/cssnext/*.css', ['css']);
-  gulp.watch('./src/js/*.es6', ['babel']);
-  gulp.watch('./*.html', ['reload']);
-  gulp.watch('./dist/**/**.css', ['reload']);
-  return gulp.watch('./dist/**/*.js', ['reload']);
+gulp.task("w", ["build", "server"], () => {
+  gulp.watch("./src/cssnext/*.css", ["css"]);
+  gulp.watch("./src/js/*.es6", ["babel"]);
+  gulp.watch("./*.html", ["reload"]);
+  gulp.watch("./dist/**/**.css", ["reload"]);
+  return gulp.watch("./dist/**/*.js", ["reload"]);
 });
 
-gulp.task('build', ['css']);
+gulp.task("build", ["css"]);
 
-gulp.task('default', ['build']);
+gulp.task("default", ["build"]);

nightwatch.json

@@ -0,0 +1,35 @@
+{
+  "src_folders": ["test/specs"],
+  "output_folder": "test/reports",
+  "selenium": {
+    "start_process": true,
+    "server_path": "node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-2.53.1.jar",
+    "host": "127.0.0.1",
+    "port": 4444,
+    "cli_args": {
+      "phantomjs.binary.path": "node_modules/phantomjs/lib/phantom/bin/phantomjs",
+      "webdriver.chrome.driver": "node_modules/chromedriver/lib/chromedriver/chromedriver"
+    }
+  },
+  "test_settings": {
+    "default": {
+      "launch_url": "http://localhost",
+      "selenium_port": 4444,
+      "selenium_host": "localhost",
+      "silent": true,
+      "desiredCapabilities": {
+        "browserName": "phantomjs"
+      }
+    },
+    "chrome": {
+      "desiredCapabilities": {
+        "browserName": "chrome"
+      }
+    },
+    "firefox": {
+      "desiredCapabilities": {
+        "browserName": "firefox"
+      }
+    }
+  }
+}

package.json

@@ -38,12 +38,14 @@
     "intelli-espower-loader": "^1.0.1",
     "jquery": "^3.1.0",
     "mocha": "^3.0.2",
+    "nightwatch": "^0.9.8",
     "phantomjs": "^2.1.7",
     "postcss-cssnext": "^2.7.0",
     "postcss-nested": "^1.0.0",
     "postcss-reporter": "^1.4.1",
     "postcss-simple-vars": "^3.0.0",
     "power-assert": "^1.4.1",
+    "selenium-server-standalone-jar": "2.53.1",
     "stylelint": "^7.2.0",
     "testium": "^3.3.1",
     "webdriver-http-sync": "^2.2.1"

test/specs/test.js

@@ -0,0 +1,14 @@
+"use strict";
+
+module.exports = {
+
+  'Test WAI-ARIA tabs UI' : function (browser) {
+    browser
+      .url("http://localhost:9100/")
+      .pause(1000)
+      .assert.title("tab-test")
+      .assert.containsText("#section1", "タブ UI を実装してみました。")
+      .end();
+  }
+
+};