-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
align-hook.test.js
234 lines (197 loc) · 7.37 KB
/
align-hook.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
/**
* WordPress dependencies
*/
import {
activatePlugin,
createNewPost,
deactivatePlugin,
getAllBlocks,
getEditedPostContent,
insertBlock,
selectBlockByClientId,
setPostContent,
clickBlockToolbarButton,
} from '@wordpress/e2e-test-utils';
const alignLabels = {
none: 'None',
left: 'Align left',
center: 'Align center',
right: 'Align right',
wide: 'Wide width',
full: 'Full width',
};
/**
* Helper function to get the `labels` of align control. It actually evaluates the
* basic label of the button without the `info` text node if exists.
*
* @param {Object} options Options for the util function
* @param {boolean} [options.getActiveButtonLabels=false] Flag for returning the active buttons labels only.
* @return {string[]} The matched labels.
*/
const getAlignmentToolbarLabels = async ( {
getActiveButtonLabels = false,
} = {} ) => {
const selector = `.components-dropdown-menu__menu button${
getActiveButtonLabels ? '.is-active' : ''
} .components-menu-item__item`;
return page.evaluate( ( _selector ) => {
return (
Array.from( document.querySelectorAll( _selector ) )
/**
* We neede this for now because conditionally there could be two nodes
* with the same class(). This should be removed when the following
* issue is resolved.
*
* @see https://github.com/WordPress/gutenberg/issues/34838
*/
.filter( ( contentNode ) => ! contentNode.childElementCount )
.map( ( contentNode ) => {
return contentNode.innerText;
} )
);
}, selector );
};
const expectActiveButtonLabelToBe = async ( expected ) => {
await clickBlockToolbarButton( 'Align' );
const activeButtonLabels = await getAlignmentToolbarLabels( {
getActiveButtonLabels: true,
} );
expect( activeButtonLabels ).toHaveLength( 1 );
expect( activeButtonLabels[ 0 ] ).toEqual( expected );
};
const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => {
it( 'Shows the expected buttons on the alignment toolbar', async () => {
await insertBlock( blockName );
await clickBlockToolbarButton( 'Align' );
expect( await getAlignmentToolbarLabels() ).toEqual(
expect.arrayContaining( buttonLabels )
);
} );
};
const createAppliesNoneAlignmentByDefaultTest = ( blockName ) => {
it( 'applies none alignment by default', async () => {
await insertBlock( blockName );
await expectActiveButtonLabelToBe( alignLabels.none );
} );
};
const verifyMarkupIsValid = async ( htmlMarkup ) => {
await setPostContent( htmlMarkup );
const blocks = await getAllBlocks();
expect( blocks ).toHaveLength( 1 );
expect( blocks[ 0 ].isValid ).toBeTruthy();
};
const createCorrectlyAppliesAndRemovesAlignmentTest = (
blockName,
alignment
) => {
it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), '${ alignLabels[ alignment ] }')]`;
// Set the specified alignment.
await insertBlock( blockName );
await clickBlockToolbarButton( 'Align' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
// Verify the button of the specified alignment is pressed.
await expectActiveButtonLabelToBe( alignLabels[ alignment ] );
let htmlMarkup = await getEditedPostContent();
// Verify the markup of the selected alignment was generated.
expect( htmlMarkup ).toMatchSnapshot();
// Verify the markup can be correctly parsed.
await verifyMarkupIsValid( htmlMarkup );
await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
// Remove the alignment.
await clickBlockToolbarButton( 'Align' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
// Verify 'none' alignment button is in pressed state.
await expectActiveButtonLabelToBe( alignLabels.none );
// Verify alignment markup was removed from the block.
htmlMarkup = await getEditedPostContent();
expect( htmlMarkup ).toMatchSnapshot();
// verify the markup when no alignment is set is valid
await verifyMarkupIsValid( htmlMarkup );
await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
// Verify alignment `none` button is in pressed state after parsing the block.
await expectActiveButtonLabelToBe( alignLabels.none );
} );
};
describe( 'Align Hook Works As Expected', () => {
beforeAll( async () => {
await activatePlugin( 'gutenberg-test-align-hook' );
} );
beforeEach( async () => {
await createNewPost();
} );
afterAll( async () => {
await deactivatePlugin( 'gutenberg-test-align-hook' );
} );
describe( 'Block with no alignment set', () => {
const BLOCK_NAME = 'Test No Alignment Set';
it( 'Shows no alignment buttons on the alignment toolbar', async () => {
await insertBlock( BLOCK_NAME );
const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
'.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]';
const changeAlignmentButton = await page.$(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
expect( changeAlignmentButton ).toBe( null );
} );
it( 'Does not save any alignment related attribute or class', async () => {
await insertBlock( BLOCK_NAME );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
} );
describe( 'Block with align true', () => {
const BLOCK_NAME = 'Test Align True';
createShowsTheExpectedButtonsTest(
BLOCK_NAME,
Object.values( alignLabels )
);
createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'right' );
} );
describe( 'Block with align array', () => {
const BLOCK_NAME = 'Test Align Array';
createShowsTheExpectedButtonsTest( BLOCK_NAME, [
alignLabels.none,
alignLabels.left,
alignLabels.center,
] );
createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
} );
describe( 'Block with default align', () => {
const BLOCK_NAME = 'Test Default Align';
const SELECTED_ALIGNMENT_CONTROL_SELECTOR =
'//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")]/span[text()="Align right"]';
createShowsTheExpectedButtonsTest(
BLOCK_NAME,
Object.values( alignLabels )
);
it( 'Applies the selected alignment by default', async () => {
await insertBlock( BLOCK_NAME );
// Verify the correct alignment button is pressed.
await clickBlockToolbarButton( 'Align' );
const selectedAlignmentControls = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
expect( selectedAlignmentControls ).toHaveLength( 1 );
} );
it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => {
await insertBlock( BLOCK_NAME );
const markup = await getEditedPostContent();
expect( markup ).not.toContain( '"align":"right"' );
expect( markup ).toContain( 'alignright' );
} );
it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
await insertBlock( BLOCK_NAME );
// Remove the alignment.
await clickBlockToolbarButton( 'Align' );
const [ selectedAlignmentControl ] = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
await selectedAlignmentControl.click();
const markup = await getEditedPostContent();
expect( markup ).toContain( '"align":""' );
} );
createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
} );
} );