Skip to content

Commit

Permalink
fix: use require-extension-hooks
Browse files Browse the repository at this point in the history
Use require-extension-hooks instead of building with webpack (see ava recipes
https://github.com/avajs/ava/blob/master/docs/recipes/vue.md).

BREAKING CHANGE: webpack building process is not supported anymore
  • Loading branch information
dnlup committed May 20, 2019
1 parent 215531f commit 6e92895
Show file tree
Hide file tree
Showing 20 changed files with 8,088 additions and 3,479 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
node_modules
unit-ava
__tests__/.data
4 changes: 4 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
os:
- linux
- osx
- windows
language: node_js
node_js:
- "8"
Expand Down
126 changes: 10 additions & 116 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
[![Build Status](https://travis-ci.com/dnlup/vue-cli-plugin-unit-ava.svg?token=zu3SxXGFaq3y1hcTQfC6&branch=master)](https://travis-ci.com/dnlup/vue-cli-plugin-unit-ava) [![Greenkeeper badge](https://badges.greenkeeper.io/dnlup/vue-cli-plugin-unit-ava.svg?token=afd39f2e241ccb41748b27d5b16c32d4a8922b23319dbd178352c5a12aa4c967&ts=1552668377939)](https://greenkeeper.io/)
[![Maintainability](https://api.codeclimate.com/v1/badges/24a9748c22097d1f5cf8/maintainability)](https://codeclimate.com/github/dnlup/vue-cli-plugin-unit-ava/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/24a9748c22097d1f5cf8/test_coverage)](https://codeclimate.com/github/dnlup/vue-cli-plugin-unit-ava/test_coverage)

<img src="ava.png" height=60>

# @dnlup/vue-cli-plugin-unit-ava

> unit-ava plugin for vue-cli
###### Note
This plugin is still in development so any feedback is greatly appreciated.

## Table of contents
* [Injected commands](#injected-commands)
* [Installing in an Already Created Project](#installing-in-an-already-created-project)
* [How it works](#how-it-works)
* [ava configuration](#ava-configuration)
* [webpack configuration](#webpack-configuration)
* [Running tests](#running-tests)
* [Why all of this?](#why-all-of-this?)
* [Contributing](#contributing)

### Injected commands
Expand All @@ -25,7 +20,7 @@ This plugin is still in development so any feedback is greatly appreciated.

Run unit tests with [ava](https://github.com/avajs/ava)

**Note the tests are run inside Node.js with browser environment simulated with JSDOM.**
**Note the tests are run inside Node.js with browser environment simulated with [browser-env](https://github.com/lukechilds/browser-env).**

```
Usage: vue-cli-service test:unit [options] [<file|directory|glob> ...]
Expand All @@ -47,123 +42,22 @@ This plugin is still in development so any feedback is greatly appreciated.

Default files matches are: any files in `tests/unit` that end in `.spec.(ts|js)`.

All [command line options](https://github.com/avajs/ava/blob/master/docs/05-command-line.md) are supported, the only one that should not work is `--reset-cache` since `ava` doesn't compile the test files, `webpack` does.
All [command line options](https://github.com/avajs/ava/blob/master/docs/05-command-line.md) are supported.

### Installing in an Already Created Project

```bash
vue add @dnlup/unit-ava
```

Once installed, calling `ava` directly will not work anymore, see [how to run tests](#running-tests).

### How it works
This plugin aims to setup an environment where test files are compiled with `webpack` and the tests are run with ava using the compiled files. I had to make some assumptions to configure `ava` to work out of the box with the `webpack` setup enforced in `vue` projects.

#### ava configuration
This is the configuration that will be generated for `ava` in `package.json`:

```json
{
"ava": {
"files": [
"dist_tests/tests/**/*.js"
],
"sources": [
"!**/*.{js,jsx,ts,vue}"
],
"babel": false,
"compileEnhancements": false,
"require": "./node_modules/@dnlup/vue-cli-plugin-unit-ava/setup.js"
}
}
```

for a reference of all the options see https://github.com/avajs/ava/blob/master/docs/06-configuration.md#options).

##### `files`
This setup `ava` to run tests on the compiled files which are saved by `webpack` in the `dist_tests` folder in the root of your project. ***This value should not be changed at the moment since the output path of `webpack` is hard-coded***. This will have to change of course.

##### `sources`
This is required to make the `--watch` option work properly. I am excluding every file except the compiled ones, otherwise on a file change the test will run multiple times. ***This value should not be changed***.

##### `babel`
This is required to prevent `ava` to compile test files. ***This value should not be changed***.

##### `compileEnhancements`
This disable `power-assert` but you should be able to safely enable it.

##### `require`
This is ***required to setup `jsdom`*** in tests. The purpose of this file is ***not to setup node require hooks*** as suggested in [this recipe](https://github.com/avajs/ava/blob/master/docs/recipes/vue.md), so if you are using a setup file just for that you can safely let the plugin override your setting. If instead you still have to use your own setup file for other reasons, you can create a file like the following:

```js
require('@dnlup/vue-cli-plugin-ava/setup')

//...your code....//
```

and change the value of this field to point to your custom file.

#### webpack configuration
I am modifying the `entry`, `output` and `plugins` field of the confifuration.

##### `entry`
```js
{
entry: {
'tests/unit/<your_test_file>': '<file-path>'
}
}
```
Every test file is an entry that has as key its path (without the extension). This way `webpack` will generate a directory structure identical to the one of the source files.

##### `output`
```js
{
output: {
path: join(api.resolve(''), 'dist_tests'),
filename: '[name].js',
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]'
}
}
```
* `path`

hardcoded to `dist_tests` directory in the root of your project

* `devtoolModuleFilenameTemplate` and `devtoolFallbackModuleFilenameTemplate`

setup to `[absolute-resource-path]` so that in devtools will not appear `webpack://` but the actual file path

##### `plugins`
A custom plugin named `RewriteSourceMap` is added to rewrite the source-maps to have each source test file as the first element of the `sources` list field of the generated source-map. This will allow `ava` to use the correct path for saving snapshots.

#### `.gitignore`
The `dist_tests` folder is added to your `.gitignore` file.

#### `package.json` scripts
The `test:unit` script is added to your `scripts` section of the `package.json` file.
See [injected commands](#injected-commands).

#### Runing tests
In this configuration you have to call `vue-cli-service test:unit` to run tests. So if for example you want to run tests only on a specific file you would run:

```bash
$ npm run test:unit -- <your file>
```
or
```bash
$ npx vue-cli-service test:unit <your file>
```
#### Prompts
![prompt_1](./assets/prompt_1.png)

See [injected commands](#injected-commands).
Will merge or create a new configuration in the selected destination. It will fail if the project is already configured in the destination **not** selected.

Calling `ava` directly would not work anymore.
![prompt_2](./assets/prompt_2.png)

#### Why all of this?
I went for this setup because I think that in a `vue` project it is better to let webpack compile everything: you have already all your loaders that are working in `dev` mode.
Using `require hooks` for simple cases should be equivalent, but if you start using packages that add other loaders to the webpack config things might get more complicated. I think [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start) could be a good example. I am open to suggestion anyway, so feel free to chime in and propose alternatives. My end goal is having a `ava` plugin to run unit tests :smile: with `@vue/cli`.
Will add support for a specific UI Framework. It currently supports only the latest version of [Vuetify](https://vuetifyjs.com/en/).

### Contributing

Expand All @@ -174,5 +68,5 @@ Using `require hooks` for simple cases should be equivalent, but if you start us
```
* Commit (uses [commitizen](https://github.com/commitizen/cz-cli))
```bash
npm run cm
git commit
```
Loading

0 comments on commit 6e92895

Please sign in to comment.