test: create e2e tests

.circleci/config.yml

@@ -12,16 +12,16 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
+          - node-8-dependencies-{{ checksum "package.json" }}
           # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+          - node-8-dependencies-
 
       - run: yarn install
 
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: node-8-dependencies-{{ checksum "package.json" }}
 
       # run tests!
       - run: npm run test

.eslintrc

@@ -1,11 +1,15 @@
 {
   "root": true,
   "extends": [
+    "plugin:vue/recommended",
     "standard",
     "prettier",
     "prettier/standard"
   ],
   "rules": {
     "no-new": 0
+  },
+  "env": {
+    "jest": true
   }
 }

.gitignore

@@ -1,6 +1,7 @@
 #OS files
 .DS_Store
 node_modules
+**/node_modules/**
 
 # Editor files
 /.idea

test/__snapshots__/sourceMaps.spec.js.snap → e2e/__projects__/babel-config/__snapshots__/test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`generates source maps for .vue files 1`] = `
 "var exports = {}
-        \\"use strict\\";
+\\"use strict\\";
 
 Object.defineProperty(exports, \\"__esModule\\", {
   value: true
@@ -14,6 +14,22 @@ exports.default = void 0;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var _default = {
   name: 'basic',
   computed: {
@@ -39,12 +55,12 @@ var _default = {
 };
 exports.default = _default;
 
-        if(!exports.default) {
-          exports.default = {}
-        }
-        var __options__ = module.exports = exports.default
-        Object.keys(exports).forEach(k => module.exports[k] = exports[k])
-      var render = function() {
+if(!exports.default) {
+  exports.default = {}
+}
+var __options__ = module.exports = exports.default
+Object.keys(exports).forEach(k => module.exports[k] = exports[k])
+var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
@@ -55,15 +71,30 @@ exports.default = _default;
 var staticRenderFns = []
 render._withStripped = true
 
-      __options__.render = render
-      __options__.staticRenderFns = staticRenderFns
-
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljLnZ1ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFLQTtBQVBBO0FBU0E7QUFDQTtBQUNBO0FBQ0E7QUFGQTtBQUlBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQWpCQSIsInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT5cbiAgICA8ZGl2IGNsYXNzPVwiaGVsbG9cIj5cbiAgICAgICAgPGgxIDpjbGFzcz1cImhlYWRpbmdDbGFzc2VzXCI+e3sgbXNnIH19PC9oMT5cbiAgICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG4gICAgZXhwb3J0IGRlZmF1bHQge1xuICAgICAgICBuYW1lOiAnYmFzaWMnLFxuICAgICAgICBjb21wdXRlZDoge1xuICAgICAgICAgICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgICAgIHJlZDogdGhpcy5pc0NyYXp5LFxuICAgICAgICAgICAgICAgICAgICBibHVlOiAhdGhpcy5pc0NyYXp5LFxuICAgICAgICAgICAgICAgICAgICBzaGFkb3c6IHRoaXMuaXNDcmF6eSxcbiAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICAgICAgZGF0YTogZnVuY3Rpb24gZGF0YSgpIHtcbiAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgbXNnOiAnV2VsY29tZSB0byBZb3VyIFZ1ZS5qcyBBcHAnLFxuICAgICAgICAgICAgICAgIGlzQ3Jhenk6IGZhbHNlLFxuICAgICAgICAgICAgfTtcbiAgICAgICAgfSxcbiAgICAgICAgbWV0aG9kczoge1xuICAgICAgICAgICAgdG9nZ2xlQ2xhc3M6IGZ1bmN0aW9uIHRvZ2dsZUNsYXNzKCkge1xuICAgICAgICAgICAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3Jhenk7XG4gICAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgIH07XG48L3NjcmlwdD5cbiJdfQ=="
+__options__.render = render
+__options__.staticRenderFns = staticRenderFns
+;(function() {
+  var beforeCreate = __options__.beforeCreate
+  var styleFn = function () { if(!this['css']) {
+  this['css'] = {};
+}
+this['css'] = Object.assign(
+this['css'], {\\"testA\\":\\"testA\\"});
+if(!this['$style']) {
+  this['$style'] = {};
+}
+this['$style'] = Object.assign(
+this['$style'], {\\"testB\\":\\"testB\\"});
+ }
+  __options__.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]
+})()
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljLnZ1ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQUtBO0FBUEE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBakJBIiwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiaGVsbG9cIj5cbiAgICA8aDEgOmNsYXNzPVwiaGVhZGluZ0NsYXNzZXNcIj57eyBtc2cgfX08L2gxPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBtb2R1bGU9XCJjc3NcIj5cbi50ZXN0QSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbn1cbjwvc3R5bGU+XG48c3R5bGUgbW9kdWxlPlxuLnRlc3RCIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTtcbn1cbjwvc3R5bGU+XG48c3R5bGU+XG4udGVzdEMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuPC9zdHlsZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogJ2Jhc2ljJyxcbiAgY29tcHV0ZWQ6IHtcbiAgICBoZWFkaW5nQ2xhc3NlczogZnVuY3Rpb24gaGVhZGluZ0NsYXNzZXMoKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICByZWQ6IHRoaXMuaXNDcmF6eSxcbiAgICAgICAgYmx1ZTogIXRoaXMuaXNDcmF6eSxcbiAgICAgICAgc2hhZG93OiB0aGlzLmlzQ3JhenlcbiAgICAgIH1cbiAgICB9XG4gIH0sXG4gIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG1zZzogJ1dlbGNvbWUgdG8gWW91ciBWdWUuanMgQXBwJyxcbiAgICAgIGlzQ3Jhenk6IGZhbHNlXG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgdG9nZ2xlQ2xhc3M6IGZ1bmN0aW9uIHRvZ2dsZUNsYXNzKCkge1xuICAgICAgdGhpcy5pc0NyYXp5ID0gIXRoaXMuaXNDcmF6eVxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG4iXX0="
 `;
 
 exports[`generates source maps using src attributes 1`] = `
 "var exports = {}
-        \\"use strict\\";
+\\"use strict\\";
 
 Object.defineProperty(exports, \\"__esModule\\", {
   value: true
@@ -94,12 +125,12 @@ var _default = {
 };
 exports.default = _default;
 
-        if(!exports.default) {
-          exports.default = {}
-        }
-        var __options__ = module.exports = exports.default
-        Object.keys(exports).forEach(k => module.exports[k] = exports[k])
-      var render = function() {
+if(!exports.default) {
+  exports.default = {}
+}
+var __options__ = module.exports = exports.default
+Object.keys(exports).forEach(k => module.exports[k] = exports[k])
+var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
@@ -110,8 +141,8 @@ exports.default = _default;
 var staticRenderFns = []
 render._withStripped = true
 
-      __options__.render = render
-      __options__.staticRenderFns = staticRenderFns
-      
+__options__.render = render
+__options__.staticRenderFns = staticRenderFns
+
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljU3JjLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQUtBO0FBUEE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBakJBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiAnYmFzaWMnLFxuICBjb21wdXRlZDoge1xuICAgIGhlYWRpbmdDbGFzc2VzOiBmdW5jdGlvbiBoZWFkaW5nQ2xhc3NlcygpIHtcbiAgICAgIHJldHVybiB7XG4gICAgICAgIHJlZDogdGhpcy5pc0NyYXp5LFxuICAgICAgICBibHVlOiAhdGhpcy5pc0NyYXp5LFxuICAgICAgICBzaGFkb3c6IHRoaXMuaXNDcmF6eVxuICAgICAgfVxuICAgIH1cbiAgfSxcbiAgZGF0YTogZnVuY3Rpb24gZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgbXNnOiAnV2VsY29tZSB0byBZb3VyIFZ1ZS5qcyBBcHAnLFxuICAgICAgaXNDcmF6eTogZmFsc2VcbiAgICB9XG4gIH0sXG4gIG1ldGhvZHM6IHtcbiAgICB0b2dnbGVDbGFzczogZnVuY3Rpb24gdG9nZ2xlQ2xhc3MoKSB7XG4gICAgICB0aGlzLmlzQ3JhenkgPSAhdGhpcy5pc0NyYXp5XG4gICAgfVxuICB9XG59XG4iXX0="
 `;

e2e/__projects__/babel-config/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

e2e/__projects__/babel-config/components/Basic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">{{ msg }}</h1>
+  </div>
+</template>
+
+<style module="css">
+.testA {
+  background-color: red;
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+}
+</style>
+
+<script>
+export default {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      }
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    }
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy
+    }
+  }
+}
+</script>

e2e/__projects__/babel-config/components/FunctionalSFC.vue

@@ -0,0 +1,5 @@
+<template functional>
+  <div @click="props.onClick(props.msg.id)">
+    {{ props.msg.title }} <slot></slot>
+  </div>
+</template>

e2e/__projects__/babel-config/components/FunctionalSFCParent.vue

@@ -0,0 +1,14 @@
+<template>
+  <FunctionalSFC :msg="{ id: 1, title: 'foo' }" :onClick="() => {}" />
+</template>
+
+<script>
+import Vue from 'vue'
+import FunctionalSFC from './FunctionalSFC'
+
+export default {
+  components: {
+    FunctionalSFC
+  }
+}
+</script>

test/resources/Jade.vue → e2e/__projects__/babel-config/components/Jade.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-    export default {
-        name: 'jade'
-    };
+export default {
+  name: 'jade'
+}
 </script>

e2e/__projects__/babel-config/components/Less.vue

@@ -0,0 +1,13 @@
+<template>
+  <div />
+</template>
+
+<style module lang="less">
+.testLess {
+  background-color: @primary-color;
+}
+</style>
+
+<style lang="less">
+@primary-color: #333;
+</style>

e2e/__projects__/babel-config/components/NamedExport.vue

@@ -0,0 +1,7 @@
+<script>
+export const randomExport = 42
+
+export default {
+  name: 'NamedExport'
+}
+</script>

e2e/__projects__/babel-config/components/PostCss.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="$style.testPcss"></div>
+</template>
+
+<style lang="postcss">
+.testPcss {
+  background-color: purple;
+}
+</style>
+
+<style module lang="pcss">
+/* This syntax is for postcss-custom-properties */
+--primary-color: green;
+
+/* This syntax is for postcss-nesting, but invalid as Pure CSS */
+body {
+  @media screen {
+    background-color: grey;
+  }
+}
+</style>

