Merge branch 'dev' into feat/allow-testing-src-directly

dobromir-hristov · dobromir-hristov · commit 92d935a24401 · 2020-01-09T22:37:13.000+02:00
# Conflicts:
#	yarn.lock
diff --git a/.github/COMMIT_CONVENTIONS.md b/.github/COMMIT_CONVENTIONS.md
@@ -0,0 +1,91 @@
+## Git Commit Message Convention
+
+> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).
+
+#### TL;DR:
+
+Messages must be matched by the following regex:
+
+```js
+;/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/
+```
+
+#### Examples
+
+Appears under "Features" header, `Server Utils` subheader:
+
+```
+feat(server-utils): add 'props' option
+```
+
+Appears under "Bug Fixes" header, `Test Utils` subheader, with a link to issue #28:
+
+```
+fix(test-utils): handle events on blur
+
+close #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(test-utils): improve vdom diffing by removing 'foo' option
+
+BREAKING CHANGE: The 'foo' option has been removed.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(server-utils): add 'comments' option
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
+### Full Message Format
+
+A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However, if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+
+Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
+
+### Scope
+
+The scope could be anything specifying the place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc...
+
+### Subject
+
+The subject contains a succinct description of the change:
+
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
+
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -5,6 +5,7 @@ Hi! I’m really excited that you are interested in contributing to Vue Test Uti
 - [Code of Conduct](https://github.com/vuejs/vue/blob/dev/.github/CODE_OF_CONDUCT.md)
 - [Issue Reporting Guidelines](#issue-reporting-guidelines)
 - [Pull Request Guidelines](#pull-request-guidelines)
+- [Committing Changes](#committing-changes)
 - [Development Setup](#development-setup)
 - [Project Structure](#project-structure)
 
@@ -34,6 +35,10 @@ Hi! I’m really excited that you are interested in contributing to Vue Test Uti
   - Provide detailed description of the bug in the PR. Live demo preferred.
   - Add appropriate test coverage if applicable.
 
+### Committing Changes
+
+Commit messages should follow the [commit message convention](./COMMIT_CONVENTION.md) so that changelogs can be automatically generated. Commit messages will be automatically validated upon commit. If you are not familiar with the commit message convention, you can use `npm run commit` or `yarn commit` instead of `git commit`, which provides an interactive CLI for generating proper commit messages.
+
 ## Development Setup
 
 You will need [Node.js](http://nodejs.org) **version 6+**
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v10
diff --git a/docs/guides/getting-started.md b/docs/guides/getting-started.md
@@ -10,7 +10,7 @@ cd vue-test-utils-getting-started
 npm install
 ```
 
