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
|
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { Styling } from '@jupyterlab/ui-components';
import { h, VirtualDOM } from '@lumino/virtualdom';
import { simulate } from 'simulate-event';
describe('@jupyterlab/ui-components', () => {
describe('Styling', () => {
describe('.styleNode()', () => {
it('should style descendant nodes for select, input and button', () => {
const vnode = h.div({}, [h.button(), h.select(), h.input()]);
const node = VirtualDOM.realize(vnode);
Styling.styleNode(node);
expect(node.querySelectorAll('.jp-mod-styled').length).toBe(3);
});
it('should wrap a select node', () => {
const parent = document.createElement('div');
const select = document.createElement('select');
parent.appendChild(select);
Styling.styleNode(parent);
const wrapper = parent.firstChild as HTMLElement;
expect(wrapper.className).toBe('jp-select-wrapper');
expect(select.parentElement).toBe(wrapper);
expect(select.className).toBe('jp-mod-styled');
document.body.appendChild(parent);
select.focus();
simulate(select, 'focus');
expect(wrapper.className).toContain('jp-mod-focused');
select.blur();
simulate(select, 'blur');
expect(wrapper.className).not.toContain('jp-mod-focused');
document.body.removeChild(parent);
});
});
describe('.styleNodeByTag()', () => {
it('should style descendant nodes for the given tag', () => {
const vnode = h.div({}, [h.span(), h.div({}, h.span())]);
const node = VirtualDOM.realize(vnode);
Styling.styleNodeByTag(node, 'span');
expect(node.querySelectorAll('.jp-mod-styled').length).toBe(2);
});
it('should style the node itself', () => {
const div = document.createElement('div');
Styling.styleNodeByTag(div, 'div');
expect(div.className).toContain('jp-mod-styled');
});
});
describe('.wrapSelect()', () => {
it('should wrap the select node', () => {
const select = document.createElement('select');
const wrapper = Styling.wrapSelect(select);
expect(wrapper.className).toBe('jp-select-wrapper');
expect(select.parentElement).toBe(wrapper);
expect(select.className).toBe('jp-mod-styled');
document.body.appendChild(wrapper);
select.focus();
simulate(select, 'focus');
expect(wrapper.className).toContain('jp-mod-focused');
select.blur();
simulate(select, 'blur');
expect(wrapper.className).not.toContain('jp-mod-focused');
document.body.removeChild(wrapper);
});
});
});
});
|
