Run prettier

Author: afontcu

jest.config.js

@@ -1,31 +1,23 @@
 module.exports = {
-  moduleDirectories: [
-    'node_modules',
-    'src'
-  ],
-  moduleFileExtensions: [
-    'js',
-    'vue'
-  ],
+  moduleDirectories: ['node_modules', 'src'],
+  moduleFileExtensions: ['js', 'vue'],
   moduleNameMapper: {
-    '@testing-library/vue': '<rootDir>/src/vue-testing-library.js'
+    '@testing-library/vue': '<rootDir>/src/vue-testing-library.js',
   },
   coverageDirectory: './coverage',
   collectCoverageFrom: [
     '**/src/**/*.js',
     '!**/tests/__tests__/**',
-    '!**/node_modules/**'
+    '!**/node_modules/**',
   ],
   testPathIgnorePatterns: [
     '/node_modules/',
     '<rootDir>/dist/',
-    '<rootDir>/tests/__tests__/components/'
+    '<rootDir>/tests/__tests__/components/',
   ],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
   },
-  snapshotSerializers: [
-    '<rootDir>/node_modules/jest-serializer-vue'
-  ]
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
 }

src/vue-testing-library.js

@@ -1,22 +1,19 @@
-import {
-  createLocalVue,
-  mount
-} from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
 
 import {
   getQueriesForElement,
   prettyDOM,
   wait,
-  fireEvent
+  fireEvent,
 } from '@testing-library/dom'
 
 const mountedWrappers = new Set()
 
-function render (TestComponent, {
-  store = null,
-  routes = null,
-  ...mountOptions
-} = {}, configurationCb) {
+function render(
+  TestComponent,
+  { store = null, routes = null, ...mountOptions } = {},
+  configurationCb
+) {
   const localVue = createLocalVue()
   let vuexStore = null
   let router = null
@@ -31,7 +28,7 @@ function render (TestComponent, {
     const VueRouter = require('vue-router')
     localVue.use(VueRouter)
     router = new VueRouter({
-      routes
+      routes,
     })
   }
 
@@ -50,7 +47,7 @@ function render (TestComponent, {
     store: vuexStore,
     attachToDocument: true,
     sync: false,
-    ...mountOptions
+    ...mountOptions,
   })
 
   mountedWrappers.add(wrapper)
@@ -73,16 +70,19 @@ function render (TestComponent, {
       wrapper.setProps(_)
       return wait()
     },
-    ...getQueriesForElement(wrapper.element.parentNode)
+    ...getQueriesForElement(wrapper.element.parentNode),
   }
 }
 
-function cleanup () {
+function cleanup() {
   mountedWrappers.forEach(cleanupAtWrapper)
 }
 
-function cleanupAtWrapper (wrapper) {
-  if (wrapper.element.parentNode && wrapper.element.parentNode.parentNode === document.body) {
+function cleanupAtWrapper(wrapper) {
+  if (
+    wrapper.element.parentNode &&
+    wrapper.element.parentNode.parentNode === document.body
+  ) {
     document.body.removeChild(wrapper.element.parentNode)
   }
   wrapper.destroy()
@@ -97,7 +97,7 @@ Object.keys(fireEvent).forEach(fn => {
   }
 })
 
-fireEvent.touch = async (elem) => {
+fireEvent.touch = async elem => {
   await fireEvent.focus(elem)
   await fireEvent.blur(elem)
 }
@@ -107,16 +107,18 @@ fireEvent.update = async (elem, value) => {
   const type = elem.type
 
   switch (tagName) {
-    case 'OPTION':
+    case 'OPTION': {
       elem.selected = value
 
-      const parentElement = this.element.parentElement.tagName === 'OPTGROUP'
-        ? this.element.parentElement.parentElement
-        : this.element.parentElement
+      const parentElement =
+        this.element.parentElement.tagName === 'OPTGROUP'
+          ? this.element.parentElement.parentElement
+          : this.element.parentElement
 
       return fireEvent.change(parentElement)
+    }
 
-    case 'INPUT':
+    case 'INPUT': {
       if (type === 'checkbox') {
         elem.checked = value
         return fireEvent.change(elem)
@@ -127,19 +129,19 @@ fireEvent.update = async (elem, value) => {
         elem.value = value
         return fireEvent.input(elem)
       }
+    }
 
-    case 'TEXTAREA':
+    case 'TEXTAREA': {
       elem.value = value
       return fireEvent.input(elem)
+    }
 
-    case 'SELECT':
+    case 'SELECT': {
       elem.value = value
       return fireEvent.change(elem)
+    }
   }
 }
 
 export * from '@testing-library/dom'
-export {
-  cleanup,
-  render
-}
+export { cleanup, render }

tests/__mocks__/axios.js

@@ -1,3 +1,3 @@
 module.exports = {
-  get: jest.fn(() => Promise.resolve({ data: {} }))
+  get: jest.fn(() => Promise.resolve({ data: {} })),
 }

tests/__tests__/components/Button.vue

@@ -1,34 +1,31 @@
 <template>
-  <button
-    :class="typeClass"
-    @click="handleClick"
-  >{{ text }}</button>
+  <button :class="typeClass" @click="handleClick">{{ text }}</button>
 </template>
 
 <script>
 export default {
   props: {
     text: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
-      validator: (value) => ['primary', 'secondary'].includes(value),
-      default: 'primary'
-    }
+      validator: value => ['primary', 'secondary'].includes(value),
+      default: 'primary',
+    },
   },
   computed: {
-    typeClass: function () {
+    typeClass: function() {
       if (this.type) {
         return `button button--${this.type}`
       }
       return 'button'
-    }
+    },
   },
   methods: {
-    handleClick (e) {
+    handleClick(e) {
       this.$emit('click')
-    }
-  }
+    },
+  },
 }
 </script>

tests/__tests__/components/EndToEnd.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <div v-if="loading">Loading...</div>
-    <div
-      v-else
-      data-testid="message">
+    <div v-else data-testid="message">
       Loaded this message: {{ data.returnedMessage }}
     </div>
   </div>
@@ -21,18 +19,18 @@ const fetchAMessage = () =>
   })
 
 export default {
-  data () {
+  data() {
     return {
       loading: true,
       data: {
-        returnedMessage: null
-      }
+        returnedMessage: null,
+      },
     }
   },
-  async mounted () {
+  async mounted() {
     const data = await fetchAMessage()
     this.loading = false
     this.data = data
-  }
+  },
 }
 </script>

tests/__tests__/components/Fetch.vue

@@ -1,13 +1,9 @@
 <template>
   <div>
-    <button
-      data-testid="load-greeting"
-      @click="fetch">
+    <button data-testid="load-greeting" @click="fetch">
       Fetch
     </button>
-    <span
-      v-if="data"
-      data-testid="greeting-text">
+    <span v-if="data" data-testid="greeting-text">
       {{ data.greeting }}
     </span>
   </div>
@@ -20,20 +16,20 @@ export default {
   props: {
     url: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  data () {
+  data() {
     return {
-      data: null
+      data: null,
     }
   },
   methods: {
-    fetch () {
-      axios
-        .get(this.url)
-        .then(response => { this.data = response.data })
-    }
-  }
+    fetch() {
+      axios.get(this.url).then(response => {
+        this.data = response.data
+      })
+    },
+  },
 }
 </script>