Skip to content

Commit 497f8f3

Browse files
kaeizenkaeizen
committed
add tests for site editor, global settings
1 parent b69b0df commit 497f8f3

File tree

5 files changed

+263
-9
lines changed

5 files changed

+263
-9
lines changed

‎e2e/playwright.config.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,23 @@ export default defineConfig( {
5656

5757
/* Configure projects for major browsers */
5858
projects: [
59-
{
60-
name: 'auth',
61-
// testDir,
62-
testMatch: 'setup/auth.js',
63-
},
59+
// {
60+
// name: 'auth',
61+
// // testDir,
62+
// testMatch: 'setup/auth.js',
63+
// },
6464
{
6565
name: 'tests',
6666
use: {
6767
storageState: process.env.WP_AUTH_STORAGE,
68+
...devices[ 'Desktop Chrome' ],
6869
},
6970
testMatch: 'tests/*.ts',
7071
},
71-
{
72-
name: 'chromium',
73-
use: { ...devices[ 'Desktop Chrome' ] },
74-
},
72+
// {
73+
// name: 'chromium',
74+
// use: { ...devices[ 'Desktop Chrome' ] },
75+
// },
7576

7677
// {
7778
// name: 'firefox',

‎e2e/test-utils/deletePost.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { RequestUtils } from '@wordpress/e2e-test-utils-playwright/build-types'
2+
3+
const deletePost = async ( requestUtils : RequestUtils, pid: string, postType: string = 'posts' ) => {
4+
await requestUtils.rest( {
5+
method: 'DELETE',
6+
path: `/wp/v2/${ postType }/${ pid }`,
7+
params: {
8+
force: true,
9+
},
10+
} )
11+
}
12+
13+
export { deletePost }

‎e2e/test-utils/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { test, expect } from './test'
2+
export { deletePost } from './deletePost'

‎e2e/tests/global-settings.spec.ts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { test, expect } from '@wordpress/e2e-test-utils-playwright'
2+
3+
import { deletePost } from 'e2e/test-utils'
4+
import { createColor, getRgb } from '~stackable/plugins/global-settings/colors/util'
5+
6+
test.describe( 'Global Settigs', () => {
7+
let pid = null
8+
9+
// Create Posts for testing
10+
test.beforeEach( async ( { editor, admin } ) => {
11+
await admin.createNewPost( { title: 'Global Settings Test' } )
12+
await editor.saveDraft()
13+
const postQuery = new URL( editor.page.url() ).search
14+
pid = new URLSearchParams( postQuery ).get( 'post' )
15+
} )
16+
17+
// Delete created post
18+
test.afterEach( async ( { requestUtils } ) => {
19+
await deletePost( requestUtils, pid )
20+
} )
21+
22+
test( 'When a color is added in the Global Colors, it should be present in the color picker', async ( {
23+
page,
24+
editor,
25+
} ) => {
26+
await page.getByLabel( 'Stackable Settings' ).click()
27+
28+
// Add a new Global Color
29+
const panel = page.locator( '.ugb-global-settings-color-picker ' ).filter( { hasText: 'Global Colors' } )
30+
await panel.locator( 'button.ugb-global-settings-color-picker__add-button' ).click()
31+
32+
const globalColors = panel.locator( '.ugb-global-settings-color-picker__color-indicators > div' )
33+
const count = ( await globalColors.evaluate( node => Array.from( node.childNodes ) ) ).length
34+
35+
const newColor = globalColors.getByRole( 'button', { name: `Custom Color ${ count } ` } )
36+
await expect( newColor ).toBeVisible()
37+
await newColor.click()
38+
const hexValue = await page.getByLabel( 'Hex color' ).inputValue()
39+
40+
// Insert a Stackable Text Block and check if the added Global Colors is in the color picker
41+
await page.getByLabel( 'Settings', { exact: true } ).click()
42+
editor.insertBlock( {
43+
name: 'stackable/text',
44+
attributes: {
45+
text: 'test',
46+
},
47+
} )
48+
await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
49+
50+
await expect( page.getByRole( 'heading', { name: 'Global Colors' } ) ).toBeVisible()
51+
await expect( page.getByLabel( `Color: Custom Color ${ count }` ) ).toBeVisible()
52+
await page.getByLabel( `Color: Custom Color ${ count }` ).click()
53+
await expect( page.getByLabel( 'Hex color' ) ).toHaveValue( hexValue )
54+
await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
55+
56+
// Delete added Global Color
57+
await page.getByLabel( 'Stackable Settings' ).click()
58+
await panel.locator( `.ugb-global-settings-color-picker__color-indicators > div > div:nth-child(${ count }) > button.stk-global-settings-color-picker__delete-button` ).click()
59+
} )
60+
61+
test( 'Global Typography Styles should be applied when adding a heading', async ( {
62+
page,
63+
editor,
64+
} ) => {
65+
await page.getByLabel( 'Stackable Settings' ).click()
66+
await page.getByRole( 'button', { name: 'Global Typography' } ).click()
67+
68+
// Set Global Typography Styles of Heading 2 to have a font-size of 32
69+
await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
70+
await page.locator( '.stk-popover .components-base-control:nth-of-type(2)', { hasText: /Size/ } ).getByRole( 'textbox' ).fill( '32' )
71+
await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
72+
await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'font-size', '32px' )
73+
await page.getByLabel( 'Settings', { exact: true } ).click()
74+
75+
// Check if the added Stackable Heading Block has a font-size of 32
76+
editor.insertBlock( {
77+
name: 'stackable/heading',
78+
attributes: {
79+
text: 'test',
80+
},
81+
} )
82+
83+
await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'font-size', '32px' )
84+
85+
// Reset Global Typography Styles
86+
await page.getByLabel( 'Stackable Settings' ).click()
87+
await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).getByRole( 'button', { name: 'Reset' } ).click()
88+
} )
89+
90+
test( 'When a default block is created, adding the block should have the default block\'s attributes', async ( {
91+
page,
92+
editor,
93+
} ) => {
94+
// Generate a color
95+
const color = createColor()
96+
97+
await page.getByLabel( 'Stackable Settings' ).click()
98+
await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
99+
100+
// Open the Default Text Block Editor
101+
const defaultBlockPagePromise = page.waitForEvent( 'popup' )
102+
await page.locator( 'div:nth-child(37) > .components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
103+
const defaultBlockPage = await defaultBlockPagePromise
104+
105+
// Set a color for the default Text Block
106+
await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
107+
await defaultBlockPage.getByLabel( 'Hex color' ).fill( color )
108+
await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
109+
await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).click()
110+
await defaultBlockPage.close()
111+
112+
// Insert a Stackable Text Block, and check if the color is the same as the one set in the default block
113+
await page.reload()
114+
await editor.insertBlock( {
115+
name: 'stackable/text',
116+
attributes: {
117+
text: 'test',
118+
},
119+
} )
120+
121+
await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', `rgb(${ getRgb( color ) })` )
122+
123+
// Reset Default Block
124+
await page.getByLabel( 'Stackable Settings' ).click()
125+
await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
126+
await page.locator( 'div' ).filter( { hasText: /^Text$/ } ).first().getByLabel( 'Reset' ).click()
127+
} )
128+
} )
129+

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

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

0 commit comments

Comments
 (0)