Merge pull request #21 from testing-library/issue/19-programmatic-routing

Issue/19 programmatic routing

Author: dfcook

package-lock.json

@@ -0,0 +1,3 @@
+<template>
+  <div>You are on the about page</div>
+</template>

tests/__tests__/router/programmatic-routing/components/About.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <RouterLink
+      to="/"
+      data-testid="home-link">
+      Home
+    </RouterLink>
+    <RouterLink
+      to="/about"
+      data-testid="about-link">
+      About
+    </RouterLink>
+    <RouterView />
+    <div data-testid="location-display">{{ $route.fullPath }}</div>
+  </div>
+</template>

tests/__tests__/router/programmatic-routing/components/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div>You are home</div>
+    <button data-testid="go-to-about" @click="goToAbout">About</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    goToAbout () {
+      this.$router.push('/about')
+    }
+  }
+}
+</script>
+

tests/__tests__/router/programmatic-routing/components/Home.vue

@@ -0,0 +1,3 @@
+<template>
+  <div data-testid="location-display">{{ $route.fullPath }}</div>
+</template>

tests/__tests__/router/programmatic-routing/components/LocationDisplay.vue

@@ -0,0 +1,3 @@
+<template functional>
+  <div>No match</div>
+</template>

tests/__tests__/router/programmatic-routing/components/NoMatch.vue

@@ -0,0 +1,22 @@
+import 'jest-dom/extend-expect'
+
+import App from './components/App.vue'
+import Home from './components/Home.vue'
+import About from './components/About.vue'
+
+import { render, fireEvent } from '../../../../src'
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+  { path: '*', redirect: '/about' }
+]
+
+test('navigating programmatically', async () => {
+  const { queryByTestId } = render(App, { routes })
+
+  expect(queryByTestId('location-display')).toHaveTextContent('/')
+  await fireEvent.click(queryByTestId('go-to-about'))
+
+  expect(queryByTestId('location-display')).toHaveTextContent('/about')
+})

tests/__tests__/router/programmatic-routing/index.js

@@ -24,6 +24,7 @@ test('updates component state', async () => {
   expect(elapsedTime).toHaveTextContent('0ms')
 
   await fireEvent.click(startButton)
+  await wait()
   await fireEvent.click(startButton)
 
   expect(elapsedTime).not.toHaveTextContent('0ms')