Testing Vue

Series Episodes

1. Episodes (10)
   1. TDD Your First Vue Component From Scratch

      11m 23s

      Let's dive in. We'll begin by pulling in all necessary dependencies. Most importantly, we'll be leveraging vue-test-utils, which is the official unit testing library for Vue. Once everything has been installed, we can begin using TDD to build a simple Vue component.
   2. Test Single File Components

      3m 15s

      It took a bit of work to setup the necessary dependencies, but we're now successfully testing our Vue components. In this episode, we'll take things a step further and switch over to testing single-file Vue components. To allow for this, we'll need to use webpack to pre-compile these .vue files.
   3. Setting Data and Asserting Styles

      9m 14s

      When preparing your tests, you'll often want to first set the stage. "Given that the component's data is in this state, when I...". To allow for this, we can use the setData() method on the wrapper instance. Additionally, we can use hasStyles() to write assertions against any relevant inline CSS styles. This can be useful for asserting against visibility.
   4. Implementation Details Versus Rendered Output

      15m 37s

      When preparing your tests, you'll often hit a fork in the road. "Do I write my insertions against the underlying implementation and data? Or do I limit my assertions against the rendered UI output? Let's talk about it.
   5. Asserting Emitted Events

      21m 14s

      We can easily make assertions against emitted events. To illustrate the basic workflow, let's construct a CouponCode Vue component from scratch using TDD.
   6. Hooking Into Laravel Mix

      5m 19s

      So far, we've been using an incredibly basic webpack.config.js file. But, this being Laracasts, it's very possible that you use Laravel Mix. If that's the case, is there a way to hook into Mix's webpack configuration file? Of course! To illustrate this workflow, let's create a fresh installation of Laravel and and setup a Vue testing workflow from scratch.
   7. TDD a Question Component With Helper Functions

      19m 13s

      Let's review a new example in this lesson. We'll use TDD to build a generic "question" component. Along the way, we'll extract a handful of helper functions, such as see(), click(), and type(). You'll find that this drastically improves the readability of our tests.
   8. Mocking Axios Calls

      10m 11s

      How do we handle Vue components that make AJAX requests with Axios? Well, there are a number of options. We could set up a fake Sinon.JS server, or we could replace the axios dependency entirely with the test double library. A third option, which we'll review in this episode, is to use Moxios, a first-party library for mocking Axios requests.
   9. Testing Asynchronous Actions and Timers

      25m 53s

      How do we go about testing code that makes use of dates and intervals? It can get rather tricky, if you're not sure what you're doing. Let's run through an example to illustrate the exact workflow you can expect.
   10. Cleaner Asynchronous Mocha Tests

       8m 45s

       View the source code for this episode on GitHub.