Skip to content

Commit 3820390

Browse files
kaeizenkaeizen
committed
include site editor tests
1 parent 3b1eaf7 commit 3820390

File tree

2 files changed

+106
-110
lines changed

2 files changed

+106
-110
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ jobs:
3838
if: ${{ !cancelled() }}
3939
id: artifact-upload-step
4040
with:
41-
name: playwright-report-${{ env.VERSION_SUFFIX }}.zip
41+
name: playwright-report-${{ env.VERSION_SUFFIX }}
4242
path: playwright-report/
4343
overwrite: true
4444
retention-days: 30
@@ -58,5 +58,5 @@ jobs:
5858
## Playwright Report Artifact
5959
| file | commit |
6060
| ---- | ------ |
61-
| [playwright-report-${{ env.VERSION_SUFFIX }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts/${{ steps.artifact-upload-step.outputs.artifact-id }}) | ${{ github.sha }} |
61+
| [playwright-report-${{ env.VERSION_SUFFIX }}.zip](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts/${{ steps.artifact-upload-step.outputs.artifact-id }}) | ${{ github.sha }} |
6262
edit-mode: replace

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

Lines changed: 104 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,105 @@
1-
// import { test, expect } from 'e2e/test-utils'
2-
3-
// test.describe( 'Site Editor', () => {
4-
// // test.beforeAll( async ( { requestUtils } ) => {
5-
// // await requestUtils.activateTheme( 'twentytwentyfour' )
6-
// // } )
7-
8-
// let pid = null
9-
// let postContentBlock = null
10-
11-
// test.beforeEach( async ( {
12-
// page, admin, editor,
13-
// } ) => {
14-
// await admin.createNewPost( { title: 'Site Editor Test', postType: 'page' } )
15-
// await editor.saveDraft()
16-
// const postQuery = new URL( editor.page.url() ).search
17-
// pid = new URLSearchParams( postQuery ).get( 'post' )
18-
19-
// await admin.visitSiteEditor( {
20-
// canvas: 'edit', postType: 'page', postId: pid, showWelcomeGuide: false,
21-
// } )
22-
23-
// if ( await page.getByRole( 'heading', { name: 'Choose a pattern' } ).isVisible() ) {
24-
// await page.getByLabel( 'Close', { exact: true } ).click()
25-
// }
26-
27-
// postContentBlock = ( await editor.getBlocks( { full: true } ) )
28-
// .filter( block => block.attributes?.tagName === 'main' )[ 0 ].innerBlocks
29-
// .filter( block => block.name === 'core/post-content' )[ 0 ]
30-
// } )
31-
32-
// test.afterEach( async ( { requestUtils } ) => {
33-
// await requestUtils.deletePost( pid, 'pages' )
34-
// } )
35-
36-
// test( 'Stackable blocks can be added in the site editor', async ( {
37-
// page,
38-
// editor,
39-
// } ) => {
40-
// await page.getByLabel( 'Toggle block inserter' ).click()
41-
// await page.locator( '.editor-block-list-item-stackable-text' ).click()
42-
43-
// const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
44-
45-
// expect( blocks.find( block => block.name === 'stackable/text' ) ).toBeTruthy()
46-
// } )
47-
48-
// test( 'Stackable Inspector Controls should show up upon clicking a Stackable block', async ( {
49-
// page,
50-
// editor,
51-
// } ) => {
52-
// await editor.insertBlock( {
53-
// name: 'stackable/text',
54-
// }, { clientId: postContentBlock.clientId } )
55-
56-
// await editor.selectBlocks( editor.canvas.getByLabel( 'Block: Text' ) )
57-
// await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
58-
// await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
59-
// await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
60-
// } )
61-
62-
// test( 'A Stackable block\'s attributes should update when settings are changed in the Inspector Controls.', async ( {
63-
// page,
64-
// editor,
65-
// } ) => {
66-
// await editor.insertBlock( {
67-
// name: 'stackable/text',
68-
// }, { clientId: postContentBlock.clientId } )
69-
// await editor.canvas.getByLabel( 'Type / to choose a block' ).fill( 'test' )
70-
// await expect( page.locator( '#inspector-textarea-control-0' ) ).toContainText( 'test' )
71-
// await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
72-
// await page.getByLabel( 'Hex color' ).fill( 'ff0000' )
73-
// await editor.canvas.locator( 'body' ).click()
74-
75-
// await expect( editor.canvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
76-
// await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
77-
78-
// await editor.saveDraft()
79-
80-
// const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
81-
// const textBlock = blocks.find( block => block.name === 'stackable/text' )
82-
// expect( textBlock.attributes.text ).toBe( 'test' )
83-
// expect( textBlock.attributes.textColor1 ).toBe( '#ff0000' )
84-
// } )
85-
86-
// test( 'The Stackable block added in the site editor should be visible in the frontend', async ( {
87-
// editor,
88-
// } ) => {
89-
// await editor.insertBlock( {
90-
// name: 'stackable/text',
91-
// attributes: {
92-
// text: 'test',
93-
// textColor1: '#ff0000',
94-
// },
95-
// }, { clientId: postContentBlock.clientId } )
96-
97-
// const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
98-
// const uniqueId = blocks.find( block => block.name === 'stackable/text' ).attributes.uniqueId
99-
100-
// await editor.saveDraft()
101-
102-
// const preview = await editor.openPreviewPage()
103-
104-
// await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
105-
// await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
106-
// await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
107-
// } )
108-
// } )
1+
import { test, expect } from 'e2e/test-utils'
2+
3+
test.describe( 'Site Editor', () => {
4+
let pid = null
5+
let postContentBlock = null
6+
7+
test.beforeEach( async ( {
8+
page, admin, editor,
9+
} ) => {
10+
await admin.createNewPost( { title: 'Site Editor Test', postType: 'page' } )
11+
await editor.saveDraft()
12+
const postQuery = new URL( editor.page.url() ).search
13+
pid = new URLSearchParams( postQuery ).get( 'post' )
14+
15+
await admin.visitSiteEditor( {
16+
canvas: 'edit', postType: 'page', postId: pid, showWelcomeGuide: false,
17+
} )
18+
19+
if ( await page.getByRole( 'heading', { name: 'Choose a pattern' } ).isVisible() ) {
20+
await page.getByLabel( 'Close', { exact: true } ).click()
21+
}
22+
23+
postContentBlock = ( await editor.getBlocks( { full: true } ) )
24+
.filter( block => block.attributes?.tagName === 'main' )[ 0 ].innerBlocks
25+
.filter( block => block.name === 'core/post-content' )[ 0 ]
26+
} )
27+
28+
test.afterEach( async ( { requestUtils } ) => {
29+
await requestUtils.deletePost( pid, 'pages' )
30+
} )
31+
32+
test( 'Stackable blocks can be added in the site editor', async ( {
33+
page,
34+
editor,
35+
} ) => {
36+
await page.getByLabel( 'Toggle block inserter' ).click()
37+
await page.locator( '.editor-block-list-item-stackable-text' ).click()
38+
39+
const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
40+
41+
expect( blocks.find( block => block.name === 'stackable/text' ) ).toBeTruthy()
42+
} )
43+
44+
test( 'Stackable Inspector Controls should show up upon clicking a Stackable block', async ( {
45+
page,
46+
editor,
47+
} ) => {
48+
await editor.insertBlock( {
49+
name: 'stackable/text',
50+
}, { clientId: postContentBlock.clientId } )
51+
52+
await editor.selectBlocks( editor.canvas.getByLabel( 'Block: Text' ) )
53+
await expect( page.getByLabel( 'Layout Tab' ) ).toBeVisible()
54+
await expect( page.getByLabel( 'Style Tab' ) ).toBeVisible()
55+
await expect( page.getByLabel( 'Advanced Tab' ) ).toBeVisible()
56+
} )
57+
58+
test( 'A Stackable block\'s attributes should update when settings are changed in the Inspector Controls.', async ( {
59+
page,
60+
editor,
61+
} ) => {
62+
await editor.insertBlock( {
63+
name: 'stackable/text',
64+
}, { clientId: postContentBlock.clientId } )
65+
await editor.canvas.getByLabel( 'Type / to choose a block' ).fill( 'test' )
66+
await expect( page.locator( '#inspector-textarea-control-0' ) ).toContainText( 'test' )
67+
await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
68+
await page.getByLabel( 'Hex color' ).fill( 'ff0000' )
69+
await editor.canvas.locator( 'body' ).click()
70+
71+
await expect( editor.canvas.locator( '[data-type="stackable/text"]' ) ).toContainText( 'test' )
72+
await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
73+
74+
await editor.saveDraft()
75+
76+
const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
77+
const textBlock = blocks.find( block => block.name === 'stackable/text' )
78+
expect( textBlock.attributes.text ).toBe( 'test' )
79+
expect( textBlock.attributes.textColor1 ).toBe( '#ff0000' )
80+
} )
81+
82+
test( 'The Stackable block added in the site editor should be visible in the frontend', async ( {
83+
editor,
84+
} ) => {
85+
await editor.insertBlock( {
86+
name: 'stackable/text',
87+
attributes: {
88+
text: 'test',
89+
textColor1: '#ff0000',
90+
},
91+
}, { clientId: postContentBlock.clientId } )
92+
93+
const blocks = await editor.getBlocks( { clientId: postContentBlock.clientId } )
94+
const uniqueId = blocks.find( block => block.name === 'stackable/text' ).attributes.uniqueId
95+
96+
await editor.saveDraft()
97+
98+
const preview = await editor.openPreviewPage()
99+
100+
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
101+
await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
102+
await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
103+
} )
104+
} )
109105

0 commit comments

Comments
 (0)