Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add custom jest e2e matcher #2780

Merged
merged 1 commit into from Jun 25, 2020
Merged

Add custom jest e2e matcher #2780

merged 1 commit into from Jun 25, 2020

Conversation

senadir
Copy link
Member

@senadir senadir commented Jun 25, 2020

This PR adds a custom matcher to jest for us to use in E2E tests toRenderBlock it checks if the page has any broken blocks in it, either due to not being registered, validation issues, or js error (caught by our block boundary), it also checks if the blocks exist, since the rest can all pass with no block.

The matcher is async so you will need to append await for it to work.

closes #2709

How to use

await expect( page ).toRenderBlock( {
	name: 'Single Product',
	class: '.wc-block-single-product'
} );

Or if you follow the new process of writing tests, it should be like this

await expect( page ).toRenderBlock( block );

@senadir senadir added the needs: tests The issue/PR needs tests before it can move forward. label Jun 25, 2020
@senadir senadir requested a review from a team as a code owner June 25, 2020 10:19
@senadir senadir self-assigned this Jun 25, 2020
@senadir senadir requested review from haszari and nerrad and removed request for a team June 25, 2020 10:19
@github-actions
Copy link
Contributor

Size Change: 0 B

Total Size: 1.59 MB

ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 7.24 kB 0 B
build/active-filters.js 7.95 kB 0 B
build/all-products-frontend.js 41.3 kB 0 B
build/all-products.js 25 kB 0 B
build/all-reviews-legacy.js 9.29 kB 0 B
build/all-reviews.js 9.6 kB 0 B
build/attribute-filter-frontend.js 16.8 kB 0 B
build/attribute-filter.js 11.6 kB 0 B
build/block-error-boundary-legacy.js 775 B 0 B
build/block-error-boundary.js 775 B 0 B
build/blocks-legacy.js 2.92 kB 0 B
build/blocks.js 2.92 kB 0 B
build/cart-frontend.js 63.8 kB 0 B
build/cart.js 33.1 kB 0 B
build/checkout-frontend.js 80.4 kB 0 B
build/checkout.js 38.6 kB 0 B
build/custom-select-control-style-legacy.js 782 B 0 B
build/custom-select-control-style.js 783 B 0 B
build/editor-legacy-rtl.css 12.5 kB 0 B
build/editor-legacy.css 12.5 kB 0 B
build/editor-rtl.css 13.5 kB 0 B
build/editor.css 13.5 kB 0 B
build/featured-category-legacy.js 7.27 kB 0 B
build/featured-category.js 7.59 kB 0 B
build/featured-product-legacy.js 9.51 kB 0 B
build/featured-product.js 9.84 kB 0 B
build/handpicked-products-legacy.js 6.91 kB 0 B
build/handpicked-products.js 7.24 kB 0 B
build/price-filter-frontend.js 14.1 kB 0 B
build/price-filter.js 10.1 kB 0 B
build/product-best-sellers-legacy.js 6.99 kB 0 B
build/product-best-sellers.js 7.3 kB 0 B
build/product-categories-legacy.js 3.23 kB 0 B
build/product-categories.js 3.22 kB 0 B
build/product-category-legacy.js 7.91 kB 0 B
build/product-category.js 8.25 kB 0 B
build/product-list-style-legacy.js 775 B 0 B
build/product-new-legacy.js 7.15 kB 0 B
build/product-new.js 7.47 kB 0 B
build/product-on-sale-legacy.js 7.52 kB 0 B
build/product-on-sale.js 7.87 kB 0 B
build/product-search-legacy.js 3.14 kB 0 B
build/product-search.js 3.43 kB 0 B
build/product-tag-legacy.js 6.08 kB 0 B
build/product-tag.js 6.39 kB 0 B
build/product-top-rated-legacy.js 7.12 kB 0 B
build/product-top-rated.js 7.45 kB 0 B
build/products-by-attribute-legacy.js 7.88 kB 0 B
build/products-by-attribute.js 8.2 kB 0 B
build/reviews-by-category-legacy.js 11.3 kB 0 B
build/reviews-by-category.js 11.6 kB 0 B
build/reviews-by-product-legacy.js 12.8 kB 0 B
build/reviews-by-product.js 13.1 kB 0 B
build/reviews-frontend-legacy.js 8.16 kB 0 B
build/reviews-frontend.js 9.01 kB 0 B
build/single-product-frontend.js 44.1 kB 0 B
build/single-product.js 18.3 kB 0 B
build/snackbar-notice-style-legacy.js 778 B 0 B
build/snackbar-notice-style.js 779 B 0 B
build/spinner-style-legacy.js 772 B 0 B
build/spinner-style.js 772 B 0 B
build/style-legacy-rtl.css 5.56 kB 0 B
build/style-legacy.css 5.57 kB 0 B
build/style-rtl.css 17.9 kB 0 B
build/style.css 17.9 kB 0 B
build/vendors-legacy.js 367 kB 0 B
build/vendors-style-legacy-rtl.css 1.03 kB 0 B
build/vendors-style-legacy.css 1.03 kB 0 B
build/vendors-style-legacy.js 102 B 0 B
build/vendors-style-rtl.css 1.03 kB 0 B
build/vendors-style.css 1.03 kB 0 B
build/vendors-style.js 102 B 0 B
build/vendors.js 415 kB 0 B
build/wc-blocks-data.js 7.09 kB 0 B
build/wc-blocks-middleware.js 932 B 0 B
build/wc-blocks-registry.js 2.19 kB 0 B
build/wc-payment-method-cheque.js 794 B 0 B
build/wc-payment-method-paypal.js 830 B 0 B
build/wc-payment-method-stripe.js 11.9 kB 0 B
build/wc-settings.js 2.14 kB 0 B
build/wc-shared-context.js 1.51 kB 0 B

compressed-size-action

Copy link
Contributor

@nerrad nerrad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ this Nadir! Great idea. It really looks like something that would be useful to the Gutenberg project in general and you should consider contributing there too!

The only concern I have is that the matching could break if the text being matched against changes in the editor. However that's unlikely because it would mean a change in the strings being translated.

Still that should be trivial to fix if it happened.

).toBeNull();

await expect( page ).toMatchElement( block.class );
await expect( page ).toRenderBlock( block );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is such a nice reduction of code 👍

@senadir senadir merged commit 50e7411 into main Jun 25, 2020
@senadir senadir deleted the add/jest-matcher branch June 25, 2020 13:00
@haszari haszari added this to the 2.9.0 milestone Jul 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: tests The issue/PR needs tests before it can move forward.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Introduce Jest matcher to facilitate E2E block validation.
4 participants