@blotch/angular-lynx-testing-library 22.2.2 → 22.2.3
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/README.md +3 -6
- package/dist/setup.js +30 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,7 @@ The setup:
|
|
|
20
20
|
- Installs `LynxTestingEnv` on the jsdom window
|
|
21
21
|
- Switches to the Lynx main thread (where PAPI functions live)
|
|
22
22
|
- Polyfills PAPI functions the testing environment doesn't implement (`__GetParent`, `__QuerySelector`, etc.)
|
|
23
|
+
- Makes `lynx.reportError` return for a warning, as Lynx does, instead of throwing it, so an `@boundary` shows its fallback with the default error handler
|
|
23
24
|
- Installs `@testing-library/jest-dom` matchers
|
|
24
25
|
|
|
25
26
|
`ng test` compiles the tests ahead of time, like the app, and checks templates strictly, as the Angular Language Service does: a component that uses Lynx elements imports `LYNX_ELEMENTS` from `@blotch/angular-lynx`. The examples below do.
|
|
@@ -201,7 +202,7 @@ it('uses the injected value', async () => {
|
|
|
201
202
|
Define the signal outside the component so both the component and the test can access it:
|
|
202
203
|
|
|
203
204
|
```ts
|
|
204
|
-
import { Component, signal
|
|
205
|
+
import { Component, signal } from '@angular/core';
|
|
205
206
|
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
|
|
206
207
|
import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
|
|
207
208
|
|
|
@@ -211,7 +212,6 @@ const count = signal(0);
|
|
|
211
212
|
selector: 'test-counter',
|
|
212
213
|
imports: [LYNX_ELEMENTS],
|
|
213
214
|
template: `<text>{{ count() }}</text>`,
|
|
214
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
215
215
|
})
|
|
216
216
|
class CounterComponent {
|
|
217
217
|
count = count;
|
|
@@ -233,7 +233,7 @@ it('updates when the signal changes', async () => {
|
|
|
233
233
|
AngularLynx event bindings use Lynx prefixes: `(bindtap)`, `(catchtap)`, `(bindinput)`, etc.
|
|
234
234
|
|
|
235
235
|
```ts
|
|
236
|
-
import { Component, signal
|
|
236
|
+
import { Component, signal } from '@angular/core';
|
|
237
237
|
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
|
|
238
238
|
import {
|
|
239
239
|
render,
|
|
@@ -249,7 +249,6 @@ import {
|
|
|
249
249
|
<text>{{ count() }}</text>
|
|
250
250
|
</view>
|
|
251
251
|
`,
|
|
252
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
253
252
|
})
|
|
254
253
|
class ButtonComponent {
|
|
255
254
|
count = signal(0);
|
|
@@ -280,7 +279,6 @@ it('shows content conditionally', async () => {
|
|
|
280
279
|
template: `@if (visible()) {
|
|
281
280
|
<text>Hello</text>
|
|
282
281
|
}`,
|
|
283
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
284
282
|
})
|
|
285
283
|
class IfComponent {
|
|
286
284
|
visible = visible;
|
|
@@ -307,7 +305,6 @@ it('renders a dynamic list', async () => {
|
|
|
307
305
|
template: `@for (item of items(); track item) {
|
|
308
306
|
<text>{{ item }}</text>
|
|
309
307
|
}`,
|
|
310
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
311
308
|
})
|
|
312
309
|
class ListComponent {
|
|
313
310
|
items = items;
|
package/dist/setup.js
CHANGED
|
@@ -40,6 +40,36 @@ globalThis.fetch = (url, ...args) => {
|
|
|
40
40
|
if (typeof Element.prototype.animate !== 'function') {
|
|
41
41
|
Element.prototype.animate = () => ({ cancel: () => { }, finished: Promise.resolve() });
|
|
42
42
|
}
|
|
43
|
+
// ─── lynx.reportError warnings ───────────────────────────────────────────────
|
|
44
|
+
/**
|
|
45
|
+
* Makes `lynx.reportError` return for a warning, as Lynx does, instead of
|
|
46
|
+
* throwing it.
|
|
47
|
+
*
|
|
48
|
+
* The testing environment's `lynx.reportError` throws whatever it's given, so
|
|
49
|
+
* a reported error fails the test the way it would stop the app on a device.
|
|
50
|
+
* On a device, though, a `warning`-level report doesn't interrupt anything,
|
|
51
|
+
* and that's the level `LynxErrorHandler.onViewError()` reports an error that
|
|
52
|
+
* an `@boundary` caught at. Angular calls onViewError() before it swaps in the
|
|
53
|
+
* `@error` block, so the throw stopped the swap, and a test using the default
|
|
54
|
+
* error handler saw neither the content nor its fallback. Other reports still
|
|
55
|
+
* throw.
|
|
56
|
+
*
|
|
57
|
+
* The environment gives each thread a new `lynx` whenever it injects its
|
|
58
|
+
* globals: once when it's created, and again on every reset(), which runs
|
|
59
|
+
* after each test (see index.ts). So this runs from its inject hooks, which
|
|
60
|
+
* must be set before the environment is created below.
|
|
61
|
+
*/
|
|
62
|
+
const returnOnWarnings = (threadGlobals) => {
|
|
63
|
+
const { lynx } = threadGlobals;
|
|
64
|
+
const reportError = lynx.reportError;
|
|
65
|
+
lynx.reportError = (error, options) => {
|
|
66
|
+
if (options?.level === 'warning')
|
|
67
|
+
return;
|
|
68
|
+
reportError(error, options);
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
globalThis.onInjectMainThreadGlobals = returnOnWarnings;
|
|
72
|
+
globalThis.onInjectBackgroundThreadGlobals = returnOnWarnings;
|
|
43
73
|
// ─── Install LynxTestingEnv ──────────────────────────────────────────────────
|
|
44
74
|
/**
|
|
45
75
|
* Turns the globals the testing environment is about to write into plain data
|
package/package.json
CHANGED