Skip to content

Commit 8db92c1

Browse files
tschortschtschortsch
committed
migrate row filters e2e tests to playwright
1 parent 78e382c commit 8db92c1

6 files changed

Lines changed: 221 additions & 143 deletions

‎cypress/e2e/row/row-filters.cy.js‎

Lines changed: 0 additions & 143 deletions
This file was deleted.

‎playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-chromium.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- wp:wp-bootstrap-blocks/row {"noGutters":false} -->
2+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
3+
4+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
5+
<!-- /wp:wp-bootstrap-blocks/row -->

‎playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-horizontalGuttersOptions-adds-horizontal-gutters-option-chromium.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- wp:wp-bootstrap-blocks/row {"noGutters":false,"horizontalGutters":"gx-10"} -->
2+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
3+
4+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
5+
<!-- /wp:wp-bootstrap-blocks/row -->

‎playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-templates-adds-additional-template-chromium.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!-- wp:wp-bootstrap-blocks/row {"template":"1-66percent"} -->
2+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
3+
<!-- /wp:wp-bootstrap-blocks/row -->

‎playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-verticalGuttersOptions-adds-vertical-gutters-option-chromium.txt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- wp:wp-bootstrap-blocks/row {"noGutters":false,"verticalGutters":"gy-10"} -->
2+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
3+
4+
<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
5+
<!-- /wp:wp-bootstrap-blocks/row -->

