1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import * as testingLibrary from '@testing-library/dom';
import { createWrapper, WrapperArray, ErrorWrapper, mount, shallowMount } from '@vue/test-utils';
import { isArray, upperFirst } from 'lodash';
const vNodeContainsText = (vnode, text) =>
(vnode.text && vnode.text.includes(text)) ||
(vnode.children && vnode.children.filter((child) => vNodeContainsText(child, text)).length);
/**
* Determines whether a `shallowMount` Wrapper contains text
* within one of it's slots. This will also work on Wrappers
* acquired with `find()`, but only if it's parent Wrapper
* was shallowMounted.
* NOTE: Prefer checking the rendered output of a component
* wherever possible using something like `text()` instead.
* @param {Wrapper} shallowWrapper - Vue test utils wrapper (shallowMounted)
* @param {String} slotName
* @param {String} text
*/
export const shallowWrapperContainsSlotText = (shallowWrapper, slotName, text) =>
Boolean(
shallowWrapper.vm.$slots[slotName].filter((vnode) => vNodeContainsText(vnode, text)).length,
);
/**
* Returns a promise that waits for a mutation to be fired before resolving
* NOTE: There's no reject action here so it will hang if it waits for a mutation that won't happen.
* @param {Object} store - The Vue store that contains the mutations
* @param {String} expectedMutationType - The Mutation to wait for
*/
export const waitForMutation = (store, expectedMutationType) =>
new Promise((resolve) => {
const unsubscribe = store.subscribe((mutation) => {
if (mutation.type === expectedMutationType) {
unsubscribe();
resolve();
}
});
});
export const extendedWrapper = (wrapper) => {
// https://testing-library.com/docs/queries/about
const AVAILABLE_QUERIES = [
'byRole',
'byLabelText',
'byPlaceholderText',
'byText',
'byDisplayValue',
'byAltText',
'byTitle',
];
if (isArray(wrapper) || !wrapper?.find) {
// eslint-disable-next-line no-console
console.warn(
'[vue-test-utils-helper]: you are trying to extend an object that is not a VueWrapper.',
);
return wrapper;
}
return Object.defineProperties(wrapper, {
findByTestId: {
value(id) {
return this.find(`[data-testid="${id}"]`);
},
},
findAllByTestId: {
value(id) {
return this.findAll(`[data-testid="${id}"]`);
},
},
// `findBy`
...AVAILABLE_QUERIES.reduce((accumulator, query) => {
return {
...accumulator,
[`find${upperFirst(query)}`]: {
value(text, options = {}) {
const elements = testingLibrary[`queryAll${upperFirst(query)}`](
wrapper.element,
text,
options,
);
// Element not found, return an `ErrorWrapper`
if (!elements.length) {
return new ErrorWrapper(query);
}
return createWrapper(elements[0], this.options || {});
},
},
};
}, {}),
// `findAllBy`
...AVAILABLE_QUERIES.reduce((accumulator, query) => {
return {
...accumulator,
[`findAll${upperFirst(query)}`]: {
value(text, options = {}) {
const elements = testingLibrary[`queryAll${upperFirst(query)}`](
wrapper.element,
text,
options,
);
const wrappers = elements.map((element) => {
const elementWrapper = createWrapper(element, this.options || {});
elementWrapper.selector = text;
return elementWrapper;
});
const wrapperArray = new WrapperArray(wrappers);
wrapperArray.selector = text;
return wrapperArray;
},
},
};
}, {}),
});
};
export const shallowMountExtended = (...args) => extendedWrapper(shallowMount(...args));
export const mountExtended = (...args) => extendedWrapper(mount(...args));
|
