Skip to content

Commit 3864ca4

Browse files
kaeizenkaeizen
committed
minor change to tests for admin and block editor
1 parent 497f8f3 commit 3864ca4

File tree

2 files changed

+76
-67
lines changed

2 files changed

+76
-67
lines changed

‎e2e/tests/admin.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ test( 'Activating Stackable should redirect to the Getting Started Page', async
77
await admin.visitAdminPage( 'plugins.php' )
88

99
// Deactivate Stackable
10-
const deactivate = page.locator( '#deactivate-stackable-ultimate-gutenberg-blocks' )
10+
const deactivate = page.getByLabel( 'Deactivate Stackable -' )
1111
await expect( deactivate ).toBeVisible()
1212
await deactivate.click()
1313

1414
// Activate Stackable
15-
const activate = page.locator( '#activate-stackable-ultimate-gutenberg-blocks' )
15+
const activate = page.getByLabel( 'Activate Stackable -' )
1616
await expect( activate ).toBeVisible()
1717
await activate.click()
1818

‎e2e/tests/block-editor.spec.ts‎

Lines changed: 74 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,97 @@
11
import { test, expect } from '@wordpress/e2e-test-utils-playwright'
2+
import { deletePost } from 'e2e/test-utils'
23

3-
test( 'Stackable blocks can be added in the editor', async ( {
4-
page,
5-
admin,
6-
editor,
7-
} ) => {
8-
await admin.createNewPost()
9-
await page.getByLabel( 'Toggle block inserter' ).click()
4+
test.describe( 'Block Editor', () => {
5+
let pid = null
106

11-
await page.locator( '.editor-block-list-item-stackable-text' ).click()
7+
// Create Posts for testing
8+
test.beforeEach( async ( { editor, admin } ) => {
9+
await admin.createNewPost( { title: 'Block Editor Test' } )
10+
await editor.saveDraft()
11+
const postQuery = new URL( editor.page.url() ).search
12+
pid = new URLSearchParams( postQuery ).get( 'post' )
13+
} )
1214

13-
const blocks = await editor.getBlocks()
15+
// Delete created post
16+
test.afterEach( async ( { requestUtils } ) => {
17+
await deletePost( requestUtils, pid )
18+
} )
1419

15-
expect( blocks[ 0 ].name ).toContain( 'stackable/text' )
16-
} )
20+
test( 'Stackable blocks can be added in the editor', async ( {
21+
page,
1722

18-
test( 'Stackable Inspector Controls should show up upon clicking a Stackable block', async ( {
19-
page,
20-
admin,
21-
editor,
22-
} ) => {
23-
await admin.createNewPost()
23+
editor,
24+
} ) => {
25+
await page.getByLabel( 'Toggle block inserter' ).click()
2426

25-
await editor.insertBlock( {
26-
name: 'stackable/text',
27-
} )
27+
await page.locator( '.editor-block-list-item-stackable-text' ).click()
2828

29-
await editor.selectBlocks( page.locator( 'iframe[name="editor-canvas"]' ).contentFrame().getByLabel( 'Block: Text' ) )
30-
await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
31-
await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
32-
await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
33-
} )
29+
const blocks = await editor.getBlocks()
3430

35-
test( 'A Stackable block\'s attributes should update when settings are changed in the Inspector Controls.', async ( {
36-
page,
37-
admin,
38-
editor,
39-
} ) => {
40-
await admin.createNewPost()
31+
expect( blocks[ 0 ].name ).toContain( 'stackable/text' )
32+
} )
4133

42-
await editor.insertBlock( {
43-
name: 'stackable/text',
34+
test( 'Stackable Inspector Controls should show up upon clicking a Stackable block', async ( {
35+
page,
36+
editor,
37+
} ) => {
38+
await editor.insertBlock( {
39+
name: 'stackable/text',
40+
} )
41+
42+
await editor.selectBlocks( editor.canvas.getByLabel( 'Block: Text' ) )
43+
await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
44+
await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
45+
await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
4446
} )
4547

46-
const editorCanvas = page.locator( 'iframe[name="editor-canvas"]' ).contentFrame()
47-
await editorCanvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ).fill( 'test' )
48-
await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
49-
await page.getByLabel( 'Hex color' ).fill( 'ff0000' )
50-
await editorCanvas.locator( 'body' ).click()
48+
test( 'A Stackable block\'s attributes should update when settings are changed in the Inspector Controls.', async ( {
49+
page,
50+
editor,
51+
} ) => {
52+
await editor.insertBlock( {
53+
name: 'stackable/text',
54+
} )
5155

52-
await expect( editorCanvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
53-
await expect( editorCanvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
56+
// Add content and color to Stackable Text Block
57+
await editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ).fill( 'test' )
58+
await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
59+
await page.getByLabel( 'Hex color' ).fill( 'ff0000' )
60+
await editor.canvas.locator( 'body' ).click()
5461

55-
await editor.saveDraft()
62+
await expect( editor.canvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
63+
await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
5664

57-
const blocks = await editor.getBlocks()
58-
const attributes = blocks[ 0 ].attributes
65+
await editor.saveDraft()
5966

60-
expect( attributes.textColor1 ).toBe( '#ff0000' )
61-
expect( attributes.text ).toBe( 'test' )
62-
} )
67+
const blocks = await editor.getBlocks()
68+
const attributes = blocks[ 0 ].attributes
6369

64-
test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
65-
admin,
66-
editor,
67-
} ) => {
68-
await admin.createNewPost()
69-
70-
await editor.insertBlock( {
71-
name: 'stackable/text',
72-
attributes: {
73-
text: 'test',
74-
textColor1: '#ff0000',
75-
},
70+
expect( attributes.textColor1 ).toBe( '#ff0000' )
71+
expect( attributes.text ).toBe( 'test' )
7672
} )
7773

78-
const blocks = await editor.getBlocks()
79-
const uniqueId = blocks[ 0 ].attributes.uniqueId
74+
test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
75+
editor,
76+
} ) => {
77+
await editor.insertBlock( {
78+
name: 'stackable/text',
79+
attributes: {
80+
text: 'test',
81+
textColor1: '#ff0000',
82+
},
83+
} )
84+
85+
const blocks = await editor.getBlocks()
86+
const uniqueId = blocks[ 0 ].attributes.uniqueId
8087

81-
await editor.saveDraft()
88+
await editor.saveDraft()
8289

83-
const preview = await editor.openPreviewPage()
90+
const preview = await editor.openPreviewPage()
8491

85-
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
86-
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
87-
await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
92+
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
93+
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
94+
await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
95+
} )
8896
} )
97+

0 commit comments

Comments
 (0)