@wordpress/e2e-tests 2.5.14 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/LICENSE.md +1 -1
  3. package/config/flaky-tests-reporter.js +2 -1
  4. package/package.json +12 -11
  5. package/plugins/query-block.php +2 -2
  6. package/specs/editor/blocks/__snapshots__/heading.test.js.snap +2 -2
  7. package/specs/editor/blocks/__snapshots__/navigation.test.js.snap +29 -57
  8. package/specs/editor/blocks/__snapshots__/spacer.test.js.snap +1 -1
  9. package/specs/editor/blocks/classic.test.js +5 -2
  10. package/specs/editor/blocks/columns.test.js +1 -1
  11. package/specs/editor/blocks/cover.test.js +1 -1
  12. package/specs/editor/blocks/heading.test.js +15 -3
  13. package/specs/editor/blocks/image.test.js +1 -2
  14. package/specs/editor/blocks/navigation.test.js +311 -439
  15. package/specs/editor/blocks/preformatted.test.js +2 -1
  16. package/specs/editor/blocks/site-title.test.js +2 -31
  17. package/specs/editor/fixtures/menu-items-request-fixture.json +84 -0
  18. package/specs/editor/fixtures/menu-items-response-fixture.json +240 -144
  19. package/specs/editor/plugins/block-variations.test.js +1 -1
  20. package/specs/editor/plugins/custom-post-types.test.js +4 -3
  21. package/specs/editor/plugins/iframed-inline-styles.test.js +0 -6
  22. package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js +0 -4
  23. package/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap +38 -24
  24. package/specs/editor/various/adding-patterns.test.js +1 -1
  25. package/specs/editor/various/block-editor-keyboard-shortcuts.test.js +43 -3
  26. package/specs/editor/various/block-grouping.test.js +2 -18
  27. package/specs/editor/various/block-hierarchy-navigation.test.js +3 -3
  28. package/specs/editor/various/change-detection.test.js +5 -0
  29. package/specs/editor/various/editor-modes.test.js +7 -0
  30. package/specs/editor/various/font-size-picker.test.js +58 -18
  31. package/specs/editor/various/inserting-blocks.test.js +6 -2
  32. package/specs/editor/various/keyboard-navigable-blocks.test.js +6 -0
  33. package/specs/editor/various/list-view.test.js +2 -2
  34. package/specs/editor/various/navigable-toolbar.test.js +2 -2
  35. package/specs/editor/various/post-editor-template-mode.test.js +1 -1
  36. package/specs/editor/various/preview.test.js +67 -2
  37. package/specs/editor/various/reusable-blocks.test.js +53 -31
  38. package/specs/editor/various/undo.test.js +21 -0
  39. package/specs/editor/various/writing-flow.test.js +8 -4
  40. package/specs/performance/site-editor.test.js +1 -1
  41. package/specs/site-editor/document-settings.test.js +5 -5
  42. package/specs/site-editor/multi-entity-editing.test.js +2 -2
  43. package/specs/site-editor/multi-entity-saving.test.js +95 -57
  44. package/specs/site-editor/settings-sidebar.test.js +4 -4
  45. package/specs/site-editor/site-editor-export.test.js +1 -1
  46. package/specs/site-editor/site-editor-inserter.test.js +1 -1
  47. package/specs/site-editor/template-part.test.js +95 -79
  48. package/specs/site-editor/template-revert.test.js +13 -9
  49. package/specs/widgets/customizing-widgets.test.js +7 -23
  50. package/specs/widgets/editing-widgets.test.js +36 -12
@@ -14,7 +14,7 @@ import {
14
14
  pressKeyWithModifier,
15
15
  } from '@wordpress/e2e-test-utils';
16
16
 
17
- /** @typedef {import('puppeteer').Page} Page */
17
+ /** @typedef {import('puppeteer-core').Page} Page */
18
18
 
