From b16c3c26a978ed2f48c603c85633dc8b02f9447e Mon Sep 17 00:00:00 2001 From: lachlan Date: Fri, 15 Dec 2017 00:47:57 +0900 Subject: [PATCH 01/14] Add new guide page --- docs/en/guides/testing-async-components.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 docs/en/guides/testing-async-components.md diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md new file mode 100644 index 000000000..efb44fbae --- /dev/null +++ b/docs/en/guides/testing-async-components.md @@ -0,0 +1,6 @@ +# Testing Asynchronous Components + +> An example project will be made available. + +To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware ofwhen testing a component with asynchronous behavior such as callbacks or promises. + From c9180e12cbc7512ff93ec73eba381b229fea32d6 Mon Sep 17 00:00:00 2001 From: lachlan Date: Sat, 16 Dec 2017 00:38:00 +0900 Subject: [PATCH 02/14] Add a bit more --- docs/en/guides/testing-async-components.md | 46 ++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index efb44fbae..38cdf3310 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -4,3 +4,49 @@ To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware ofwhen testing a component with asynchronous behavior such as callbacks or promises. +One common cases is componentst that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: + +``` js +import { shallow } from 'vue-test-utils' +import Component from './Component' +import flushPromises from 'flush-promises' + +describe('Component', () => { + it('renders content conditionally using a watcher', () => { + const wrapper = shallow(Click) + + wrapper.find('input').element.value = 'Value' + wrapper.find('input').trigger('input') + + expect(wrapper.findAll('#changed')).toHaveLength(1) + }) +}) + +``` js +import { shallow } from 'vue-test-utils' +import Click from './Click' +import flushPromises from 'flush-promises' + +describe('test', () => { + it('works', async () => { + const wrapper = shallow(Click) + + wrapper.find('input').element.value = 'Value' + wrapper.find('input').trigger('input') + await flushPromises() + + expect(wrapper.findAll('#changed')).toHaveLength(1) + }) +}) + +describe('test', () => { + it('works', async () => { + const wrapper = shallow(Click) + + wrapper.find('input').element.value = 'Value' + wrapper.find('input').trigger('input') + + expect(wrapper.find('#updated').text()).toEqual('true') + }) +}) +``` From 9e64bcb96f2c47f2719d03d141ad3c9190151009 Mon Sep 17 00:00:00 2001 From: lachlan Date: Tue, 19 Dec 2017 17:19:09 +0900 Subject: [PATCH 03/14] Upadte --- docs/en/guides/testing-async-components.md | 46 +++------------------- 1 file changed, 5 insertions(+), 41 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 38cdf3310..3e65a600a 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -7,46 +7,10 @@ To simplify testing, `vue-test-utils` applies updates _synchronously_. However, One common cases is componentst that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: ``` js -import { shallow } from 'vue-test-utils' -import Component from './Component' -import flushPromises from 'flush-promises' - -describe('Component', () => { - it('renders content conditionally using a watcher', () => { - const wrapper = shallow(Click) - - wrapper.find('input').element.value = 'Value' - wrapper.find('input').trigger('input') - - expect(wrapper.findAll('#changed')).toHaveLength(1) - }) -}) - -``` js -import { shallow } from 'vue-test-utils' -import Click from './Click' -import flushPromises from 'flush-promises' - -describe('test', () => { - it('works', async () => { - const wrapper = shallow(Click) - - wrapper.find('input').element.value = 'Value' - wrapper.find('input').trigger('input') - await flushPromises() - - expect(wrapper.findAll('#changed')).toHaveLength(1) - }) -}) - -describe('test', () => { - it('works', async () => { - const wrapper = shallow(Click) +Demo.... +``` +The above test fails - however, when you test it by hand in a browser, it seems fine! The reason the test is failing is because properties inside of `watch` use promises. In this test, the assertion occurs before the promise is resolved, so the `button` is still not visible. - wrapper.find('input').element.value = 'Value' - wrapper.find('input').trigger('input') +One solution is to use the npm package, `flush-promises`. This allows you to immediately resolve any promises. Let's update the test: - expect(wrapper.find('#updated').text()).toEqual('true') - }) -}) -``` +Now the test passes! Note, because we are using the ES7 keyword `await`, we need to prepend the test with `async`. From 0d2959e6ec7f14c8931159778a82df72b3c138d2 Mon Sep 17 00:00:00 2001 From: lachlan Date: Tue, 19 Dec 2017 21:39:57 +0900 Subject: [PATCH 04/14] Add more explanation --- docs/en/guides/testing-async-components.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 3e65a600a..cffd77bfc 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -9,8 +9,19 @@ One common cases is componentst that use `watch`, which updates asynchronously. ``` js Demo.... ``` -The above test fails - however, when you test it by hand in a browser, it seems fine! The reason the test is failing is because properties inside of `watch` use promises. In this test, the assertion occurs before the promise is resolved, so the `button` is still not visible. +The above test fails - however, when you test it by hand in a browser, it seems fine! The reason the test is failing is because properties inside of `watch` are updated asynchronously. In this test, the assertion occurs before `nextTick()` is called, so the `button` is still not visible. -One solution is to use the npm package, `flush-promises`. This allows you to immediately resolve any promises. Let's update the test: +Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Karma both use `done()`. We can use this, in combination with `nextTick()`, to test the component. + +Now the test passes! + +Another common asynchronous behavior is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example is using Jest to run the test and to mock the HTTP library `axios`. + +The implementation of the `axios` mock looks like this: + +This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any promises. The test is asynchronous, so like above, we need to let the test runner know to wait. Jest provides a few options, such as `done()`, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. + +The updated test looks like this: + +This same technique can be applied to Vuex actions. -Now the test passes! Note, because we are using the ES7 keyword `await`, we need to prepend the test with `async`. From b600b8a218be18660b97c5aba05d39b533e015d9 Mon Sep 17 00:00:00 2001 From: lachlan Date: Wed, 20 Dec 2017 17:57:46 +1000 Subject: [PATCH 05/14] Add examples --- docs/en/guides/testing-async-components.md | 138 ++++++++++++++++++++- 1 file changed, 134 insertions(+), 4 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index cffd77bfc..7fa503a08 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -4,24 +4,154 @@ To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware ofwhen testing a component with asynchronous behavior such as callbacks or promises. -One common cases is componentst that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: +One common cases is components that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: ``` js -Demo.... + + + + +This component conditionally renders a submit button, based on whether the user entered some text. Let's see how we might test this: + +``` js +import { shallow } from 'vue-test-utils' +import Foo from './Foo' + +describe('Foo', () => { + it('renders a button async when the user enters text', () => { + expect.assertions(2) + const wrapper = shallow(Foo) + + wrapper.find('input').element.value = 'Value' + wrapper.find('input').trigger('input') + + expect(wrapper.vm.showButton).toBe(true) + expect(wrapper.find('button').exists()).toBe(true) + }) +}) ``` + The above test fails - however, when you test it by hand in a browser, it seems fine! The reason the test is failing is because properties inside of `watch` are updated asynchronously. In this test, the assertion occurs before `nextTick()` is called, so the `button` is still not visible. Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Karma both use `done()`. We can use this, in combination with `nextTick()`, to test the component. + +``` js +import { shallow } from 'vue-test-utils' +import Foo from './Foo' + +describe('Foo', () => { + it('renders a button async when the user enters text', (done) => { + expect.assertions(2) + const wrapper = mount(Foo) + + wrapper.find('input').element.value = 'Value' + wrapper.find('input').trigger('input') + + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.showButton).toBe(true) + expect(wrapper.find('button').exists()).toBe(true) + done() + }) + }) +}) +``` + Now the test passes! Another common asynchronous behavior is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example is using Jest to run the test and to mock the HTTP library `axios`. The implementation of the `axios` mock looks like this: -This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any promises. The test is asynchronous, so like above, we need to let the test runner know to wait. Jest provides a few options, such as `done()`, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. +``` js +export default { + get: () => new Promise(resolve => { + resolve({ data: 'value' }) + }) +} +``` + +The below component makes an API call when a button is clicked, then assigns the response to `value`. +``` + + + +``` +A test can be written like this: + +``` js +import { shallow } from 'vue-test-utils' +import Foo from './Foo' +jest.mock('axios') + +test('Foo', () => { + it('fetches async when a button is clicked', () => { + const wrapper = shallow(Foo) + wrapper.find('button').trigger('click') + expect(wrapper.vm.value).toEqual('value') + }) +}) +``` + +This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any unresolved promises. This test is also asynchronous, so like the previous example, we need to let the test runner know to wait before making any assertions. If you are using Jest, there are a few options, such as passing a `done()` callback, as shown above. + +Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. The updated test looks like this: -This same technique can be applied to Vuex actions. +``` js +import { shallow } from 'vue-test-utils' +import flushPromises from 'flush-promises' +import Foo from './Foo' +jest.mock('axios') + +test('Foo', () => { + it('fetches async when a button is clicked', () => { + const wrapper = shallow(Foo) + wrapper.find('button').trigger('click') + await flushPromises() + expect(wrapper.vm.value).toEqual('value') + }) +}) +``` + +This same technique can be applied to Vuex actions, which return a promise by default. From 1a31d964df3c5792ee26387e659785efb75b8f70 Mon Sep 17 00:00:00 2001 From: lachlan Date: Wed, 20 Dec 2017 17:58:26 +1000 Subject: [PATCH 06/14] Foratting --- docs/en/guides/testing-async-components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 7fa503a08..eceb22fbd 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -30,6 +30,7 @@ One common cases is components that use `watch`, which updates asynchronously. B } } +``` This component conditionally renders a submit button, based on whether the user entered some text. Let's see how we might test this: @@ -92,7 +93,8 @@ export default { ``` The below component makes an API call when a button is clicked, then assigns the response to `value`. -``` + +``` js From 309aebcad7c736cd926a469a7d724ea18fc0f54c Mon Sep 17 00:00:00 2001 From: lachlan Date: Wed, 20 Dec 2017 17:59:29 +1000 Subject: [PATCH 07/14] Foramtting --- docs/en/guides/testing-async-components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index eceb22fbd..79400ec68 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -2,7 +2,7 @@ > An example project will be made available. -To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware ofwhen testing a component with asynchronous behavior such as callbacks or promises. +To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises. One common cases is components that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: @@ -133,9 +133,9 @@ test('Foo', () => { }) ``` -This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any unresolved promises. This test is also asynchronous, so like the previous example, we need to let the test runner know to wait before making any assertions. If you are using Jest, there are a few options, such as passing a `done()` callback, as shown above. +This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any unresolved promises. This test is also asynchronous, so like the previous example, we need to let the test runner know to wait before making any assertions. -Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. +If you are using Jest, there are a few options, such as passing a `done()` callback, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. The updated test looks like this: From 34c8a38c7297513d72cd0ff74790e6e919e6559c Mon Sep 17 00:00:00 2001 From: lachlan Date: Thu, 21 Dec 2017 10:25:04 +1000 Subject: [PATCH 08/14] Remove watcher section --- docs/en/guides/testing-async-components.md | 84 +--------------------- 1 file changed, 3 insertions(+), 81 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 79400ec68..443be34db 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -1,86 +1,8 @@ -# Testing Asynchronous Components - -> An example project will be made available. +# Testing Asynchronous Behavior To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises. -One common cases is components that use `watch`, which updates asynchronously. Below in an example of a component that renders some content based on a boolean value, which is updated using a watcher: - -``` js - - - -``` - -This component conditionally renders a submit button, based on whether the user entered some text. Let's see how we might test this: - -``` js -import { shallow } from 'vue-test-utils' -import Foo from './Foo' - -describe('Foo', () => { - it('renders a button async when the user enters text', () => { - expect.assertions(2) - const wrapper = shallow(Foo) - - wrapper.find('input').element.value = 'Value' - wrapper.find('input').trigger('input') - - expect(wrapper.vm.showButton).toBe(true) - expect(wrapper.find('button').exists()).toBe(true) - }) -}) -``` - -The above test fails - however, when you test it by hand in a browser, it seems fine! The reason the test is failing is because properties inside of `watch` are updated asynchronously. In this test, the assertion occurs before `nextTick()` is called, so the `button` is still not visible. - -Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Karma both use `done()`. We can use this, in combination with `nextTick()`, to test the component. - - -``` js -import { shallow } from 'vue-test-utils' -import Foo from './Foo' - -describe('Foo', () => { - it('renders a button async when the user enters text', (done) => { - expect.assertions(2) - const wrapper = mount(Foo) - - wrapper.find('input').element.value = 'Value' - wrapper.find('input').trigger('input') - - wrapper.vm.$nextTick(() => { - expect(wrapper.vm.showButton).toBe(true) - expect(wrapper.find('button').exists()).toBe(true) - done() - }) - }) -}) -``` - -Now the test passes! - -Another common asynchronous behavior is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example is using Jest to run the test and to mock the HTTP library `axios`. +One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example is using Jest to run the test and to mock the HTTP library `axios`. The implementation of the `axios` mock looks like this: @@ -135,7 +57,7 @@ test('Foo', () => { This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any unresolved promises. This test is also asynchronous, so like the previous example, we need to let the test runner know to wait before making any assertions. -If you are using Jest, there are a few options, such as passing a `done()` callback, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises()`, to immediately resolve the API call. +If you are using Jest, there are a few options, such as passing a `done` callback, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises`, to immediately resolve the API call. The updated test looks like this: From d675067cffb2c5b8b0fae572416eace3058be60d Mon Sep 17 00:00:00 2001 From: lachlan Date: Sat, 23 Dec 2017 22:41:58 +1000 Subject: [PATCH 09/14] Spacing --- docs/en/guides/testing-async-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 443be34db..3fd132b1b 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -8,8 +8,8 @@ The implementation of the `axios` mock looks like this: ``` js export default { - get: () => new Promise(resolve => { - resolve({ data: 'value' }) + get: () => new Promise(resolve => { + resolve({ data: 'value' }) }) } ``` From 7b88e8a91d5edbe34c4433c91e49c6a001111630 Mon Sep 17 00:00:00 2001 From: lachlan Date: Mon, 25 Dec 2017 01:00:39 +1000 Subject: [PATCH 10/14] Make improvements using feedback --- docs/en/guides/testing-async-components.md | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 3fd132b1b..969950cc3 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -2,7 +2,7 @@ To simplify testing, `vue-test-utils` applies updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises. -One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example is using Jest to run the test and to mock the HTTP library `axios`. +One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://facebook.github.io/jest/docs/en/manual-mocks.html#content). The implementation of the `axios` mock looks like this: @@ -23,6 +23,7 @@ The below component makes an API call when a button is clicked, then assigns the ``` + A test can be written like this: ``` js @@ -55,9 +57,24 @@ test('Foo', () => { }) ``` -This test currently fails, because the assertion is called before the promise resolves. One solution is to use the npm package, `flush-promises`. which immediately resolve any unresolved promises. This test is also asynchronous, so like the previous example, we need to let the test runner know to wait before making any assertions. +This test currently fails because the assertion is called before the promise in `fetchResults` resolves. Most unit test libraries provide a callback to let the runner know when the test is complete. Jest and Karma both use `done`. We can use `done` in combination with `$nextTick` or `setTimeout` to ensure any promises resolve before the assertion is made. + +``` js +test('Foo', () => { + it('fetches async when a button is clicked', (done) => { + const wrapper = shallow(Foo) + wrapper.find('button').trigger('click') + wrapper.vm.$nextTick(() => { + expect(wrapper.vm.value).toEqual('value') + done() + }) + }) +}) +``` + +The reason `$nextTick` or `setTimeout` allow the test to pass is because the microtask queue where promise callbacks are processed run efore the task queue, where `$nextTick` and `setTimeout` are processed. This means by the time the `$nexTick` and `setTimeout` run, any promise callbacks on the microtask queue will have been executed. See [here](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) for a more detailed explanation. -If you are using Jest, there are a few options, such as passing a `done` callback, as shown above. Another is to prepend the test with the ES7 'async' keyword. We can now use the the ES7 `await` keyword with `flushPromises`, to immediately resolve the API call. +Another solution is to use the npm package, `flush-promises`, which can be used to flush all pending resolved promise handlers, and prepend the test with the ES7 'async' keyword. The ES7 `await` keyword with `flushPromises` can now be used to immediately resolve the API call. The updated test looks like this: @@ -68,7 +85,7 @@ import Foo from './Foo' jest.mock('axios') test('Foo', () => { - it('fetches async when a button is clicked', () => { + it('fetches async when a button is clicked', async () => { const wrapper = shallow(Foo) wrapper.find('button').trigger('click') await flushPromises() From cc8aa0a8698b8fd26cec680f15f2cc4718c15643 Mon Sep 17 00:00:00 2001 From: lachlan Date: Mon, 25 Dec 2017 22:41:22 +1000 Subject: [PATCH 11/14] Fix type and reword flush-promises explanation --- docs/en/guides/testing-async-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 969950cc3..4d215a0c6 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -72,9 +72,9 @@ test('Foo', () => { }) ``` -The reason `$nextTick` or `setTimeout` allow the test to pass is because the microtask queue where promise callbacks are processed run efore the task queue, where `$nextTick` and `setTimeout` are processed. This means by the time the `$nexTick` and `setTimeout` run, any promise callbacks on the microtask queue will have been executed. See [here](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) for a more detailed explanation. +The reason `$nextTick` or `setTimeout` allow the test to pass is because the microtask queue where promise callbacks are processed run before the task queue, where `$nextTick` and `setTimeout` are processed. This means by the time the `$nexTick` and `setTimeout` run, any promise callbacks on the microtask queue will have been executed. See [here](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) for a more detailed explanation. -Another solution is to use the npm package, `flush-promises`, which can be used to flush all pending resolved promise handlers, and prepend the test with the ES7 'async' keyword. The ES7 `await` keyword with `flushPromises` can now be used to immediately resolve the API call. +Another solution is to use an `async` function and the npm package `flush-promises`. `flush-promises` flushes all pending resolved promise handlers. You can `await` the call of `flushPromises` to flush pending promises and improve the readability of your test. The updated test looks like this: From 46d726545752047eefe40f17d4d5bd6d88a3baa8 Mon Sep 17 00:00:00 2001 From: lachlan Date: Mon, 25 Dec 2017 22:57:24 +1000 Subject: [PATCH 12/14] Change from @click to v-on:click --- docs/en/guides/testing-async-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/guides/testing-async-components.md b/docs/en/guides/testing-async-components.md index 4d215a0c6..643f2b87d 100644 --- a/docs/en/guides/testing-async-components.md +++ b/docs/en/guides/testing-async-components.md @@ -18,7 +18,7 @@ The below component makes an API call when a button is clicked, then assigns the ``` js