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
|
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import {html, LitElement} from 'lit';
import {customElement, state} from 'lit/decorators';
import {define, resolve} from './dependency';
import '../test/common-test-setup-karma.js';
import {fixture} from '@open-wc/testing-helpers';
import {DIProviderElement, wrapInProvider} from './di-provider-element';
import {BehaviorSubject} from 'rxjs';
import {waitUntilObserved} from '../test/test-utils';
import {subscribe} from '../elements/lit/subscription-controller';
const modelToken = define<BehaviorSubject<string>>('token');
/**
* This is an example element-under-test. It is expecting a model injected
* using a token, and then always displaying the value from that model.
*/
@customElement('consumer-element')
class ConsumerElement extends LitElement {
readonly getModel = resolve(this, modelToken);
@state()
private injectedValue = '';
override connectedCallback() {
super.connectedCallback();
subscribe(this, this.getModel(), value => (this.injectedValue = value));
}
override render() {
return html`<div>${this.injectedValue}</div>`;
}
}
suite('di-provider-element', () => {
let injectedModel: BehaviorSubject<string>;
let element: ConsumerElement;
setup(async () => {
// The injected value and fixture are created inside `setup` to prevent
// tests from leaking into each other.
injectedModel = new BehaviorSubject('foo');
element = (
await fixture<DIProviderElement>(
wrapInProvider(
html`<consumer-element></consumer-element>`,
modelToken,
injectedModel
)
)
).element as ConsumerElement;
});
test('provides values to the wrapped element', () => {
expect(element).shadowDom.to.equal('<div>foo</div>');
});
test('enables the test to control the injected dependency', async () => {
injectedModel.next('bar');
await waitUntilObserved(injectedModel, value => value === 'bar');
expect(element).shadowDom.to.equal('<div>bar</div>');
});
});
|
