1 | import { isElementFocusable, focusFirstFocusableElement } from './utils';
|
2 |
|
3 | describe('isElementFocusable', () => {
|
4 | const myBtn = () => document.querySelector('button');
|
5 | const myInput = () => document.querySelector('input');
|
6 |
|
7 | beforeEach(() => {
|
8 | document.body.innerHTML = '';
|
9 | });
|
10 |
|
11 | it('should return true for a button', () => {
|
12 | document.body.innerHTML = '<button> My Button </button>';
|
13 |
|
14 | expect(isElementFocusable(myBtn())).toBe(true);
|
15 | });
|
16 |
|
17 | it('should return false for an element with a z-index of -1', () => {
|
18 | document.body.innerHTML = '<button z-index="-1"> My Button </button>';
|
19 |
|
20 | expect(isElementFocusable(myBtn())).toBe(false);
|
21 | });
|
22 |
|
23 | it('should return true for an input', () => {
|
24 | document.body.innerHTML = '<input type="text" />';
|
25 |
|
26 | expect(isElementFocusable(myInput())).toBe(true);
|
27 | });
|
28 |
|
29 | it('should return false for an input with a type hidden', () => {
|
30 | document.body.innerHTML = '<input type="hidden" />';
|
31 |
|
32 | expect(isElementFocusable(myInput())).toBe(false);
|
33 | });
|
34 |
|
35 | it('should return false for a disabled button', () => {
|
36 | document.body.innerHTML = '<button disabled> My Button </button>';
|
37 |
|
38 | expect(isElementFocusable(myBtn())).toBe(false);
|
39 | });
|
40 |
|
41 | it('should return true for an anchor tag with an href attribute', () => {
|
42 | document.body.innerHTML = '<a href="mylink"> My Link </a>';
|
43 | const myAnchor = document.querySelector('a');
|
44 |
|
45 | expect(isElementFocusable(myAnchor)).toBe(true);
|
46 | });
|
47 |
|
48 | it('should return true for an anchor tag without an href attribute', () => {
|
49 | document.body.innerHTML = '<a href=""> My Link </a>';
|
50 | const myAnchor = document.querySelector('a');
|
51 |
|
52 | expect(isElementFocusable(myAnchor)).toBe(false);
|
53 | });
|
54 | });
|
55 |
|
56 | describe('focusFirstFocusableElement', () => {
|
57 | const myBtn = () => document.querySelector('button');
|
58 | const myInput = () => document.querySelector('input');
|
59 |
|
60 | beforeEach(() => {
|
61 | document.body.innerHTML = '';
|
62 | });
|
63 |
|
64 | it('Focus the first element of the list if available', () => {
|
65 | document.body.innerHTML = '<div><div><button></button><input /></div></div>';
|
66 |
|
67 | focusFirstFocusableElement([myBtn(), myInput()]);
|
68 |
|
69 | expect(document.activeElement).toBe(myBtn());
|
70 | });
|
71 |
|
72 | it('Focus the second element of the list if the first is not valid', () => {
|
73 | document.body.innerHTML = '<div><div><button disabled></button><input /></div></div>';
|
74 |
|
75 | focusFirstFocusableElement([myBtn(), myInput()]);
|
76 |
|
77 | expect(document.activeElement).toBe(myInput());
|
78 | });
|
79 | });
|