test/resources/PugExtends.vue → e2e/__projects__/babel-config/components/Pug.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  extends /resources/PugBase.pug
+  extends /components/PugBase.pug
   block component
     div(class="pug-extended")
 </template>
 
 <script>
-    export default {
-        name: 'pug'
-    }
-</script>
+export default {
+  name: 'pug'
+}
+</script>

e2e/__projects__/babel-config/components/PugRelativeExtends.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+  extends ./relative/PugRelativeBase.pug
+  block component
+    div(class="pug-extended")
+</template>
+
+<script>
+export default {
+  name: 'pug'
+}
+</script>

e2e/__projects__/babel-config/components/RenderFunction.vue

@@ -0,0 +1,8 @@
+<script>
+export default {
+  name: 'RenderFunction',
+  render(createElement) {
+    return createElement('section', [this.$slots.default])
+  }
+}
+</script>

e2e/__projects__/babel-config/components/Sass.vue

@@ -0,0 +1,15 @@
+<template>
+  <div />
+</template>
+
+<style module lang="sass">
+@import "~__styles/sass-a"
+
+.c
+  background-color: red
+</style>
+
+<style lang="sass">
+.d
+  background-color: blue
+</style>

e2e/__projects__/babel-config/components/Scss.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="testA"></div>
+</template>
+
+<style module lang="scss">
+@import '~__styles/scss-a';
+
+.c {
+  background-color: red;
+}
+</style>
+
+<style lang="scss">
+.d {
+  background-color: red;
+}
+</style>

e2e/__projects__/babel-config/components/Stylus.vue

@@ -0,0 +1,22 @@
+<template>
+  <div />
+</template>
+
+<script>
+export default {
+  name: 'Button'
+}
+</script>
+
+<style lang="stylus" module="css">
+@import './relative/resource';
+.testA {
+  background-color: red;
+}
+</style>
+
+<style lang="styl" module>
+.testB {
+  background-color: blue;
+}
+</style>

e2e/__projects__/babel-config/components/styles/sass-a.sass

@@ -0,0 +1,4 @@
+@import "./sass-b"
+
+.a
+  background-color: blue

e2e/__projects__/babel-config/components/styles/sass-b.sass

@@ -0,0 +1,2 @@
+.b
+  background-color: blue