@wordpress/e2e-tests 3.0.7 → 3.0.10-next.a55ed9455a.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 (74) hide show
  1. package/config/setup-performance-test.js +1 -1
  2. package/config/setup-test-framework.js +1 -1
  3. package/package.json +7 -7
  4. package/specs/editor/blocks/__snapshots__/heading.test.js.snap +8 -8
  5. package/specs/editor/blocks/__snapshots__/navigation.test.js.snap +16 -16
  6. package/specs/editor/blocks/__snapshots__/quote.test.js.snap +10 -10
  7. package/specs/editor/blocks/classic.test.js +2 -2
  8. package/specs/editor/blocks/cover.test.js +17 -17
  9. package/specs/editor/blocks/image.test.js +4 -3
  10. package/specs/editor/blocks/list.test.js +1 -1
  11. package/specs/editor/blocks/navigation.test.js +392 -65
  12. package/specs/editor/blocks/table.test.js +1 -1
  13. package/specs/editor/plugins/align-hook.test.js +10 -10
  14. package/specs/editor/plugins/block-context.test.js +1 -1
  15. package/specs/editor/plugins/block-directory-add.test.js +14 -14
  16. package/specs/editor/plugins/custom-post-types.test.js +1 -1
  17. package/specs/editor/plugins/custom-taxonomies.test.js +3 -3
  18. package/specs/editor/plugins/meta-attribute-block.test.js +1 -1
  19. package/specs/editor/plugins/meta-boxes.test.js +3 -3
  20. package/specs/editor/plugins/templates.test.js +1 -1
  21. package/specs/editor/plugins/wp-editor-meta-box.test.js +1 -1
  22. package/specs/editor/various/__snapshots__/block-grouping.test.js.snap +4 -4
  23. package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +2 -2
  24. package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +3 -3
  25. package/specs/editor/various/autosave.test.js +19 -19
  26. package/specs/editor/various/block-deletion.test.js +5 -5
  27. package/specs/editor/various/block-grouping.test.js +29 -12
  28. package/specs/editor/various/block-hierarchy-navigation.test.js +5 -5
  29. package/specs/editor/various/change-detection.test.js +3 -3
  30. package/specs/editor/various/compatibility-classic-editor.test.js +1 -1
  31. package/specs/editor/various/copy-cut-paste-whole-blocks.test.js +7 -7
  32. package/specs/editor/various/datepicker.test.js +1 -1
  33. package/specs/editor/various/duplicating-blocks.test.js +3 -3
  34. package/specs/editor/various/editor-modes.test.js +5 -5
  35. package/specs/editor/various/inserting-blocks.test.js +6 -6
  36. package/specs/editor/various/invalid-block.test.js +4 -4
  37. package/specs/editor/various/is-typing.test.js +8 -8
  38. package/specs/editor/various/keyboard-navigable-blocks.test.js +2 -2
  39. package/specs/editor/various/links.test.js +90 -90
  40. package/specs/editor/various/list-view.test.js +142 -1
  41. package/specs/editor/various/manage-reusable-blocks.test.js +5 -5
  42. package/specs/editor/various/multi-block-selection.test.js +86 -2
  43. package/specs/editor/various/navigable-toolbar.test.js +1 -1
  44. package/specs/editor/various/new-post-default-content.test.js +2 -2
  45. package/specs/editor/various/new-post.test.js +1 -1
  46. package/specs/editor/various/nux.test.js +11 -11
  47. package/specs/editor/various/popovers.test.js +3 -3
  48. package/specs/editor/various/post-editor-template-mode.test.js +189 -11
  49. package/specs/editor/various/post-visibility.test.js +1 -1
  50. package/specs/editor/various/preferences.test.js +1 -1
  51. package/specs/editor/various/preview.test.js +8 -4
  52. package/specs/editor/various/publish-button.test.js +2 -2
  53. package/specs/editor/various/publishing.test.js +50 -1
  54. package/specs/editor/various/reusable-blocks.test.js +31 -31
  55. package/specs/editor/various/rich-text.test.js +1 -1
  56. package/specs/editor/various/splitting-merging.test.js +6 -6
  57. package/specs/editor/various/style-variation.test.js +2 -2
  58. package/specs/editor/various/switch-to-draft.test.js +256 -0
  59. package/specs/editor/various/taxonomies.test.js +1 -1
  60. package/specs/editor/various/toolbar-roving-tabindex.test.js +1 -1
  61. package/specs/editor/various/writing-flow.test.js +85 -20
  62. package/specs/experiments/navigation-editor.test.js +168 -3
  63. package/specs/performance/post-editor.test.js +7 -7
  64. package/specs/performance/site-editor.test.js +6 -7
  65. package/specs/site-editor/document-settings.test.js +8 -8
  66. package/specs/site-editor/multi-entity-editing.test.js +6 -6
  67. package/specs/site-editor/multi-entity-saving.test.js +5 -4
  68. package/specs/site-editor/settings-sidebar.test.js +5 -5
  69. package/specs/site-editor/site-editor-export.test.js +3 -3
  70. package/specs/site-editor/site-editor-inserter.test.js +3 -3
  71. package/specs/site-editor/template-part.test.js +27 -26
  72. package/specs/site-editor/template-revert.test.js +12 -22
  73. package/specs/widgets/customizing-widgets.test.js +14 -9
  74. package/specs/widgets/editing-widgets.test.js +8 -7