19
19
  /**
20
20
  * Given the Page instance for the editor, opens preview drodpdown, and
@@ -204,7 +204,7 @@ describe( 'Preview', () => {
204
204
  it( 'should not revert title during a preview right after a save draft', async () => {
205
205
  const editorPage = page;
206
206
 
207
- // Type aaaaa in the title filed.
207
+ // Type aaaaa in the title field.
208
208
  await editorPage.type( '.editor-post-title__input', 'aaaaa' );
209
209
  await editorPage.keyboard.press( 'Tab' );
210
210
 
@@ -248,6 +248,71 @@ describe( 'Preview', () => {
248
248
 
249
249
  await previewPage.close();
250
250
  } );
251
+
252
+ // Verify correct preview. See: https://github.com/WordPress/gutenberg/issues/33616
253
+ it( 'should display the correct preview when switching between published and draft statuses', async () => {
254
+ const editorPage = page;
255
+
256
+ // Type Lorem in the title field.
257
+ await editorPage.type( '[aria-label="Add title"]', 'Lorem' );
258
+
259
+ // Open the preview page.
260
+ const previewPage = await openPreviewPage( editorPage );
261
+ await previewPage.waitForSelector( '.entry-title' );
262
+
263
+ // Title in preview should match input.
264
+ let previewTitle = await previewPage.$eval(
265
+ '.entry-title',
266
+ ( node ) => node.textContent
267
+ );
268
+ expect( previewTitle ).toBe( 'Lorem' );
269
+
270
+ // Return to editor and publish post.
271
+ await editorPage.bringToFront();
272
+ await publishPost();
273
+
274
+ // Close the panel.
275
+ await page.waitForSelector( '.editor-post-publish-panel' );
276
+ await page.click( '.editor-post-publish-panel__header button' );
277
+
278
+ // Change the title and preview again.
279
+ await editorPage.type( '[aria-label="Add title"]', ' Ipsum' );
280
+ await editorPage.keyboard.press( 'Tab' );
281
+ await waitForPreviewDropdownOpen( editorPage );
282
+ await waitForPreviewNavigation( previewPage );
283
+
284
+ // Title in preview should match updated input.
285
+ previewTitle = await previewPage.$eval(
286
+ '.entry-title',
287
+ ( node ) => node.textContent
288
+ );
289
+
290
+ expect( previewTitle ).toBe( 'Lorem Ipsum' );
291
+
292
+ // Return to editor and switch to Draft.
293
+ await editorPage.bringToFront();
294
+ await editorPage.waitForSelector( '.editor-post-switch-to-draft' );
295
+ await editorPage.click( '.editor-post-switch-to-draft' );
296
+ await page.keyboard.press( 'Enter' );
297
+
298
+ // Change the title.
299
+ await editorPage.type( '[aria-label="Add title"]', 'Draft ' );
300
+ await editorPage.keyboard.press( 'Tab' );
301
+
302
+ // Open the preview page.
303
+ await waitForPreviewDropdownOpen( editorPage );
304
+ await waitForPreviewNavigation( previewPage );
305
+
306
+ // Title in preview should match updated input.
307
+ previewTitle = await previewPage.$eval(
308
+ '.entry-title',
309
+ ( node ) => node.textContent
310
+ );
311
+
312
+ expect( previewTitle ).toBe( 'Draft Lorem Ipsum' );
313
+
314
+ await previewPage.close();
315
+ } );
251
316
  } );
252
317
 
253
318
  describe( 'Preview with Custom Fields enabled', () => {
@@ -14,6 +14,8 @@ import {
14
14
  toggleGlobalBlockInserter,
15
15
  openDocumentSettingsSidebar,
16
16
  saveDraft,
17
+ createReusableBlock,
18
+ publishPost,
17
19
  } from '@wordpress/e2e-test-utils';
18
20
 
19
21
  const reusableBlockNameInputSelector =
@@ -22,11 +24,22 @@ const reusableBlockInspectorNameInputSelector =
22
24
  '.block-editor-block-inspector .components-text-control__input';
23
25
 
24
26
  const saveAll = async () => {
25
- await page.click( '.editor-post-publish-button__button.has-changes-dot' );
26
- await page.waitForSelector(
27
- 'button.editor-entities-saved-states__save-button'
27
+ const publishButtonSelector =
28
+ '.editor-post-publish-button__button.has-changes-dot';
29
+ // Wait for the Publish button to become enabled in case the editor is autosaving ATM:
30
+ const publishButton = await page.waitForSelector(
31
+ publishButtonSelector + '[aria-disabled="false"]'
28
32
  );
29
- await page.click( 'button.editor-entities-saved-states__save-button' );
33
+ await publishButton.click();
34
+
35
+ const saveButtonSelector =
36
+ 'button.editor-entities-saved-states__save-button';
37
+ const saveButton = await page.waitForSelector( saveButtonSelector );
38
+ await saveButton.click();
39
+ };
40
+
41
+ const saveAllButDontPublish = async () => {
42
+ await saveAll();
30
43
 
31
44
  // no need to publish the post.
32
45
  const cancelPublish = await page.waitForSelector(
@@ -44,32 +57,6 @@ const clearAllBlocks = async () => {
44
57
  } );
45
58
  };
46
59
 
47
- const createReusableBlock = async ( content, title ) => {
48
- // Insert a paragraph block
49
- await insertBlock( 'Paragraph' );
50
- await page.keyboard.type( content );
51
-
52
- await clickBlockToolbarButton( 'Options' );
53
- await clickMenuItem( 'Add to Reusable blocks' );
54
- const nameInput = await page.waitForSelector(
55
- reusableBlockNameInputSelector
56
- );
57
- await nameInput.click();
58
- await page.keyboard.type( title );
59
- await page.keyboard.press( 'Enter' );
60
-
61
- // Wait for creation to finish
62
- await page.waitForXPath(
63
- '//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
64
- );
65
-
66
- // Check that we have a reusable block on the page
67
- const block = await page.waitForSelector(
68
- '.block-editor-block-list__block[data-type="core/block"]'
69
- );
70
- expect( block ).not.toBeNull();
71
- };
72
-
73
60
  describe( 'Reusable blocks', () => {
74
61
  afterAll( async () => {
75
62
  await trashAllPosts( 'wp_block' );
@@ -106,7 +93,7 @@ describe( 'Reusable blocks', () => {
106
93
  await page.keyboard.type( 'Oh! ' );
107
94
 
108
95
  // Save the reusable block
109
- await saveAll();
96
+ await saveAllButDontPublish();
110
97
 
111
98
  // Check that its content is up to date
112
99
  const text = await page.$eval(
@@ -137,6 +124,41 @@ describe( 'Reusable blocks', () => {
137
124
  expect( paragraphContent ).toMatch( 'Oh! Hello there!' );
138
125
  } );
139
126
 
127
+ // Check for regressions of https://github.com/WordPress/gutenberg/issues/33072.
128
+ it( 'can be saved when modified inside of a published post', async () => {
129
+ await createReusableBlock(
130
+ 'Guten Berg!',
131
+ 'Alternative greeting block'
132
+ );
133
+
134
+ // Make sure the reusable block has loaded properly before attempting to publish the post.
135
+ await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
136
+
137
+ await publishPost();
138
+
139
+ // Close publish panel.
140
+ const closePublishPanelSelector =
141
+ '.editor-post-publish-panel__header button[aria-label="Close panel"]';
142
+ await page.waitForSelector( closePublishPanelSelector );
143
+ await page.click( closePublishPanelSelector );
144
+
145
+ await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
146
+ await page.focus( 'p[aria-label="Paragraph block"]' );
147
+
148
+ // Change the block's content
149
+ await page.keyboard.type( 'Einen ' );
150
+
151
+ // Save the reusable block and update the post
152
+ await saveAll();
153
+
154
+ // Check that its content is up to date
155
+ const paragraphContent = await page.$eval(
156
+ 'p[aria-label="Paragraph block"]',
157
+ ( element ) => element.innerText
158
+ );
159
+ expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
160
+ } );
161
+
140
162
  it( 'can be inserted after refresh', async () => {
141
163
  await createReusableBlock( 'Awesome Paragraph', 'Awesome block' );
142
164
 
@@ -420,4 +420,25 @@ describe( 'undo', () => {
420
420
  // Expect "1".
421
421
  expect( await getEditedPostContent() ).toMatchSnapshot();
422
422
  } );
423
+
424
+ it( 'should be able to undo and redo when transient changes have been made and we update/publish', async () => {
425
+ // Typing consecutive characters in a `Paragraph` block updates the same
426
+ // block attribute as in the previous action and results in transient edits
427
+ // and skipping `undo` history steps.
428
+ const text = 'tonis';
429
+ await clickBlockAppender();
430
+ await page.keyboard.type( text );
431
+ await publishPost();
432
+ await pressKeyWithModifier( 'primary', 'z' );
433
+ expect( await getEditedPostContent() ).toBe( '' );
434
+ await page.waitForSelector(
435
+ '.editor-history__redo[aria-disabled="false"]'
436
+ );
437
+ await page.click( '.editor-history__redo[aria-disabled="false"]' );
438
+ expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
439
+ "<!-- wp:paragraph -->
440
+ <p>tonis</p>
441
+ <!-- /wp:paragraph -->"
442
+ ` );
443
+ } );
423
444
  } );
@@ -45,9 +45,11 @@ const addParagraphsAndColumnsDemo = async () => {
45
45
  await page.keyboard.press( 'Enter' ); // Insert paragraph.
46
46
  await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
47
47
 
48
- // Arrow down from last of layouts exits nested context to default
49
- // appender of root level.
50
- await page.keyboard.press( 'ArrowDown' );
48
+ await page.keyboard.press( 'Escape' ); // Enter navigation mode
49
+ await page.keyboard.press( 'ArrowLeft' ); // move to the column block
50
+ await page.keyboard.press( 'ArrowLeft' ); // move to the columns block
51
+ await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected
52
+ await page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
51
53
  await page.keyboard.type( 'Second paragraph' );
52
54
  };
53
55
 
@@ -289,6 +291,8 @@ describe( 'Writing Flow', () => {
289
291
  // See: https://github.com/WordPress/gutenberg/issues/9626
290
292
 
291
293
  await insertBlock( 'Shortcode' );
294
+ await insertBlock( 'Paragraph' );
295
+ await await page.click( '.wp-block-shortcode' );
292
296
 
293
297
  // Should remain in title upon ArrowRight:
294
298
  await page.keyboard.press( 'ArrowRight' );
@@ -304,7 +308,7 @@ describe( 'Writing Flow', () => {
304
308
  );
305
309
  expect( isInShortcodeBlock ).toBe( true );
306
310
 
307
- // Should navigate into blocks list upon ArrowDown:
311
+ // Should navigate to the next block.
308
312
  await page.keyboard.press( 'ArrowDown' );
309
313
  const isInParagraphBlock = await page.evaluate(
310
314
  () => !! document.activeElement.closest( '.wp-block-paragraph' )
@@ -31,7 +31,7 @@ jest.setTimeout( 1000000 );
31
31
 
32
32
  describe( 'Site Editor Performance', () => {
33
33
  beforeAll( async () => {
34
- await activateTheme( 'tt1-blocks' );
34
+ await activateTheme( 'emptytheme' );
35
35
  await trashAllPosts( 'wp_template' );
36
36
  await trashAllPosts( 'wp_template', 'auto-draft' );
37
37
  await trashAllPosts( 'wp_template_part' );
@@ -26,7 +26,7 @@ async function getDocumentSettingsSecondaryTitle() {
26
26
 
27
27
  describe( 'Document Settings', () => {
28
28
  beforeAll( async () => {
29
- await activateTheme( 'tt1-blocks' );
29
+ await activateTheme( 'emptytheme' );
30
30
  await trashAllPosts( 'wp_template' );
31
31
  await trashAllPosts( 'wp_template_part' );
32
32
  } );
@@ -43,7 +43,7 @@ describe( 'Document Settings', () => {
43
43
  it( 'should display the selected templates name in the document header', async () => {
44
44
  // Navigate to a template
45
45
  await siteEditor.visit( {
46
- postId: 'tt1-blocks//index',
46
+ postId: 'emptytheme//index',
47
47
  postType: 'wp_template',
48
48
  } );
49
49
 
@@ -60,11 +60,11 @@ describe( 'Document Settings', () => {
60
60
  '.edit-post-header-toolbar__list-view-toggle'
61
61
  );
62
62
  const headerTemplatePartListViewButton = await page.waitForXPath(
63
- '//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
63
+ '//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
64
64
  );
65
65
  headerTemplatePartListViewButton.click();
66
66
  await page.click(
67
- 'button[aria-label="Close list view sidebar"]'
67
+ 'button[aria-label="Close List View Sidebar"]'
68
68
  );
69
69
 
70
70
  // Evaluate the document settings secondary title
@@ -79,7 +79,7 @@ describe( 'Document Settings', () => {
79
79
  it( "should display the selected template part's name in the document header", async () => {
80
80
  // Navigate to a template part
81
81
  await siteEditor.visit( {
82
- postId: 'tt1-blocks//header',
82
+ postId: 'emptytheme//header',
83
83
  postType: 'wp_template_part',
84
84
  } );
85
85
 
@@ -134,7 +134,7 @@ const removeErrorMocks = () => {
134
134
 
135
135
  describe( 'Multi-entity editor states', () => {
136
136
  beforeAll( async () => {
137
- await activateTheme( 'tt1-blocks' );
137
+ await activateTheme( 'emptytheme' );
138
138
  await trashAllPosts( 'wp_template' );
139
139
  await trashAllPosts( 'wp_template_part' );
140
140
  } );
@@ -152,7 +152,7 @@ describe( 'Multi-entity editor states', () => {
152
152
  // Skip reason: This should be rewritten to use other methods to switching to different templates.
153
153
  it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
154
154
  await siteEditor.visit( {
155
- postId: 'tt1-blocks//header',
155
+ postId: 'emptytheme//header',
156
156
  postType: 'wp_template_part',
157
157
  } );
158
158
  await page.waitForFunction( () =>
@@ -4,11 +4,14 @@
4
4
  import {
5
5
  createNewPost,
6
6
  disablePrePublishChecks,
7
+ getOption,
7
8
  insertBlock,
8
9
  publishPost,
10
+ setOption,
9
11
  trashAllPosts,
10
12
  activateTheme,
11
13
  clickButton,
14
+ createReusableBlock,
12
15
  } from '@wordpress/e2e-test-utils';
13
16
 
14
17
  /**
@@ -21,13 +24,9 @@ describe( 'Multi-entity save flow', () => {
21
24
  const checkedBoxSelector = '.components-checkbox-control__checked';
22
25
  const checkboxInputSelector = '.components-checkbox-control__input';
23
26
  const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
24
- const templatePartSelector = '*[data-type="core/template-part"]';
25
- const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
26
27
  const savePanelSelector = '.entities-saved-states__panel';
27
28
  const closePanelButtonSelector =
28
29
  '.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
29
- const createNewButtonSelector =
30
- '//button[contains(text(), "New template part")]';
31
30
 
32
31
  // Reusable assertions across Post/Site editors.
33
32
  const assertAllBoxesChecked = async () => {
@@ -44,14 +43,26 @@ describe( 'Multi-entity save flow', () => {
44
43
  }
45
44
  };
46
45
 
46
+ let originalSiteTitle, originalBlogDescription;
47
+
47
48
  beforeAll( async () => {
48
- await activateTheme( 'tt1-blocks' );
49
+ await activateTheme( 'emptytheme' );
49
50
  await trashAllPosts( 'wp_template' );
50
51
  await trashAllPosts( 'wp_template_part' );
52
+ await trashAllPosts( 'wp_block' );
53
+
54
+ // Get the current Site Title and Site Tagline, so that we can reset
55
+ // them back to the original values once the test suite has finished.
56
+ originalSiteTitle = await getOption( 'blogname' );
57
+ originalBlogDescription = await getOption( 'blogdescription' );
51
58
  } );
52
59
 
53
60
  afterAll( async () => {
54
61
  await activateTheme( 'twentytwentyone' );
62
+
63
+ // Reset the Site Title and Site Tagline back to their original values.
64
+ await setOption( 'blogname', originalSiteTitle );
65
+ await setOption( 'blogdescription', originalBlogDescription );
55
66
  } );
56
67
 
57
68
  describe( 'Post Editor', () => {
@@ -66,8 +77,6 @@ describe( 'Multi-entity save flow', () => {
66
77
  const saveA11ySelector =
67
78
  '.edit-post-layout__toggle-entities-saved-states-panel-button';
68
79
  const publishPanelSelector = '.editor-post-publish-panel';
69
- const confirmTitleButtonSelector =
70
- '.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
71
80
 
72
81
  // Reusable assertions inside Post editor.
73
82
  const assertMultiSaveEnabled = async () => {
@@ -84,9 +93,10 @@ describe( 'Multi-entity save flow', () => {
84
93
  expect( multiSaveButton ).toBeNull();
85
94
  };
86
95
 
87
- // Template parts can't be used in posts, so this test needs to be rebuilt using perhaps reusable blocks.
88
- it.skip( 'Save flow should work as expected.', async () => {
96
+ it( 'Save flow should work as expected.', async () => {
97
+ await createNewPost();
89
98
  // Edit the page some.
99
+ await page.waitForSelector( '.editor-post-title' );
90
100
  await page.click( '.editor-post-title' );
91
101
  await page.keyboard.type( 'Test Post...' );
92
102
  await page.keyboard.press( 'Enter' );
@@ -100,21 +110,11 @@ describe( 'Multi-entity save flow', () => {
100
110
  await assertExistance( publishPanelSelector, false );
101
111
  await assertExistance( savePanelSelector, false );
102
112
 
103
- // Add a template part and edit it.
104
- await insertBlock( 'Template Part' );
105
- const createNewButton = await page.waitForXPath(
106
- createNewButtonSelector
107
- );
108
- await createNewButton.click();
109
- const confirmTitleButton = await page.waitForSelector(
110
- confirmTitleButtonSelector
111
- );
112
- await confirmTitleButton.click();
113
-
114
- await page.waitForSelector( activatedTemplatePartSelector );
115
- await page.click( '.block-editor-button-block-appender' );
116
- await page.click( '.editor-block-list-item-paragraph' );
117
- await page.keyboard.type( 'some words...' );
113
+ // Add a reusable block and edit it.
114
+ await createReusableBlock( 'Hi!', 'Test' );
115
+ await page.waitForSelector( 'p[data-type="core/paragraph"]' );
116
+ await page.click( 'p[data-type="core/paragraph"]' );
117
+ await page.keyboard.type( 'Oh!' );
118
118
 
119
119
  // Should trigger multi-entity save button once template part edited.
120
120
  await assertMultiSaveEnabled();
@@ -165,6 +165,11 @@ describe( 'Multi-entity save flow', () => {
165
165
  '//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
166
166
  );
167
167
 
168
+ // Unselect the blocks to avoid clicking the block toolbar.
169
+ await page.evaluate( () => {
170
+ wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
171
+ } );
172
+
168
173
  // Update the post.
169
174
  await page.click( '.editor-post-title' );
170
175
  await page.keyboard.type( '...more title!' );
@@ -178,13 +183,11 @@ describe( 'Multi-entity save flow', () => {
178
183
  await assertMultiSaveDisabled();
179
184
  await assertExistance( saveA11ySelector, false );
180
185
 
181
- // Update template part.
182
- await page.click( templatePartSelector );
183
- await page.click(
184
- `${ templatePartSelector } .wp-block[data-type="core/paragraph"]`
185
- );
186
- await page.keyboard.type( '...some more words...' );
187
- await page.keyboard.press( 'Enter' );
186
+ // Update reusable block again.
187
+ await page.click( 'p[data-type="core/paragraph"]' );
188
+ // We need to click again due to the clickthrough overlays in reusable blocks.
189
+ await page.click( 'p[data-type="core/paragraph"]' );
190
+ await page.keyboard.type( 'R!' );
188
191
 
189
192
  // Multi-entity saving should be enabled.
190
193
  await assertMultiSaveEnabled();
@@ -197,7 +200,9 @@ describe( 'Multi-entity save flow', () => {
197
200
 
198
201
  await insertBlock( 'Site Title' );
199
202
  // Ensure title is retrieved before typing.
200
- await page.waitForXPath( '//a[contains(text(), "gutenberg")]' );
203
+ await page.waitForXPath(
204
+ `//a[contains(text(), "${ originalSiteTitle }")]`
205
+ );
201
206
  const editableSiteTitleSelector =
202
207
  '.wp-block-site-title a[contenteditable="true"]';
203
208
  await page.waitForSelector( editableSiteTitleSelector );
@@ -223,23 +228,16 @@ describe( 'Multi-entity save flow', () => {
223
228
  await checkboxInputs[ 1 ].click();
224
229
  await page.click( entitiesSaveSelector );
225
230
 
231
+ // Wait for the snackbar notice that the post has been published.
232
+ await page.waitForSelector( '.components-snackbar' );
233
+
226
234
  await clickButton( 'Update…' );
227
235
  await page.waitForSelector( savePanelSelector );
236
+
237
+ await page.waitForSelector( checkboxInputSelector );
228
238
  checkboxInputs = await page.$$( checkboxInputSelector );
229
- expect( checkboxInputs ).toHaveLength( 1 );
230
239
 
231
- // Reset site entity to default value to not affect other tests.
232
- await page.evaluate( () => {
233
- wp.data
234
- .dispatch( 'core' )
235
- .editEntityRecord( 'root', 'site', undefined, {
236
- title: 'gutenberg',
237
- description: 'Just another WordPress site',
238
- } );
239
- wp.data
240
- .dispatch( 'core' )
241
- .saveEditedEntityRecord( 'root', 'site', undefined );
242
- } );
240
+ expect( checkboxInputs ).toHaveLength( 1 );
243
241
  } );
244
242
  } );
245
243
 
@@ -250,10 +248,23 @@ describe( 'Multi-entity save flow', () => {
250
248
  const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
251
249
  const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
252
250
 
251
+ const saveAllChanges = async () => {
252
+ // Clicking button should open panel with boxes checked.
253
+ await page.click( activeSaveSiteSelector );
254
+ await page.waitForSelector( savePanelSelector );
255
+ await assertAllBoxesChecked();
256
+
257
+ // Save a11y button should not be present with save panel open.
258
+ await assertExistance( saveA11ySelector, false );
259
+
260
+ // Saving should result in items being saved.
261
+ await page.click( entitiesSaveSelector );
262
+ };
263
+
253
264
  it( 'Save flow should work as expected', async () => {
254
265
  // Navigate to site editor.
255
266
  await siteEditor.visit( {
256
- postId: 'tt1-blocks//index',
267
+ postId: 'emptytheme//index',
257
268
  postType: 'wp_template',
258
269
  } );
259
270
  await siteEditor.disableWelcomeGuide();
@@ -261,10 +272,10 @@ describe( 'Multi-entity save flow', () => {
261
272
  // Select the header template part via list view.
262
273
  await page.click( '.edit-site-header-toolbar__list-view-toggle' );
263
274
  const headerTemplatePartListViewButton = await page.waitForXPath(
264
- '//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
275
+ '//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
265
276
  );
266
277
  headerTemplatePartListViewButton.click();
267
- await page.click( 'button[aria-label="Close list view sidebar"]' );
278
+ await page.click( 'button[aria-label="Close List View Sidebar"]' );
268
279
 
269
280
  // Insert something to dirty the editor.
270
281
  await insertBlock( 'Paragraph' );
@@ -279,20 +290,47 @@ describe( 'Multi-entity save flow', () => {
279
290
  // Save a11y button should be present.
280
291
  await assertExistance( saveA11ySelector, true );
281
292
 
282
- // Clicking button should open panel with boxes checked.
283
- await page.click( activeSaveSiteSelector );
284
- await page.waitForSelector( savePanelSelector );
285
- await assertAllBoxesChecked();
286
-
287
- // Save a11y button should not be present with save panel open.
288
- await assertExistance( saveA11ySelector, false );
293
+ // Save all changes.
294
+ await saveAllChanges();
289
295
 
290
- // Saving should result in items being saved.
291
- await page.click( entitiesSaveSelector );
292
296
  const disabledButton = await page.waitForSelector(
293
297
  disabledSaveSiteSelector
294
298
  );
295
299
  expect( disabledButton ).not.toBeNull();
296
300
  } );
301
+
302
+ it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
303
+ // Navigate to site editor.
304
+ await siteEditor.visit( {
305
+ postId: 'emptytheme//index',
306
+ postType: 'wp_template',
307
+ } );
308
+ await siteEditor.disableWelcomeGuide();
309
+
310
+ // Insert a paragraph at the bottom.
311
+ await insertBlock( 'Paragraph' );
312
+
313
+ // Open the block settings.
314
+ await page.click( 'button[aria-label="Settings"]' );
315
+
316
+ // Change the font size
317
+ await page.click(
318
+ '.components-font-size-picker__controls button[aria-label="Small"]'
319
+ );
320
+
321
+ // Save all changes.
322
+ await saveAllChanges();
323
+
324
+ // Change the font size
325
+ await page.click(
326
+ '.components-font-size-picker__controls button[aria-label="Medium"]'
327
+ );
328
+
329
+ // Assert that the save button has been re-enabled.
330
+ const saveButton = await page.waitForSelector(
331
+ activeSaveSiteSelector
332
+ );
333
+ expect( saveButton ).not.toBeNull();
334
+ } );
297
335
  } );
298
336
  } );
@@ -42,7 +42,7 @@ async function getTemplateCard() {
42
42
 
43
43
  describe( 'Settings sidebar', () => {
44
44
  beforeAll( async () => {
45
- await activateTheme( 'tt1-blocks' );
45
+ await activateTheme( 'emptytheme' );
46
46
  await trashAllPosts( 'wp_template' );
47
47
  await trashAllPosts( 'wp_template_part' );
48
48
  } );
@@ -70,7 +70,7 @@ describe( 'Settings sidebar', () => {
70
70
 
71
71
  const templateCardBeforeNavigation = await getTemplateCard();
72
72
  await siteEditor.visit( {
73
- postId: 'tt1-blocks//404',
73
+ postId: 'emptytheme//singular',
74
74
  postType: 'wp_template',
75
75
  } );
76
76
  const templateCardAfterNavigation = await getTemplateCard();
@@ -80,8 +80,8 @@ describe( 'Settings sidebar', () => {
80
80
  description: 'Displays posts.',
81
81
  } );
82
82
  expect( templateCardAfterNavigation ).toMatchObject( {
83
- title: '404',
84
- description: 'Displays when no content is found.',
83
+ title: 'Singular',
84
+ description: 'Displays a single post or page.',
85
85
  } );
86
86
  } );
87
87
  } );
@@ -30,7 +30,7 @@ async function waitForFileExists( filePath, timeout = 10000 ) {
30
30
 
31
31
  describe( 'Site Editor Templates Export', () => {
32
32
  beforeAll( async () => {
33
- await activateTheme( 'tt1-blocks' );
33
+ await activateTheme( 'emptytheme' );
34
34
  await trashAllPosts( 'wp_template' );
35
35
  await trashAllPosts( 'wp_template_part' );
36
36
  } );
@@ -10,7 +10,7 @@ import { siteEditor } from './utils';
10
10
 
11
11
  describe( 'Site Editor Inserter', () => {
12
12
  beforeAll( async () => {
13
- await activateTheme( 'tt1-blocks' );
13
+ await activateTheme( 'emptytheme' );
14
14
  await trashAllPosts( 'wp_template' );
15
15
  await trashAllPosts( 'wp_template_part' );
16
16
  } );