Product Search E2E tests (https://github.com/woocommerce/woocommerce-blocks/pull/7005)
This commit is contained in:
Tung Du
GitHub
parent
6b251cc222
commit
a80426917f
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"title": "Product Search Legacy Block",
|
||||
"pageContent": "<!-- wp:woocommerce/product-search {\"formId\":\"wc-block-product-search-1\"} /-->"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"title": "Product Search Block",
|
||||
"pageContent": "<!-- wp:woocommerce/product-search {\"formId\":\"wc-block-product-search-1\"} -->\n<div class=\"wp-block-woocommerce-product-search\"><div class=\"wc-block-product-search\"><form role=\"search\" method=\"get\" action=\"http://localhost:8889/\"><label for=\"wc-block-product-search-1\" class=\"wc-block-product-search__label\">Search</label><div class=\"wc-block-product-search__fields\"><input type=\"search\" id=\"wc-block-product-search-1\" class=\"wc-block-product-search__field\" placeholder=\"Search products…\" name=\"s\"/><input type=\"hidden\" name=\"post_type\" value=\"product\"/><button type=\"submit\" class=\"wc-block-product-search__button\" label=\"Search\"><svg aria-hidden=\"true\" role=\"img\" focusable=\"false\" class=\"dashicon dashicons-arrow-right-alt2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\"><path d=\"M6 15l5-5-5-5 1-2 7 7-7 7z\"></path></svg></button></div></form></div></div>\n<!-- /wp:woocommerce/product-search -->"
|
||||
"pageContent": "<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Search products…\",\"buttonText\":\"Search\",\"query\":{\"post_type\":\"product\"}} /-->"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Product Search Block can change field labels in editor 1`] = `"<!-- wp:woocommerce/product-search {\\"label\\":\\"The Label\\",\\"placeholder\\":\\"The Placeholder\\",\\"formId\\":\\"wc-block-product-search-1\\"} /-->"`;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { switchUserToAdmin } from '@wordpress/e2e-test-utils';
|
||||
import { visitBlockPage } from '@woocommerce/blocks-test-utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../utils';
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
'Product Search Legacy Block',
|
||||
() => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( 'Product Search Legacy Block' );
|
||||
} );
|
||||
|
||||
it( 'render the upgrade prompt', async () => {
|
||||
await expect( page ).toMatch(
|
||||
'This version of the Product Search block is outdated. Upgrade to continue using.'
|
||||
);
|
||||
await expect( page ).toMatch( 'Upgrade Block' );
|
||||
} );
|
||||
|
||||
it( 'clicking the upgrade button convert the legacy block to core/search variation', async () => {
|
||||
await page.click( '.block-editor-warning__action button' );
|
||||
|
||||
await expect( page ).toMatchElement( '.wp-block-search' );
|
||||
|
||||
await expect( page ).toMatchElement( '.wp-block-search__label', {
|
||||
text: 'Search',
|
||||
} );
|
||||
|
||||
await expect( page ).toMatchElement(
|
||||
'.wp-block-search__input[value="Search products…"]'
|
||||
);
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
switchUserToAdmin,
|
||||
getEditedPostContent,
|
||||
openDocumentSettingsSidebar,
|
||||
} from '@wordpress/e2e-test-utils';
|
||||
import { clearAndFillInput } from '@woocommerce/e2e-utils';
|
||||
import {
|
||||
findLabelWithText,
|
||||
visitBlockPage,
|
||||
} from '@woocommerce/blocks-test-utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../utils';
|
||||
|
||||
const block = {
|
||||
name: 'Product Search',
|
||||
slug: 'woocommerce/product-search',
|
||||
class: '.wc-block-product-search',
|
||||
};
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT !== 'gutenberg' )(
|
||||
`${ block.name } Block`,
|
||||
() => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
} );
|
||||
|
||||
it( 'renders without crashing', async () => {
|
||||
await expect( page ).toRenderBlock( block );
|
||||
} );
|
||||
|
||||
it( 'can toggle field label', async () => {
|
||||
await openDocumentSettingsSidebar();
|
||||
await page.click( block.class );
|
||||
const selector = `${ block.class } .wc-block-product-search__label`;
|
||||
const toggleLabel = await findLabelWithText(
|
||||
'Show search field label'
|
||||
);
|
||||
await expect( toggleLabel ).toToggleElement( selector );
|
||||
} );
|
||||
|
||||
it( 'can change field labels in editor', async () => {
|
||||
await expect( page ).toFill(
|
||||
'textarea.wc-block-product-search__label',
|
||||
'I am a new label'
|
||||
);
|
||||
|
||||
await expect( page ).toFill(
|
||||
'.wc-block-product-search__field input',
|
||||
'I am a new placeholder'
|
||||
);
|
||||
|
||||
await clearAndFillInput(
|
||||
'textarea.wc-block-product-search__label',
|
||||
'The Label'
|
||||
);
|
||||
await clearAndFillInput(
|
||||
'.wc-block-product-search__field input',
|
||||
'The Placeholder'
|
||||
);
|
||||
|
||||
expect( await getEditedPostContent() ).toMatchSnapshot();
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
switchUserToAdmin,
|
||||
createNewPost,
|
||||
insertBlock,
|
||||
} from '@wordpress/e2e-test-utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../utils';
|
||||
|
||||
const block = {
|
||||
name: 'Product Search',
|
||||
slug: 'core/search',
|
||||
class: '.wp-block-search',
|
||||
};
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
`${ block.name } Block`,
|
||||
() => {
|
||||
it( 'inserting Product Search block renders the core/search variation', async () => {
|
||||
await switchUserToAdmin();
|
||||
|
||||
await createNewPost( {
|
||||
postType: 'page',
|
||||
} );
|
||||
|
||||
await insertBlock( block.name );
|
||||
|
||||
await page.waitForSelector( block.class );
|
||||
|
||||
await expect( page ).toRenderBlock( block );
|
||||
|
||||
await expect( page ).toMatchElement( '.wp-block-search__label', {
|
||||
text: 'Search',
|
||||
} );
|
||||
|
||||
await expect( page ).toMatchElement(
|
||||
'.wp-block-search__input[value="Search products…"]'
|
||||
);
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../utils';
|
||||
import { shopper } from '../../../utils';
|
||||
import { getTextContent } from '../../page-utils';
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
`Shopper → Product Search`,
|
||||
() => {
|
||||
beforeEach( async () => {
|
||||
await shopper.block.goToBlockPage( 'Product Search' );
|
||||
await page.waitForSelector( '.wp-block-search' );
|
||||
} );
|
||||
|
||||
it( 'should render product variation', async () => {
|
||||
const [ postType ] = await getTextContent(
|
||||
'.wp-block-search input[name="post_type"]'
|
||||
);
|
||||
await expect( postType ).toBe( 'product' );
|
||||
} );
|
||||
|
||||
it( 'should be able to search for products', async () => {
|
||||
await page.type( '.wp-block-search input[name="s"]', 'Stick' );
|
||||
|
||||
await Promise.all( [
|
||||
page.waitForNavigation(),
|
||||
page.keyboard.press( 'Enter' ),
|
||||
] );
|
||||
|
||||
const products = await page.$$( 'ul.products.columns-3 > li' );
|
||||
|
||||
expect( products ).toHaveLength( 2 );
|
||||
|
||||
const productTitles = await getTextContent(
|
||||
'ul.products.columns-3 .woocommerce-loop-product__title'
|
||||
);
|
||||
|
||||
expect( productTitles ).toContain( '32GB USB Stick' );
|
||||
expect( productTitles ).toContain( '128GB USB Stick' );
|
||||
} );
|
||||
}
|
||||
);
|
||||
Loading…
Reference in New Issue