Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Fix issues with Cypress promisification plugin
+68
-69
+1
cypress.json
+1
cypress.json
-1
cypress/support/index.js
-1
cypress/support/index.js
-1
package.json
-1
package.json
+66
-61
src/utils/__tests__/selection.test.tsx
+66
-61
src/utils/__tests__/selection.test.tsx
···
1
1
import React from 'react';
2
2
import { mount } from '@cypress/react';
3
-
import { snapshotSelection, restoreSelection } from '../selection';
4
-
5
-
it('should restore focused elements', async () => {
6
-
await mount(<button id="button">Focusable</button>).promisify();
3
+
import { RestoreSelection, snapshotSelection, restoreSelection } from '../selection';
7
4
8
-
let button: HTMLElement | null = null;
5
+
it('should restore focused elements', () => {
6
+
let selection: RestoreSelection | null = null;
9
7
10
-
await cy.get('button').as('button').then($el => {
11
-
button = $el.get(0);
12
-
}).focus().promisify();
8
+
mount(<button id="button">Focusable</button>);
9
+
cy.get('button').as('button').focus();
13
10
14
-
const selection = snapshotSelection();
11
+
// snapshot the selection
12
+
cy.get('@button').then($el => {
13
+
selection = snapshotSelection();
15
14
16
-
// check selection matches expected state
17
-
expect(selection).to.deep.equal({
18
-
element: button,
19
-
method: 'focus',
15
+
// check selection matches expected state
16
+
expect(selection).to.deep.equal({
17
+
element: $el.get(0),
18
+
method: 'focus',
19
+
});
20
20
});
21
21
22
22
// unfocus the button
23
-
await cy.realPress('Tab');
24
-
await cy.focused().should('not.exist').promisify();
23
+
cy.realPress('Tab');
24
+
cy.focused().should('not.exist');
25
25
26
26
// restore the snapshotted selection
27
-
restoreSelection(selection);
28
-
await cy.focused().should('exist').promisify();
29
-
await cy.get('@button').should('have.focus').promisify();
30
-
});
27
+
cy.get('@button').then(() => {
28
+
restoreSelection(selection);
29
+
});
31
30
32
-
it('should restore input selections', async () => {
33
-
await mount(<input type="text" name="text" />).promisify();
31
+
cy.focused().should('exist');
32
+
cy.get('@button').should('have.focus');
33
+
});
34
34
35
-
let input: HTMLElement | null = null;
35
+
it('should restore input selections', () => {
36
+
let selection: RestoreSelection | null = null;
36
37
37
-
await cy.get('input').as('input').then($el => {
38
-
input = $el.get(0);
39
-
}).focus().promisify();
38
+
mount(<input type="text" name="text" />);
40
39
41
40
// type and move selection
42
-
await cy.realType('test');
43
-
await cy.realPress('ArrowLeft');
44
-
await cy.realPress('ArrowLeft');
41
+
cy.get('input').as('input').focus();
42
+
cy.realType('test');
43
+
cy.realPress('ArrowLeft');
44
+
cy.realPress('ArrowLeft');
45
45
46
-
const selection = snapshotSelection();
46
+
// snapshot the selection
47
+
cy.get('@input').then($el => {
48
+
selection = snapshotSelection();
47
49
48
-
// check selection matches expected state
49
-
expect(selection).to.deep.equal({
50
-
element: input,
51
-
method: 'setSelectionRange',
52
-
arguments: [2, 2, 'none'],
50
+
// check selection matches expected state
51
+
expect(selection).to.deep.equal({
52
+
element: $el.get(0),
53
+
method: 'setSelectionRange',
54
+
arguments: [2, 2, 'none'],
55
+
});
53
56
});
54
57
55
58
// unfocus the input
56
-
await cy.realPress('Tab');
57
-
await cy.focused().should('not.exist').promisify();
59
+
cy.realPress('Tab');
60
+
cy.focused().should('not.exist');
58
61
59
62
// restore the snapshotted selection
60
-
restoreSelection(selection);
61
-
await cy.focused().should('exist').promisify();
63
+
cy.get('@input').then(() => {
64
+
restoreSelection(selection);
65
+
});
62
66
63
67
// modify input at selected caret and check value
64
-
await cy.realType('test');
65
-
await cy.get('@input').should('have.value', 'tetestst').promisify();
68
+
cy.focused().should('exist');
69
+
cy.realType('test');
70
+
cy.get('@input').should('have.value', 'tetestst');
66
71
});
67
72
68
73
it('should restore selections otherwise', async () => {
69
-
await mount(<div contentEditable="true" id="editable"></div>).promisify();
70
-
71
-
let div: HTMLElement | null = null;
72
-
73
-
await cy.get('#editable').as('editable').then($el => {
74
-
div = $el.get(0);
75
-
}).focus().promisify();
74
+
let selection: RestoreSelection | null = null;
76
75
77
76
// type and move selection
78
-
await cy.realType('test');
79
-
await cy.realPress('ArrowLeft');
80
-
await cy.realPress('ArrowLeft');
77
+
cy.get('#editable').as('editable').focus();
78
+
cy.realType('test');
79
+
cy.realPress('ArrowLeft');
80
+
cy.realPress('ArrowLeft');
81
81
82
-
const selection = snapshotSelection();
82
+
// snapshot the selection
83
+
cy.get('@editable').then($el => {
84
+
selection = snapshotSelection();
83
85
84
-
// check selection matches expected state
85
-
expect(selection).to.have.property('element', div);
86
-
expect(selection).to.have.property('method', 'range');
87
-
expect(selection).to.have.property('range');
86
+
// check selection matches expected state
87
+
expect(selection).to.have.property('element', $el.get(0));
88
+
expect(selection).to.have.property('method', 'range');
89
+
expect(selection).to.have.property('range');
90
+
});
88
91
89
92
// unfocus the input
90
-
await cy.realPress('Tab');
91
-
await cy.focused().should('not.exist').promisify();
93
+
cy.realPress('Tab');
94
+
cy.focused().should('not.exist');
92
95
93
96
// restore the snapshotted selection
94
-
restoreSelection(selection);
95
-
await cy.focused().should('exist').promisify();
97
+
cy.get('@editable').then(() => {
98
+
restoreSelection(selection);
99
+
});
96
100
97
101
// modify input at selected caret and check value
98
-
await cy.realType('test');
99
-
await cy.get('@editable').should('have.text', 'tetestst').promisify();
102
+
cy.focused().should('exist');
103
+
cy.realType('test');
104
+
cy.get('@editable').should('have.text', 'tetestst');
100
105
});
+1
-6
tsconfig.json
+1
-6
tsconfig.json