Skip to content

Commit 6e92895

Browse files
committed
fix: use require-extension-hooks
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
1 parent 215531f commit 6e92895

20 files changed

Lines changed: 8088 additions & 3479 deletions

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
node_modules
2-
unit-ava
2+
__tests__/.data

.travis.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
os:
2+
- linux
3+
- osx
4+
- windows
15
language: node_js
26
node_js:
37
- "8"

README.md

Lines changed: 10 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
[![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/)
2+
[![Maintainability](https://api.codeclimate.com/v1/badges/24a9748c22097d1f5cf8/maintainability)](https://codeclimate.com/github/dnlup/vue-cli-plugin-unit-ava/maintainability)
3+
[![Test Coverage](https://api.codeclimate.com/v1/badges/24a9748c22097d1f5cf8/test_coverage)](https://codeclimate.com/github/dnlup/vue-cli-plugin-unit-ava/test_coverage)
24

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

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

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

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

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

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

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

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

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

50-
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.
45+
All [command line options](https://github.com/avajs/ava/blob/master/docs/05-command-line.md) are supported.
5146

5247
### Installing in an Already Created Project
5348

5449
```bash
5550
vue add @dnlup/unit-ava
5651
```
5752

58-
Once installed, calling `ava` directly will not work anymore, see [how to run tests](#running-tests).
59-
60-
### How it works
61-
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.
62-
63-
#### ava configuration
64-
This is the configuration that will be generated for `ava` in `package.json`:
65-
66-
```json
67-
{
68-
"ava": {
69-
"files": [
70-
"dist_tests/tests/**/*.js"
71-
],
72-
"sources": [
73-
"!**/*.{js,jsx,ts,vue}"
74-
],
75-
"babel": false,
76-
"compileEnhancements": false,
77-
"require": "./node_modules/@dnlup/vue-cli-plugin-unit-ava/setup.js"
78-
}
79-
}
80-
```
81-
82-
for a reference of all the options see https://github.com/avajs/ava/blob/master/docs/06-configuration.md#options).
83-
84-
##### `files`
85-
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.
86-
87-
##### `sources`
88-
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***.
89-
90-
##### `babel`
91-
This is required to prevent `ava` to compile test files. ***This value should not be changed***.
92-
93-
##### `compileEnhancements`
94-
This disable `power-assert` but you should be able to safely enable it.
95-
96-
##### `require`
97-
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:
98-
99-
```js
100-
require('@dnlup/vue-cli-plugin-ava/setup')
101-
102-
//...your code....//
103-
```
104-
105-
and change the value of this field to point to your custom file.
106-
107-
#### webpack configuration
108-
I am modifying the `entry`, `output` and `plugins` field of the confifuration.
109-
110-
##### `entry`
111-
```js
112-
{
113-
entry: {
114-
'tests/unit/<your_test_file>': '<file-path>'
115-
}
116-
}
117-
```
118-
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.
119-
120-
##### `output`
121-
```js
122-
{
123-
output: {
124-
path: join(api.resolve(''), 'dist_tests'),
125-
filename: '[name].js',
126-
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
127-
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]'
128-
}
129-
}
130-
```
131-
* `path`
132-
133-
hardcoded to `dist_tests` directory in the root of your project
134-
135-
* `devtoolModuleFilenameTemplate` and `devtoolFallbackModuleFilenameTemplate`
136-
137-
setup to `[absolute-resource-path]` so that in devtools will not appear `webpack://` but the actual file path
138-
139-
##### `plugins`
140-
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.
141-
142-
#### `.gitignore`
143-
The `dist_tests` folder is added to your `.gitignore` file.
144-
145-
#### `package.json` scripts
146-
The `test:unit` script is added to your `scripts` section of the `package.json` file.
147-
See [injected commands](#injected-commands).
148-
149-
#### Runing tests
150-
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:
151-
152-
```bash
153-
$ npm run test:unit -- <your file>
154-
```
155-
or
156-
```bash
157-
$ npx vue-cli-service test:unit <your file>
158-
```
53+
#### Prompts
54+
![prompt_1](./assets/prompt_1.png)
15955

160-
See [injected commands](#injected-commands).
56+
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.
16157

162-
Calling `ava` directly would not work anymore.
58+
![prompt_2](./assets/prompt_2.png)
16359

164-
#### Why all of this?
165-
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.
166-
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`.
60+
Will add support for a specific UI Framework. It currently supports only the latest version of [Vuetify](https://vuetifyjs.com/en/).
16761

16862
### Contributing
16963

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

0 commit comments

Comments
 (0)