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
|
import { h, Component, render } from '../../src/preact';
/** @jsx h */
describe('keys', () => {
let scratch;
before( () => {
scratch = document.createElement('div');
(document.body || document.documentElement).appendChild(scratch);
});
beforeEach( () => {
scratch.innerHTML = '';
});
after( () => {
scratch.parentNode.removeChild(scratch);
scratch = null;
});
// See developit/preact-compat#21
it('should remove orphaned keyed nodes', () => {
let root = render((
<div>
<div>1</div>
<li key="a">a</li>
</div>
), scratch);
root = render((
<div>
<div>2</div>
<li key="b">b</li>
</div>
), scratch, root);
expect(scratch.innerHTML).to.equal('<div><div>2</div><li>b</li></div>');
});
it('should set VNode#key property', () => {
expect(<div />).to.have.property('key').that.is.empty;
expect(<div a="a" />).to.have.property('key').that.is.empty;
expect(<div key="1" />).to.have.property('key', '1');
});
it('should remove keyed nodes (#232)', () => {
class App extends Component {
componentDidMount() {
setTimeout(() => this.setState({opened: true,loading: true}), 10);
setTimeout(() => this.setState({opened: true,loading: false}), 20);
}
render({ opened, loading }) {
return (
<BusyIndicator id="app" busy={loading}>
<div>This div needs to be here for this to break</div>
{ opened && !loading && <div>{[]}</div> }
</BusyIndicator>
);
}
}
class BusyIndicator extends Component {
render({ children, busy }) {
return <div class={busy ? "busy" : ""}>
{ children && children.length ? children : <div class="busy-placeholder"></div> }
<div class="indicator">
<div>indicator</div>
<div>indicator</div>
<div>indicator</div>
</div>
</div>;
}
}
let root;
root = render(<App />, scratch, root);
root = render(<App opened loading />, scratch, root);
root = render(<App opened />, scratch, root);
let html = String(root.innerHTML).replace(/ class=""/g, '');
expect(html).to.equal('<div>This div needs to be here for this to break</div><div></div><div class="indicator"><div>indicator</div><div>indicator</div><div>indicator</div></div>');
});
});
|
