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. View the source code for this episode on …
The basic UI functionality is in place. At this point, we only need to send the appropriate AJAX requests to toggle the "locked" column within the threads table. View the source code for this episode on GitHub.
Now that we have the server-side endpoints fully tested, let's switch to the front-end and write the necessary Vue code to allow administrators to toggle a thread's "locked" status.
Let's continue fleshing out the routes and controllers that our front-end will expect for this feature. In this episode, we'll review two endpoint approaches for updating a thread's "locked" status. View the source code for this episode on GitHub.
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. View the source code for this episode on GitHub.
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. View the source code for this episode on GitHub.