@uniflowed/test 0.0.0-alpha.9 → 0.1.0
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/app-browser.js +6 -0
- package/app.js +175 -0
- package/browser-worker.js +334 -0
- package/browser.js +59 -0
- package/bun/index.js +305 -0
- package/in-source.js +169 -0
- package/index.js +11 -1
- package/internal/axe.js +362 -0
- package/internal/browser/cdp.js +364 -0
- package/internal/browser/node.js +375 -0
- package/internal/browser/page-transport.js +36 -0
- package/internal/browser/page.js +258 -0
- package/internal/browser/screenshots.js +102 -0
- package/internal/browser/server.js +893 -0
- package/internal/browser/transport.js +2 -0
- package/internal/expect.js +432 -80
- package/internal/isolation.js +231 -0
- package/internal/namespace.js +22 -10
- package/internal/native-globals.js +14 -0
- package/internal/native-host.js +97 -0
- package/internal/output.js +25 -7
- package/internal/registry.js +54 -3
- package/internal/run.js +130 -11
- package/internal/timers.js +2 -2
- package/package.json +41 -5
- package/worker.js +98 -10
package/internal/expect.js
CHANGED
|
@@ -11,10 +11,66 @@
|
|
|
11
11
|
// `.resolves` and `.rejects` settle the promise first and then apply the same
|
|
12
12
|
// matcher table to what came out, so `await expect(p).resolves.toBe(1)` reads
|
|
13
13
|
// the way the synchronous form does.
|
|
14
|
+
//
|
|
15
|
+
// # The names are written down, and the behaviour is not
|
|
16
|
+
//
|
|
17
|
+
// `expect` used to be `$FlowFixMe`, and so was everything it handed back. That
|
|
18
|
+
// is a hole in the published type of the package a project writes every one of
|
|
19
|
+
// its assertions against: `expect(user).toBaa(1)` was not a misspelling
|
|
20
|
+
// anybody's checker would find, `expect(list).toHaveLength("3")` was not a type
|
|
21
|
+
// error, and `expect(p).resolves` on a value that is not a promise was fine
|
|
22
|
+
// until it ran. Every test in this repository is written against `expect`,
|
|
23
|
+
// which is the largest surface in the packages and was the least checked.
|
|
24
|
+
//
|
|
25
|
+
// So [`Matchers`] below writes the names out, one signature per matcher, the
|
|
26
|
+
// way `@uniflowed/react-testing`'s `Queries` writes out its thirty-six. Flow
|
|
27
|
+
// has no template literal types and no way to read a name out of a value, so
|
|
28
|
+
// the listing has to exist for the type to exist at all. What is *not*
|
|
29
|
+
// repeated is any behaviour: [`verdicts`] is still the one place a matcher is
|
|
30
|
+
// decided, and the listing is a naming that a reader can check against it by
|
|
31
|
+
// eye.
|
|
32
|
+
//
|
|
33
|
+
// [`Matchers`] is generic in what a matcher *returns*, which is what lets
|
|
34
|
+
// `.resolves` reuse the one listing: the same forty-one names, each handing
|
|
35
|
+
// back a promise.
|
|
36
|
+
//
|
|
37
|
+
// # The received value's type is not carried, and that was tried
|
|
38
|
+
//
|
|
39
|
+
// ubugeeei-prod/uf#402 asked for a second parameter as well — the type handed
|
|
40
|
+
// to `expect`, carried through the matchers so that `expect(count).toBe("two")`
|
|
41
|
+
// is an error at the call. It is written here rather than left for somebody to
|
|
42
|
+
// discover, because it looks obviously right and is not.
|
|
43
|
+
//
|
|
44
|
+
// `toBe` is `Object.is`, and identity is not assignability. Typing it
|
|
45
|
+
// `(expected: T)` demands that the expected value be a subtype of the received
|
|
46
|
+
// one, which is a direction the runtime has no opinion about and which ordinary
|
|
47
|
+
// assertions fail in both:
|
|
48
|
+
// `expect(document.activeElement).toBe(screen.getByRole("button"))` compares an
|
|
49
|
+
// `HTMLElement | null` with an `Element`, neither is the other's subtype, and
|
|
50
|
+
// that is the most common assertion in a DOM test. Jest and Vitest both type
|
|
51
|
+
// this argument as `unknown` for the same reason.
|
|
52
|
+
//
|
|
53
|
+
// Worse, the parameter has to be *inferred*, and `expect(x)` is where a lot of
|
|
54
|
+
// otherwise unconstrained expressions sit. `await
|
|
55
|
+
// expect(client.request("/users/1")).resolves.toEqual({ id: 1 })` stops
|
|
56
|
+
// checking and starts reporting that `request`'s own type parameter is
|
|
57
|
+
// underconstrained, because a `mixed` parameter asked nothing of the argument
|
|
58
|
+
// and a generic one asks it to be solved. `expect([])` becomes "cannot
|
|
59
|
+
// determine type of empty array literal". Both are correct tests, and the type
|
|
60
|
+
// that rejects them is worse than the type that missed a mistyped comparison.
|
|
61
|
+
//
|
|
62
|
+
// So the received value arrives as `mixed`, and what makes a matcher checked is
|
|
63
|
+
// its own signature: `toHaveLength` wants a number, `toMatch` a pattern,
|
|
64
|
+
// `toBeTypeOf` one of the eight words `typeof` answers with, and every name is
|
|
65
|
+
// a name. The comparison between two unrelated types stays unchecked, and it is
|
|
66
|
+
// the only part of the issue that does.
|
|
14
67
|
|
|
68
|
+
import type { AsymmetricMatcher } from "./asymmetric.js";
|
|
69
|
+
import type { AxeOptions } from "./axe.js";
|
|
15
70
|
import type { SpyCall } from "./spy.js";
|
|
16
71
|
import * as asymmetric from "./asymmetric.js";
|
|
17
72
|
import * as snapshot from "./snapshot.js";
|
|
73
|
+
import { auditElement, describeViolations, violationIds } from "./axe.js";
|
|
18
74
|
import { isSpy } from "./spy.js";
|
|
19
75
|
import { equals, matchesObject, render } from "./equality.js";
|
|
20
76
|
|
|
@@ -36,7 +92,14 @@ export class AssertionError extends Error {
|
|
|
36
92
|
}
|
|
37
93
|
}
|
|
38
94
|
|
|
39
|
-
/**
|
|
95
|
+
/**
|
|
96
|
+
* What a matcher decided, and how to say it either way.
|
|
97
|
+
*
|
|
98
|
+
* A matcher may answer with a promise of one. Only one does — the accessibility
|
|
99
|
+
* audit, whose engine has no synchronous entry point — and [`bind`] is where
|
|
100
|
+
* the two cases are told apart; see the note there for why the promise is not
|
|
101
|
+
* hidden from the caller.
|
|
102
|
+
*/
|
|
40
103
|
type Verdict = {|
|
|
41
104
|
readonly pass: boolean,
|
|
42
105
|
readonly failure: () => string,
|
|
@@ -45,6 +108,166 @@ type Verdict = {|
|
|
|
45
108
|
readonly received?: string,
|
|
46
109
|
|};
|
|
47
110
|
|
|
111
|
+
/** What `typeof` can answer, for the matcher that compares against it. */
|
|
112
|
+
type TypeName =
|
|
113
|
+
| "bigint"
|
|
114
|
+
| "boolean"
|
|
115
|
+
| "function"
|
|
116
|
+
| "number"
|
|
117
|
+
| "object"
|
|
118
|
+
| "string"
|
|
119
|
+
| "symbol"
|
|
120
|
+
| "undefined";
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Every matcher, each returning `R`.
|
|
124
|
+
*
|
|
125
|
+
* Generic in the return type because the surface exists twice and that is the
|
|
126
|
+
* only thing that differs: `expect(x)` raises where a matcher fails and hands
|
|
127
|
+
* back nothing, while `expect(p).resolves` settles first and so hands back a
|
|
128
|
+
* promise. Writing the forty-one names once and saying what changes is the
|
|
129
|
+
* whole reason for the parameter — the alternative was the same list twice,
|
|
130
|
+
* with `=> void` on one copy and `=> Promise<void>` on the other, and a reader
|
|
131
|
+
* left to diff them.
|
|
132
|
+
*
|
|
133
|
+
* Where an argument is `mixed` it is because the runtime genuinely takes
|
|
134
|
+
* anything there and the checker would be lying to say otherwise: `toEqual`
|
|
135
|
+
* accepts an asymmetric matcher standing in for a value at any depth, and
|
|
136
|
+
* `toHaveValue` compares whatever a control is holding. Where it is not —
|
|
137
|
+
* `toHaveLength` wants a number, `toMatch` a string or a pattern, `toBeTypeOf`
|
|
138
|
+
* one of the eight words `typeof` produces — the narrower type is what the
|
|
139
|
+
* implementation already assumes, and saying it out loud is the point of the
|
|
140
|
+
* exercise.
|
|
141
|
+
*
|
|
142
|
+
* `not` is the same list again because negation is the only thing it changes.
|
|
143
|
+
* `resolves` and `rejects` are deliberately not here: they belong to
|
|
144
|
+
* [`Expectation`], because `expect(p).resolves.not` exists and
|
|
145
|
+
* `expect(x).not.resolves` does not.
|
|
146
|
+
*/
|
|
147
|
+
export type Matchers<R> = {
|
|
148
|
+
readonly toBe: (expected: mixed) => R,
|
|
149
|
+
readonly toEqual: (expected: mixed) => R,
|
|
150
|
+
readonly toStrictEqual: (expected: mixed) => R,
|
|
151
|
+
readonly toBeTruthy: () => R,
|
|
152
|
+
readonly toBeFalsy: () => R,
|
|
153
|
+
readonly toBeNull: () => R,
|
|
154
|
+
readonly toBeUndefined: () => R,
|
|
155
|
+
readonly toBeDefined: () => R,
|
|
156
|
+
readonly toBeNaN: () => R,
|
|
157
|
+
readonly toBeGreaterThan: (expected: number) => R,
|
|
158
|
+
readonly toBeGreaterThanOrEqual: (expected: number) => R,
|
|
159
|
+
readonly toBeLessThan: (expected: number) => R,
|
|
160
|
+
readonly toBeLessThanOrEqual: (expected: number) => R,
|
|
161
|
+
readonly toBeCloseTo: (expected: number, digits?: number) => R,
|
|
162
|
+
readonly toContain: (expected: mixed) => R,
|
|
163
|
+
readonly toContainEqual: (expected: mixed) => R,
|
|
164
|
+
readonly toHaveLength: (expected: number) => R,
|
|
165
|
+
readonly toHaveProperty: (path: string, ...rest: $ReadOnlyArray<mixed>) => R,
|
|
166
|
+
readonly toMatch: (expected: string | RegExp) => R,
|
|
167
|
+
readonly toMatchObject: (expected: mixed) => R,
|
|
168
|
+
readonly toBeInstanceOf: (expected: mixed) => R,
|
|
169
|
+
readonly toBeTypeOf: (expected: TypeName) => R,
|
|
170
|
+
readonly toSatisfy: (predicate: (value: mixed) => boolean) => R,
|
|
171
|
+
readonly toMatchSnapshot: (hint?: string) => R,
|
|
172
|
+
readonly toMatchInlineSnapshot: (expected?: string) => R,
|
|
173
|
+
readonly toThrow: (...rest: $ReadOnlyArray<mixed>) => R,
|
|
174
|
+
readonly toHaveBeenCalled: () => R,
|
|
175
|
+
readonly toHaveBeenCalledTimes: (count: number) => R,
|
|
176
|
+
readonly toHaveBeenCalledWith: (...args: $ReadOnlyArray<mixed>) => R,
|
|
177
|
+
readonly toHaveBeenLastCalledWith: (...args: $ReadOnlyArray<mixed>) => R,
|
|
178
|
+
readonly toBeInTheDocument: () => R,
|
|
179
|
+
readonly toBeVisible: () => R,
|
|
180
|
+
readonly toBeDisabled: () => R,
|
|
181
|
+
readonly toBeEnabled: () => R,
|
|
182
|
+
readonly toBeChecked: () => R,
|
|
183
|
+
readonly toBeRequired: () => R,
|
|
184
|
+
readonly toHaveFocus: () => R,
|
|
185
|
+
readonly toHaveAttribute: (name: string, value?: mixed) => R,
|
|
186
|
+
readonly toHaveClass: (...names: $ReadOnlyArray<string>) => R,
|
|
187
|
+
readonly toHaveTextContent: (expected: string | RegExp) => R,
|
|
188
|
+
readonly toHaveValue: (expected: mixed) => R,
|
|
189
|
+
/**
|
|
190
|
+
* Run axe-core over this element's subtree and require it to find nothing.
|
|
191
|
+
*
|
|
192
|
+
* `Promise<void>` rather than `R`, and it is the one matcher in this listing
|
|
193
|
+
* that is not generic: axe has no synchronous entry point, so the answer is
|
|
194
|
+
* a promise however the expectation was reached, and `await` is not optional.
|
|
195
|
+
*
|
|
196
|
+
* await expect(container).toHaveNoAxeViolations();
|
|
197
|
+
* await expect(container).toHaveNoAxeViolations({ tags: ["wcag2a"] });
|
|
198
|
+
*
|
|
199
|
+
* The rule set comes from `accessibility.axe` in `uf.config.js`; the argument
|
|
200
|
+
* narrows it for one assertion. See `./axe.js`.
|
|
201
|
+
*/
|
|
202
|
+
readonly toHaveNoAxeViolations: (options?: AxeOptions) => Promise<void>,
|
|
203
|
+
readonly not: Matchers<R>,
|
|
204
|
+
...
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* What `expect(received)` hands back.
|
|
209
|
+
*
|
|
210
|
+
* The matchers, plus the two that settle a promise before applying them. An
|
|
211
|
+
* intersection rather than a copy of the list with two lines added, and
|
|
212
|
+
* rather than an object spread, because a spread of an object type drops the
|
|
213
|
+
* `readonly` off every property it carries over — Flow computes a fresh object
|
|
214
|
+
* from the spread and the fresh one is writable, which would publish forty-one
|
|
215
|
+
* assignable matchers.
|
|
216
|
+
*
|
|
217
|
+
* # What is still not checked
|
|
218
|
+
*
|
|
219
|
+
* `expect(5).resolves` types, and fails when it runs. Saying otherwise needs
|
|
220
|
+
* `expect` to have two call signatures — one for a promise handing back a
|
|
221
|
+
* shape with `resolves`, one for everything else handing back a shape without
|
|
222
|
+
* — and Flow then requires the single function behind them to satisfy both,
|
|
223
|
+
* which no single function does. The overload is written down here rather than
|
|
224
|
+
* attempted because "it did not type" is the kind of thing that gets tried
|
|
225
|
+
* twice.
|
|
226
|
+
*/
|
|
227
|
+
export type Expectation = Matchers<void> & {
|
|
228
|
+
readonly resolves: Matchers<Promise<void>>,
|
|
229
|
+
readonly rejects: Matchers<Promise<void>>,
|
|
230
|
+
...
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* `expect` itself: callable, and carrying the matchers that stand in for a
|
|
235
|
+
* value instead of being one.
|
|
236
|
+
*
|
|
237
|
+
* Inexact, and it has to be. The value is a function, every function has
|
|
238
|
+
* `name`, `length`, `call`, `apply` and `bind`, and an exact object type
|
|
239
|
+
* refuses one for exactly that reason. Inexactness costs nothing that matters
|
|
240
|
+
* here: Flow still reports a read of a property this type does not list, which
|
|
241
|
+
* is what makes `expect.anythign()` an error.
|
|
242
|
+
*/
|
|
243
|
+
export type Expect = {
|
|
244
|
+
(received: mixed): Expectation,
|
|
245
|
+
// `flow/unclear-type` reads source text rather than an AST, and the shape it
|
|
246
|
+
// recognises as a property key rather than a type is a name at the start of
|
|
247
|
+
// a line or straight after `{`, `,` or `;`. `readonly any:` is neither, so
|
|
248
|
+
// the rule reports Jest's, Vitest's and Sinon's name for this matcher as an
|
|
249
|
+
// `any` type. The rule's own comment already lists `@uniflowed/test`'s
|
|
250
|
+
// `expect.any` among the false positives it exists to avoid; this is the one
|
|
251
|
+
// spelling it still cannot see past.
|
|
252
|
+
// uf-lint-disable-next-line flow/unclear-type
|
|
253
|
+
readonly any: (constructor: mixed) => AsymmetricMatcher,
|
|
254
|
+
readonly anything: () => AsymmetricMatcher,
|
|
255
|
+
readonly objectContaining: (expected: interface {}) => AsymmetricMatcher,
|
|
256
|
+
readonly arrayContaining: (expected: $ReadOnlyArray<mixed>) => AsymmetricMatcher,
|
|
257
|
+
readonly stringContaining: (substring: string) => AsymmetricMatcher,
|
|
258
|
+
readonly stringMatching: (pattern: string | RegExp) => AsymmetricMatcher,
|
|
259
|
+
readonly closeTo: (value: number, digits?: number) => AsymmetricMatcher,
|
|
260
|
+
readonly not: {
|
|
261
|
+
readonly objectContaining: (expected: interface {}) => AsymmetricMatcher,
|
|
262
|
+
readonly arrayContaining: (expected: $ReadOnlyArray<mixed>) => AsymmetricMatcher,
|
|
263
|
+
readonly stringContaining: (substring: string) => AsymmetricMatcher,
|
|
264
|
+
readonly stringMatching: (pattern: string | RegExp) => AsymmetricMatcher,
|
|
265
|
+
readonly closeTo: (value: number, digits?: number) => AsymmetricMatcher,
|
|
266
|
+
...
|
|
267
|
+
},
|
|
268
|
+
...
|
|
269
|
+
};
|
|
270
|
+
|
|
48
271
|
function propertyAt(
|
|
49
272
|
value: mixed,
|
|
50
273
|
path: string,
|
|
@@ -89,28 +312,36 @@ function matchesThrown(thrown: mixed, expected: mixed): boolean {
|
|
|
89
312
|
* Every entry returns a [`Verdict`] rather than throwing, which is what lets
|
|
90
313
|
* `.not` reuse all of them.
|
|
91
314
|
*
|
|
92
|
-
* #
|
|
315
|
+
* # Every entry takes `mixed`, and that is what makes the indexer sayable
|
|
316
|
+
*
|
|
317
|
+
* [`bind`] reaches an entry by a computed key and applies it to the
|
|
318
|
+
* `$ReadOnlyArray<mixed>` it collected from the caller, so the indexer has to
|
|
319
|
+
* describe a function that will accept those arguments. Parameters are
|
|
320
|
+
* contravariant, so an entry that demanded a `number` could not be described
|
|
321
|
+
* by one — `(...args: $ReadOnlyArray<mixed>)` rejects it, and
|
|
322
|
+
* `(...args: $ReadOnlyArray<empty>)` accepts it and rejects the call. That
|
|
323
|
+
* disagreement is why this indexer used to be written `$ReadOnlyArray<any>`,
|
|
324
|
+
* with a `flow/unclear-type` suppression on it.
|
|
93
325
|
*
|
|
94
|
-
*
|
|
95
|
-
* `
|
|
96
|
-
*
|
|
97
|
-
*
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
*
|
|
326
|
+
* So the disagreement is gone instead of papered over: every entry here takes
|
|
327
|
+
* `mixed` and coerces what it needs, the way most of them — `toBe`,
|
|
328
|
+
* `toBeGreaterThan`, `toHaveAttribute` — already did. Nothing a caller can see
|
|
329
|
+
* got wider: `toHaveLength` still refuses a string and `toBeTypeOf` still
|
|
330
|
+
* refuses a word `typeof` never says, because those are [`Matchers`]'s
|
|
331
|
+
* signatures and [`Matchers`] is the published type. What changed is that the
|
|
332
|
+
* table behind them stopped claiming a narrower argument than the one `bind`
|
|
333
|
+
* can hand it, which is a claim that was never true. The `String(…)` and
|
|
334
|
+
* `Number(…)` calls that appeared with it are the coercion the runtime was
|
|
335
|
+
* already doing, said out loud, and each produces the same message the implicit
|
|
336
|
+
* one did for the same input.
|
|
101
337
|
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
* one signature per matcher, plus `.not`, `.resolves` and `.rejects` — which
|
|
107
|
-
* is what `expect`'s own annotation is waiting for, and is
|
|
108
|
-
* ubugeeei-prod/uf#402. Until that exists, a narrower type here would be
|
|
109
|
-
* precision nobody can reach.
|
|
338
|
+
* The alternative — narrowing the indexer by writing `bind`'s forty-one
|
|
339
|
+
* wrappers out to avoid the computed lookup — is a second copy of the listing
|
|
340
|
+
* to keep in step with [`Matchers`], and is a worse trade than either. See
|
|
341
|
+
* ubugeeei-prod/uf#402.
|
|
110
342
|
*/
|
|
111
343
|
function verdicts(received: mixed): {
|
|
112
|
-
|
|
113
|
-
readonly [string]: (...args: $ReadOnlyArray<any>) => Verdict,
|
|
344
|
+
readonly [string]: (...args: $ReadOnlyArray<mixed>) => Verdict | Promise<Verdict>,
|
|
114
345
|
} {
|
|
115
346
|
const shown = () => render(received);
|
|
116
347
|
const simple = (pass: boolean, what: string, expected?: mixed): Verdict => ({
|
|
@@ -185,14 +416,15 @@ function verdicts(received: mixed): {
|
|
|
185
416
|
`to be at most ${render(expected)}`,
|
|
186
417
|
expected,
|
|
187
418
|
),
|
|
188
|
-
toBeCloseTo: (expected:
|
|
189
|
-
const
|
|
419
|
+
toBeCloseTo: (expected: mixed, digits?: mixed) => {
|
|
420
|
+
const target = Number(expected);
|
|
421
|
+
const places = digits === undefined ? 2 : Number(digits);
|
|
190
422
|
const tolerance = 10 ** -places / 2;
|
|
191
|
-
const difference = Math.abs((received as $FlowFixMe) -
|
|
423
|
+
const difference = Math.abs((received as $FlowFixMe) - target);
|
|
192
424
|
return simple(
|
|
193
425
|
difference < tolerance,
|
|
194
|
-
`to be within ${tolerance} of ${
|
|
195
|
-
|
|
426
|
+
`to be within ${tolerance} of ${target}, but it is off by ${difference}`,
|
|
427
|
+
target,
|
|
196
428
|
);
|
|
197
429
|
},
|
|
198
430
|
toContain: (expected: mixed) => {
|
|
@@ -218,22 +450,23 @@ function verdicts(received: mixed): {
|
|
|
218
450
|
expected,
|
|
219
451
|
);
|
|
220
452
|
},
|
|
221
|
-
toHaveLength: (expected:
|
|
453
|
+
toHaveLength: (expected: mixed) => {
|
|
222
454
|
const length = received == null ? undefined : (received as $FlowFixMe).length;
|
|
223
455
|
return simple(
|
|
224
456
|
length === expected,
|
|
225
|
-
`to have length ${expected}, not ${render(length)}`,
|
|
457
|
+
`to have length ${String(expected)}, not ${render(length)}`,
|
|
226
458
|
expected,
|
|
227
459
|
);
|
|
228
460
|
},
|
|
229
|
-
toHaveProperty: (path:
|
|
230
|
-
const
|
|
461
|
+
toHaveProperty: (path: mixed, ...rest: $ReadOnlyArray<mixed>) => {
|
|
462
|
+
const at = String(path);
|
|
463
|
+
const found = propertyAt(received, at);
|
|
231
464
|
if (rest.length === 0) {
|
|
232
|
-
return simple(found.found, `to have a property at \`${
|
|
465
|
+
return simple(found.found, `to have a property at \`${at}\``);
|
|
233
466
|
}
|
|
234
467
|
return simple(
|
|
235
468
|
found.found && equals(found.value, rest[0]),
|
|
236
|
-
`to have \`${
|
|
469
|
+
`to have \`${at}\` equal to ${render(rest[0])}, not ${render(found.value)}`,
|
|
237
470
|
rest[0],
|
|
238
471
|
);
|
|
239
472
|
},
|
|
@@ -253,16 +486,24 @@ function verdicts(received: mixed): {
|
|
|
253
486
|
`to be an instance of ${render(expected)}`,
|
|
254
487
|
expected,
|
|
255
488
|
),
|
|
256
|
-
toBeTypeOf: (expected:
|
|
489
|
+
toBeTypeOf: (expected: mixed) => {
|
|
490
|
+
const name = String(expected);
|
|
491
|
+
return simple(
|
|
492
|
+
typeof received === name,
|
|
493
|
+
`to be of type ${name}, not ${typeof received}`,
|
|
494
|
+
name,
|
|
495
|
+
);
|
|
496
|
+
},
|
|
497
|
+
toSatisfy: (predicate: mixed) =>
|
|
257
498
|
simple(
|
|
258
|
-
typeof received ===
|
|
259
|
-
|
|
260
|
-
expected,
|
|
499
|
+
typeof predicate === "function" && predicate(received) === true,
|
|
500
|
+
"to satisfy the predicate",
|
|
261
501
|
),
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
502
|
+
toMatchSnapshot: (hint?: mixed): Verdict => {
|
|
503
|
+
const verdict = snapshot.matchSnapshot(
|
|
504
|
+
received,
|
|
505
|
+
hint === undefined ? undefined : String(hint),
|
|
506
|
+
);
|
|
266
507
|
return {
|
|
267
508
|
pass: verdict.pass,
|
|
268
509
|
expected: verdict.expected ?? "(no snapshot yet)",
|
|
@@ -276,8 +517,11 @@ function verdicts(received: mixed): {
|
|
|
276
517
|
negatedFailure: () => "expected the value not to match its snapshot",
|
|
277
518
|
};
|
|
278
519
|
},
|
|
279
|
-
toMatchInlineSnapshot: (expected?:
|
|
280
|
-
const verdict = snapshot.matchInlineSnapshot(
|
|
520
|
+
toMatchInlineSnapshot: (expected?: mixed): Verdict => {
|
|
521
|
+
const verdict = snapshot.matchInlineSnapshot(
|
|
522
|
+
received,
|
|
523
|
+
expected === undefined ? undefined : String(expected),
|
|
524
|
+
);
|
|
281
525
|
return {
|
|
282
526
|
pass: verdict.pass,
|
|
283
527
|
expected: verdict.expected ?? "(no inline snapshot yet)",
|
|
@@ -328,10 +572,14 @@ function verdicts(received: mixed): {
|
|
|
328
572
|
requireSpy("toHaveBeenCalled");
|
|
329
573
|
return simple(spyCalls().length > 0, "to have been called");
|
|
330
574
|
},
|
|
331
|
-
toHaveBeenCalledTimes: (count:
|
|
575
|
+
toHaveBeenCalledTimes: (count: mixed) => {
|
|
332
576
|
requireSpy("toHaveBeenCalledTimes");
|
|
333
577
|
const actual = spyCalls().length;
|
|
334
|
-
return simple(
|
|
578
|
+
return simple(
|
|
579
|
+
actual === count,
|
|
580
|
+
`to have been called ${String(count)} times, not ${actual}`,
|
|
581
|
+
count,
|
|
582
|
+
);
|
|
335
583
|
},
|
|
336
584
|
toHaveBeenCalledWith: (...args: $ReadOnlyArray<mixed>) => {
|
|
337
585
|
requireSpy("toHaveBeenCalledWith");
|
|
@@ -442,6 +690,23 @@ function verdicts(received: mixed): {
|
|
|
442
690
|
failure: () => `expected the value ${render(actual)} to be ${render(expected)}`,
|
|
443
691
|
};
|
|
444
692
|
},
|
|
693
|
+
toHaveNoAxeViolations: async (options: mixed) => {
|
|
694
|
+
const node = element("toHaveNoAxeViolations");
|
|
695
|
+
const found = await auditElement(node, (options: $FlowFixMe));
|
|
696
|
+
const named = violationIds(found);
|
|
697
|
+
return {
|
|
698
|
+
pass: found.length === 0,
|
|
699
|
+
expected: "no accessibility violations",
|
|
700
|
+
received: found.length === 0 ? "none" : named,
|
|
701
|
+
failure: () =>
|
|
702
|
+
`expected no accessibility violations, and axe-core reported ` +
|
|
703
|
+
`${String(found.length)}:\n${describeViolations(found)}`,
|
|
704
|
+
// A passing audit is not proof of an accessible component — axe finds
|
|
705
|
+
// what a machine can find — so the negated message says what was
|
|
706
|
+
// actually established rather than implying the opposite verdict.
|
|
707
|
+
negatedFailure: () => "expected axe-core to report a violation, and it reported none",
|
|
708
|
+
};
|
|
709
|
+
},
|
|
445
710
|
};
|
|
446
711
|
|
|
447
712
|
/**
|
|
@@ -454,7 +719,16 @@ function verdicts(received: mixed): {
|
|
|
454
719
|
function element(matcher: string): Element {
|
|
455
720
|
const node: $FlowFixMe = received;
|
|
456
721
|
if (node == null || typeof node.getAttribute !== "function") {
|
|
457
|
-
|
|
722
|
+
// All four arguments, unlike the first version of this: the runner
|
|
723
|
+
// renders `expected` and `received` beside the message, and a one
|
|
724
|
+
// argument call left both of them `undefined` on screen for the one
|
|
725
|
+
// failure whose whole content is what was received instead.
|
|
726
|
+
throw new AssertionError(
|
|
727
|
+
`${matcher} needs an element, and received ${render(received)}`,
|
|
728
|
+
matcher,
|
|
729
|
+
"an element",
|
|
730
|
+
render(received),
|
|
731
|
+
);
|
|
458
732
|
}
|
|
459
733
|
return node;
|
|
460
734
|
}
|
|
@@ -466,14 +740,42 @@ function verdicts(received: mixed): {
|
|
|
466
740
|
* Walks the ancestors, because `display: none` on a parent hides a child whose
|
|
467
741
|
* own style says nothing. `hidden`, `aria-hidden` and a `details` that is not
|
|
468
742
|
* open each hide their subtree too.
|
|
743
|
+
*
|
|
744
|
+
* # The one thing a closed `<details>` still shows
|
|
745
|
+
*
|
|
746
|
+
* Its `<summary>`. A closed disclosure renders exactly one child and hides the
|
|
747
|
+
* rest, so the rule is "everything under a closed `<details>` except its
|
|
748
|
+
* summary" — and saying that needs the child the walk arrived from, not only
|
|
749
|
+
* the ancestor it is standing on. Without it the rule was written as "unless
|
|
750
|
+
* the `<details>` is the element being asked about", which exempted the
|
|
751
|
+
* disclosure from its own rule and left the summary inside it invisible:
|
|
752
|
+
* `expect(screen.getByText("More")).toBeVisible()` failed for the one thing on
|
|
753
|
+
* the screen, while the reader was looking at it.
|
|
754
|
+
*
|
|
755
|
+
* # Why this is not the walk in `react-testing`
|
|
756
|
+
*
|
|
757
|
+
* `packages/react-testing/internal/queries.js` has one that looks like this
|
|
758
|
+
* and answers a different question. `exposed` asks whether the accessibility
|
|
759
|
+
* tree announces the element, so it ignores `opacity: 0` — a screen reader
|
|
760
|
+
* reads text at zero opacity, which is exactly why hiding text that way is a
|
|
761
|
+
* bug rather than a technique — and it takes `aria-hidden` as decisive. This
|
|
762
|
+
* one asks whether a reader would *see* it, so the two answers part company
|
|
763
|
+
* there on purpose. The `<details>` half is the half they agree on, and it is
|
|
764
|
+
* written the same way in both.
|
|
469
765
|
*/
|
|
470
766
|
function isVisible(node: Element): boolean {
|
|
767
|
+
let child: $FlowFixMe = null;
|
|
471
768
|
let current: $FlowFixMe = node;
|
|
472
769
|
while (current != null && current.nodeType === 1) {
|
|
473
770
|
if (current.hasAttribute("hidden") || current.getAttribute("aria-hidden") === "true") {
|
|
474
771
|
return false;
|
|
475
772
|
}
|
|
476
|
-
if (
|
|
773
|
+
if (
|
|
774
|
+
child != null &&
|
|
775
|
+
current.tagName === "DETAILS" &&
|
|
776
|
+
!current.hasAttribute("open") &&
|
|
777
|
+
child.tagName !== "SUMMARY"
|
|
778
|
+
) {
|
|
477
779
|
return false;
|
|
478
780
|
}
|
|
479
781
|
const style = current.ownerDocument?.defaultView?.getComputedStyle?.(current);
|
|
@@ -485,6 +787,7 @@ function isVisible(node: Element): boolean {
|
|
|
485
787
|
return false;
|
|
486
788
|
}
|
|
487
789
|
}
|
|
790
|
+
child = current;
|
|
488
791
|
current = current.parentElement;
|
|
489
792
|
}
|
|
490
793
|
return true;
|
|
@@ -510,13 +813,23 @@ function isDisabled(node: Element): boolean {
|
|
|
510
813
|
*
|
|
511
814
|
* `negated` decides which message a failing verdict raises, which is all of
|
|
512
815
|
* what `.not` is.
|
|
816
|
+
*
|
|
817
|
+
* # Why the object is built rather than written
|
|
818
|
+
*
|
|
819
|
+
* `.not` has to be reached lazily or building an expectation would build its
|
|
820
|
+
* negation, which would build *its* negation, forever. A lazily installed
|
|
821
|
+
* property is not something an object literal carries, so the value is
|
|
822
|
+
* completed with `Object.defineProperty` after it exists — and an object
|
|
823
|
+
* completed after the fact is not one Flow can check a literal against. That
|
|
824
|
+
* is what this `$FlowFixMe` is, and it now covers a construction rather than a
|
|
825
|
+
* published type: [`expectValue`] states the real one, and the checker holds
|
|
826
|
+
* every caller to it.
|
|
513
827
|
*/
|
|
514
828
|
function bind(received: mixed, negated: boolean): $FlowFixMe {
|
|
515
829
|
const table = verdicts(received);
|
|
516
830
|
const bound: $FlowFixMe = {};
|
|
517
831
|
for (const name of Object.keys(table)) {
|
|
518
|
-
|
|
519
|
-
const verdict = table[name](...args);
|
|
832
|
+
const decide = (verdict: Verdict) => {
|
|
520
833
|
if (verdict.pass !== negated) {
|
|
521
834
|
return undefined;
|
|
522
835
|
}
|
|
@@ -528,6 +841,29 @@ function bind(received: mixed, negated: boolean): $FlowFixMe {
|
|
|
528
841
|
verdict.received ?? render(received),
|
|
529
842
|
);
|
|
530
843
|
};
|
|
844
|
+
bound[name] = (...args: $ReadOnlyArray<mixed>) => {
|
|
845
|
+
const verdict = table[name](...args);
|
|
846
|
+
// A matcher whose engine is asynchronous answers with a promise of a
|
|
847
|
+
// verdict, and the promise is handed straight back rather than hidden.
|
|
848
|
+
//
|
|
849
|
+
// Hiding it was the alternative and it cannot be done: the only way to
|
|
850
|
+
// present an asynchronous answer synchronously is to decide before it
|
|
851
|
+
// arrives, which is deciding without it. What the promise costs is a
|
|
852
|
+
// forgotten `await`, and that case is not silent either — the rejection
|
|
853
|
+
// reaches the worker's unhandled-rejection handler, which fails the file
|
|
854
|
+
// the promise was created in and prints this same message. A missing
|
|
855
|
+
// `await` on a passing audit is the one case nothing reports, and it is
|
|
856
|
+
// the case where nothing happened.
|
|
857
|
+
//
|
|
858
|
+
// `instanceof Promise` rather than a `then` test, and it is safe for a
|
|
859
|
+
// reason that would not survive being generalised: every entry in the
|
|
860
|
+
// table is written in this file, so the only promise that can arrive
|
|
861
|
+
// here is one an `async` function in this module made, in this realm. A
|
|
862
|
+
// matcher registered from outside — which `@uniflowed/test` has no API
|
|
863
|
+
// for, deliberately — could hand back a foreign thenable, and this line
|
|
864
|
+
// would be the thing to revisit.
|
|
865
|
+
return verdict instanceof Promise ? verdict.then(decide) : decide(verdict);
|
|
866
|
+
};
|
|
531
867
|
}
|
|
532
868
|
Object.defineProperty(bound, "not", { get: () => bind(received, !negated) });
|
|
533
869
|
return bound;
|
|
@@ -575,7 +911,12 @@ function settled(promise: mixed, wanted: "resolve" | "reject", negated: boolean)
|
|
|
575
911
|
throw value;
|
|
576
912
|
}
|
|
577
913
|
: value;
|
|
578
|
-
|
|
914
|
+
// Returned rather than called and dropped: the wrapper is `async`, so
|
|
915
|
+
// returning an asynchronous matcher's promise is what awaits it. Without
|
|
916
|
+
// this, `await expect(p).resolves.toHaveNoAxeViolations()` awaited the
|
|
917
|
+
// settling and not the audit, and a violation surfaced as an unhandled
|
|
918
|
+
// rejection under whichever file was running by then.
|
|
919
|
+
return bind(subject, negated)[name](...args);
|
|
579
920
|
};
|
|
580
921
|
}
|
|
581
922
|
Object.defineProperty(bound, "not", { get: () => settled(promise, wanted, !negated) });
|
|
@@ -591,8 +932,12 @@ function settled(promise: mixed, wanted: "resolve" | "reject", negated: boolean)
|
|
|
591
932
|
* expect(() => parse("")).toThrow(/empty/);
|
|
592
933
|
* await expect(load()).resolves.toHaveLength(3);
|
|
593
934
|
* ```
|
|
935
|
+
*
|
|
936
|
+
* Takes a `mixed` and hands back a written-out [`Expectation`]. What each
|
|
937
|
+
* matcher will accept is decided by its own signature rather than by what was
|
|
938
|
+
* received, for the reasons this module's header sets out.
|
|
594
939
|
*/
|
|
595
|
-
function expectValue(received: mixed):
|
|
940
|
+
function expectValue(received: mixed): Expectation {
|
|
596
941
|
const expectation: $FlowFixMe = bind(received, false);
|
|
597
942
|
Object.defineProperty(expectation, "resolves", {
|
|
598
943
|
get: () => settled(received, "resolve", false),
|
|
@@ -602,11 +947,45 @@ function expectValue(received: mixed): $FlowFixMe {
|
|
|
602
947
|
}
|
|
603
948
|
|
|
604
949
|
/**
|
|
605
|
-
*
|
|
950
|
+
* Build the callable that carries the asymmetric matchers.
|
|
951
|
+
*
|
|
952
|
+
* The statics are attached inside a builder rather than at the module's top
|
|
953
|
+
* level, the way `internal/registry.js` builds `describe`: a shipped module
|
|
954
|
+
* may only declare, import and export at its top level, and `expect.any = …`
|
|
955
|
+
* out here is a statement that runs when the module is imported.
|
|
606
956
|
*
|
|
607
|
-
*
|
|
608
|
-
*
|
|
609
|
-
*
|
|
957
|
+
* It was `Object.assign(expectValue, { … })`, which is what a reader expects
|
|
958
|
+
* and what does not type. Flow models `Object.assign` as returning the
|
|
959
|
+
* *target*, so the result of assigning matchers onto a function is still a
|
|
960
|
+
* function with no matchers on it — eight `prop-missing` errors saying so, and
|
|
961
|
+
* a `flow/unsafe-object-assign` suppression on top of them. Attaching to a
|
|
962
|
+
* local before it is returned is the same runtime value with none of that: the
|
|
963
|
+
* checker sees the statics arrive and holds the result to [`Expect`].
|
|
964
|
+
*/
|
|
965
|
+
function expecting(): Expect {
|
|
966
|
+
const api = (received: mixed): Expectation => expectValue(received);
|
|
967
|
+
api.any = asymmetric.any;
|
|
968
|
+
api.anything = asymmetric.anything;
|
|
969
|
+
api.objectContaining = asymmetric.objectContaining;
|
|
970
|
+
api.arrayContaining = asymmetric.arrayContaining;
|
|
971
|
+
api.stringContaining = asymmetric.stringContaining;
|
|
972
|
+
api.stringMatching = asymmetric.stringMatching;
|
|
973
|
+
api.closeTo = asymmetric.closeTo;
|
|
974
|
+
api.not = {
|
|
975
|
+
objectContaining: (expected: interface {}) =>
|
|
976
|
+
asymmetric.not(asymmetric.objectContaining(expected)),
|
|
977
|
+
arrayContaining: (expected: $ReadOnlyArray<mixed>) =>
|
|
978
|
+
asymmetric.not(asymmetric.arrayContaining(expected)),
|
|
979
|
+
stringContaining: (substring: string) => asymmetric.not(asymmetric.stringContaining(substring)),
|
|
980
|
+
stringMatching: (pattern: string | RegExp) =>
|
|
981
|
+
asymmetric.not(asymmetric.stringMatching(pattern)),
|
|
982
|
+
closeTo: (value: number, digits?: number) => asymmetric.not(asymmetric.closeTo(value, digits)),
|
|
983
|
+
};
|
|
984
|
+
return api;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
/**
|
|
988
|
+
* Assert about a value.
|
|
610
989
|
*
|
|
611
990
|
* The `expect.*` half are the matchers that stand in for a value instead of
|
|
612
991
|
* being one. `expect(user).toEqual({ id: expect.any(String), name: "uf" })`
|
|
@@ -619,31 +998,4 @@ function expectValue(received: mixed): $FlowFixMe {
|
|
|
619
998
|
* than a negated assertion around the whole object, and is the form a suite
|
|
620
999
|
* being ported will already have.
|
|
621
1000
|
*/
|
|
622
|
-
|
|
623
|
-
// produce this value: `expect` is a *function* with matchers hanging off it,
|
|
624
|
-
// and `{ ...expectValue, ...matchers }` is a plain object that a test cannot
|
|
625
|
-
// call. `Object.assign` onto a callable is the only expression that makes one,
|
|
626
|
-
// and the alternative the rule is really warning about — `expect.any = …`
|
|
627
|
-
// afterwards — is the top-level statement the comment above rules out. What it
|
|
628
|
-
// mutates is a function this module declared six lines up and exports here; no
|
|
629
|
-
// object belonging to anybody else is touched.
|
|
630
|
-
// uf-lint-disable-next-line flow/unsafe-object-assign
|
|
631
|
-
export const expect: $FlowFixMe = Object.assign(expectValue, {
|
|
632
|
-
any: asymmetric.any,
|
|
633
|
-
anything: asymmetric.anything,
|
|
634
|
-
objectContaining: asymmetric.objectContaining,
|
|
635
|
-
arrayContaining: asymmetric.arrayContaining,
|
|
636
|
-
stringContaining: asymmetric.stringContaining,
|
|
637
|
-
stringMatching: asymmetric.stringMatching,
|
|
638
|
-
closeTo: asymmetric.closeTo,
|
|
639
|
-
not: {
|
|
640
|
-
objectContaining: (expected: interface {}) =>
|
|
641
|
-
asymmetric.not(asymmetric.objectContaining(expected)),
|
|
642
|
-
arrayContaining: (expected: $ReadOnlyArray<mixed>) =>
|
|
643
|
-
asymmetric.not(asymmetric.arrayContaining(expected)),
|
|
644
|
-
stringContaining: (substring: string) => asymmetric.not(asymmetric.stringContaining(substring)),
|
|
645
|
-
stringMatching: (pattern: string | RegExp) =>
|
|
646
|
-
asymmetric.not(asymmetric.stringMatching(pattern)),
|
|
647
|
-
closeTo: (value: number, digits?: number) => asymmetric.not(asymmetric.closeTo(value, digits)),
|
|
648
|
-
},
|
|
649
|
-
});
|
|
1001
|
+
export const expect: Expect = expecting();
|