-
Notifications
You must be signed in to change notification settings - Fork 395
/
index.spec.js
99 lines (79 loc) · 3.91 KB
/
index.spec.js
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { createElement } from 'lwc';
import DelegatesFocusTrue from 'x/delegatesFocusTrue';
import DelegatesFocusFalse from 'x/delegatesFocusFalse';
import Container from 'x/container';
describe('LightningElement.focus', () => {
beforeEach(() => {
document.body.focus();
});
describe('host.focus() when { delegatesFocus: true }', () => {
it('should focus the host element', () => {
const elm = createElement('x-focus', { is: DelegatesFocusTrue });
document.body.appendChild(elm);
elm.focus();
expect(document.activeElement).toEqual(elm);
});
it('should focus the first internally focusable element', () => {
const elm = createElement('x-focus', { is: DelegatesFocusTrue });
document.body.appendChild(elm);
elm.focus();
const input = elm.shadowRoot.querySelector('.first');
expect(elm.shadowRoot.activeElement).toEqual(input);
});
});
it('should not focus the first internally focusable element (delegatesFocus=false)', () => {
const elm = createElement('x-focus', { is: DelegatesFocusFalse });
document.body.appendChild(elm);
elm.focus();
expect(elm.shadowRoot.activeElement).toBeNull();
});
it('should focus the host element (delegatesFocus=false, tabIndex=-1)', () => {
const container = createElement('x-container', { is: Container });
document.body.appendChild(container);
const elm = container.shadowRoot.querySelector('x-delegates-focus-false[tabindex="-1"]');
elm.focus();
expect(container.shadowRoot.activeElement).toBe(elm);
expect(elm.shadowRoot.activeElement).toBeNull();
});
it('should focus the host element (delegatesFocus=false, tabIndex=0)', () => {
const container = createElement('x-container', { is: Container });
document.body.appendChild(container);
const elm = container.shadowRoot.querySelector('x-delegates-focus-false[tabindex="0"]');
elm.focus();
expect(container.shadowRoot.activeElement).toBe(elm);
expect(elm.shadowRoot.activeElement).toBeNull();
});
// Tests that apply regardless of whether focus is being delegated
function runFocusTests({ delegatesFocus }) {
const category = `(delegatesFocus=${delegatesFocus})`;
const Ctor = delegatesFocus ? DelegatesFocusTrue : DelegatesFocusFalse;
it(`should focus the internal element when invoking the focus method directly on the internal element ${category}`, () => {
const elm = createElement('x-focus', { is: Ctor });
document.body.appendChild(elm);
const input = elm.shadowRoot.querySelector('.second');
input.focus();
expect(elm.shadowRoot.activeElement).toBe(input);
});
it(`should blur the internal element when invoking the blur method directly on the internal element ${category}`, () => {
const elm = createElement('x-focus', { is: Ctor });
document.body.appendChild(elm);
const input = elm.shadowRoot.querySelector('.second');
input.focus();
input.blur();
expect(elm.shadowRoot.activeElement).toBeNull();
});
// TODO [#2566]: Firefox behaves differently from Chrome/Safari in this test
if (!(process.env.NATIVE_SHADOW && delegatesFocus)) {
it(`should not move focus if an internal element is already focused ${category}`, () => {
const elm = createElement('x-focus', { is: Ctor });
document.body.appendChild(elm);
const input = elm.shadowRoot.querySelector('.second');
input.focus();
elm.focus();
expect(elm.shadowRoot.activeElement).toBe(input);
});
}
}
runFocusTests({ delegatesFocus: true });
runFocusTests({ delegatesFocus: false });
});