-If you already have a project that was craeted with the [Vue CLI](https://cli.vuejs.org/) and want to add testing capabilities you may run:
+If you already have a project that was created with the [Vue CLI](https://cli.vuejs.org/) and want to add testing capabilities you may run:
 
 ```bash
 # unit testing
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "build": "lerna run build",
     "build:test": "lerna run build:test",
     "clean": "lerna clean --yes",
+    "commit": "git-cz",
     "docs": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "flow": "flow check",
@@ -66,7 +67,6 @@
     "markdown-it-include": "^1.0.0",
     "mocha": "^5.2.0",
     "mocha-webpack": "^1.0.1",
-    "prettier": "^1.16.0",
     "rollup": "1",
     "rollup-plugin-buble": "^0.19",
     "rollup-plugin-commonjs": "10",
@@ -78,19 +78,46 @@
     "sinon-chai": "^3.3.0",
     "typescript": "3",
     "vee-validate": "^2.1.3",
-    "vue": "^2.5.22",
+    "vue": "^2.6.11",
     "vue-class-component": "^6.1.2",
     "vue-loader": "^13.6.2",
     "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.22",
-    "vue-template-compiler": "^2.5.22",
+    "vue-server-renderer": "^2.6.11",
+    "vue-template-compiler": "^2.6.11",
     "vuepress": "^0.14.2",
     "vuepress-theme-vue": "^1.0.3",
     "vuex": "^3.0.1",
     "webpack": "^3.0.1",
     "webpack-node-externals": "^1.6.0"
   },
   "devDependencies": {
-    "@vue/composition-api": "^0.3.2"
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@vue/composition-api": "^0.3.2",
+    "commitizen": "^4.0.3",
+    "cz-conventional-changelog": "^3.0.2",
+    "husky": "^3.1.0",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.16.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,vue,md}": ["prettier --write", "git add"],
+    "*.{js,vue}": ["eslint --fix", "git add"]
   }
 }
diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js
@@ -1,7 +1,13 @@
 // @flow
 
 import Vue from 'vue'
-import { throwError, camelize, capitalize, hyphenate } from '../shared/util'
+import {
+  throwError,
+  camelize,
+  capitalize,
+  hyphenate,
+  keys
+} from '../shared/util'
 import {
   componentNeedsCompiling,
   templateContainsComponent,
@@ -74,6 +80,25 @@ function resolveOptions(component, _Vue) {
   return options
 }
 
+function getScopedSlotRenderFunctions(ctx: any): Array<string> {
+  // In Vue 2.6+ a new v-slot syntax was introduced
+  // scopedSlots are now saved in parent._vnode.data.scopedSlots
+  // We filter out the _normalized and $stable key
+  if (
+    ctx &&
+    ctx.$options &&
+    ctx.$options.parent &&
+    ctx.$options.parent._vnode &&
+    ctx.$options.parent._vnode.data &&
+    ctx.$options.parent._vnode.data.scopedSlots
+  ) {
+    const slotKeys: Array<string> = ctx.$options.parent._vnode.data.scopedSlots
+    return keys(slotKeys).filter(x => x !== '_normalized' && x !== '$stable')
+  }
+
+  return []
+}
+
 export function createStubFromComponent(
   originalComponent: Component,
   name: string,
@@ -109,7 +134,12 @@ export function createStubFromComponent(
                 ...this.$props
               }
         },
-        context ? context.children : this.$options._renderChildren
+        context
+          ? context.children
+          : this.$options._renderChildren ||
+              getScopedSlotRenderFunctions(this).map(x =>
+                this.$options.parent._vnode.data.scopedSlots[x]()
+              )
       )
     }
   }
diff --git a/packages/create-instance/create-instance.js b/packages/create-instance/create-instance.js
@@ -71,8 +71,21 @@ export default function createInstance(
   // used to identify extended component using constructor
   componentOptions.$_vueTestUtils_original = component
 
-  // make sure all extends are based on this instance
+  // watchers provided in mounting options should override preexisting ones
+  if (componentOptions.watch && instanceOptions.watch) {
+    const componentWatchers = Object.keys(componentOptions.watch)
+    const instanceWatchers = Object.keys(instanceOptions.watch)
+
+    for (let i = 0; i < instanceWatchers.length; i++) {
+      const k = instanceWatchers[i]
+      // override the componentOptions with the one provided in mounting options
+      if (componentWatchers.includes(k)) {
+        componentOptions.watch[k] = instanceOptions.watch[k]
+      }
+    }
+  }
 
+  // make sure all extends are based on this instance
   const Constructor = _Vue.extend(componentOptions).extend(instanceOptions)
   componentOptions._Ctor = {}
   Constructor.options._base = _Vue
diff --git a/packages/shared/util.js b/packages/shared/util.js
@@ -36,6 +36,10 @@ function hasOwnProperty(obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop)
 }
 
+export function keys<T: string>(obj: any): Array<T> {
+  return Object.keys(obj)
+}
+
 export function resolveComponent(id: string, components: Object) {
   if (typeof id !== 'string') {
     return
diff --git a/test/resources/components/component-with-v-slot-syntax.vue b/test/resources/components/component-with-v-slot-syntax.vue
@@ -0,0 +1,17 @@
+<template>
+  <ComponentWithVSlot>
+    <template v-slot:newSyntax>
+      <p class="new-example">new slot syntax</p>
+    </template>
+  </ComponentWithVSlot>
+</template>
+
+<script>
+import ComponentWithVSlot from './component-with-v-slot.vue'
+
+export default {
+  name: 'ComponentWithVSlotSyntax',
+
+  components: { ComponentWithVSlot }
+}
+</script>
diff --git a/test/resources/components/component-with-v-slot.vue b/test/resources/components/component-with-v-slot.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <slot name="newSyntax" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComponentWithVSlot'
+}
+</script>
diff --git a/test/specs/mounting-options/watch.spec.js b/test/specs/mounting-options/watch.spec.js
@@ -0,0 +1,36 @@
+import { describeWithShallowAndMount } from '~resources/utils'
+
+describeWithShallowAndMount('options.watch', mountingMethod => {
+  it('overrides a default watch handler', async () => {
+    const TestComponent = {
+      props: ['someProp'],
+      template: '<div>{{ foo }}</div>',
+      data() {
+        return {
+          foo: 'bar'
+        }
+      },
+      watch: {
+        someProp: {
+          handler() {
+            this.foo = 'updated-bar'
+          }
+        }
+      }
+    }
+    const wrapper = mountingMethod(TestComponent, {
+      watch: {
+        someProp: {
+          handler() {
+            // do nothing
+          }
+        }
+      }
+    })
+
+    wrapper.setProps({ someProp: 'some-new-val' })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).to.equal('bar')
+  })
+})
diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -7,6 +7,8 @@ import ComponentWithNestedChildren from '~resources/components/component-with-ne
 import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
+import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue'
+import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
 import { vueVersion } from '~resources/utils'
 import { describeRunIf, itDoNotRunIf } from 'conditional-specs'
@@ -96,6 +98,42 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     )
   })
 
+  it('renders SFC with named slots with v-slot syntax', () => {
+    const wrapper = shallowMount(ComponentWithVSlotSyntax)
+
+    expect(wrapper.find(ComponentWithVSlot).exists()).to.equal(true)
+    expect(wrapper.find('.new-example').exists()).to.equal(true)
+    expect(wrapper.html()).to.equal(
+      '<componentwithvslot-stub>\n' +
+        '  <p class="new-example">new slot syntax</p>\n' +
+        '</componentwithvslot-stub>'
+    )
+  })
+
+  it('renders named slots with v-slot syntax', () => {
+    const localVue = createLocalVue()
+    localVue.component('Foo', {
+      template: '<div><slot name="newSyntax" /></div>'
+    })
+    const TestComponent = {
+      template: `
+        <Foo>
+          <template v-slot:newSyntax>
+            <p class="new-example">text</p>
+          </template>
+        </Foo>
+      `
+    }
+    const wrapper = shallowMount(TestComponent, {
+      localVue
+    })
+    expect(wrapper.find({ name: 'Foo' }).exists()).to.equal(true)
+    expect(wrapper.find('.new-example').exists()).to.equal(true)
+    expect(wrapper.html()).to.equal(
+      '<foo-stub>\n' + '  <p class="new-example">text</p>\n' + '</foo-stub>'
+    )
+  })
+
   it('renders no children if none supplied', () => {
     const TestComponent = {
       template: '<child />',
