Remove all instances of GUTENBERG_EDITOR_CONTEXT (https://github.com/woocommerce/woocommerce-blocks/pull/11126)
This commit is contained in:
Mike Jolley
GitHub
parent
14b5414c36
commit
27ae9acafc
|
|
@ -66,7 +66,6 @@ jobs:
|
|||
- name: E2E Tests (WP latest with Gutenberg plugin)
|
||||
env:
|
||||
WOOCOMMERCE_BLOCKS_PHASE: 3
|
||||
GUTENBERG_EDITOR_CONTEXT: 'gutenberg'
|
||||
run: |
|
||||
node ./bin/wp-env-with-gutenberg.js
|
||||
npm run wp-env start
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ You will need to stop `wp-env` and start it again. In some cases, you will also
|
|||
|
||||
Currently, we only run e2e tests with the most recent version of WordPress. We also have the infrastructure in place to run e2e tests with the most recent version of WordPress with Gutenberg installed, but [it's currently disabled](https://github.com/woocommerce/woocommerce-blocks/blob/07605450ffa4e460543980b7011b3bf8a8e82ff4/.github/workflows/php-js-e2e-tests.yml#L10).
|
||||
|
||||
When preparing for a new version of WordPress, it's a good practice to search for conditions in our tests that check for specific WP versions (with the variable `WP_VERSION`) or that check whether Gutenberg is installed (with the variable `GUTENBERG_EDITOR_CONTEXT`).
|
||||
When preparing for a new version of WordPress, it's a good practice to search for conditions in our tests that check for specific WP versions (with the variable `WP_VERSION`).
|
||||
|
||||
<!-- FEEDBACK -->
|
||||
|
||||
|
|
@ -118,4 +118,3 @@ When preparing for a new version of WordPress, it's a good practice to search fo
|
|||
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/javascript-testing.md)
|
||||
|
||||
<!-- /FEEDBACK -->
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ import { visitBlockPage } from '@woocommerce/blocks-test-utils';
|
|||
*/
|
||||
import {
|
||||
insertBlockDontWaitForInsertClose,
|
||||
GUTENBERG_EDITOR_CONTEXT,
|
||||
describeOrSkip,
|
||||
openSettingsSidebar,
|
||||
} from '../../utils';
|
||||
|
||||
|
|
@ -25,48 +23,46 @@ const block = {
|
|||
class: '.wp-block-query',
|
||||
};
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
`${ block.name } Block`,
|
||||
() => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
} );
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( `${ block.name } Block`, () => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
} );
|
||||
|
||||
it( 'can be inserted more than once', async () => {
|
||||
await insertBlockDontWaitForInsertClose( block.name );
|
||||
expect( await getAllBlocks() ).toHaveLength( 2 );
|
||||
} );
|
||||
it( 'can be inserted more than once', async () => {
|
||||
await insertBlockDontWaitForInsertClose( block.name );
|
||||
expect( await getAllBlocks() ).toHaveLength( 2 );
|
||||
} );
|
||||
|
||||
it( 'renders without crashing', async () => {
|
||||
await expect( page ).toRenderBlock( block );
|
||||
} );
|
||||
it( 'renders without crashing', async () => {
|
||||
await expect( page ).toRenderBlock( block );
|
||||
} );
|
||||
|
||||
/**
|
||||
* We changed the “Show only products on sale” from a top-level toggle
|
||||
* setting to a product filter, but tests for them haven't been updated
|
||||
* yet. We will fix these tests in a follow-up PR.
|
||||
*/
|
||||
it.skip( 'Editor preview shows only on sale products after enabling `Show only products on sale`', async () => {
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
const canvasEl = canvas();
|
||||
await openSettingsSidebar();
|
||||
await openListView();
|
||||
await page.click(
|
||||
'.block-editor-list-view-block__contents-container a.components-button'
|
||||
);
|
||||
const [ onSaleToggle ] = await page.$x(
|
||||
'//label[text()="Show only products on sale"]'
|
||||
);
|
||||
await onSaleToggle.click();
|
||||
await canvasEl.waitForSelector( `${ block.class } > p` );
|
||||
await canvasEl.waitForSelector(
|
||||
`${ block.class } > ul.wp-block-post-template`
|
||||
);
|
||||
const products = await canvasEl.$$(
|
||||
`${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
|
||||
);
|
||||
expect( products ).toHaveLength( 1 );
|
||||
} );
|
||||
}
|
||||
);
|
||||
/**
|
||||
* We changed the “Show only products on sale” from a top-level toggle
|
||||
* setting to a product filter, but tests for them haven't been updated
|
||||
* yet. We will fix these tests in a follow-up PR.
|
||||
*/
|
||||
it.skip( 'Editor preview shows only on sale products after enabling `Show only products on sale`', async () => {
|
||||
await visitBlockPage( `${ block.name } Block` );
|
||||
const canvasEl = canvas();
|
||||
await openSettingsSidebar();
|
||||
await openListView();
|
||||
await page.click(
|
||||
'.block-editor-list-view-block__contents-container a.components-button'
|
||||
);
|
||||
const [ onSaleToggle ] = await page.$x(
|
||||
'//label[text()="Show only products on sale"]'
|
||||
);
|
||||
await onSaleToggle.click();
|
||||
await canvasEl.waitForSelector( `${ block.class } > p` );
|
||||
await canvasEl.waitForSelector(
|
||||
`${ block.class } > ul.wp-block-post-template`
|
||||
);
|
||||
const products = await canvasEl.$$(
|
||||
`${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
|
||||
);
|
||||
expect( products ).toHaveLength( 1 );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import { setCheckbox } from '@woocommerce/e2e-utils';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../../utils';
|
||||
import {
|
||||
block,
|
||||
SELECTORS,
|
||||
|
|
@ -28,129 +27,127 @@ import {
|
|||
selectToken,
|
||||
} from './common';
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
`${ block.name } > Advanced Filters`,
|
||||
() => {
|
||||
let $productFiltersPanel: ElementHandle< Node >;
|
||||
const defaultCount = getFixtureProductsData().length;
|
||||
const saleCount = getFixtureProductsData( 'sale_price' ).length;
|
||||
const outOfStockCount = getFixtureProductsData( 'stock_status' ).filter(
|
||||
( status: string ) => status === 'outofstock'
|
||||
).length;
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( `${ block.name } > Advanced Filters`, () => {
|
||||
let $productFiltersPanel: ElementHandle< Node >;
|
||||
const defaultCount = getFixtureProductsData().length;
|
||||
const saleCount = getFixtureProductsData( 'sale_price' ).length;
|
||||
const outOfStockCount = getFixtureProductsData( 'stock_status' ).filter(
|
||||
( status: string ) => status === 'outofstock'
|
||||
).length;
|
||||
|
||||
beforeEach( async () => {
|
||||
/**
|
||||
* Reset the block page before each test to ensure the block is
|
||||
* inserted in a known state. This is also needed to ensure each
|
||||
* test can be run individually.
|
||||
*/
|
||||
await resetProductQueryBlockPage();
|
||||
await ensureSidebarOpened();
|
||||
await selectBlockByName( block.slug );
|
||||
$productFiltersPanel = await findToolsPanelWithTitle(
|
||||
'Advanced Filters'
|
||||
beforeEach( async () => {
|
||||
/**
|
||||
* Reset the block page before each test to ensure the block is
|
||||
* inserted in a known state. This is also needed to ensure each
|
||||
* test can be run individually.
|
||||
*/
|
||||
await resetProductQueryBlockPage();
|
||||
await ensureSidebarOpened();
|
||||
await selectBlockByName( block.slug );
|
||||
$productFiltersPanel = await findToolsPanelWithTitle(
|
||||
'Advanced Filters'
|
||||
);
|
||||
} );
|
||||
|
||||
/**
|
||||
* Reset the content of Product Query Block page after this test suite
|
||||
* to avoid breaking other tests.
|
||||
*/
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
} );
|
||||
|
||||
it( 'Editor preview shows all products by default', async () => {
|
||||
expect( await getPreviewProducts() ).toHaveLength( defaultCount );
|
||||
} );
|
||||
|
||||
it( 'On the front end, blocks shows all products by default', async () => {
|
||||
expect( await getPreviewProducts() ).toHaveLength( defaultCount );
|
||||
} );
|
||||
|
||||
describe( 'Sale Status', () => {
|
||||
it( 'Sale status is disabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).not.toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
} );
|
||||
|
||||
/**
|
||||
* Reset the content of Product Query Block page after this test suite
|
||||
* to avoid breaking other tests.
|
||||
*/
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
it( 'Can add and remove Sale Status filter', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await expect( $productFiltersPanel ).toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await expect( $productFiltersPanel ).not.toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Editor preview shows all products by default', async () => {
|
||||
expect( await getPreviewProducts() ).toHaveLength( defaultCount );
|
||||
it( 'Enable Sale Status > Editor preview shows only on sale products', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await setCheckbox(
|
||||
await getToggleIdByLabel( 'Show only products on sale' )
|
||||
);
|
||||
expect( await getPreviewProducts() ).toHaveLength( saleCount );
|
||||
} );
|
||||
|
||||
it( 'On the front end, blocks shows all products by default', async () => {
|
||||
expect( await getPreviewProducts() ).toHaveLength( defaultCount );
|
||||
it( 'Enable Sale Status > On the front end, block shows only on sale products', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await setCheckbox(
|
||||
await getToggleIdByLabel( 'Show only products on sale' )
|
||||
);
|
||||
await canvas().waitForSelector( SELECTORS.productsGrid );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect( await getFrontEndProducts() ).toHaveLength( saleCount );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'Stock Status', () => {
|
||||
it( 'Stock status is enabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
} );
|
||||
|
||||
describe( 'Sale Status', () => {
|
||||
it( 'Sale status is disabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).not.toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Can add and remove Sale Status filter', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await expect( $productFiltersPanel ).toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await expect( $productFiltersPanel ).not.toMatch(
|
||||
'Show only products on sale'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Enable Sale Status > Editor preview shows only on sale products', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await setCheckbox(
|
||||
await getToggleIdByLabel( 'Show only products on sale' )
|
||||
);
|
||||
expect( await getPreviewProducts() ).toHaveLength( saleCount );
|
||||
} );
|
||||
|
||||
it( 'Enable Sale Status > On the front end, block shows only on sale products', async () => {
|
||||
await toggleAdvancedFilter( 'Sale status' );
|
||||
await setCheckbox(
|
||||
await getToggleIdByLabel( 'Show only products on sale' )
|
||||
);
|
||||
await canvas().waitForSelector( SELECTORS.productsGrid );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect( await getFrontEndProducts() ).toHaveLength( saleCount );
|
||||
} );
|
||||
it( 'Can add and remove Stock Status filter', async () => {
|
||||
await toggleAdvancedFilter( 'Stock status' );
|
||||
await expect( $productFiltersPanel ).not.toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
await toggleAdvancedFilter( 'Stock status' );
|
||||
await expect( $productFiltersPanel ).toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
} );
|
||||
|
||||
describe( 'Stock Status', () => {
|
||||
it( 'Stock status is enabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Can add and remove Stock Status filter', async () => {
|
||||
await toggleAdvancedFilter( 'Stock status' );
|
||||
await expect( $productFiltersPanel ).not.toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
await toggleAdvancedFilter( 'Stock status' );
|
||||
await expect( $productFiltersPanel ).toMatchElement(
|
||||
SELECTORS.formTokenField.label,
|
||||
{ text: 'Stock status' }
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'All statuses are enabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).toMatch( 'In stock' );
|
||||
await expect( $productFiltersPanel ).toMatch( 'Out of stock' );
|
||||
await expect( $productFiltersPanel ).toMatch( 'On backorder' );
|
||||
} );
|
||||
|
||||
it( 'Set Stock status to Out of stock > Editor preview shows only out-of-stock products', async () => {
|
||||
await clearSelectedTokens( $productFiltersPanel );
|
||||
await selectToken( 'Stock status', 'Out of stock' );
|
||||
expect( await getPreviewProducts() ).toHaveLength(
|
||||
outOfStockCount
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Set Stock status to Out of stock > On the front end, block shows only out-of-stock products', async () => {
|
||||
await clearSelectedTokens( $productFiltersPanel );
|
||||
await selectToken( 'Stock status', 'Out of stock' );
|
||||
await canvas().waitForSelector( SELECTORS.productsGrid );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect( await getFrontEndProducts() ).toHaveLength(
|
||||
outOfStockCount
|
||||
);
|
||||
} );
|
||||
it( 'All statuses are enabled by default', async () => {
|
||||
await expect( $productFiltersPanel ).toMatch( 'In stock' );
|
||||
await expect( $productFiltersPanel ).toMatch( 'Out of stock' );
|
||||
await expect( $productFiltersPanel ).toMatch( 'On backorder' );
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
||||
it( 'Set Stock status to Out of stock > Editor preview shows only out-of-stock products', async () => {
|
||||
await clearSelectedTokens( $productFiltersPanel );
|
||||
await selectToken( 'Stock status', 'Out of stock' );
|
||||
expect( await getPreviewProducts() ).toHaveLength(
|
||||
outOfStockCount
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Set Stock status to Out of stock > On the front end, block shows only out-of-stock products', async () => {
|
||||
await clearSelectedTokens( $productFiltersPanel );
|
||||
await selectToken( 'Stock status', 'Out of stock' );
|
||||
await canvas().waitForSelector( SELECTORS.productsGrid );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect( await getFrontEndProducts() ).toHaveLength(
|
||||
outOfStockCount
|
||||
);
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../../utils';
|
||||
import {
|
||||
block,
|
||||
SELECTORS,
|
||||
|
|
@ -21,90 +20,75 @@ import {
|
|||
getEditorProductElementNodesCount,
|
||||
} from './common';
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
`${ block.name } > Atomic blocks`,
|
||||
() => {
|
||||
beforeEach( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( `${ block.name } > Atomic blocks`, () => {
|
||||
beforeEach( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
} );
|
||||
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
} );
|
||||
|
||||
it( 'Can add the Add to Cart Button block and render it on the front end', async () => {
|
||||
await page.waitForSelector( SELECTORS.productButton );
|
||||
await expect( canvas() ).toMatchElement( SELECTORS.productButton, {
|
||||
text: 'Add to cart',
|
||||
} );
|
||||
await insertInnerBlock( 'Add to Cart Button', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount( SELECTORS.productButton )
|
||||
).toEqual( 2 );
|
||||
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
await page.waitForSelector( SELECTORS.productButton );
|
||||
await expect( page ).toClick( 'button', {
|
||||
text: 'Add to cart',
|
||||
} );
|
||||
await shopper.block.goToCart();
|
||||
await page.waitForSelector( '.wc-block-cart-items__row' );
|
||||
expect(
|
||||
await getProductElementNodesCount( SELECTORS.cartItemRow )
|
||||
).toEqual( 1 );
|
||||
} );
|
||||
|
||||
it( 'Can add the Add to Cart Button block and render it on the front end', async () => {
|
||||
await page.waitForSelector( SELECTORS.productButton );
|
||||
await expect( canvas() ).toMatchElement( SELECTORS.productButton, {
|
||||
text: 'Add to cart',
|
||||
} );
|
||||
await insertInnerBlock(
|
||||
'Add to Cart Button',
|
||||
'core/post-template'
|
||||
);
|
||||
expect(
|
||||
await getEditorProductElementNodesCount(
|
||||
SELECTORS.productButton
|
||||
)
|
||||
).toEqual( 2 );
|
||||
it( 'Can add the Product Image block', async () => {
|
||||
await page.waitForSelector( SELECTORS.productImage );
|
||||
await insertInnerBlock( 'Product Image', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount( SELECTORS.productImage )
|
||||
).toEqual( 2 );
|
||||
} );
|
||||
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
await page.waitForSelector( SELECTORS.productButton );
|
||||
await expect( page ).toClick( 'button', {
|
||||
text: 'Add to cart',
|
||||
} );
|
||||
await shopper.block.goToCart();
|
||||
await page.waitForSelector( '.wc-block-cart-items__row' );
|
||||
expect(
|
||||
await getProductElementNodesCount( SELECTORS.cartItemRow )
|
||||
).toEqual( 1 );
|
||||
it( 'Can add the Product Price block and render it on the front end', async () => {
|
||||
const fixturePrices = getFixtureProductsData( 'regular_price' );
|
||||
const testPrice =
|
||||
fixturePrices[ Math.floor( Math.random() * fixturePrices.length ) ];
|
||||
await page.waitForSelector( SELECTORS.productPrice );
|
||||
await expect( canvas() ).toMatchElement( SELECTORS.productPrice, {
|
||||
text: testPrice,
|
||||
} );
|
||||
await insertInnerBlock( 'Product Price', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount( SELECTORS.productPrice )
|
||||
).toEqual( 2 );
|
||||
|
||||
it( 'Can add the Product Image block', async () => {
|
||||
await page.waitForSelector( SELECTORS.productImage );
|
||||
await insertInnerBlock( 'Product Image', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount(
|
||||
SELECTORS.productImage
|
||||
)
|
||||
).toEqual( 2 );
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
await page.waitForSelector( SELECTORS.productPrice );
|
||||
await expect( page ).toMatchElement( SELECTORS.productPrice, {
|
||||
text: testPrice,
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'Can add the Product Price block and render it on the front end', async () => {
|
||||
const fixturePrices = getFixtureProductsData( 'regular_price' );
|
||||
const testPrice =
|
||||
fixturePrices[
|
||||
Math.floor( Math.random() * fixturePrices.length )
|
||||
];
|
||||
await page.waitForSelector( SELECTORS.productPrice );
|
||||
await expect( canvas() ).toMatchElement( SELECTORS.productPrice, {
|
||||
text: testPrice,
|
||||
} );
|
||||
await insertInnerBlock( 'Product Price', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount(
|
||||
SELECTORS.productPrice
|
||||
)
|
||||
).toEqual( 2 );
|
||||
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
await page.waitForSelector( SELECTORS.productPrice );
|
||||
await expect( page ).toMatchElement( SELECTORS.productPrice, {
|
||||
text: testPrice,
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'Can add the Product Ratings block and render it on the front end', async () => {
|
||||
await insertInnerBlock( 'Product Rating', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount(
|
||||
SELECTORS.productRating
|
||||
)
|
||||
).toEqual( 1 );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect(
|
||||
await getProductElementNodesCount( SELECTORS.productRating )
|
||||
).toEqual( getFixtureProductsData().length );
|
||||
} );
|
||||
}
|
||||
);
|
||||
it( 'Can add the Product Ratings block and render it on the front end', async () => {
|
||||
await insertInnerBlock( 'Product Rating', 'core/post-template' );
|
||||
expect(
|
||||
await getEditorProductElementNodesCount( SELECTORS.productRating )
|
||||
).toEqual( 1 );
|
||||
await saveOrPublish();
|
||||
await shopper.block.goToBlockPage( block.name );
|
||||
expect(
|
||||
await getProductElementNodesCount( SELECTORS.productRating )
|
||||
).toEqual( getFixtureProductsData().length );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../../utils';
|
||||
import {
|
||||
block,
|
||||
SELECTORS,
|
||||
|
|
@ -80,79 +79,77 @@ const selectPopularFilter = async ( filter: string ) => {
|
|||
}
|
||||
};
|
||||
|
||||
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
|
||||
'Product Query > Popular Filters',
|
||||
() => {
|
||||
let $popularFiltersPanel: ElementHandle< Node >;
|
||||
beforeEach( async () => {
|
||||
/**
|
||||
* Reset the block page before each test to ensure the block is
|
||||
* inserted in a known state. This is also needed to ensure each
|
||||
* test can be run individually.
|
||||
*/
|
||||
await resetProductQueryBlockPage();
|
||||
$popularFiltersPanel = await getPopularFilterPanel();
|
||||
} );
|
||||
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( 'Product Query > Popular Filters', () => {
|
||||
let $popularFiltersPanel: ElementHandle< Node >;
|
||||
beforeEach( async () => {
|
||||
/**
|
||||
* Reset the content of Product Query Block page after this test suite
|
||||
* to avoid breaking other tests.
|
||||
* Reset the block page before each test to ensure the block is
|
||||
* inserted in a known state. This is also needed to ensure each
|
||||
* test can be run individually.
|
||||
*/
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
await resetProductQueryBlockPage();
|
||||
$popularFiltersPanel = await getPopularFilterPanel();
|
||||
} );
|
||||
|
||||
/**
|
||||
* Reset the content of Product Query Block page after this test suite
|
||||
* to avoid breaking other tests.
|
||||
*/
|
||||
afterAll( async () => {
|
||||
await resetProductQueryBlockPage();
|
||||
} );
|
||||
|
||||
it( 'Popular Filters is expanded by default', async () => {
|
||||
await expect( $popularFiltersPanel ).toMatch(
|
||||
'Arrange products by popular pre-sets.'
|
||||
);
|
||||
} );
|
||||
|
||||
it( 'Sorted by title is the default preset', async () => {
|
||||
const currentFilter = await getCurrentPopularFilter(
|
||||
$popularFiltersPanel
|
||||
);
|
||||
expect( currentFilter ).toEqual( 'Sorted by title' );
|
||||
} );
|
||||
|
||||
describe.each( [
|
||||
{
|
||||
filter: 'Sorted by title',
|
||||
shortcode: '[products orderby="title" order="ASC" limit="9"]',
|
||||
},
|
||||
{
|
||||
filter: 'Newest',
|
||||
shortcode: '[products orderby="date" order="DESC" limit="9"]',
|
||||
},
|
||||
/**
|
||||
* The following tests are commented out because they are flaky
|
||||
* due to the lack of orders and reviews in the test environment.
|
||||
*
|
||||
* @see https://github.com/woocommerce/woocommerce-blocks/issues/8116
|
||||
*/
|
||||
// {
|
||||
// filter: 'Best Selling',
|
||||
// shortcode: '[products best_selling="true" limit="9"]',
|
||||
// },
|
||||
// {
|
||||
// filter: 'Top Rated',
|
||||
// shortcode: '[products top_rated="true" limit="9"]',
|
||||
// },
|
||||
] )( '$filter', ( { filter, shortcode } ) => {
|
||||
beforeEach( async () => {
|
||||
await selectPopularFilter( filter );
|
||||
} );
|
||||
it( 'Editor preview and block frontend display the same products', async () => {
|
||||
const { previewProducts, frontEndProducts } =
|
||||
await setupEditorFrontendComparison();
|
||||
expect( frontEndProducts ).toEqual( previewProducts );
|
||||
} );
|
||||
|
||||
it( 'Popular Filters is expanded by default', async () => {
|
||||
await expect( $popularFiltersPanel ).toMatch(
|
||||
'Arrange products by popular pre-sets.'
|
||||
);
|
||||
it( 'Products are displayed in the correct order', async () => {
|
||||
const { productQueryProducts, shortcodeProducts } =
|
||||
await setupProductQueryShortcodeComparison( shortcode );
|
||||
expect( productQueryProducts ).toEqual( shortcodeProducts );
|
||||
} );
|
||||
|
||||
it( 'Sorted by title is the default preset', async () => {
|
||||
const currentFilter = await getCurrentPopularFilter(
|
||||
$popularFiltersPanel
|
||||
);
|
||||
expect( currentFilter ).toEqual( 'Sorted by title' );
|
||||
} );
|
||||
|
||||
describe.each( [
|
||||
{
|
||||
filter: 'Sorted by title',
|
||||
shortcode: '[products orderby="title" order="ASC" limit="9"]',
|
||||
},
|
||||
{
|
||||
filter: 'Newest',
|
||||
shortcode: '[products orderby="date" order="DESC" limit="9"]',
|
||||
},
|
||||
/**
|
||||
* The following tests are commented out because they are flaky
|
||||
* due to the lack of orders and reviews in the test environment.
|
||||
*
|
||||
* @see https://github.com/woocommerce/woocommerce-blocks/issues/8116
|
||||
*/
|
||||
// {
|
||||
// filter: 'Best Selling',
|
||||
// shortcode: '[products best_selling="true" limit="9"]',
|
||||
// },
|
||||
// {
|
||||
// filter: 'Top Rated',
|
||||
// shortcode: '[products top_rated="true" limit="9"]',
|
||||
// },
|
||||
] )( '$filter', ( { filter, shortcode } ) => {
|
||||
beforeEach( async () => {
|
||||
await selectPopularFilter( filter );
|
||||
} );
|
||||
it( 'Editor preview and block frontend display the same products', async () => {
|
||||
const { previewProducts, frontEndProducts } =
|
||||
await setupEditorFrontendComparison();
|
||||
expect( frontEndProducts ).toEqual( previewProducts );
|
||||
} );
|
||||
|
||||
it( 'Products are displayed in the correct order', async () => {
|
||||
const { productQueryProducts, shortcodeProducts } =
|
||||
await setupProductQueryShortcodeComparison( shortcode );
|
||||
expect( productQueryProducts ).toEqual( shortcodeProducts );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
);
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -4,38 +4,31 @@
|
|||
import { switchUserToAdmin } from '@wordpress/e2e-test-utils';
|
||||
import { visitBlockPage } from '@woocommerce/blocks-test-utils';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../utils';
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( 'Product Search Legacy Block', () => {
|
||||
beforeAll( async () => {
|
||||
await switchUserToAdmin();
|
||||
await visitBlockPage( 'Product Search Legacy Block' );
|
||||
} );
|
||||
|
||||
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',
|
||||
} );
|
||||
|
||||
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…"]'
|
||||
);
|
||||
} );
|
||||
}
|
||||
);
|
||||
await expect( page ).toMatchElement(
|
||||
'.wp-block-search__input[value="Search products…"]'
|
||||
);
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -7,40 +7,33 @@ import {
|
|||
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();
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( `${ 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…"]'
|
||||
);
|
||||
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…"]'
|
||||
);
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -1,43 +1,40 @@
|
|||
/**
|
||||
* 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' );
|
||||
} );
|
||||
// These tests are skipped and previously relied on GUTENBERG_EDITOR_CONTEXT.
|
||||
describe.skip( `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 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' );
|
||||
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' ),
|
||||
] );
|
||||
await Promise.all( [
|
||||
page.waitForNavigation(),
|
||||
page.keyboard.press( 'Enter' ),
|
||||
] );
|
||||
|
||||
const products = await page.$$( 'ul.products.columns-3 > li' );
|
||||
const products = await page.$$( 'ul.products.columns-3 > li' );
|
||||
|
||||
expect( products ).toHaveLength( 2 );
|
||||
expect( products ).toHaveLength( 2 );
|
||||
|
||||
const productTitles = await getTextContent(
|
||||
'ul.products.columns-3 .woocommerce-loop-product__title'
|
||||
);
|
||||
const productTitles = await getTextContent(
|
||||
'ul.products.columns-3 .woocommerce-loop-product__title'
|
||||
);
|
||||
|
||||
expect( productTitles ).toContain( '32GB USB Stick' );
|
||||
expect( productTitles ).toContain( '128GB USB Stick' );
|
||||
} );
|
||||
}
|
||||
);
|
||||
expect( productTitles ).toContain( '32GB USB Stick' );
|
||||
expect( productTitles ).toContain( '128GB USB Stick' );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -42,8 +42,6 @@ export const adminPassword = config.get( 'users.admin.password' );
|
|||
export const client = HTTPClientFactory.build( BASE_URL )
|
||||
.withBasicAuth( adminUsername, adminPassword )
|
||||
.create();
|
||||
export const GUTENBERG_EDITOR_CONTEXT =
|
||||
process.env.GUTENBERG_EDITOR_CONTEXT || 'core';
|
||||
export const DEFAULT_TIMEOUT = 30000;
|
||||
export const SHOP_CHECKOUT_BLOCK_PAGE = BASE_URL + 'checkout-block/';
|
||||
|
||||
|
|
@ -447,14 +445,6 @@ export const waitForAllProductsBlockLoaded = async () => {
|
|||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Execute or skip the test suite base on the provided condition.
|
||||
*
|
||||
* @param {boolean} condition Condition to execute test suite.
|
||||
*/
|
||||
export const describeOrSkip = ( condition ) =>
|
||||
condition ? describe : describe.skip;
|
||||
|
||||
/**
|
||||
* Get all blocks in the document that match a certain slug.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue