Vue Project Setup (#8018)

* add files for new client side and reorg gulp tasks * add deps and script for new client * fix webpack paths so that building works * fix static assets not copied into prod build * fix linting * add eslint deps and re-enable it in webpack * add most missing deps for client side and split .babelrc for client * reorganize .eslintignore * update client tests paths and .gitignore * uncomment code * client: move App component * client: update oaths in App component * fix client tests and add more deps * add client side tests to npm test * fix typo in depencency name * update more deps * fix karma.conf.js and upgrade phantomjs * fix dep and move karma.conf to subdirectory * update karma.conf.js position in Gruntfile * try downgrading phantomjs * Fixup client tests (#8032) * Use phantom 2 * fix(tests): Fix refresher test * gitignore translation mock * Update karma version * disable e2e tests for new client from build * write vue templates with pug * add basic routing * remove unnecessary Function.bind shim * remove unused dependency
2016-09-18 21:51:20 +02:00
parent c615af82f8
commit 4f3a9802c1
59 changed files with 1095 additions and 216 deletions
@@ -0,0 +1,3 @@
+This folder contains the test files for the new client side that is being developed.
+
+The old client side tests can be found in /test/client-old.
@@ -0,0 +1,26 @@
+// A custom Nightwatch assertion.
+// the name of the method is the filename.
+// can be used in tests like this:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// for how to write custom assertions see
+// http://nightwatchjs.org/guide#writing-custom-assertions
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count;
+  this.expected = count;
+  this.pass = function (val) {
+    return val === this.expected;
+  };
+  this.value = function (res) {
+    return res.value;
+  };
+  this.command = function (cb) {
+    var self = this;
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length;
+    }, [selector], function (res) {
+      cb.call(self, res);
+    });
+  };
+};
@@ -0,0 +1,46 @@
+require('babel-register');
+var config = require('../../../webpack/config');
+
+// http://nightwatchjs.org/guide#settings-file
+module.exports = {
+  'src_folders': ['test/client/e2e/specs'],
+  'output_folder': 'test/client/e2e/reports',
+  'custom_assertions_path': ['test/client/e2e/custom-assertions'],
+
+  'selenium': {
+    'start_process': true,
+    'server_path': 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar',
+    'host': '127.0.0.1',
+    'port': 4444,
+    'cli_args': {
+      'webdriver.chrome.driver': require('chromedriver').path,
+    },
+  },
+
+  'test_settings': {
+    'default': {
+      'selenium_port': 4444,
+      'selenium_host': 'localhost',
+      'silent': true,
+      'globals': {
+        'devServerURL': 'http://localhost:' + (process.env.PORT || config.dev.port),
+      },
+    },
+
+    'chrome': {
+      'desiredCapabilities': {
+        'browserName': 'chrome',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+      },
+    },
+
+    'firefox': {
+      'desiredCapabilities': {
+        'browserName': 'firefox',
+        'javascriptEnabled': true,
+        'acceptSslCerts': true,
+      },
+    },
+  },
+};
@@ -0,0 +1,31 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing';
+var server = require('../../../webpack/dev-server.js');
+
+// 2. run the nightwatch test suite against it
+// to run in additional browsers:
+//    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
+//    2. add it to the --env flag below
+// or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+// For more information on Nightwatch's config file, see
+// http://nightwatchjs.org/guide#settings-file
+var opts = process.argv.slice(2);
+if (opts.indexOf('--config') === -1) {
+  opts = opts.concat(['--config', 'test/client/e2e/nightwatch.conf.js']);
+}
+if (opts.indexOf('--env') === -1) {
+  opts = opts.concat(['--env', 'chrome']);
+}
+
+var spawn = require('cross-spawn');
+var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' });
+
+runner.on('exit', function (code) {
+  server.close();
+  process.exit(code);
+});
+
+runner.on('error', function (err) {
+  server.close();
+  throw err;
+});
@@ -0,0 +1,20 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    var devServer = browser.globals.devServerURL;
+
+    browser
+    .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.logo')
+      .assert.containsText('h1', 'Hello Vue!')
+      .assert.elementCount('p', 3)
+      .end();
+  },
+};
@@ -0,0 +1,7 @@
+// require all test files (files that ends with .spec.js)
+var testsContext = require.context('./specs', true, /\.spec$/);
+testsContext.keys().forEach(testsContext);
+
+// require all src files except main.js/ README.md / index.html for coverage.
+var srcContext = require.context('../../../website/client', true, /^\.\/(?!(main\.js|README\.md|index\.html)?$)/);
+srcContext.keys().forEach(srcContext);
@@ -0,0 +1,75 @@
+// This is a karma config file. For more details see
+//   http://karma-runner.github.io/0.13/config/configuration-file.html
+// we are also using it with karma-webpack
+//   https://github.com/webpack/karma-webpack
+
+var path = require('path');
+var merge = require('webpack-merge');
+var baseConfig = require('../../../webpack/webpack.base.conf');
+var utils = require('../../../webpack/utils');
+var webpack = require('webpack');
+var projectRoot = path.resolve(__dirname, '../../../');
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    loaders: utils.styleLoaders(),
+  },
+  devtool: '#inline-source-map',
+  vue: {
+    loaders: {
+      js: 'isparta',
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../../../webpack/config/test.env'),
+    }),
+  ],
+});
+
+// no need for app entry during tests
+delete webpackConfig.entry;
+
+// make sure isparta loader is applied before eslint
+webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || [];
+webpackConfig.module.preLoaders.unshift({
+  test: /\.js$/,
+  loader: 'isparta',
+  include: path.resolve(projectRoot, 'website/client'),
+});
+
+// only apply babel for test files when using isparta
+webpackConfig.module.loaders.some(function (loader, i) {
+  if (loader.loader === 'babel') {
+    loader.include = path.resolve(projectRoot, 'test/client/unit');
+    return true;
+  }
+});
+
+module.exports = function (config) {
+  config.set({
+    // to run in additional browsers:
+    // 1. install corresponding karma launcher
+    //    http://karma-runner.github.io/0.13/config/browsers.html
+    // 2. add it to the `browsers` array below.
+    browsers: ['PhantomJS'],
+    frameworks: ['mocha', 'sinon-chai'],
+    reporters: ['spec', 'coverage'],
+    files: ['./index.js'],
+    preprocessors: {
+      './index.js': ['webpack', 'sourcemap'],
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true,
+    },
+    coverageReporter: {
+      dir: './coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' },
+      ],
+    },
+  });
+};
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Hello from 'src/components/Hello';
+
+describe('Hello.vue', () => {
+  it('should render correct contents', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      render: (h) => h(Hello),
+    });
+    expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Hello Vue!');
+  });
+});