-
Notifications
You must be signed in to change notification settings - Fork 4.3k
/
writing-flow.test.js
161 lines (137 loc) · 5.88 KB
/
writing-flow.test.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/**
* Internal dependencies
*/
import {
clickBlockAppender,
getEditedPostContent,
newPost,
pressTimes,
pressWithModifier,
} from '../support/utils';
describe( 'adding blocks', () => {
beforeEach( async () => {
await newPost();
} );
it( 'Should navigate inner blocks with arrow keys', async () => {
let activeElementText;
// Add demo content
await clickBlockAppender();
await page.keyboard.type( 'First paragraph' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '/columns' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'First column paragraph' );
// Arrow down should navigate through layouts in columns block (to
// its default appender). Two key presses are required since the first
// will land user on the Column wrapper block.
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.type( 'Second column paragraph' );
// Arrow down from last of layouts exits nested context to default
// appender of root level.
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.type( 'Second paragraph' );
// Arrow up into nested context focuses last text input
await page.keyboard.press( 'ArrowUp' );
activeElementText = await page.evaluate( () => document.activeElement.textContent );
expect( activeElementText ).toBe( 'Second column paragraph' );
// Arrow up in inner blocks should navigate through (1) column wrapper,
// (2) text fields.
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'ArrowUp' );
activeElementText = await page.evaluate( () => document.activeElement.textContent );
expect( activeElementText ).toBe( 'First column paragraph' );
// Arrow up from first text field in nested context focuses column and
// columns wrappers before escaping out.
let activeElementBlockType;
await page.keyboard.press( 'ArrowUp' );
activeElementBlockType = await page.evaluate( () => (
document.activeElement.getAttribute( 'data-type' )
) );
expect( activeElementBlockType ).toBe( 'core/column' );
await page.keyboard.press( 'ArrowUp' );
activeElementBlockType = await page.evaluate( () => (
document.activeElement.getAttribute( 'data-type' )
) );
expect( activeElementBlockType ).toBe( 'core/columns' );
// Arrow up from focused (columns) block wrapper exits nested context
// to prior text input.
await page.keyboard.press( 'ArrowUp' );
activeElementText = await page.evaluate( () => document.activeElement.textContent );
expect( activeElementText ).toBe( 'First paragraph' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
it( 'should navigate around inline boundaries', async () => {
// Add demo content
await clickBlockAppender();
await page.keyboard.type( 'First' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Second' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Third' );
// Navigate to second paragraph
await pressTimes( 'ArrowLeft', 6 );
// Bold second paragraph text
await page.keyboard.down( 'Shift' );
await pressTimes( 'ArrowLeft', 6 );
await page.keyboard.up( 'Shift' );
await pressWithModifier( 'mod', 'b' );
// Arrow left from selected bold should collapse to before the inline
// boundary. Arrow once more to traverse into first paragraph.
//
// See native behavior example: http://fiddle.tinymce.com/kvgaab
//
// 1. Select all of second paragraph, end to beginning
// 2. Press ArrowLeft
// 3. Type
// 4. Note that text is not bolded
//
// This is technically different than how other word processors treat
// the collapse while a bolded segment is selected, but our behavior
// is consistent with TinyMCE.
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.type( 'After' );
// Arrow right from end of first should traverse to second, *BEFORE*
// the bolded text. Another press should move within inline boundary.
await pressTimes( 'ArrowRight', 2 );
await page.keyboard.type( 'Inside' );
// Arrow left from end of beginning of inline boundary should move to
// the outside of the inline boundary.
await pressTimes( 'ArrowLeft', 6 );
await page.keyboard.press( 'ArrowLeft' ); // Separate for emphasis.
await page.keyboard.type( 'Before' );
// Likewise, test at the end of the inline boundary for same effect.
await page.keyboard.press( 'ArrowRight' ); // Move inside
await pressTimes( 'ArrowRight', 12 );
await page.keyboard.type( 'Inside' );
await page.keyboard.press( 'ArrowRight' );
// Edge case: Verify that workaround to test for ZWSP at beginning of
// focus node does not take effect when on the right edge of inline
// boundary (thus preventing traversing to the next block by arrow).
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowLeft' );
// Should be after the inline boundary again.
await page.keyboard.type( 'After' );
// Finally, ensure that ArrowRight from end of unbolded text moves to
// the last paragraph
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.type( 'Before' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
it( 'should clean TinyMCE content', async () => {
// Ensure no zero-width space character. Notably, this can occur when
// save occurs while at an inline boundary edge.
await clickBlockAppender();
await pressWithModifier( 'mod', 'b' );
expect( await getEditedPostContent() ).toMatchSnapshot();
// When returning to Visual mode, backspace in selected block should
// reset to the provisional block.
await page.keyboard.press( 'Backspace' );
// Ensure no data-mce-selected. Notably, this can occur when content
// is saved while typing within an inline boundary.
await pressWithModifier( 'mod', 'b' );
await page.keyboard.type( 'Inside' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );