vest 4.0.0-dev-366a8b → 4.0.0-dev-e266d9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +70 -49
- package/README.md +2 -112
- package/dist/cjs/classnames.development.js +3 -3
- package/dist/cjs/classnames.production.js +1 -1
- package/dist/cjs/compose.js +7 -0
- package/dist/cjs/compounds.js +7 -0
- package/dist/cjs/enforce/compose.development.js +139 -0
- package/dist/cjs/enforce/compose.production.js +1 -0
- package/dist/cjs/enforce/compounds.development.js +132 -0
- package/dist/cjs/enforce/compounds.production.js +1 -0
- package/dist/cjs/enforce/package.json +1 -0
- package/dist/cjs/enforce/schema.development.js +144 -0
- package/dist/cjs/enforce/schema.production.js +1 -0
- package/dist/cjs/promisify.development.js +1 -1
- package/dist/cjs/promisify.production.js +1 -1
- package/dist/cjs/schema.js +7 -0
- package/dist/cjs/vest.development.js +608 -1097
- package/dist/cjs/vest.production.js +1 -1
- package/dist/es/classnames.development.js +3 -3
- package/dist/es/classnames.production.js +1 -1
- package/dist/es/enforce/compose.development.js +137 -0
- package/dist/es/enforce/compose.production.js +1 -0
- package/dist/es/enforce/compounds.development.js +130 -0
- package/dist/es/enforce/compounds.production.js +1 -0
- package/dist/es/enforce/package.json +1 -0
- package/dist/es/enforce/schema.development.js +140 -0
- package/dist/es/enforce/schema.production.js +1 -0
- package/dist/es/promisify.development.js +1 -1
- package/dist/es/promisify.production.js +1 -1
- package/dist/es/vest.development.js +602 -1097
- package/dist/es/vest.production.js +1 -1
- package/dist/umd/classnames.development.js +3 -3
- package/dist/umd/classnames.production.js +1 -1
- package/dist/umd/enforce/compose.development.js +143 -0
- package/dist/umd/enforce/compose.production.js +1 -0
- package/dist/umd/enforce/compounds.development.js +136 -0
- package/dist/umd/enforce/compounds.production.js +1 -0
- package/dist/umd/enforce/schema.development.js +148 -0
- package/dist/umd/enforce/schema.production.js +1 -0
- package/dist/umd/promisify.development.js +1 -1
- package/dist/umd/promisify.production.js +1 -1
- package/dist/umd/vest.development.js +1693 -2185
- package/dist/umd/vest.production.js +1 -1
- package/enforce/compose/package.json +7 -0
- package/enforce/compounds/package.json +7 -0
- package/enforce/schema/package.json +7 -0
- package/package.json +107 -13
- package/testUtils/mockThrowError.ts +16 -0
- package/types/classnames.d.ts +2 -2
- package/types/enforce/compose.d.ts +134 -0
- package/types/enforce/compounds.d.ts +146 -0
- package/types/enforce/schema.d.ts +151 -0
- package/types/vest.d.ts +31 -196
- package/docs/.nojekyll +0 -0
- package/docs/README.md +0 -113
- package/docs/_assets/favicon.ico +0 -0
- package/docs/_assets/vest-logo.png +0 -0
- package/docs/_sidebar.md +0 -14
- package/docs/cross_field_validations.md +0 -33
- package/docs/enforce.md +0 -11
- package/docs/exclusion.md +0 -129
- package/docs/getting_started.md +0 -72
- package/docs/group.md +0 -142
- package/docs/index.html +0 -41
- package/docs/migration.md +0 -202
- package/docs/n4s/rules.md +0 -1282
- package/docs/node.md +0 -36
- package/docs/optional.md +0 -103
- package/docs/result.md +0 -249
- package/docs/state.md +0 -102
- package/docs/test.md +0 -172
- package/docs/utilities.md +0 -109
- package/docs/warn.md +0 -82
package/docs/exclusion.md
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
# Excluding and including tests
|
|
2
|
-
|
|
3
|
-
When performing validations in real world-scenarios, you may need to only run tests of a single field in your suite, or skip certain tests according to some logic. That's why Vest includes `skip()` and `only()`.
|
|
4
|
-
|
|
5
|
-
`skip()` and `only()` are functions that take a name of the test, or a list of names to either include or exclude fields from being validated. They should be called from the body of suite callback, and in order for them to take effect, they should be called before anything else.
|
|
6
|
-
|
|
7
|
-
!> **NOTE** When using `only()` or `skip()` you must place them before any of the tests defined in the suite. Hooks run in order of appearance, which means that if you place your `skip` hook after the field you're skipping - it won't have any effect.
|
|
8
|
-
|
|
9
|
-
### Only running specific tests (including)
|
|
10
|
-
|
|
11
|
-
When validating upon user interactions, you will usually want to only validate the input the user currently interacts with to prevent errors appearing in unrelated places. For this, you can use `only()` with the name of the test currently being validated.
|
|
12
|
-
|
|
13
|
-
In the example below, we're assuming the argument `fieldName` is being populated with the name of the field we want to test. If none is passed, the call to `only` will be ignored, and all tests will run as usual. This allows us to test each field at a time during the interaction, but test all on form submission.
|
|
14
|
-
|
|
15
|
-
```js
|
|
16
|
-
import { create, enforce, test, only } from 'vest';
|
|
17
|
-
|
|
18
|
-
const suite = create((data, fieldName) => {
|
|
19
|
-
only(fieldName);
|
|
20
|
-
|
|
21
|
-
test('username', 'Username is invalid', () => {
|
|
22
|
-
/* some validation logic*/
|
|
23
|
-
});
|
|
24
|
-
test('email', 'Email is invalid', () => {
|
|
25
|
-
/* some validation logic*/
|
|
26
|
-
});
|
|
27
|
-
test('password', 'Password is invalid', () => {
|
|
28
|
-
/* some validation logic*/
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
const validationResult = suite(formData, changedField);
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Skipping tests
|
|
36
|
-
|
|
37
|
-
There are not many cases for skipping tests, but they do exist. For example, when you wish to prevent validation of a promo code when none provided.
|
|
38
|
-
|
|
39
|
-
In this case, and in similar others, you can use `skip()`. When called, it will only skip the specified fields, all other tests will run as they should.
|
|
40
|
-
|
|
41
|
-
```js
|
|
42
|
-
import { create, enforce, test, skip } from 'vest';
|
|
43
|
-
|
|
44
|
-
const suite = create(data => {
|
|
45
|
-
if (!data.promo) skip('promo');
|
|
46
|
-
|
|
47
|
-
// this test won't run when data.promo is falsy.
|
|
48
|
-
test('promo', 'Promo code is invalid', () => {
|
|
49
|
-
/* some validation logic*/
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
const validationResult = suite(formData);
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## skipWhen: Conditionally excluding portions of the suite
|
|
57
|
-
|
|
58
|
-
In some cases we might need to skip a test or a group based on a given condition, for example - based on the intermediate state of the currently running suite. To allow this, can use `skipWhen`. `skipWhen` takes a boolean expression and a callback with tests.
|
|
59
|
-
If the expression is true, the tests within the callback will be skipped. Otherwise, the tests will run as normal.
|
|
60
|
-
|
|
61
|
-
In the following example we're skipping the server side verification of the username if the username is invalid to begin with:
|
|
62
|
-
|
|
63
|
-
```js
|
|
64
|
-
import { create, test, enforce, skipWhen } from 'vest';
|
|
65
|
-
|
|
66
|
-
const suite = create((data = {}) => {
|
|
67
|
-
test('username', 'Username is required', () => {
|
|
68
|
-
enforce(data.username).isNotEmpty();
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
skipWhen(suite.get().hasErrors('username'), () => {
|
|
72
|
-
test('username', 'Username already exists', () => {
|
|
73
|
-
// this is an example for a server call
|
|
74
|
-
return doesUserExist(data.username);
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
|
-
export default suite;
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
!> **Note** Using suite.get() within the suite runs returns a **DRAFT** result. This means that it may not contain the final validation result.
|
|
82
|
-
|
|
83
|
-
## Including and excluding groups of tests
|
|
84
|
-
|
|
85
|
-
Similar to the way you use `skip` and `only` to include and exclude tests, you can use `skip.group` and `only.group` to exclude and include whole groups.
|
|
86
|
-
|
|
87
|
-
These two functions are very powerful and give you control of whole portions of your suite at once.
|
|
88
|
-
|
|
89
|
-
```js
|
|
90
|
-
import { create, test, group, enforce, skip } from 'vest';
|
|
91
|
-
|
|
92
|
-
create(data => {
|
|
93
|
-
skip.group(data.userExists ? 'signUp' : 'signIn');
|
|
94
|
-
|
|
95
|
-
test('userName', "Can't be empty", () => {
|
|
96
|
-
enforce(data.username).isNotEmpty();
|
|
97
|
-
});
|
|
98
|
-
test('password', "Can't be empty", () => {
|
|
99
|
-
enforce(data.password).isNotEmpty();
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
group('signIn', () => {
|
|
103
|
-
test(
|
|
104
|
-
'userName',
|
|
105
|
-
'User not found. Please check if you typed it correctly.',
|
|
106
|
-
findUserName(data.username)
|
|
107
|
-
);
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
group('signUp', () => {
|
|
111
|
-
test('email', 'Email already registered', isEmailRegistered(data.email));
|
|
112
|
-
|
|
113
|
-
test('age', 'You must be at least 18 years old to join', () => {
|
|
114
|
-
enforce(data.age).largerThanOrEquals(18);
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
## Things to know about how these functions work:
|
|
121
|
-
|
|
122
|
-
**only.group()**:
|
|
123
|
-
When using `only.group`, other groups won't be tested - but top level tests that aren't nested in any groups will. The reasoning is that the top level space is a shared are that will always be executed. If you want only your group to run, nest everything else under groups as well.
|
|
124
|
-
|
|
125
|
-
If you combine `only.group` with `skip`, if you skip a field inside a group that is included, that field will be excluded during this run regardless of its group membership.
|
|
126
|
-
|
|
127
|
-
**skip.group()**
|
|
128
|
-
|
|
129
|
-
If you combine `skip.group` with `only` your included field declared within the skipped tests will be ignored.
|
package/docs/getting_started.md
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
# Installation
|
|
2
|
-
|
|
3
|
-
To install the stable version of Vest:
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
npm install vest
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
You can also add Vest directly as a script tag to your page:
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<script src="https://unpkg.com/vest@4"></script>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Vest tests are very much like unit tests, with only slight differences. Instead of using `describe/it/expect`, you will use `validate/[test](./test)/[enforce](./enforce)`.
|
|
16
|
-
|
|
17
|
-
- `test`: A single validation unit, validating a field or a single value. It takes the name of the field being validated, a failure message (to display to the user), and a callback function that contains the validation logic. [Read more about test].
|
|
18
|
-
- `enforce`: This is our assertion function. We’ll use it to make sure our validations pass. [Read more about enforce].
|
|
19
|
-
|
|
20
|
-
## Writing tests
|
|
21
|
-
|
|
22
|
-
First, you need to initialize your validation suite using `create()`. This initializes your validation suite state and allows validation results to be merged with future validations.
|
|
23
|
-
|
|
24
|
-
```js
|
|
25
|
-
import { create } from 'vest';
|
|
26
|
-
|
|
27
|
-
const suite = create(() => {
|
|
28
|
-
// validation suite content goes here.
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
const validationResult = suite();
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
`create()` takes a callback that contains your tests, and returns a "suite" function which runs your validation suite. All the arguments you pass to it are being forwarded to your tests callback. You can use it to pass form data to your validation, excluded fields, and anything required for during your validation runtime.
|
|
35
|
-
|
|
36
|
-
A simple validation suite would look somewhat like this:
|
|
37
|
-
|
|
38
|
-
```js
|
|
39
|
-
// suite.js
|
|
40
|
-
import { create, test, enforce } from ‘vest’;
|
|
41
|
-
|
|
42
|
-
const suite = create((formData) => {
|
|
43
|
-
test('username', 'Must be between 2 and 10 chars', () => {
|
|
44
|
-
enforce(formData.username)
|
|
45
|
-
.longerThanOrEquals(2)
|
|
46
|
-
.shorterThan(10);
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
test('password', 'Must contain at least one digit', () => {
|
|
50
|
-
enforce(formData.password)
|
|
51
|
-
.matches(/(?=.*[0-9])/);
|
|
52
|
-
});
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
export default suite;
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
```js
|
|
59
|
-
// myFeature.js
|
|
60
|
-
|
|
61
|
-
import suite from './suite.js';
|
|
62
|
-
|
|
63
|
-
const res = suite(formData);
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
In the above example, we validate a form containing username and a password.
|
|
67
|
-
|
|
68
|
-
**Read next about:**
|
|
69
|
-
|
|
70
|
-
- [Vest's result object](./result).
|
|
71
|
-
- [Using the test function](./test).
|
|
72
|
-
- [Asserting with enforce](./enforce).
|
package/docs/group.md
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
# Grouping tests
|
|
2
|
-
|
|
3
|
-
In many cases it can be helpful to group tests together so you can include or exclude a portion of the suite with a single condition.
|
|
4
|
-
Similar to the `describe` and `context` features provided by unit testing frameworks, Vest provides `group`.
|
|
5
|
-
|
|
6
|
-
[Try on CodeSandbox (React)](https://codesandbox.io/s/vest-group-example-react-4i2ne)
|
|
7
|
-
|
|
8
|
-
```js
|
|
9
|
-
import { create, test, group, enforce, skip } from 'vest';
|
|
10
|
-
|
|
11
|
-
create(data => {
|
|
12
|
-
skip.group(data.userExists ? 'signUp' : 'signIn');
|
|
13
|
-
|
|
14
|
-
test('userName', "Can't be empty", () => {
|
|
15
|
-
enforce(data.username).isNotEmpty();
|
|
16
|
-
});
|
|
17
|
-
test('password', "Can't be empty", () => {
|
|
18
|
-
enforce(data.password).isNotEmpty();
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
group('signIn', () => {
|
|
22
|
-
test(
|
|
23
|
-
'userName',
|
|
24
|
-
'User not found. Please check if you typed it correctly.',
|
|
25
|
-
findUserName(data.username)
|
|
26
|
-
);
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
group('signUp', () => {
|
|
30
|
-
test('email', 'Email already registered', isEmailRegistered(data.email));
|
|
31
|
-
|
|
32
|
-
test('age', 'You must be at least 18 years old to join', () => {
|
|
33
|
-
enforce(data.age).largerThanOrEquals(18);
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
});
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## Why use `group` and not just wrap the tests with an `if` statement?
|
|
40
|
-
|
|
41
|
-
In many cases it is sufficient to just use an `if` statement. The benefit of using `group` is that when skipping (either using [skip or only](./exclusion)), Vest will merge the previous group result with the current suite. This is mostly suitable for cases like demonstrated in the first example of the multi stage form.
|
|
42
|
-
|
|
43
|
-
## Use cases
|
|
44
|
-
|
|
45
|
-
### 1. Multi stage form
|
|
46
|
-
|
|
47
|
-
You may have in your application a multi-screen form, in which you want to validate each screen individually, but submit it all at once.
|
|
48
|
-
|
|
49
|
-
```js
|
|
50
|
-
// suite.js
|
|
51
|
-
import { create, test, group, enforce, only } from 'vest';
|
|
52
|
-
|
|
53
|
-
const suite = create((data, currentTab) => {
|
|
54
|
-
only.group(currentScreen);
|
|
55
|
-
|
|
56
|
-
group('overview_tab', () => {
|
|
57
|
-
test('productTitle', 'Must be at least 5 chars.', () => {
|
|
58
|
-
enforce(data.productTitle).longerThanOrEquals(5);
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
test('productDescription', "Can't be longer than 2500 chars.", () => {
|
|
62
|
-
enforce(data.productDescription).shorterThanOrEquals(2500);
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
test('productTags', 'Please provide up to 5 tags', () => {
|
|
66
|
-
enforce(data.tags).lengthEquals(5);
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
group('pricing_tab', () => {
|
|
71
|
-
test('price', '5$ or more.', () => {
|
|
72
|
-
enforce(data.price).lte(5);
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
test('productExtras', "Can't be empty.", () => {
|
|
76
|
-
enforce(data.extras).isNotEmpty();
|
|
77
|
-
});
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
export default suite;
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
```js
|
|
85
|
-
// myFeature.js
|
|
86
|
-
|
|
87
|
-
suite(data, 'overview_tab'); // will only validate 'overview_tab' group
|
|
88
|
-
suite(data, 'pricing_tab'); // will only validate 'pricing_tab' group
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### 2. Skipping tests with shared fields
|
|
92
|
-
|
|
93
|
-
You sometimes want to skip some tests on a certain condition, but still run other tests with the same field-name.
|
|
94
|
-
|
|
95
|
-
In the example below, we don't mind skipping the `balance` field directly, but if we skip the `quantity` field directly, it won't be tested at all - even though it has one test outside of the group. That's why we skip the `used_promo`.
|
|
96
|
-
|
|
97
|
-
```js
|
|
98
|
-
import { create, test, group, enforce, skip } from 'vest';
|
|
99
|
-
|
|
100
|
-
const suite = create(data => {
|
|
101
|
-
if (!data.usedPromo) skip.group('used_promo');
|
|
102
|
-
if (!data.paysWithBalance) skip.group('balance');
|
|
103
|
-
|
|
104
|
-
test(
|
|
105
|
-
'balance',
|
|
106
|
-
'Balance is lower than product price',
|
|
107
|
-
hasSufficientFunds(data.productId)
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
test('quantity', `Quantity on this item is limited to ${data.limit}`, () => {
|
|
111
|
-
enforce(data.quantity).lessThanOrEquals(data.limit);
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
group('used_promo', () => {
|
|
115
|
-
test(
|
|
116
|
-
'quantity',
|
|
117
|
-
'promo code purchases are limited to one item only',
|
|
118
|
-
() => {
|
|
119
|
-
enforce(data.quantity).equals(1);
|
|
120
|
-
}
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
test(
|
|
124
|
-
'promoCode',
|
|
125
|
-
'Promo code can only be used once',
|
|
126
|
-
isPromoCodeUsed(data.usedPromo)
|
|
127
|
-
);
|
|
128
|
-
});
|
|
129
|
-
});
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## Querying the result object for groups
|
|
133
|
-
|
|
134
|
-
Groups represent a portion of your validation suite, so when using `group`, you are likely to need to get the group-specific validation results.
|
|
135
|
-
Your result object exposes the following methods:
|
|
136
|
-
|
|
137
|
-
- [_hasErrorsByGroup_](./result#haserrorsbygroup-and-haswarningsbygroup-functions)
|
|
138
|
-
- [_hasWarningsByGroup_](./result#haserrorsbygroup-and-haswarningsbygroup-functions)
|
|
139
|
-
- [_hasErrorsByGroup_](./result#geterrorsbygroup-and-getwarningsbygroup-functions)
|
|
140
|
-
- [_hasWarningsByGroup_](./result#geterrorsbygroup-and-getwarningsbygroup-functions)
|
|
141
|
-
|
|
142
|
-
Read more about these methods in [the result object](./result).
|
package/docs/index.html
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<title>Vest - Declarative Validations</title>
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
7
|
-
<meta name="description" content="Validation Test" />
|
|
8
|
-
<meta
|
|
9
|
-
name="viewport"
|
|
10
|
-
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
11
|
-
/>
|
|
12
|
-
<link rel="icon" href="./_assets/favicon.ico" />
|
|
13
|
-
<link
|
|
14
|
-
rel="stylesheet"
|
|
15
|
-
href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
|
|
16
|
-
/>
|
|
17
|
-
<link
|
|
18
|
-
rel="stylesheet"
|
|
19
|
-
href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.css"
|
|
20
|
-
/>
|
|
21
|
-
</head>
|
|
22
|
-
<body>
|
|
23
|
-
<div id="app"></div>
|
|
24
|
-
<script>
|
|
25
|
-
window.$docsify = {
|
|
26
|
-
name: 'vest',
|
|
27
|
-
logo: '/_assets/vest-logo.png',
|
|
28
|
-
repo: 'https://github.com/ealush/vest',
|
|
29
|
-
search: 'auto',
|
|
30
|
-
loadSidebar: true,
|
|
31
|
-
subMaxLevel: 2,
|
|
32
|
-
themeColor: '#5BA9D8',
|
|
33
|
-
};
|
|
34
|
-
</script>
|
|
35
|
-
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
|
36
|
-
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
|
|
37
|
-
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
|
38
|
-
<script src="//unpkg.com/vest"></script>
|
|
39
|
-
<script src="./_assets/index.js"></script>
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|
package/docs/migration.md
DELETED
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
# Migration guides
|
|
2
|
-
|
|
3
|
-
## V3 to V4
|
|
4
|
-
|
|
5
|
-
Vest 4.0 is a major release that contains several breaking changes. Most should be pretty simple to migrate, but there are a few things that require a bit more attention.](https://
|
|
6
|
-
|
|
7
|
-
### Removed: Default import support
|
|
8
|
-
|
|
9
|
-
For better tree shaking, we removed the default import support. This means that if you need a part of the library, you will need to import it explicitly, resulting in a smaller eventual bundle size.
|
|
10
|
-
|
|
11
|
-
### V3
|
|
12
|
-
|
|
13
|
-
```js
|
|
14
|
-
import vest from 'vest';
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
### V4
|
|
18
|
-
|
|
19
|
-
```js
|
|
20
|
-
import * as vest from 'vest';
|
|
21
|
-
// OR:
|
|
22
|
-
import { create, test, enforce } from 'vest';
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
### Removed: Suite name from suite declaration
|
|
26
|
-
|
|
27
|
-
From now on, suites do not accept a name when being declared. The name used to serve a purpose in V2 when accessing properties from the suite, but it serves no purpose anymore.
|
|
28
|
-
|
|
29
|
-
#### V3
|
|
30
|
-
|
|
31
|
-
```js
|
|
32
|
-
import { create } from 'vest';
|
|
33
|
-
|
|
34
|
-
create('my-suite', () => {});
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### V4
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
import { create } from 'vest';
|
|
41
|
-
|
|
42
|
-
create(() => {});
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
### Renamed: classNames to classnames
|
|
46
|
-
|
|
47
|
-
Vest 3 included the `vest/classNames` import. It is now renamed to `vest/classnames`.
|
|
48
|
-
|
|
49
|
-
### V3
|
|
50
|
-
|
|
51
|
-
```js
|
|
52
|
-
import classNames from 'vest/classNames';
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### V4
|
|
56
|
-
|
|
57
|
-
```js
|
|
58
|
-
import classnames from 'vest/classnames';
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### Changed: Do not use if/else statements to conditionally run tests
|
|
62
|
-
|
|
63
|
-
Vest version 4 relies on order of execution and remembers the result of each test based on its location in the suite, similar to the way [hooks in react](https://reactjs.org/docs/hooks-rules.html) work. This means that tests wrapped in an if/else statement make Vest go out of sync with the suite order, and unexecuted test results will be recorded. Instead of using if/else statements, you should use the `skipWhen` function that achieves the same result.
|
|
64
|
-
|
|
65
|
-
### V3
|
|
66
|
-
|
|
67
|
-
```js
|
|
68
|
-
if (!suite.get().hasErrors('password')) {
|
|
69
|
-
test('confirm', 'passwords do not match', () => {
|
|
70
|
-
/*...*/
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### V4
|
|
76
|
-
|
|
77
|
-
```js
|
|
78
|
-
import { skipWhen, test } from 'vest';
|
|
79
|
-
|
|
80
|
-
// ...
|
|
81
|
-
|
|
82
|
-
skipWhen(suite.hasErrors('password'), () => {
|
|
83
|
-
test('confirm', 'passwords do not match', () => {
|
|
84
|
-
/*...*/
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
// ...
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
**Note**
|
|
92
|
-
If you want to completely omit a test from your suite, and you know that it won't appear at all during the lifetime of your suite, you may use `if/else`.
|
|
93
|
-
|
|
94
|
-
### Removed: enforce.template
|
|
95
|
-
|
|
96
|
-
enforce.template was mostly a shorthand for a "and" style enforcements. In reality it did not provide any substantial functionality that was not achievable without it, while it contributed to confusion regarding the api.
|
|
97
|
-
|
|
98
|
-
## V2 to V3
|
|
99
|
-
|
|
100
|
-
Vest version 3 comes with many new features, yet with a reduced bundle size. To achieve this, some redundant interfaces were removed. All v2 capabilities still exist, but the way to use some of them changed.
|
|
101
|
-
|
|
102
|
-
**Replaced interfaces**
|
|
103
|
-
|
|
104
|
-
### Removed: vest.get()
|
|
105
|
-
|
|
106
|
-
From now on, use suite.get() to get the latest validation result.
|
|
107
|
-
|
|
108
|
-
#### v2
|
|
109
|
-
|
|
110
|
-
```js
|
|
111
|
-
const suite = vest.create('user_form', () => {
|
|
112
|
-
/*...*/
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
vest.get('user_form'); // Returns the most recent validation result
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
#### v3
|
|
119
|
-
|
|
120
|
-
```js
|
|
121
|
-
const suite = create(() => {
|
|
122
|
-
/*...*/
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
suite.get(); // Returns the most recent validation result
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### Removed: vest.reset() // To reset suite state
|
|
129
|
-
|
|
130
|
-
From now on, use suite.reset() to reset the validation result.
|
|
131
|
-
|
|
132
|
-
#### v2
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
const suite = vest.create('user_form', () => {
|
|
136
|
-
/*...*/
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
vest.reset('user_form'); // Resets the validity state
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
#### v3
|
|
143
|
-
|
|
144
|
-
```js
|
|
145
|
-
const suite = create(() => {
|
|
146
|
-
/*...*/
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
suite.reset(); // Resets the validity state
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
### Removed: vest.draft() // To retrieve intermediate result
|
|
153
|
-
|
|
154
|
-
From now on, use suite.get() to get the validation result.
|
|
155
|
-
|
|
156
|
-
#### v2
|
|
157
|
-
|
|
158
|
-
```js
|
|
159
|
-
const suite = vest.create('user_form', () => {
|
|
160
|
-
if (vest.draft().hasErrors('username')) {
|
|
161
|
-
/* ... */
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
#### v3
|
|
167
|
-
|
|
168
|
-
```js
|
|
169
|
-
const suite = create('user_form', () => {
|
|
170
|
-
skipWhen(suite.get().hasErrors('username'), () => {
|
|
171
|
-
/* ... */
|
|
172
|
-
});
|
|
173
|
-
});
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
### Removed: validate() // For non persistent validations
|
|
177
|
-
|
|
178
|
-
The stateless validate export is not needed anymore due to a change in the state structure.
|
|
179
|
-
|
|
180
|
-
#### v2
|
|
181
|
-
|
|
182
|
-
```js
|
|
183
|
-
import { validate } from 'vest';
|
|
184
|
-
|
|
185
|
-
const result = data =>
|
|
186
|
-
validate('user_form', () => {
|
|
187
|
-
/*...*/
|
|
188
|
-
})();
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
#### v3
|
|
192
|
-
|
|
193
|
-
```js
|
|
194
|
-
import { create } from 'vest';
|
|
195
|
-
|
|
196
|
-
const suite = data =>
|
|
197
|
-
create(() => {
|
|
198
|
-
/* ... */
|
|
199
|
-
})();
|
|
200
|
-
|
|
201
|
-
const result = suite({ username: 'example' });
|
|
202
|
-
```
|