Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Blocks Playwright tests: Add tests for the new attribute filter block (#45333)

This commit is contained in:
Sam Seay 2024-03-12 19:15:05 +08:00 committed by GitHub
parent 4933b86cc7
commit 4cd89e4beb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 231 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/woocommerce-blocks/tests/e2e/README.md
View File

@ -170,10 +170,10 @@ below
import { test as base } from '@playwright/test';
const test = base.extend< {
dropdownBlockPostPage: TestingPost;
defaultBlockPostPage: TestingPost;
dropdownBlockPost: Post;
defaultBlockPost: Post;
} >( {
defaultBlockPostPage: async ( { requestUtils }, use ) => {
defaultBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
requestUtils,
{ title: 'Product Filter Stock Status Block' },
@ -185,7 +185,7 @@ const test = base.extend< {
await requestUtils.deletePost( post.id );
},
dropdownBlockPostPage: async ( { requestUtils }, use ) => {
dropdownBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
requestUtils,
{ title: 'Product Filter Stock Status Block' },
@ -207,8 +207,8 @@ In your test you can navigate to the page. You won't need to clean it up, becaus
the fixture will take care of that for you.
```js
test( 'Test the block', async ( { page, defaultBlockPostPage } ) => {
await page.goto( defaultBlockPostPage.link );
test( 'Test the block', async ( { page, defaultBlockPost } ) => {
await page.goto( defaultBlockPost.link );
// do your tests here
} );
```

16
plugins/woocommerce-blocks/tests/e2e/tests/attributes-filter/filter-products-by-attributes-count.block_theme.spec.ts
View File

@ -8,9 +8,9 @@ import path from 'path';
const TEMPLATE_PATH = path.join( __dirname, './active-filters.handlebars' );
const test = base.extend< {
defaultBlockPostPage: Post;
defaultBlockPost: Post;
} >( {
defaultBlockPostPage: async ( { requestUtils }, use ) => {
defaultBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Active Filters Block' },
TEMPLATE_PATH,
@ -25,10 +25,10 @@ const test = base.extend< {
test.describe( 'Filter by Attributes Block - with All products Block', () => {
test( 'should show correct attrs count (color=blue|query_type_color=or)', async ( {
page,
defaultBlockPostPage,
defaultBlockPost,
} ) => {
await page.goto(
`${ defaultBlockPostPage.link }?filter_color=blue&query_type_color=or`
`${ defaultBlockPost.link }?filter_color=blue&query_type_color=or`
);
// Check if the page has loaded successfully.
@ -48,10 +48,10 @@ test.describe( 'Filter by Attributes Block - with All products Block', () => {
test( 'should show correct attrs count (color=blue,gray|query_type_color=or)', async ( {
page,
defaultBlockPostPage,
defaultBlockPost,
} ) => {
await page.goto(
`${ defaultBlockPostPage.link }?filter_color=blue,gray&query_type_color=or`
`${ defaultBlockPost.link }?filter_color=blue,gray&query_type_color=or`
);
// Check if the page has loaded successfully.
@ -71,10 +71,10 @@ test.describe( 'Filter by Attributes Block - with All products Block', () => {
test( 'should show correct attrs count (color=blue|query_type_color=or|min_price=15|max_price=40)', async ( {
page,
defaultBlockPostPage,
defaultBlockPost,
} ) => {
await page.goto(
`${ defaultBlockPostPage.link }?filter_color=blue&query_type_color=or&min_price=15&max_price=40`
`${ defaultBlockPost.link }?filter_color=blue&query_type_color=or&min_price=15&max_price=40`
);
// Check if the page has loaded successfully.

182
plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.block_theme.spec.ts Normal file
View File

@ -0,0 +1,182 @@
/**
* External dependencies
*/
import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
import path from 'path';
import { Post } from '@wordpress/e2e-test-utils-playwright/build-types/request-utils/posts';
const TEMPLATE_PATH = path.join( __dirname, './attribute-filter.handlebars' );
const COLOR_ATTRIBUTE_VALUES = [ 'Blue', 'Gray', 'Green', 'Red', 'Yellow' ];
const COLOR_ATTRIBUTES_WITH_COUNTS = [
'Blue (4)',
'Gray (2)',
'Green (3)',
'Red (4)',
'Yellow (1)',
];
const test = base.extend< {
postWithShowCounts: Post;
defaultBlockPost: Post;
dropdownBlockPost: Post;
} >( {
defaultBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Product Filter: Attribute Block - Color' },
TEMPLATE_PATH,
{
attributes: {
attributeId: 1,
},
}
);
await use( testingPost );
await requestUtils.deletePost( testingPost.id );
},
postWithShowCounts: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Product Filter: Attribute Block - Color' },
TEMPLATE_PATH,
{
attributes: {
attributeId: 1,
showCounts: true,
},
}
);
await use( testingPost );
await requestUtils.deletePost( testingPost.id );
},
dropdownBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Product Filter: Attribute Block' },
TEMPLATE_PATH,
{
attributes: {
attributeId: 1,
displayStyle: 'dropdown',
},
}
);
await use( testingPost );
await requestUtils.deletePost( testingPost.id );
},
} );
test.describe( 'Product Filter: Attribute Block', async () => {
test.describe( 'With default display style', () => {
test.describe( 'With show counts enabled', () => {
test( 'Renders checkboxes with associated product counts', async ( {
page,
postWithShowCounts,
} ) => {
await page.goto( postWithShowCounts.link );
const attributes = page.locator(
'.wc-block-components-checkbox__label'
);
await expect( attributes ).toHaveCount( 5 );
for (
let i = 0;
i < COLOR_ATTRIBUTES_WITH_COUNTS.length;
i++
) {
await expect( attributes.nth( i ) ).toHaveText(
COLOR_ATTRIBUTES_WITH_COUNTS[ i ]
);
}
} );
} );
test( 'renders a checkbox list with the available attribute filters', async ( {
page,
defaultBlockPost,
} ) => {
await page.goto( defaultBlockPost.link );
const attributes = page.locator(
'.wc-block-components-checkbox__label'
);
await expect( attributes ).toHaveCount( 5 );
for ( let i = 0; i < COLOR_ATTRIBUTE_VALUES.length; i++ ) {
await expect( attributes.nth( i ) ).toHaveText(
COLOR_ATTRIBUTE_VALUES[ i ]
);
}
} );
test( 'filters the list of products by selecting an attribute', async ( {
page,
defaultBlockPost,
} ) => {
await page.goto( defaultBlockPost.link );
const grayCheckbox = page.getByText( 'Gray' );
await grayCheckbox.click();
// wait for navigation
await page.waitForURL( /.*filter_color=gray.*/ );
const products = page.locator( '.wc-block-product' );
await expect( products ).toHaveCount( 2 );
} );
} );
test.describe( "With display style 'dropdown'", () => {
test( 'renders a dropdown list with the available attribute filters', async ( {
page,
dropdownBlockPost,
} ) => {
await page.goto( dropdownBlockPost.link );
const dropdownLocator = page.locator(
'.wc-interactivity-dropdown'
);
await expect( dropdownLocator ).toBeVisible();
await dropdownLocator.click();
for ( let i = 0; i < COLOR_ATTRIBUTE_VALUES.length; i++ ) {
await expect(
dropdownLocator.getByText( COLOR_ATTRIBUTE_VALUES[ i ] )
).toBeVisible();
}
} );
test( 'Clicking a dropdown option should filter the displayed products', async ( {
page,
dropdownBlockPost,
} ) => {
await page.goto( dropdownBlockPost.link );
const dropdownLocator = page.locator(
'.wc-interactivity-dropdown'
);
await expect( dropdownLocator ).toBeVisible();
await dropdownLocator.click();
const yellowOption = page.getByText( 'Yellow' );
await yellowOption.click();
// wait for navigation
await page.waitForURL( /.*filter_color=yellow.*/ );
const products = page.locator( '.wc-block-product' );
await expect( products ).toHaveCount( 1 );
} );
} );
} );

21
plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.handlebars Normal file
View File

@ -0,0 +1,21 @@
<!-- wp:woocommerce/product-collection {"id":"bee7a337-f64e-4efd-be51-e68670b10000","queryId":0,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3,"shrinkColumns":true}} -->
<div class="wp-block-woocommerce-product-collection">
<!-- wp:woocommerce/product-template -->
<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
<!-- wp:woocommerce/product-button {"textAlign":"center","isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
<!-- /wp:woocommerce/product-template -->
<!-- wp:woocommerce/product-filter {"filterType":"rating-filter","heading":"Filter by Rating"} -->
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Filter by Attribute</h3>
<!-- /wp:heading -->
{{#> wp-block blockName='woocommerce/product-filter-attribute' attributes=attributes }}
{{/ wp-block }}
</div>
<!-- /wp:woocommerce/product-collection -->

20
plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/stock-status.block_theme.spec.ts
View File

@ -8,10 +8,10 @@ import { Post } from '@wordpress/e2e-test-utils-playwright/build-types/request-u
const TEMPLATE_PATH = path.join( __dirname, './stock-status.handlebars' );
const test = base.extend< {
dropdownBlockPostPage: Post;
defaultBlockPostPage: Post;
dropdownBlockPost: Post;
defaultBlockPost: Post;
} >( {
defaultBlockPostPage: async ( { requestUtils }, use ) => {
defaultBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Product Filter Stock Status Block' },
TEMPLATE_PATH,
@ -22,7 +22,7 @@ const test = base.extend< {
await requestUtils.deletePost( testingPost.id );
},
dropdownBlockPostPage: async ( { requestUtils }, use ) => {
dropdownBlockPost: async ( { requestUtils }, use ) => {
const testingPost = await requestUtils.createPostFromTemplate(
{ title: 'Product Filter Stock Status Block' },
TEMPLATE_PATH,
@ -42,9 +42,9 @@ test.describe( 'Product Filter: Stock Status Block', async () => {
test.describe( 'With default display style', () => {
test( 'renders a checkbox list with the available stock statuses', async ( {
page,
defaultBlockPostPage,
defaultBlockPost,
} ) => {
await page.goto( defaultBlockPostPage.link );
await page.goto( defaultBlockPost.link );
const stockStatuses = page.locator(
'.wc-block-components-checkbox__label'
@ -57,9 +57,9 @@ test.describe( 'Product Filter: Stock Status Block', async () => {
test( 'filters the list of products by selecting a stock status', async ( {
page,
defaultBlockPostPage,
defaultBlockPost,
} ) => {
await page.goto( defaultBlockPostPage.link );
await page.goto( defaultBlockPost.link );
const outOfStockCheckbox = page.getByText( 'Out of stock' );
await outOfStockCheckbox.click();
@ -76,9 +76,9 @@ test.describe( 'Product Filter: Stock Status Block', async () => {
test.describe( 'With dropdown display style', () => {
test( 'a dropdown is displayed with the available stock statuses', async ( {
page,
dropdownBlockPostPage,
dropdownBlockPost,
} ) => {
await page.goto( dropdownBlockPostPage.link );
await page.goto( dropdownBlockPost.link );
const dropdownLocator = page.locator(
'.wc-interactivity-dropdown'

4
plugins/woocommerce/changelog/45333-dev-e2e-improvements Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Comment: Add e2e tests for the experimental product filter by attribute block