@@ -28,14 +28,14 @@ describe( 'Managing reusable blocks', () => {
28
28
  it( 'Should import reusable blocks', async () => {
29
29
  const originalEntries = await getNumberOfEntries();
30
30
 
31
- // Import Reusable block
31
+ // Import Reusable block.
32
32
  await page.waitForSelector( '.list-reusable-blocks__container' );
33
33
  const importButton = await page.$(
34
34
  '.list-reusable-blocks__container button'
35
35
  );
36
36
  await importButton.click();
37
37
 
38
- // Select the file to upload
38
+ // Select the file to upload.
39
39
  const testReusableBlockFile = path.join(
40
40
  __dirname,
41
41
  '..',
@@ -47,13 +47,13 @@ describe( 'Managing reusable blocks', () => {
47
47
  const input = await page.$( '.list-reusable-blocks-import-form input' );
48
48
  await input.uploadFile( testReusableBlockFile );
49
49
 
50
- // Submit the form
50
+ // Submit the form.
51
51
  const button = await page.$(
52
52
  '.list-reusable-blocks-import-form__button'
53
53
  );
54
54
  await button.click();
55
55
 
56
- // Wait for the success notice
56
+ // Wait for the success notice.
57
57
  await page.waitForSelector( '.notice-success' );
58
58
  const noticeContent = await page.$eval(
59
59
  '.notice-success',
@@ -63,7 +63,7 @@ describe( 'Managing reusable blocks', () => {
63
63
  'Reusable block imported successfully!'
64
64
  );
65
65
 
66
- // Refresh the page
66
+ // Refresh the page.
67
67
  await visitAdminPage( 'edit.php', 'post_type=wp_block' );
68
68
 
69
69
  const expectedEntries = originalEntries + 1;
@@ -10,6 +10,7 @@ import {
10
10
  clickBlockToolbarButton,
11
11
  clickButton,
12
12
  clickMenuItem,
13
+ openListView,
13
14
  saveDraft,
14
15
  transformBlockTo,
15
16
  } from '@wordpress/e2e-test-utils';
@@ -693,12 +694,12 @@ describe( 'Multi-block selection', () => {
693
694
  // Select a paragraph.
694
695
  await page.keyboard.type( '1' );
695
696
  await page.keyboard.press( 'Enter' );
696
- // Add a list
697
+ // Add a list.
697
698
  await page.keyboard.type( '/list' );
698
699
  await page.keyboard.press( 'Enter' );
699
700
  await page.keyboard.type( '1' );
700
701
 
701
- // Confirm correct setup: a paragraph and a list
702
+ // Confirm correct setup: a paragraph and a list.
702
703
  expect( await getEditedPostContent() ).toMatchSnapshot();
703
704
 
704
705
  await pressKeyWithModifier( 'primary', 'a' );
@@ -747,4 +748,87 @@ describe( 'Multi-block selection', () => {
747
748
  } );
748
749
  expect( selectedText ).toEqual( 'Post title' );
749
750
  } );
751
+
752
+ it( 'should multi-select in the ListView component with shift + click', async () => {
753
+ // Create four blocks.
754
+ await clickBlockAppender();
755
+ await page.keyboard.type( '1' );
756
+ await page.keyboard.press( 'Enter' );
757
+ await page.keyboard.type( '2' );
758
+ await page.keyboard.press( 'Enter' );
759
+ await page.keyboard.type( '3' );
760
+ await page.keyboard.press( 'Enter' );
761
+ await page.keyboard.type( '4' );
762
+
763
+ // Open up the list view, and get a reference to each of the list items.
764
+ await openListView();
765
+ const navButtons = await page.$$(
766
+ '.block-editor-list-view-block-select-button'
767
+ );
768
+
769
+ // Clicking on the second list item should result in the second block being selected.
770
+ await navButtons[ 1 ].click();
771
+ expect( await getSelectedFlatIndices() ).toEqual( 2 );
772
+
773
+ // Shift clicking the fourth list item should result in blocks 2 through 4 being selected.
774
+ await page.keyboard.down( 'Shift' );
775
+ await navButtons[ 3 ].click();
776
+ expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
777
+
778
+ // With the shift key still held down, clicking the first block should result in
779
+ // the first two blocks being selected.
780
+ await navButtons[ 0 ].click();
781
+ expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
782
+
783
+ // With the shift key up, clicking the fourth block should result in only that block
784
+ // being selected.
785
+ await page.keyboard.up( 'Shift' );
786
+ await navButtons[ 3 ].click();
787
+ expect( await getSelectedFlatIndices() ).toEqual( 4 );
788
+ } );
789
+
790
+ it( 'should multi-select in the ListView component with shift + up and down keys', async () => {
791
+ // Create four blocks.
792
+ await clickBlockAppender();
793
+ await page.keyboard.type( '1' );
794
+ await page.keyboard.press( 'Enter' );
795
+ await page.keyboard.type( '2' );
796
+ await page.keyboard.press( 'Enter' );
797
+ await page.keyboard.type( '3' );
798
+ await page.keyboard.press( 'Enter' );
799
+ await page.keyboard.type( '4' );
800
+
801
+ // Open up the list view. The fourth block button will be focused.
802
+ await openListView();
803
+
804
+ // Press Up twice to focus over the second block.
805
+ await pressKeyTimes( 'ArrowUp', 2 );
806
+
807
+ // Shift + press Down to select the 2nd and 3rd blocks.
808
+ await page.keyboard.down( 'Shift' );
809
+ await page.keyboard.press( 'ArrowDown' );
810
+ expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
811
+
812
+ // Press Down once more to also select the 4th block.
813
+ await page.keyboard.press( 'ArrowDown' );
814
+ expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
815
+
816
+ // Press Up three times to adjust the selection to only include the first two blocks.
817
+ await pressKeyTimes( 'ArrowUp', 3 );
818
+ expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
819
+
820
+ // Raise the shift key
821
+ await page.keyboard.up( 'Shift' );
822
+
823
+ // Navigate to the bottom of the list of blocks.
824
+ await pressKeyTimes( 'ArrowDown', 3 );
825
+
826
+ // Shift + press UP to select the 3rd and 4th blocks.
827
+ // This tests that shift selecting blocks by keyboard that are not adjacent
828
+ // to an existing selection resets the selection.
829
+ await page.keyboard.down( 'Shift' );
830
+ await page.keyboard.press( 'ArrowUp' );
831
+ await page.keyboard.up( 'Shift' );
832
+ expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
833
+ } );
750
834
  } );
@@ -38,7 +38,7 @@ describe.each( [
38
38
  // until starting to type within it.
39
39
  await page.keyboard.type( 'Example' );
40
40
 
41
- // Upward
41
+ // Upward.
42
42
  await pressKeyWithModifier( 'alt', 'F10' );
43
43
  expect( await isInBlockToolbar() ).toBe( true );
44
44
  } );
@@ -24,7 +24,7 @@ describe( 'new editor filtered state', () => {
24
24
  } );
25
25
 
26
26
  it( 'should respect default content', async () => {
27
- // get the values that should have their defaults changed.
27
+ // Get the values that should have their defaults changed.
28
28
  const title = await page.$eval(
29
29
  '.editor-post-title__input',
30
30
  ( element ) => element.innerHTML
@@ -44,7 +44,7 @@ describe( 'new editor filtered state', () => {
44
44
  ( element ) => element.innerHTML
45
45
  );
46
46
 
47
- // assert they match what the plugin set.
47
+ // Assert they match what the plugin set.
48
48
  expect( title ).toBe( 'My default title' );
49
49
  expect( content ).toBe( 'My default content' );
50
50
  expect( excerpt ).toBe( 'My default excerpt' );
@@ -27,7 +27,7 @@ describe( 'new editor state', () => {
27
27
  // Should display the blank title.
28
28
  const title = await page.$( '[aria-label="Add title"]' );
29
29
  expect( title ).not.toBeNull();
30
- // Trim padding non-breaking space
30
+ // Trim padding non-breaking space.
31
31
  expect(
32
32
  await title.evaluate( ( el ) => el.textContent.trim() )
33
33
  ).toBeFalsy();
@@ -7,7 +7,7 @@ describe( 'New User Experience (NUX)', () => {
7
7
  it( 'should show the guide to first-time users', async () => {
8
8
  let welcomeGuideText, welcomeGuide;
9
9
 
10
- // Create a new post as a first-time user
10
+ // Create a new post as a first-time user.
11
11
  await createNewPost( { showWelcomeGuide: true } );
12
12
 
13
13
  // Guide should be on page 1 of 4
@@ -17,7 +17,7 @@ describe( 'New User Experience (NUX)', () => {
17
17
  );
18
18
  expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
19
19
 
20
- // Click on the 'Next' button
20
+ // Click on the 'Next' button.
21
21
  const [ nextButton ] = await page.$x(
22
22
  '//button[contains(text(), "Next")]'
23
23
  );
@@ -30,7 +30,7 @@ describe( 'New User Experience (NUX)', () => {
30
30
  );
31
31
  expect( welcomeGuideText ).toContain( 'Make each block your own' );
32
32
 
33
- // Click on the 'Previous' button
33
+ // Click on the 'Previous' button.
34
34
  const [ previousButton ] = await page.$x(
35
35
  '//button[contains(text(), "Previous")]'
36
36
  );
@@ -43,7 +43,7 @@ describe( 'New User Experience (NUX)', () => {
43
43
  );
44
44
  expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
45
45
 
46
- // Press the button for Page 2
46
+ // Press the button for Page 2.
47
47
  await page.click( 'button[aria-label="Page 2 of 4"]' );
48
48
  await page.waitForXPath(
49
49
  '//h1[contains(text(), "Make each block your own")]'
@@ -52,20 +52,20 @@ describe( 'New User Experience (NUX)', () => {
52
52
  // eslint-disable-next-line no-restricted-syntax
53
53
  await page.waitForTimeout( 500 );
54
54
 
55
- // Press the right arrow key for Page 3
55
+ // Press the right arrow key for Page 3.
56
56
  await page.keyboard.press( 'ArrowRight' );
57
57
  await page.waitForXPath(
58
58
  '//h1[contains(text(), "Get to know the block library")]'
59
59
  );
60
60
 
61
- // Press the right arrow key for Page 4
61
+ // Press the right arrow key for Page 4.
62
62
  await page.keyboard.press( 'ArrowRight' );
63
63
  await page.waitForXPath(
64
64
  '//h1[contains(text(), "Learn how to use the block editor")]'
65
65
  );
66
66
 
67
67
  // Click on the *visible* 'Get started' button. There are two in the DOM
68
- // but only one is shown depending on viewport size
68
+ // but only one is shown depending on viewport size.
69
69
  let getStartedButton;
70
70
  for ( const buttonHandle of await page.$x(
71
71
  '//button[contains(text(), "Get started")]'
@@ -85,7 +85,7 @@ describe( 'New User Experience (NUX)', () => {
85
85
  welcomeGuide = await page.$( '.edit-post-welcome-guide' );
86
86
  expect( welcomeGuide ).toBeNull();
87
87
 
88
- // Reload the editor
88
+ // Reload the editor.
89
89
  await page.reload();
90
90
  await page.waitForSelector( '.edit-post-layout' );
91
91
 
@@ -97,7 +97,7 @@ describe( 'New User Experience (NUX)', () => {
97
97
  it( 'should not show the welcome guide again if it is dismissed', async () => {
98
98
  let welcomeGuide;
99
99
 
100
- // Create a new post as a first-time user
100
+ // Create a new post as a first-time user.
101
101
  await createNewPost( { showWelcomeGuide: true } );
102
102
 
103
103
  // Guide should be open
@@ -107,7 +107,7 @@ describe( 'New User Experience (NUX)', () => {
107
107
  // Close the guide
108
108
  await page.click( 'button[aria-label="Close dialog"]' );
109
109
 
110
- // Reload the editor
110
+ // Reload the editor.
111
111
  await page.reload();
112
112
  await page.waitForSelector( '.edit-post-layout' );
113
113
 
@@ -119,7 +119,7 @@ describe( 'New User Experience (NUX)', () => {
119
119
  it( 'should show the welcome guide if it is manually opened', async () => {
120
120
  let welcomeGuide;
121
121
 
122
- // Create a new post as a returning user
122
+ // Create a new post as a returning user.
123
123
  await createNewPost();
124
124
 
125
125
  // Guide should be closed
@@ -11,16 +11,16 @@ describe( 'popovers', () => {
11
11
  describe( 'dropdown', () => {
12
12
  it( 'toggles via click', async () => {
13
13
  const isMoreMenuOpen = async () =>
14
- !! ( await page.$( '.edit-post-more-menu__content' ) );
14
+ !! ( await page.$( '.interface-more-menu-dropdown__content' ) );
15
15
 
16
16
  expect( await isMoreMenuOpen() ).toBe( false );
17
17
 
18
18
  // Toggle opened.
19
- await page.click( '.edit-post-more-menu > button' );
19
+ await page.click( '.interface-more-menu-dropdown > button' );
20
20
  expect( await isMoreMenuOpen() ).toBe( true );
21
21
 
22
22
  // Toggle closed.
23
- await page.click( '.edit-post-more-menu > button' );
23
+ await page.click( '.interface-more-menu-dropdown > button' );
24
24
  expect( await isMoreMenuOpen() ).toBe( false );
25
25
  } );
26
26
  } );
@@ -6,11 +6,12 @@ import {
6
6
  createNewPost,
7
7
  insertBlock,
8
8
  saveDraft,
9
- trashAllPosts,
10
9
  openPreviewPage,
11
10
  openDocumentSettingsSidebar,
12
11
  activatePlugin,
13
12
  deactivatePlugin,
13
+ deleteAllTemplates,
14
+ setBrowserViewport,
14
15
  } from '@wordpress/e2e-test-utils';
15
16
 
16
17
  const openSidebarPanelWithTitle = async ( title ) => {
@@ -56,7 +57,7 @@ const switchToTemplateMode = async () => {
56
57
 
57
58
  // Check that we switched properly to edit mode.
58
59
  await page.waitForXPath(
59
- '//*[contains(@class, "components-snackbar")]/*[text()="Editing template. Changes made here affect all posts and pages that use the template."]'
60
+ '//*[text()="Editing template. Changes made here affect all posts and pages that use the template."]'
60
61
  );
61
62
  const title = await page.$eval(
62
63
  '.edit-post-template-top-area',
@@ -92,8 +93,8 @@ const createNewTemplate = async ( templateName ) => {
92
93
  describe( 'Post Editor Template mode', () => {
93
94
  beforeAll( async () => {
94
95
  await activatePlugin( 'gutenberg-test-block-templates' );
95
- await trashAllPosts( 'wp_template' );
96
- await trashAllPosts( 'wp_template_part' );
96
+ await deleteAllTemplates( 'wp_template' );
97
+ await deleteAllTemplates( 'wp_template_part' );
97
98
  } );
98
99
 
99
100
  afterAll( async () => {
@@ -119,16 +120,15 @@ describe( 'Post Editor Template mode', () => {
119
120
  // there's a template resolution bug forcing us to do so.
120
121
  await saveDraft();
121
122
  await page.reload();
122
-
123
123
  await switchToTemplateMode();
124
124
 
125
- // Edit the template
125
+ // Edit the template.
126
126
  await insertBlock( 'Paragraph' );
127
127
  await page.keyboard.type(
128
128
  'Just a random paragraph added to the template'
129
129
  );
130
130
 
131
- // Save changes
131
+ // Save changes.
132
132
  const publishButton = await page.waitForXPath(
133
133
  `//button[contains(text(), 'Publish')]`
134
134
  );
@@ -138,7 +138,7 @@ describe( 'Post Editor Template mode', () => {
138
138
  );
139
139
  await saveButton.click();
140
140
 
141
- // Preview changes
141
+ // Preview changes.
142
142
  const previewPage = await openPreviewPage();
143
143
  await previewPage.waitForXPath(
144
144
  '//p[contains(text(), "Just a random paragraph added to the template")]'
@@ -166,13 +166,13 @@ describe( 'Post Editor Template mode', () => {
166
166
 
167
167
  await createNewTemplate( 'Blank Template' );
168
168
 
169
- // Edit the template
169
+ // Edit the template.
170
170
  await insertBlock( 'Paragraph' );
171
171
  await page.keyboard.type(
172
172
  'Just a random paragraph added to the template'
173
173
  );
174
174
 
175
- // Save changes
175
+ // Save changes.
176
176
  const publishButton = await page.waitForXPath(
177
177
  `//button[contains(text(), 'Publish')]`
178
178
  );
@@ -187,7 +187,7 @@ describe( 'Post Editor Template mode', () => {
187
187
  );
188
188
  await cancelButton.click();
189
189
 
190
- // Preview changes
190
+ // Preview changes.
191
191
  const previewPage = await openPreviewPage();
192
192
  await previewPage.waitForSelector( '.wp-site-blocks' );
193
193
  const content = await previewPage.evaluate(
@@ -197,3 +197,181 @@ describe( 'Post Editor Template mode', () => {
197
197
  expect( content ).toMatchSnapshot();
198
198
  } );
199
199
  } );
200
+
201
+ describe( 'Delete Post Template Confirmation Dialog', () => {
202
+ beforeAll( async () => {
203
+ await activatePlugin( 'gutenberg-test-block-templates' );
204
+ await deleteAllTemplates( 'wp_template' );
205
+ await deleteAllTemplates( 'wp_template_part' );
206
+ await activateTheme( 'twentytwentyone' );
207
+ await createNewPost();
208
+ // Create a random post.
209
+ await page.type( '.editor-post-title__input', 'Just an FSE Post' );
210
+ await page.keyboard.press( 'Enter' );
211
+ await page.keyboard.type( 'Hello World' );
212
+
213
+ // Save the post
214
+ // Saving shouldn't be necessary but unfortunately,
215
+ // there's a template resolution bug forcing us to do so.
216
+ await saveDraft();
217
+ await page.reload();
218
+ // Unselect the blocks.
219
+ await page.evaluate( () => {
220
+ wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
221
+ } );
222
+ } );
223
+
224
+ afterAll( async () => {
225
+ await activateTheme( 'twentytwentyone' );
226
+ await deactivatePlugin( 'gutenberg-test-block-templates' );
227
+ } );
228
+
229
+ [ 'large', 'small' ].forEach( ( viewport ) => {
230
+ it( `should retain template if deletion is canceled when the viewport is ${ viewport }`, async () => {
231
+ await setBrowserViewport( viewport );
232
+
233
+ const isWelcomeGuideActive = await page.evaluate(
234
+ () =>
235
+ !! wp.data
236
+ .select( 'core/preferences' )
237
+ .get( 'core/edit-post', 'welcomeGuide' )
238
+ );
239
+ if ( isWelcomeGuideActive === true ) {
240
+ await page.evaluate( () =>
241
+ wp.data
242
+ .dispatch( 'core/edit-post' )
243
+ .toggle( 'core/edit-post', 'welcomeGuide' )
244
+ );
245
+ await page.reload();
246
+ await page.waitForSelector( '.edit-post-layout' );
247
+ }
248
+ if ( viewport === 'small' ) {
249
+ await page.waitForXPath( '//button[@aria-label="Settings"]' );
250
+ await openDocumentSettingsSidebar();
251
+ }
252
+ const templateTitle = `${ viewport } Viewport Deletion Test`;
253
+
254
+ await createNewTemplate( templateTitle );
255
+ // Edit the template
256
+ if ( viewport === 'small' ) {
257
+ await page.waitForXPath( `//h2[text()="${ templateTitle }"]` );
258
+ const closeDocumentSettingsButton = await page.waitForXPath(
259
+ '//button[@aria-label="Close settings"]'
260
+ );
261
+ await closeDocumentSettingsButton.click();
262
+ }
263
+ await insertBlock( 'Paragraph' );
264
+ await page.keyboard.type(
265
+ 'Just a random paragraph added to the template'
266
+ );
267
+
268
+ // Save changes
269
+ const publishButton = await page.waitForXPath(
270
+ `//button[contains(text(), 'Publish')]`
271
+ );
272
+ await publishButton.click();
273
+ const saveButton = await page.waitForXPath(
274
+ `//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]`
275
+ );
276
+ await saveButton.click();
277
+ // Avoid publishing the post
278
+ // Select the cancel button via parent div's class, because the text `Cancel` is used on another button as well
279
+ const cancelButton = await page.waitForXPath(
280
+ `//div[contains(@class,"editor-post-publish-panel__header-cancel-button")]/button[not(@disabled)]`
281
+ );
282
+ await cancelButton.click();
283
+
284
+ const templateDropdown = await page.waitForXPath(
285
+ `//button[contains(text(), '${ templateTitle }')]`
286
+ );
287
+ await templateDropdown.click();
288
+ const deleteTemplateButton = await page.waitForXPath(
289
+ '//button[@role="menuitem"][@aria-label="Delete template"]'
290
+ );
291
+ await deleteTemplateButton.click();
292
+
293
+ await page.waitForXPath(
294
+ `//*[text()="Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts."]`
295
+ );
296
+ const dialogCancelButton = await page.waitForXPath(
297
+ '//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
298
+ );
299
+ await dialogCancelButton.click();
300
+
301
+ const exitTemplateModeButton = await page.waitForXPath(
302
+ '//button[text()="Back"]'
303
+ );
304
+ await exitTemplateModeButton.click();
305
+
306
+ await page.waitForXPath(
307
+ '//button[@aria-label="Settings"][@aria-expanded="false"]'
308
+ );
309
+ await openDocumentSettingsSidebar();
310
+
311
+ const element = await page.waitForXPath(
312
+ '//h2/button[contains(text(), "Template")]/../..//select'
313
+ );
314
+ const value = await element.getProperty( 'value' );
315
+ const currentTemplateSlug = await value.jsonValue();
316
+
317
+ expect( currentTemplateSlug ).toBe(
318
+ `wp-custom-template-${ viewport }-viewport-deletion-test`
319
+ );
320
+ } );
321
+
322
+ it( `should delete template if deletion is confirmed when the viewport is ${ viewport }`, async () => {
323
+ const templateTitle = `${ viewport } Viewport Deletion Test`;
324
+
325
+ await setBrowserViewport( viewport );
326
+
327
+ await switchToTemplateMode();
328
+ if ( viewport === 'small' ) {
329
+ const closeDocumentSettingsButton = await page.waitForXPath(
330
+ '//div[contains(@class,"interface-complementary-area-header__small")]/button[@aria-label="Close settings"]'
331
+ );
332
+ await closeDocumentSettingsButton.click();
333
+ }
334
+
335
+ const templateDropdown = await page.waitForXPath(
336
+ `//button[contains(text(), '${ templateTitle }')]`
337
+ );
338
+ await templateDropdown.click();
339
+
340
+ const deleteTemplateButton = await page.waitForXPath(
341
+ '//button[@role="menuitem"][@aria-label="Delete template"]'
342
+ );
343
+ await deleteTemplateButton.click();
344
+
345
+ await page.waitForXPath(
346
+ `//*[text()="Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts."]`
347
+ );
348
+ const dialogConfirmButton = await page.waitForXPath(
349
+ '//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="OK"]'
350
+ );
351
+
352
+ await dialogConfirmButton.click();
353
+
354
+ // Saving isn't technically necessary, but for themes without any specified templates,
355
+ // the removal of the Templates dropdown is delayed. A save and reload allows for this
356
+ // delay and prevents flakiness
357
+ await saveDraft();
358
+ await page.reload();
359
+
360
+ const optionElementHandlers = await page.$x(
361
+ '//h2/button[contains(text(), "Template")]/../..//select/option'
362
+ );
363
+ const availableTemplates = [];
364
+ for ( const elem of optionElementHandlers ) {
365
+ const elemName = await elem.getProperty( 'textContent' );
366
+ const templateName = await elemName.jsonValue();
367
+ availableTemplates.push( templateName );
368
+ }
369
+
370
+ expect(
371
+ availableTemplates.includes(
372
+ `${ viewport } Viewport Deletion Test`
373
+ )
374
+ ).toBe( false );
375
+ } );
376
+ } );
377
+ } );
@@ -96,7 +96,7 @@ describe( 'Post visibility', () => {
96
96
  );
97
97
  await (
98
98
  await page.$x(
99
- '//td[contains(concat(" ", @class, " "), " CalendarDay ")]/div[contains(concat(" ", @class, " "), " components-datetime__date__day ")][text() = "15"]'
99
+ '//*[@role="application"][@aria-label="Calendar"]//td[@role="button"]/*[text() = "15"]'
100
100
  )
101
101
  )[ 0 ].click();
102
102
 
@@ -44,7 +44,7 @@ describe( 'preferences', () => {
44
44
  await page.waitForSelector( '.edit-post-layout' );
45
45
  expect( await getActiveSidebarTabText() ).toBe( 'Post' );
46
46
 
47
- // Dismiss
47
+ // Dismiss.
48
48
  await page.click(
49
49
  '.edit-post-sidebar__panel-tabs [aria-label="Close settings"]'
50
50
  );
@@ -54,7 +54,7 @@ async function waitForPreviewNavigation( previewPage ) {
54
54
  * @param {boolean} shouldBeChecked If true, turns the option on. If false, off.
55
55
  */
56
56
  async function toggleCustomFieldsOption( shouldBeChecked ) {
57
- const baseXPath = '//*[contains(@class, "edit-post-preferences-modal")]';
57
+ const baseXPath = '//*[contains(@class, "interface-preferences-modal")]';
58
58
  const paneslXPath = `${ baseXPath }//button[contains(text(), "Panels")]`;
59
59
  const checkboxXPath = `${ baseXPath }//label[contains(text(), "Custom fields")]`;
60
60
  await clickOnMoreMenuItem( 'Preferences' );
@@ -83,7 +83,7 @@ async function toggleCustomFieldsOption( shouldBeChecked ) {
83
83
  return;
84
84
  }
85
85
 
86
- await clickOnCloseModalButton( '.edit-post-preferences-modal' );
86
+ await clickOnCloseModalButton( '.interface-preferences-modal' );
87
87
  }
88
88
 
89
89
  describe( 'Preview', () => {
@@ -272,8 +272,12 @@ describe( 'Preview', () => {
272
272
  await publishPost();
273
273
 
274
274
  // Close the panel.
275
- await page.waitForSelector( '.editor-post-publish-panel' );
276
- await page.click( '.editor-post-publish-panel__header button' );
275
+ await page.waitForSelector(
276
+ '.editor-post-publish-panel button[aria-label="Close panel"]'
277
+ );
278
+ await page.click(
279
+ '.editor-post-publish-panel button[aria-label="Close panel"]'
280
+ );
277
281
 
278
282
  // Change the title and preview again.
279
283
  await editorPage.type( '[aria-label="Add title"]', ' Ipsum' );
@@ -32,7 +32,7 @@ describe( 'PostPublishButton', () => {
32
32
  } );
33
33
 
34
34
  it( 'should be disabled when post is being saved', async () => {
35
- await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable
35
+ await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
36
36
  expect(
37
37
  await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
38
38
  ).toBeNull();
@@ -44,7 +44,7 @@ describe( 'PostPublishButton', () => {
44
44
  } );
45
45
 
46
46
  it( 'should be disabled when metabox is being saved', async () => {
47
- await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable
47
+ await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
48
48
  expect(
49
49
  await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
50
50
  ).toBeNull();