‎playwright/e2e/row/row-filters.spec.ts‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
2+
3+
test.describe( 'Row Block Filters', () => {
4+
test.beforeAll( async ( { requestUtils } ) => {
5+
await requestUtils.activatePlugin(
6+
'wp-bootstrap-blocks-test-row-filters'
7+
);
8+
} );
9+
10+
test.afterAll( async ( { requestUtils } ) => {
11+
await requestUtils.deactivatePlugin(
12+
'wp-bootstrap-blocks-test-row-filters'
13+
);
14+
} );
15+
16+
test.beforeEach( async ( { admin, editor, page } ) => {
17+
await admin.createNewPost();
18+
await editor.insertBlock( {
19+
name: 'wp-bootstrap-blocks/row',
20+
} );
21+
await editor.openDocumentSettingsSidebar();
22+
} );
23+
24+
test( 'wpBootstrapBlocks.row.templates adds additional template', async ( {
25+
page,
26+
editor,
27+
} ) => {
28+
// Additional template should be available
29+
await expect(
30+
await page.$$( '.wp-bootstrap-blocks-template-selector-button' )
31+
).toHaveLength( 5 ); // 4 default templates + 1 additional template (custom template disabled)
32+
await expect(
33+
await page.locator(
34+
'.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"]'
35+
)
36+
).toBeVisible();
37+
await expect(
38+
await page.locator(
39+
'.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"] > span.dashicons-yes'
40+
)
41+
).toBeVisible();
42+
43+
// Template should be applied
44+
await page
45+
.locator(
46+
'.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"]'
47+
)
48+
.click();
49+
50+
expect( await editor.getEditedPostContent() ).toMatchSnapshot(
51+
'wpBootstrapBlocks.row.templates-adds-additional-template.txt'
52+
);
53+
} );
54+
55+
test( 'wpBootstrapBlocks.row.enableCustomTemplate disables custom template', async ( {
56+
page,
57+
editor,
58+
} ) => {
59+
// Additional template should be available
60+
await expect(
61+
await page.$$( '.wp-bootstrap-blocks-template-selector-button' )
62+
).toHaveLength( 5 ); // 4 default templates + 1 additional template (custom template disabled)
63+
await expect(
64+
await page.locator(
65+
'.wp-bootstrap-blocks-template-selector-button > button[aria-label="Custom"]'
66+
)
67+
).not.toBeVisible();
68+
} );
69+
70+
test( 'wp_bootstrap_blocks_row_default_attributes override default attributes', async ( {
71+
page,
72+
editor,
73+
} ) => {
74+
// 1:2 template should be selected
75+
await expect(
76+
await page.locator(
77+
'.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (1:2)"].is-active'
78+
)
79+
).toBeVisible();
80+
81+
// No Gutters option should be checked
82+
expect(
83+
await page
84+
.getByRole( 'region', {
85+
name: 'Editor settings',
86+
} )
87+
.getByLabel( 'No Gutters', { exact: true } )
88+
.isChecked()
89+
).toBeTruthy();
90+
91+
// Editor stack columns option should be checked
92+
expect(
93+
await page
94+
.getByRole( 'region', {
95+
name: 'Editor settings',
96+
} )
97+
.getByLabel( 'Editor: Display columns stacked' )
98+
.isChecked()
99+
).toBeTruthy();
100+
101+
// Align columns right should be selected
102+
await editor.clickBlockToolbarButton(
103+
'Change horizontal alignment of columns'
104+
);
105+
await expect(
106+
await page.locator( 'button.is-active:text("Align columns right")' )
107+
).toBeVisible();
108+
109+
// Align columns bottom should be selected
110+
await editor.clickBlockToolbarButton(
111+
'Change vertical alignment of columns'
112+
);
113+
await expect(
114+
await page.locator(
115+
'button.is-active:text("Align columns bottom")'
116+
)
117+
).toBeVisible();
118+
119+
// Disable No Gutters option to make Gutter options visible
120+
await page
121+
.getByRole( 'region', {
122+
name: 'Editor settings',
123+
} )
124+
.getByLabel( 'No Gutters', { exact: true } )
125+
.click();
126+
127+
// Horizontal Gutters should be selected
128+
await expect(
129+
await page
130+
.getByRole( 'region', {
131+
name: 'Editor settings',
132+
} )
133+
.getByLabel( 'Horizontal Gutters' )
134+
.inputValue()
135+
).toBe( 'gx-5' );
136+
137+
// Vertical Gutters should be selected
138+
await expect(
139+
await page
140+
.getByRole( 'region', {
141+
name: 'Editor settings',
142+
} )
143+
.getByLabel( 'Vertical Gutters' )
144+
.inputValue()
145+
).toBe( 'gy-3' );
146+
147+
// Check if attributes are set correctly
148+
expect( await editor.getEditedPostContent() ).toMatchSnapshot(
149+
'wp_bootstrap_blocks_row_default_attributes-override-default-attributes.txt'
150+
);
151+
} );
152+
153+
// Bootstrap 5 specific filters
154+
test( 'wpBootstrapBlocks.row.horizontalGuttersOptions adds horizontal gutters option', async ( {
155+
page,
156+
editor,
157+
} ) => {
158+
// Disable No Gutters option to make Gutter options visible
159+
await page
160+
.getByRole( 'region', {
161+
name: 'Editor settings',
162+
} )
163+
.getByLabel( 'No Gutters', { exact: true } )
164+
.click();
165+
166+
// Custom horizontal gutters option should be applied
167+
await page
168+
.getByRole( 'region', {
169+
name: 'Editor settings',
170+
} )
171+
.getByLabel( 'Horizontal Gutters' )
172+
.selectOption( 'gx-10' );
173+
174+
expect( await editor.getEditedPostContent() ).toMatchSnapshot(
175+
'wpBootstrapBlocks.row.horizontalGuttersOptions-adds-horizontal-gutters-option.txt'
176+
);
177+
} );
178+
179+
test( 'wpBootstrapBlocks.row.verticalGuttersOptions should add vertical gutters option', async ( {
180+
page,
181+
editor,
182+
} ) => {
183+
// Disable No Gutters option to make Gutter options visible
184+
await page
185+
.getByRole( 'region', {
186+
name: 'Editor settings',
187+
} )
188+
.getByLabel( 'No Gutters', { exact: true } )
189+
.click();
190+
191+
// Custom vertical gutters option should be applied
192+
await page
193+
.getByRole( 'region', {
194+
name: 'Editor settings',
195+
} )
196+
.getByLabel( 'Vertical Gutters' )
197+
.selectOption( 'gy-10' );
198+
199+
expect( await editor.getEditedPostContent() ).toMatchSnapshot(
200+
'wpBootstrapBlocks.row.verticalGuttersOptions-adds-vertical-gutters-option.txt'
201+
);
202+
} );
203+
} );

0 commit comments

Comments
 (0)