Port updates from main branch to next

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   extends: [
     './node_modules/kcd-scripts/eslint.js',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:testing-library/vue',
     'prettier/vue',
   ],
   plugins: ['vue'],
@@ -12,5 +13,6 @@ module.exports = {
     'testing-library/no-dom-import': 'off',
     'testing-library/prefer-screen-queries': 'off',
     'testing-library/no-manual-cleanup': 'off',
+    'testing-library/no-await-sync-events': 'off',
   },
 }

.github/workflows/validate.yml

@@ -0,0 +1,81 @@
+name: validate
+on:
+  push:
+    branches:
+      [
+        '+([0-9])?(.{+([0-9]),x}).x',
+        'master',
+        'next',
+        'next-major',
+        'beta',
+        'alpha',
+        '!all-contributors/**',
+      ]
+  pull_request:
+    branches-ignore: ['all-contributors/**']
+jobs:
+  main:
+    strategy:
+      matrix:
+        node: [10.13, 12, 14]
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ▶️ Run validate script
+        run: npm run validate
+
+      - name: ⬆️ Upload coverage report
+        uses: codecov/codecov-action@v1
+
+  release:
+    needs: main
+    runs-on: ubuntu-latest
+    if:
+      ${{ github.repository == 'testing-library/vue-testing-library' &&
+      contains('refs/heads/master,refs/heads/beta,refs/heads/next,refs/heads/alpha',
+      github.ref) && github.event_name == 'push' }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v2
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🏗 Run build script
+        run: npm run build
+
+      - name: 🚀 Release
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          semantic_version: 17
+          branches: |
+            [
+              '+([0-9])?(.{+([0-9]),x}).x',
+              'master',
+              'next',
+              'next-major',
+              {name: 'beta', prerelease: true},
+              {name: 'alpha', prerelease: true}
+            ]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Vue Testing Library</h1>
+<h1>Vue Testing Library for Vue 3</h1>
 
 <br />
 
@@ -32,7 +32,6 @@
 [![GitHub version][github-badge]][github]
 [![npm version][npm-badge]][npm]
 [![Discord][discord-badge]][discord]
-
 [![MIT License][license-badge]][license]
 <!-- prettier-ignore-end -->
 
@@ -66,7 +65,7 @@ project's `devDependencies`:
 npm install --save-dev @testing-library/vue
 ```
 
-This library has `peerDependencies` listings for `Vue` and
+This library has `peerDependencies` listings for `Vue 3` and
 `vue-template-compiler`.
 
 You may also be interested in installing `jest-dom` so you can use [the custom
@@ -76,10 +75,8 @@ Jest matchers][jest-dom].
 
 ```html
 <template>
-  <div>
-    <p>Times clicked: {{ count }}</p>
-    <button @click="increment">increment</button>
-  </div>
+  <p>Times clicked: {{ count }}</p>
+  <button @click="increment">increment</button>
 </template>
 
 <script>
@@ -235,10 +232,11 @@ instead of filing an issue on GitHub.
 [![mediafreakch](https://avatars2.githubusercontent.com/u/777093?v=3&s=120)](https://github.com/mediafreakch)
 [![afenton90](https://avatars2.githubusercontent.com/u/8963736?v=3&s=120)](https://github.com/afenton90)
 [![cilice](https://avatars2.githubusercontent.com/u/835588?v=3&s=120)](https://github.com/cilice)
+[![ITenthusiasm](https://avatars2.githubusercontent.com/u/47364027?v3&s=120)](https://github.com/ITenthusiasm)
 
 <!-- prettier-ignore-start -->
-[build-badge]: https://travis-ci.org/testing-library/vue-testing-library.svg?branch=master
-[build]: https://travis-ci.org/testing-library/vue-testing-library
+[build-badge]: https://img.shields.io/github/workflow/status/testing-library/vue-testing-library/validate?logo=github
+[build]: https://github.com/testing-library/vue-testing-library/actions?query=workflow%3Avalidate
 [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/vue-testing-library.svg
 [coverage]: https://codecov.io/github/testing-library/vue-testing-library
 [github-badge]: https://badge.fury.io/gh/testing-library%2Fvue-testing-library.svg

package.json

@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.26.3",
-    "@types/testing-library__vue": "*",
-    "@vue/test-utils": "^2.0.0-beta.7",
+    "@vue/test-utils": "^2.0.0-beta.10",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/user-event": "^12.2.2",
     "@vue/compiler-sfc": "^3.0.2",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "axios": "^0.20.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.1.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^6.6.0",
+    "kcd-scripts": "^7.0.3",
     "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
-    "typescript": "^3.8.3",
+    "typescript": "^4.1.2",
     "vee-validate": "^4.0.0-beta.16",
     "vue": "^3.0.2",
     "vue-apollo": "^3.0.5",
@@ -77,8 +77,8 @@
     "vuex": "^4.0.0-rc.1"
   },
   "peerDependencies": {
-    "vue": "^3.0",
-    "@vue/compiler-sfc": "^3.0"
+    "vue": ">= 3",
+    "@vue/compiler-sfc": ">= 3"
   },
   "husky": {
     "hooks": {

src/__tests__/components/Button.vue

@@ -7,13 +7,13 @@ export default {
   props: {
     text: {
       type: String,
-      default: 'Button Text'
-    }
+      default: 'Button Text',
+    },
   },
   methods: {
     handleClick(e) {
       this.$emit('click')
-    }
-  }
+    },
+  },
 }
 </script>

src/__tests__/components/Form.vue

@@ -1,44 +1,42 @@
 <template>
-  <div>
-    <h1>Movie Review</h1>
-    <form onsubmit="return false">
-      <label for="movie-input">Title of the movie</label>
-      <input id="movie-input" v-model="title" name="title" />
+  <h1>Movie Review</h1>
+  <form @submit.prevent="submit">
+    <label for="movie-input">Title of the movie</label>
+    <input id="movie-input" v-model="title" name="title" />
 
-      <label id="review-textarea">Your review</label>
-      <textarea
-        v-model="review"
-        name="review-textarea"
-        placeholder="Write an awesome review"
-        aria-labelledby="review-textarea"
-      />
+    <label id="review-textarea">Your review</label>
+    <textarea
+      v-model="review"
+      name="review-textarea"
+      placeholder="Write an awesome review"
+      aria-labelledby="review-textarea"
+    />
 
-      <label>
-        <input v-model="rating" type="radio" value="3" />
-        Wonderful
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="2" />
-        Average
-      </label>
-      <label>
-        <input v-model="rating" type="radio" value="1" />
-        Awful
-      </label>
+    <label>
+      <input v-model="rating" type="radio" value="3" />
+      Wonderful
+    </label>
+    <label>
+      <input v-model="rating" type="radio" value="2" />
+      Average
+    </label>
+    <label>
+      <input v-model="rating" type="radio" value="1" />
+      Awful
+    </label>
 
-      <label id="recommend-label">Would you recommend this movie?</label>
-      <input
-        id="recommend"
-        v-model="recommend"
-        type="checkbox"
-        name="recommend"
-      />
+    <label id="recommend-label" for="recommend">
+      Would you recommend this movie?
+    </label>
+    <input
+      id="recommend"
+      v-model="recommend"
+      type="checkbox"
+      name="recommend"
+    />
 
-      <button :disabled="submitDisabled" type="submit" @click="submit">
-        Submit
-      </button>
-    </form>
-  </div>
+    <button :disabled="submitDisabled" type="submit">Submit</button>
+  </form>
 </template>
 
 <script>
@@ -51,6 +49,7 @@ export default {
       recommend: false,
     }
   },
+
   computed: {
     submitDisabled() {
       return !this.title || !this.review

src/__tests__/components/NumberDisplay.vue

@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <span data-testid="number-display">{{ number }}</span>
-    <span data-testid="instance-id">{{ id }}</span>
-  </div>
+  <span data-testid="number-display">{{ number }}</span>
+  <span data-testid="instance-id">{{ id }}</span>
 </template>
 
 <script>
@@ -12,13 +10,13 @@ export default {
   props: {
     number: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      id: idCounter++
+      id: idCounter++,
     }
-  }
+  },
 }
 </script>

src/__tests__/components/Select.vue

@@ -18,8 +18,8 @@
 export default {
   data() {
     return {
-      selectedDino: 'dino1'
+      selectedDino: 'dino1',
     }
-  }
+  },
 }
 </script>

src/__tests__/debug.js

@@ -57,3 +57,19 @@ test('debug pretty prints multiple nodes with the given parameter', () => {
     expect.stringContaining('Lorem ipsum dolor sit amet'),
   )
 })
+
+test('allows same arguments as prettyDOM', () => {
+  const {debug, container} = render(HelloWorld)
+
+  // debug accepts a maxLength and an options parameters:
+  // https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom
+  debug(container, 6, {highlight: false})
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      <div>
+      ...,
+    ]
+  `)
+})