First commit

dfcook · dfcook · commit f298de433f7f · 2018-03-21T20:57:06.000Z
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,19 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }]    
+  ],  
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-runtime"
+  ],
+  "env": {
+    "test": {
+      "presets": ["env"]      
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+node_modules
+coverage
+dist
+.opt-in
+.opt-out
+.DS_Store
+.eslintcache
+
+# these cause more harm than good
+# when working with contributors
+package-lock.json
+yarn.lock
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2018 Daniel Cook
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+<div align="center">
+<h1>vue-testing-library</h1>
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "vue-testing-library",
+  "version": "1.0.0",
+  "description": "Simple and completed Vue DOM testing utilities that encourage good testing practices.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest --verbose"
+  },
+  "author": "Daniel Cook",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.12",
+    "axios": "^0.18.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^23.0.0-alpha.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "jest": "^22.4.2",
+    "jest-serializer-vue": "^1.0.0",
+    "vue": "^2.5.16",
+    "vue-jest": "^2.2.1",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "^2.5.16",
+    "vuex": "^3.0.1"
+  },
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
+  }
+}
diff --git a/src/Simulate.js b/src/Simulate.js
@@ -0,0 +1,7 @@
+export default {
+  click(elem) {        
+    if (elem) {      
+      elem.click()
+    }
+  }
+}
diff --git a/src/__mocks__/axios.js b/src/__mocks__/axios.js
@@ -0,0 +1,3 @@
+module.exports = {
+  get: jest.fn(() => Promise.resolve({data: {}})),
+}
diff --git a/src/__tests__/__snapshots__/fetch.js.snap b/src/__tests__/__snapshots__/fetch.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fetch makes an API call and displays the greeting when load-greeting is clicked 1`] = `
+<div>
+  <button data-testid="load-greeting">
+    Fetch
+  </button> <span data-testid="greeting-text">hello there</span> {{ data ? : null}
+</div>
+`;
diff --git a/src/__tests__/components/Fetch.vue b/src/__tests__/components/Fetch.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <button @click="fetch" data-testid="load-greeting">
+      Fetch
+    </button>
+    <span v-if="data" data-testid="greeting-text">{{ data.greeting }}</span>
+    {{ data ?  : null}
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      data: null
+    }
+  },
+  methods: {
+    fetch () {
+      axios
+        .get(this.url)
+        .then(response => this.data = response.data)      
+    }
+  }
+}
+</script>
diff --git a/src/__tests__/components/NumberDisplay.vue b/src/__tests__/components/NumberDisplay.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <span data-testid="number-display">{{ number }}</span>
+    <span data-testid="instance-id">{{ id }}</span>
+  </div>
+</template>
+
+<script>
+let idCounter = 1
+
+export default {
+  props: {
+    number: {
+      type: Number,
+      required: true
+    }
+  },
+  data () {
+    return {
+      id: idCounter++
+    }
+  }
+}
+</script>
diff --git a/src/__tests__/components/Router/About.vue b/src/__tests__/components/Router/About.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>You are on the about page</div>
+</template>
diff --git a/src/__tests__/components/Router/App.vue b/src/__tests__/components/Router/App.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <router-link to="/" data-testid="home-link">
+      Home
+    </router-link>
+    <router-link to="/about" data-testid="about-link">
+      About
+    </router-link>
+    <router-view />
+    <location-display />
+  </div>
+</template>
+
+<script>
+import LocationDisplay from './LocationDisplay.vue'
+
+export default {
+  components: {
+    LocationDisplay
+  }
+}
+</script>
diff --git a/src/__tests__/components/Router/Home.vue b/src/__tests__/components/Router/Home.vue
@@ -0,0 +1,3 @@
+<template functional>
+  <div>You are home</div>
+</template>
diff --git a/src/__tests__/components/Router/LocationDisplay.vue b/src/__tests__/components/Router/LocationDisplay.vue
@@ -0,0 +1,3 @@
+<template functional>
+  <div data-testid="location-display">{{ $route.fullPath }}</div>
+</template>
diff --git a/src/__tests__/components/Router/NoMatch.vue b/src/__tests__/components/Router/NoMatch.vue
@@ -0,0 +1,3 @@
+<template functional>
+  <div>No match</div>
+</template>
diff --git a/src/__tests__/components/StopWatch.vue b/src/__tests__/components/StopWatch.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <span>{{ lapse }}ms</span>
+    <button @click="handleRunClick" data-testid="start-stop-button">
+      {{ running ? 'Stop' : 'Start' }}
+    </button>
+    <button @click="handleClearClick" data-testid="clear-button">
+      Clear
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      running: false,
+      lapse: 0,
+      timer: null
+    }
+  },
+  methods: {
+    handleClearClick () {
+      clearInterval(this.timer)
+      this.lapse = 0
+      this.running = false
+    },
+    handleRunClick () {
+      if (this.running) {
+        clearInterval(this.timer)
+      } else {
+        const startTime = Date.now() - this.lapse
+
+        this.timer = setInterval(() => {
+          this.lapse = Date.now() - startTime
+        })
+      }
+
+      this.running = !this.running      
+    }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  }
+}
+</script>
diff --git a/src/__tests__/components/VuexTest.vue b/src/__tests__/components/VuexTest.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>Counter</h2>
+    <div>
+      <button @click="decrement" data-testid="decrementer">
+        -
+      </button>
+      <span data-testid="count-value">{{ count }}</span>
+      <button @click="increment" data-testid="incrementer">
+        +
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState([ 'count' ])
+  },
+  methods: {
+    ...mapActions([
+      'decrement',
+      'increment'
+    ])
+  }
+}
+</script>
diff --git a/src/__tests__/fetch.js b/src/__tests__/fetch.js
@@ -0,0 +1,23 @@
+import axiosMock from 'axios'
+import { render, Simulate, flushPromises } from '../'
+import Fetch from './components/Fetch.vue'
+
+test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {  
+  axiosMock.get.mockImplementationOnce(() =>
+    Promise.resolve({
+      data: {greeting: 'hello there'},
+    }),
+  )
+  
+  const { queryByTestId, wrapper } = render(Fetch, { props: { url: '/greeting' } })
+
+  // Act
+  Simulate.click(queryByTestId('load-greeting'))
+
+  await flushPromises()
+  
+  expect(axiosMock.get).toHaveBeenCalledTimes(1)
+  expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
+  expect(queryByTestId('greeting-text').textContent).toBe('hello there')
+  expect(wrapper.html()).toMatchSnapshot()
+})
diff --git a/src/__tests__/number-display.js b/src/__tests__/number-display.js
@@ -0,0 +1,11 @@
+import NumberDisplay from './components/NumberDisplay.vue'
+import { render } from '../'
+
+test('calling render with the same component but different props does not remount', () => {
+  const { queryByTestId, wrapper } = render(NumberDisplay, { props: { number: 1 } })
+  expect(queryByTestId('number-display').textContent).toBe('1')
+
+  wrapper.setProps({ number: 2 })
+  expect(queryByTestId('number-display').textContent).toBe('2')
+  expect(queryByTestId('instance-id').textContent).toBe('1') 
+})
diff --git a/src/__tests__/stopwatch.js b/src/__tests__/stopwatch.js
@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import StopWatch from './components/StopWatch.vue'
+import { render, select, Simulate } from '../'
+
+const wait = time => new Promise(resolve => setTimeout(resolve, time))
+
+test('unmounts a component', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+  
+  const { unmount, queryByTestId, wrapper } = render(StopWatch)
+  Simulate.click(queryByTestId('start-stop-button'))
+
+  unmount()
+  expect(wrapper.vm._isDestroyed).toBe(true)
+
+  await wait()  
+  expect(console.error).not.toHaveBeenCalled()
+})
diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js
@@ -0,0 +1,28 @@
+import App from './components/Router/App.vue'
+import Home from './components/Router/Home.vue'
+import About from './components/Router/About.vue'
+
+import { render, Simulate } from '../'
+
+const routes = [    
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+  { path: '*', redirect: '/' }
+]
+
+test('full app rendering/navigating', () => {
+  const { wrapper, queryByTestId } = render(App, { routes })
+  // normally I'd use a data-testid, but just wanted to show this is also possible
+  expect(wrapper.vm.$route.fullPath).toBe('/')  
+  Simulate.click(queryByTestId('about-link'))
+  wrapper.update()  
+  // normally I'd use a data-testid, but just wanted to show this is also possible
+  expect(queryByTestId('location-display').textContent).toBe('/about')
+})
+
+test('landing on a bad page', () => {
+  const { wrapper, queryByTestId } = render(App, { routes })
+  wrapper.vm.$router.push({ name: 'some-bad-route' })
+  wrapper.update()
+  expect(queryByTestId('location-display').textContent).toBe('/')
+})
diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js
diff --git a/src/index.js b/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div align="center">`
	`2`	`+<h1>vue-testing-library</h1>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ get: jest.fn(() => Promise.resolve({data: {}})),`
	`3`	`+}`