feat: Update deps (#156)

This release comes with an updated version of DOM Testing Library – make sure to check their changelog to see what's new!

Author: afontcu

.eslintrc.js

@@ -8,5 +8,9 @@ module.exports = {
   rules: {
     'no-console': 'off',
     'import/no-unresolved': 'off',
+
+    'testing-library/no-dom-import': 'off',
+    'testing-library/prefer-screen-queries': 'off',
+    'testing-library/no-manual-cleanup': 'off',
   },
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -43,6 +43,7 @@ assignees: ''
 Relevant code or config (if any)
 
 ```javascript
+
 ```
 
 **Additional context**

package-lock.json

@@ -40,35 +40,35 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "@testing-library/dom": "^7.5.7",
-    "@types/testing-library__vue": "^2.0.1",
-    "@vue/test-utils": "^1.0.3"
+    "@babel/runtime": "^7.11.2",
+    "@testing-library/dom": "^7.24.3",
+    "@types/testing-library__vue": "^5.0.0",
+    "@vue/test-utils": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@testing-library/jest-dom": "^5.7.0",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@testing-library/jest-dom": "^5.11.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
-    "axios": "^0.19.2",
+    "axios": "^0.20.0",
     "eslint-plugin-vue": "^6.2.2",
-    "graphql": "^15.0.0",
-    "graphql-tag": "^2.10.3",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^5.11.1",
+    "kcd-scripts": "^6.5.1",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.20.5",
+    "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
     "vee-validate": "^2.2.15",
-    "vue": "^2.6.11",
-    "vue-apollo": "^3.0.3",
-    "vue-i18n": "^8.17.6",
-    "vue-jest": "^4.0.0-beta.2",
-    "vue-router": "^3.1.6",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify": "^2.2.28",
-    "vuex": "^3.4.0"
+    "vue": "^2.6.12",
+    "vue-apollo": "^3.0.4",
+    "vue-i18n": "^8.21.1",
+    "vue-jest": "^4.0.0-rc.0",
+    "vue-router": "^3.4.5",
+    "vue-template-compiler": "^2.6.12",
+    "vuetify": "^2.3.10",
+    "vuex": "^3.5.1"
   },
   "peerDependencies": {
     "vue": "^2.6.10",

package.json

@@ -16,7 +16,7 @@ test('mocks an API call when load-greeting is clicked', async () => {
 
   expect(axiosMock.get).toHaveBeenCalledTimes(1)
   expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
-  getByText('hello there')
+  expect(getByText('hello there')).toBeInTheDocument()
 
   // You can render component snapshots by using html(). However, bear in mind
   // that Snapshot Testing should not be treated as a replacement for regular

src/__tests__/axios-mock.js

@@ -5,7 +5,9 @@ test('cleanup re-throws errors from async lifecycle hooks', async () => {
   const err = new Error('foo')
   render({
     async mounted() {
-      await new Promise((resolve, reject) => reject(err))
+      await new Promise((resolve, reject) => {
+        reject(err)
+      })
     },
     template: `<h1>Hello World</h1>`,
   })

src/__tests__/cleanup-throw.js

@@ -1,3 +1,4 @@
+/* eslint-disable testing-library/no-debug */
 import {render} from '@testing-library/vue'
 import HelloWorld from './components/HelloWorld'
 

src/__tests__/debug.js

@@ -8,13 +8,13 @@ import Directive from './components/Directive'
 test('Component with a custom directive', () => {
   // Do not forget to add the new custom directive to the render function as
   // the third parameter.
-  const {queryByText} = render(Directive, {}, vue =>
+  const {queryByText, getByText} = render(Directive, {}, vue =>
     vue.directive('uppercase', uppercaseDirective),
   )
 
   // Test that the text in lower case does not appear in the DOM
   expect(queryByText('example text')).not.toBeInTheDocument()
 
   // Test that the text in upper case does appear in the DOM thanks to the directive
-  expect(queryByText('EXAMPLE TEXT')).toBeInTheDocument()
+  expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
 })

src/__tests__/directive.js

@@ -6,7 +6,7 @@ test('waits for the data to be loaded', async () => {
   const {getByText, queryByText, queryByTestId} = render(Disappearance)
 
   // Assert initial state
-  getByText('Loading...')
+  expect(getByText('Loading...')).toBeInTheDocument()
   expect(queryByText(/Loaded this message/)).not.toBeInTheDocument()
 
   // Following line reads as follows:

src/__tests__/disappearance.js

@@ -37,20 +37,20 @@ test('Review form submits', async () => {
   const initiallySelectedInput = getByLabelText('Awful')
   const ratingSelect = getByLabelText('Wonderful')
 
-  expect(initiallySelectedInput.checked).toBe(true)
-  expect(ratingSelect.checked).toBe(false)
+  expect(initiallySelectedInput).toBeChecked()
+  expect(ratingSelect).not.toBeChecked()
 
   await fireEvent.update(ratingSelect)
 
-  expect(ratingSelect.checked).toBe(true)
-  expect(initiallySelectedInput.checked).toBe(false)
+  expect(ratingSelect).toBeChecked()
+  expect(initiallySelectedInput).not.toBeChecked()
 
   // Get the Input element by its implicit ARIA role.
   const recommendInput = getByRole('checkbox')
 
-  expect(recommendInput.checked).toBe(false)
+  expect(recommendInput).not.toBeChecked()
   await fireEvent.update(recommendInput)
-  expect(recommendInput.checked).toBe(true)
+  expect(recommendInput).toBeChecked()
 
   // Make sure the submit button is enabled.
   expect(submitButton).toBeEnabled()

src/__tests__/form.js

@@ -1,4 +1,5 @@
 import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
 import FunctionalSFC from './components/FunctionalSFC'
 
 const Functional = {
@@ -11,11 +12,11 @@ const Functional = {
 test('renders functional component', () => {
   const {getByText} = render(Functional)
 
-  getByText('Hi!')
+  expect(getByText('Hi!')).toBeInTheDocument()
 })
 
 test('renders functional SFC component', () => {
   const {getByText} = render(FunctionalSFC)
 
-  getByText('Hi!')
+  expect(getByText('Hi!')).toBeInTheDocument()
 })

src/__tests__/functional.js

@@ -19,14 +19,14 @@ test('Card component', () => {
   })
 
   // The default slot should render the template above with the scoped prop "content".
-  getByText('Yay! Scoped content!')
+  expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
 
   // Instead of the default slot's fallback content.
   expect(
     queryByText('Nothing used the Scoped content!'),
   ).not.toBeInTheDocument()
 
   // And the header and footer slots should be rendered with the given templates.
-  getByText('HEADER')
-  getByText('FOOTER')
+  expect(getByText('HEADER')).toBeInTheDocument()
+  expect(getByText('FOOTER')).toBeInTheDocument()
 })

src/__tests__/slots.js

@@ -2,7 +2,10 @@ import '@testing-library/jest-dom'
 import {render, waitFor, fireEvent} from '@testing-library/vue'
 import StopWatch from './components/StopWatch.vue'
 
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = ms =>
+  new Promise(resolve => {
+    setTimeout(resolve, ms)
+  })
 
 test('updates component state', async () => {
   const {getByTestId, getByText} = render(StopWatch)
@@ -12,11 +15,11 @@ test('updates component state', async () => {
 
   // Assert initial state.
   expect(elapsedTime).toHaveTextContent('0ms')
-  getByText('Start')
+  expect(getByText('Start')).toBeInTheDocument()
 
   await fireEvent.click(startButton)
 
-  getByText('Stop')
+  expect(getByText('Stop')).toBeInTheDocument()
 
   // Wait for one tick of the event loop.
   await waitFor(() => {

src/__tests__/stopwatch.js

@@ -1,9 +1,10 @@
 import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
 test('Form contains search button', () => {
   const {getByText} = render(Stubs, {
     stubs: ['FontAwesomeIcon'],
   })
-  getByText('Search now')
+  expect(getByText('Search now')).toBeInTheDocument()
 })

src/__tests__/stubs.js

@@ -21,7 +21,7 @@ test('portal', async () => {
   // wait until PortalVue has removed content from the source element
   // and moved it to the target one.
   await waitFor(() => {
-    expect(getByTestId('portal')).toBeEmpty()
+    expect(getByTestId('portal')).toBeEmptyDOMElement()
   })
 
   expect(getByTestId('target')).toHaveTextContent(

src/__tests__/vue-portal.js

@@ -33,7 +33,7 @@ const renderWithVuetify = (component, options, callback) => {
 test('should set [data-app] attribute on outer most div', () => {
   const {container} = renderWithVuetify(VuetifyDemoComponent)
 
-  expect(container.getAttribute('data-app')).toEqual('true')
+  expect(container).toHaveAttribute('data-app', 'true')
 })
 
 test('renders a Vuetify-powered component', async () => {

src/__tests__/vuetify.js

@@ -21,6 +21,7 @@ test('within() returns an object with all queries bound to the DOM node', () =>
   // within() returns queries bound to the provided DOM node, so the following
   // assertion passes. Notice how we are not using the getByText() function
   // provided by render(), but the one coming from within().
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
   within(divNode).getByText('repeated text')
 
   // Here, proof that there's only one match for the specified text.

src/__tests__/within.js

@@ -1,3 +1,4 @@
+/* eslint-disable testing-library/no-wait-for-empty-callback */
 import {createLocalVue, mount} from '@vue/test-utils'
 
 import {