new test setup

vuejs · ghost · Jun 15, 2016 · Jun 15, 2016 · Jun 15, 2016 · Jun 15, 2016
commit e5cb32a015f506ea5df0e07bcb64ae2d51d0801c
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-node_modules
+node_modules
+test/temp
diff --git a/circle.yml b/circle.yml
@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 6
diff --git a/lib/compiler.js b/lib/compiler.js
@@ -7,6 +7,7 @@ var Emitter = require('events').EventEmitter
 var vueCompiler = require('vue-template-compiler')
 
 var genId = require('./gen-id')
+var normalize = require('./normalize')
 var compilers = require('./compilers')
 var options = require('./compilers/options')
 var rewriteStyle = require('./style-rewriter')
@@ -18,8 +19,9 @@ try {
   hasBabel = false
 }
 
-// determine hot-reload-api location
-var hotReloadAPIPath = normalizeDep('vue-hot-reload-api')
+// determine dynamic script paths
+var hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
+var insertCSSPath = normalize.lib('insert-css')
 
 // expose compiler
 var compiler = module.exports = new Emitter()
@@ -83,7 +85,7 @@ compiler.compile = function (content, filePath, cb) {
     if (style) {
       style = JSON.stringify(style)
       output +=
-        'var __vueify_insert__ = require("vueify/lib/insert-css")\n' +
+        'var __vueify_insert__ = require("' + insertCSSPath + '")\n' +
         'var __vueify_style__ = __vueify_insert__.insert(' + style + ')\n'
     }
     // script
@@ -144,9 +146,13 @@ function processTemplate (part, filePath, parts) {
   return compileAsPromise('template', template, part.lang, filePath)
     .then(function (res) {
       var compiled = vueCompiler.compile(res)
-      parts.template = {
-        render: toFunction(compiled.render),
-        staticRenderFns: '[' + compiled.staticRenderFns.map(toFunction).join(',') + ']'
+      if (compiled.errors.length) {
+        throw new Error(compiled.errors.join('\n\n'))
+      } else {
+        parts.template = {
+          render: toFunction(compiled.render),
+          staticRenderFns: '[' + compiled.staticRenderFns.map(toFunction).join(',') + ']'
+        }
       }
     })
 }
@@ -216,15 +222,3 @@ function compileAsPromise (type, source, lang, filePath) {
 function toFunction (code) {
   return 'function(){' + code + '}'
 }
-
-function normalizeDep (dep) {
-  if (process.env.VUEIFY_TEST) {
-    return dep
-  } else if (fs.existsSync(path.resolve(__dirname, '../node_modules', dep))) {
-    // npm 2 or npm linked
-    return 'vueify/node_modules/' + dep
-  } else {
-    // npm 3
-    return dep
-  }
-}
diff --git a/lib/ensure-require.js b/lib/ensure-require.js
@@ -13,6 +13,10 @@ module.exports = function (name, deps) {
       req = req[0]
     }
     try {
+      // hack for babel-runtime because it does not expose "main" field
+      if (req === 'babel-runtime') {
+        req = 'babel-runtime/core-js'
+      }
       require.resolve(req)
     } catch (e) {
       missing.push(mis)

diff --git a/lib/normalize.js b/lib/normalize.js
@@ -0,0 +1,23 @@
+var IS_TEST = !!process.env.VUEIFY_TEST
+var fs = require('fs')
+var path = require('path')
+
+exports.lib = function (file) {
+  if (IS_TEST) {
+    return path.resolve(__dirname, file)
+  } else {
+    return 'vueify/lib/' + file
+  }
+}
+
+exports.dep = function (dep) {
+  if (IS_TEST) {
+    return dep
+  } else if (fs.existsSync(path.resolve(__dirname, '../node_modules', dep))) {
+    // npm 2 or npm linked
+    return 'vueify/node_modules/' + dep
+  } else {
+    // npm 3
+    return dep
+  }
+}
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "url": "https://github.com/vuejs/vueify/issues"
   },
   "scripts": {
-    "test": "NODE_ENV=production mocha test/test.js --slow=5000 --timeout=10000"
+    "test": "mocha test/test.js --slow=5000 --timeout=10000"
   },
   "homepage": "https://github.com/vuejs/vueify",
   "dependencies": {
@@ -37,13 +37,16 @@
     "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-runtime": "^6.0.0",
+    "browserify": "^13.0.1",
+    "chai": "^3.5.0",
     "coffee-script": "^1.10.0",
     "jade": "^1.11.0",
+    "jsdom": "^9.2.1",
     "less": "^2.5.1",
     "mocha": "^2.3.3",
     "node-sass": "^3.3.3",
     "pug": "^2.0.0-alpha6",
-    "rewire": "^2.5.1",
+    "rimraf": "^2.5.2",
     "stylus": "^0.52.4"
   }
 }
diff --git a/test/fixtures/autoprefix.vue b/test/fixtures/autoprefix.vue
diff --git a/test/fixtures/basic.vue b/test/fixtures/basic.vue
@@ -1,25 +1,19 @@
-<style>
-  html {
-    font-size: 20px;
-  }
-</style>
-
 <template>
-  <h1 :id="id" @click="hi">hello</h1>
-  <input type="text">
-  <button :disabled="loading">hihi</button>
+  <h2 class="red">{{msg}}</h2>
 </template>
 
 <script>
-class Test {
-  ok() {}
-}
-
-var evens = [2,4,6,8]
-var odds = evens.map(v => v + 1)
 export default {
-  data() {
-    return odds
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
   }
 }
 </script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
diff --git a/test/test.js b/test/test.js
@@ -1,75 +1,52 @@
-var fs = require('fs')
-var path = require('path')
-var compiler = require('../lib/compiler')
-var assert = require('assert')
-var hash = require('hash-sum')
-
-// test custom transform
-compiler.applyConfig({
-  customCompilers: {
-    test: function (content, cb) {
-      content = content.replace('not ', '')
-      cb(null, content)
-    }
-  }
-})
-
-function read (file) {
-  return fs.readFileSync(path.resolve(__dirname, file), 'utf-8')
-}
-
-function test (name) {
-  it(name, function (done) {
-    var filePath = 'fixtures/' + name + '.vue'
-    var fileContent = read(filePath)
-    var expected = read('expects/' + name + '.js')
-      .replace(/\{\{id\}\}/g, '_v-' + hash(require.resolve('./' + filePath)))
-
-    // test registering dependency
-    var deps = []
-    function addDep (file) {
-      deps.push(file)
-    }
-    compiler.on('dependency', addDep)
-
-    process.env.VUEIFY_TEST = true
-    process.env.NODE_ENV = name === 'non-minified'
-      ? 'development'
-      : 'production'
-
-    compiler.compile(
-      fileContent,
-      path.resolve(__dirname, filePath),
-      function (err, result) {
-        // the cb is handled by a Promise, so the assertion
-        // errors gets swallowed and the test never fails.
-        // do it in a separate tick.
-        setTimeout(function () {
-          if (err) throw err
-          assert.equal(result, expected, 'should compile correctly')
-
-          // check src
-          if (name === 'src') {
-            assert.equal(deps[0], __dirname + '/fixtures/test.html')
-            assert.equal(deps[1], __dirname + '/fixtures/test.styl')
-            assert.equal(deps[2], __dirname + '/fixtures/src/test.js')
-          }
-
-          if (name === 'less' || name === 'sass' || name === 'styl') {
-            assert.equal(deps[0], __dirname + '/fixtures/imports/import.' + name)
+process.env.VUEIFY_TEST = true
+
+const fs = require('fs')
+const path = require('path')
+const expect = require('chai').expect
+const hash = require('hash-sum')
+const rimraf = require('rimraf')
+const mkdirp = require('mkdirp')
+const browserify = require('browserify')
+const vueify = require('../index')
+const jsdom = require('jsdom')
+const vueCompiler = require('vue-template-compiler')
+
+const tempDir = path.resolve(__dirname, './temp')
+const mockEntry = path.resolve(tempDir, 'entry.js')
+rimraf.sync(tempDir)
+mkdirp.sync(tempDir)
+
+function test (file, assert) {
+  it(file, done => {
+    fs.writeFileSync(mockEntry, 'window.vueModule = require("../fixtures/' + file + '.vue")')
+    browserify(mockEntry)
+      .transform(vueify)
+      .bundle((err, buf) => {
+        if (err) return done(err)
+        jsdom.env({
+          html: '<!DOCTYPE html><html><head></head><body></body></html>',
+          src: [buf.toString()],
+          done: (err, window) => {
+            if (err) return done(err)
+            assert(window)
+            done()
           }
-
-          compiler.removeListener('dependency', addDep)
-          done()
-        }, 0)
-      }
-    )
+        })
+      })
   })
 }
 
-describe('Vueify compiler', function () {
-  fs.readdirSync(path.resolve(__dirname, 'expects'))
-    .forEach(function (file) {
-      test(path.basename(file, '.js'))
-    })
+function assertRenderFn (options, template) {
+  const compiled = vueCompiler.compile(template)
+  expect(options.render.toString()).to.equal('function (){' + compiled.render + '}')
+}
+
+describe('vueify', () => {
+  test('basic', window => {
+    const module = window.vueModule
+    assertRenderFn(module, '<h2 class="red">{{msg}}</h2>')
+    expect(module.data().msg).to.contain('Hello from Component A!')
+    const style = window.document.querySelector('style').textContent
+    expect(style).to.contain('comp-a h2 {\n  color: #f00;\n}')
+  })
 })