Blocks: Fix JS unit tests (#47516)
* Blocks: Fix JS unit tests * Add changefile(s) from automation for the following project(s): woocommerce-blocks * trigger CI --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio
GitHub
parent
e65481aa27
commit
8c6efe072b
|
|
@ -0,0 +1,59 @@
|
|||
{
|
||||
"rootDir": "../../",
|
||||
"collectCoverageFrom": [
|
||||
"assets/js/**/*.js",
|
||||
"!**/node_modules/**",
|
||||
"!**/vendor/**",
|
||||
"!**/test/**"
|
||||
],
|
||||
"moduleDirectories": [ "node_modules" ],
|
||||
"moduleNameMapper": {
|
||||
"@woocommerce/atomic-blocks": "assets/js/atomic/blocks",
|
||||
"@woocommerce/atomic-utils": "assets/js/atomic/utils",
|
||||
"@woocommerce/icons": "assets/js/icons",
|
||||
"@woocommerce/settings": "assets/js/settings/shared",
|
||||
"@woocommerce/blocks/(.*)$": "assets/js/blocks/$1",
|
||||
"@woocommerce/block-settings": "assets/js/settings/blocks",
|
||||
"@woocommerce/editor-components(.*)$": "assets/js/editor-components/$1",
|
||||
"@woocommerce/blocks-registry": "assets/js/blocks-registry",
|
||||
"@woocommerce/blocks-checkout": "packages/checkout",
|
||||
"@woocommerce/blocks-components": "packages/components",
|
||||
"@woocommerce/price-format": "packages/prices",
|
||||
"@woocommerce/block-hocs(.*)$": "assets/js/hocs/$1",
|
||||
"@woocommerce/base-components(.*)$": "assets/js/base/components/$1",
|
||||
"@woocommerce/base-context(.*)$": "assets/js/base/context/$1",
|
||||
"@woocommerce/base-hocs(.*)$": "assets/js/base/hocs/$1",
|
||||
"@woocommerce/base-hooks(.*)$": "assets/js/base/hooks/$1",
|
||||
"@woocommerce/base-utils(.*)$": "assets/js/base/utils",
|
||||
"@woocommerce/block-data": "assets/js/data",
|
||||
"@woocommerce/resource-previews": "assets/js/previews",
|
||||
"@woocommerce/shared-context": "assets/js/shared/context",
|
||||
"@woocommerce/shared-hocs": "assets/js/shared/hocs",
|
||||
"@woocommerce/blocks-test-utils": "tests/utils",
|
||||
"@woocommerce/types": "assets/js/types",
|
||||
"@woocommerce/utils": "assets/js/utils",
|
||||
"@woocommerce/interactivity": "assets/js/interactivity",
|
||||
"^react$": "<rootDir>/node_modules/react",
|
||||
"^react-dom$": "<rootDir>/node_modules/react-dom"
|
||||
},
|
||||
"setupFiles": [
|
||||
"@wordpress/jest-preset-default/scripts/setup-globals.js",
|
||||
"<rootDir>/tests/js/setup-globals.js",
|
||||
"<rootDir>/tests/js/setup-fetch.js"
|
||||
],
|
||||
"setupFilesAfterEnv": [
|
||||
"<rootDir>/tests/js/setup-after-env.ts"
|
||||
],
|
||||
"testPathIgnorePatterns": [
|
||||
"<rootDir>/tests/",
|
||||
"<rootDir>/node_modules/",
|
||||
"<rootDir>/vendor/"
|
||||
],
|
||||
"transformIgnorePatterns": [ "node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)" ],
|
||||
"testEnvironment": "jsdom",
|
||||
"preset": "@wordpress/jest-preset-default",
|
||||
"transform": {
|
||||
"^.+\\.(js|ts|tsx)$": "<rootDir>/tests/js/jestPreprocess.js"
|
||||
},
|
||||
"verbose": true
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const babelOptions = {
|
||||
presets: [ '@babel/preset-typescript', '@wordpress/babel-preset-default' ],
|
||||
plugins: [
|
||||
'explicit-exports-references',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
};
|
||||
|
||||
module.exports =
|
||||
require( 'babel-jest' ).default.createTransformer( babelOptions );
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import '@testing-library/jest-dom';
|
||||
import '@wordpress/jest-console';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// This ensures you can use `window.fetch()` in your Jest tests.
|
||||
require( 'jest-fetch-mock' ).enableMocks();
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
// Set up `wp.*` aliases. Doing this because any tests importing wp stuff will likely run into this.
|
||||
global.wp = {};
|
||||
require( '@wordpress/data' );
|
||||
// wcSettings is required by @woocommerce/* packages
|
||||
global.wcSettings = {
|
||||
adminUrl: 'https://vagrant.local/wp/wp-admin/',
|
||||
addressFormats: {
|
||||
default:
|
||||
'{name}\n{company}\n{address_1}\n{address_2}\n{city}\n{state}\n{postcode}\n{country}',
|
||||
JP: '{postcode}\n{state} {city} {address_1}\n{address_2}\n{company}\n{last_name} {first_name}\n{country}',
|
||||
CA: '{company}\n{name}\n{address_1}\n{address_2}\n{city} {state_code} {postcode}\n{country}',
|
||||
},
|
||||
shippingMethodsExist: true,
|
||||
currency: {
|
||||
code: 'USD',
|
||||
precision: 2,
|
||||
symbol: '$',
|
||||
},
|
||||
currentUserIsAdmin: false,
|
||||
date: {
|
||||
dow: 0,
|
||||
},
|
||||
hasFilterableProducts: true,
|
||||
orderStatuses: {
|
||||
pending: 'Pending payment',
|
||||
processing: 'Processing',
|
||||
'on-hold': 'On hold',
|
||||
completed: 'Completed',
|
||||
cancelled: 'Cancelled',
|
||||
refunded: 'Refunded',
|
||||
failed: 'Failed',
|
||||
},
|
||||
placeholderImgSrc: 'placeholder.jpg',
|
||||
productCount: 101,
|
||||
locale: {
|
||||
siteLocale: 'en_US',
|
||||
userLocale: 'en_US',
|
||||
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
|
||||
},
|
||||
countries: {
|
||||
AT: 'Austria',
|
||||
CA: 'Canada',
|
||||
GB: 'United Kingdom (UK)',
|
||||
},
|
||||
countryData: {
|
||||
AT: {
|
||||
states: {},
|
||||
allowBilling: true,
|
||||
allowShipping: true,
|
||||
locale: {
|
||||
postcode: { priority: 65 },
|
||||
state: { required: false, hidden: true },
|
||||
},
|
||||
format: '{company}\n{name}\n{address_1}\n{address_2}\n{postcode} {city}\n{country}',
|
||||
},
|
||||
CA: {
|
||||
states: {
|
||||
ON: 'Ontario',
|
||||
},
|
||||
allowBilling: true,
|
||||
allowShipping: true,
|
||||
locale: {
|
||||
postcode: { label: 'Postal code' },
|
||||
state: { label: 'Province' },
|
||||
},
|
||||
format: '{company}\n{name}\n{address_1}\n{address_2}\n{city} {state_code} {postcode}\n{country}',
|
||||
},
|
||||
JP: {
|
||||
allowBilling: true,
|
||||
allowShipping: true,
|
||||
states: {
|
||||
JP28: 'Hyogo',
|
||||
},
|
||||
locale: {
|
||||
last_name: { priority: 10 },
|
||||
first_name: { priority: 20 },
|
||||
postcode: {
|
||||
priority: 65,
|
||||
},
|
||||
state: {
|
||||
label: 'Prefecture',
|
||||
priority: 66,
|
||||
},
|
||||
city: { priority: 67 },
|
||||
address_1: { priority: 68 },
|
||||
address_2: { priority: 69 },
|
||||
},
|
||||
format: '{postcode}\n{state} {city} {address_1}\n{address_2}\n{company}\n{last_name} {first_name}\n{country}',
|
||||
},
|
||||
GB: {
|
||||
states: {},
|
||||
allowBilling: true,
|
||||
allowShipping: true,
|
||||
locale: {
|
||||
postcode: { label: 'Postcode' },
|
||||
state: { label: 'County', required: false },
|
||||
},
|
||||
},
|
||||
},
|
||||
storePages: {
|
||||
myaccount: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: '',
|
||||
},
|
||||
shop: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: '',
|
||||
},
|
||||
cart: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: '',
|
||||
},
|
||||
checkout: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: 'https://local/checkout/',
|
||||
},
|
||||
privacy: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: '',
|
||||
},
|
||||
terms: {
|
||||
id: 0,
|
||||
title: '',
|
||||
permalink: '',
|
||||
},
|
||||
},
|
||||
attributes: [
|
||||
{
|
||||
attribute_id: '1',
|
||||
attribute_name: 'color',
|
||||
attribute_label: 'Color',
|
||||
attribute_type: 'select',
|
||||
attribute_orderby: 'menu_order',
|
||||
attribute_public: 0,
|
||||
},
|
||||
{
|
||||
attribute_id: '2',
|
||||
attribute_name: 'size',
|
||||
attribute_label: 'Size',
|
||||
attribute_type: 'select',
|
||||
attribute_orderby: 'menu_order',
|
||||
attribute_public: 0,
|
||||
},
|
||||
],
|
||||
defaultFields: {
|
||||
first_name: {
|
||||
label: 'First name',
|
||||
optionalLabel: 'First name (optional)',
|
||||
autocomplete: 'given-name',
|
||||
autocapitalize: 'sentences',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 10,
|
||||
},
|
||||
last_name: {
|
||||
label: 'Last name',
|
||||
optionalLabel: 'Last name (optional)',
|
||||
autocomplete: 'family-name',
|
||||
autocapitalize: 'sentences',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 20,
|
||||
},
|
||||
company: {
|
||||
label: 'Company',
|
||||
optionalLabel: 'Company (optional)',
|
||||
autocomplete: 'organization',
|
||||
autocapitalize: 'sentences',
|
||||
required: false,
|
||||
hidden: false,
|
||||
index: 30,
|
||||
},
|
||||
address_1: {
|
||||
label: 'Address',
|
||||
optionalLabel: 'Address (optional)',
|
||||
autocomplete: 'address-line1',
|
||||
autocapitalize: 'sentences',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 40,
|
||||
},
|
||||
address_2: {
|
||||
label: 'Apartment, suite, etc.',
|
||||
optionalLabel: 'Apartment, suite, etc. (optional)',
|
||||
autocomplete: 'address-line2',
|
||||
autocapitalize: 'sentences',
|
||||
required: false,
|
||||
hidden: false,
|
||||
index: 50,
|
||||
},
|
||||
country: {
|
||||
label: 'Country/Region',
|
||||
optionalLabel: 'Country/Region (optional)',
|
||||
autocomplete: 'country',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 60,
|
||||
},
|
||||
city: {
|
||||
label: 'City',
|
||||
optionalLabel: 'City (optional)',
|
||||
autocomplete: 'address-level2',
|
||||
autocapitalize: 'sentences',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 70,
|
||||
},
|
||||
state: {
|
||||
label: 'State/County',
|
||||
optionalLabel: 'State/County (optional)',
|
||||
autocomplete: 'address-level1',
|
||||
autocapitalize: 'sentences',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 80,
|
||||
},
|
||||
postcode: {
|
||||
label: 'Postal code',
|
||||
optionalLabel: 'Postal code (optional)',
|
||||
autocomplete: 'postal-code',
|
||||
autocapitalize: 'characters',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 90,
|
||||
},
|
||||
phone: {
|
||||
label: 'Phone',
|
||||
optionalLabel: 'Phone (optional)',
|
||||
autocomplete: 'tel',
|
||||
type: 'tel',
|
||||
required: true,
|
||||
hidden: false,
|
||||
index: 100,
|
||||
},
|
||||
},
|
||||
checkoutData: {
|
||||
order_id: 100,
|
||||
status: 'checkout-draft',
|
||||
order_key: 'wc_order_mykey',
|
||||
order_number: '100',
|
||||
customer_id: 1,
|
||||
},
|
||||
};
|
||||
|
||||
global.jQuery = () => ( {
|
||||
on: () => void null,
|
||||
off: () => void null,
|
||||
} );
|
||||
|
||||
global.IntersectionObserver = function () {
|
||||
return {
|
||||
observe: () => void null,
|
||||
unobserve: () => void null,
|
||||
};
|
||||
};
|
||||
|
||||
global.__webpack_public_path__ = '';
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
export async function preventCompatibilityNotice() {
|
||||
await page.evaluate( () => {
|
||||
window.localStorage.setItem(
|
||||
'wc-blocks_dismissed_compatibility_notices',
|
||||
'["checkout"]'
|
||||
);
|
||||
} );
|
||||
}
|
||||
|
||||
export async function reactivateCompatibilityNotice() {
|
||||
await page.evaluate( () => {
|
||||
window.localStorage.removeItem(
|
||||
'wc-blocks_dismissed_compatibility_notices'
|
||||
);
|
||||
} );
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import type { MatcherFunction } from '@testing-library/react';
|
||||
|
||||
/**
|
||||
* This function will match text over several elements, the standard matcher
|
||||
* will only find strings if they are within the same element.
|
||||
*/
|
||||
export const textContentMatcher = ( text: string ): MatcherFunction => {
|
||||
return ( _content, node ) => {
|
||||
const hasText = ( _node ) => _node.textContent === text;
|
||||
const nodeHasText = hasText( node );
|
||||
const childrenDontHaveText = Array.from( node?.children || [] ).every(
|
||||
( child ) => ! hasText( child )
|
||||
);
|
||||
return nodeHasText && childrenDontHaveText;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* This will check if the text is present an the container, it can be within
|
||||
* multiple elements, for example:
|
||||
* <div>
|
||||
* <span>Text</span>
|
||||
* <span>is</span>
|
||||
* <span>present</span>
|
||||
* </div>
|
||||
*/
|
||||
export const textContentMatcherAcrossSiblings = (
|
||||
text: string
|
||||
): MatcherFunction => {
|
||||
return ( _content, node ): boolean => {
|
||||
/*
|
||||
If the element in question is not the first child, then skip, as we
|
||||
will have already run this check for its siblings (when we ran it on the
|
||||
first child).
|
||||
*/
|
||||
const siblings =
|
||||
node?.parentElement?.children[ 0 ] === node
|
||||
? node?.parentElement?.children
|
||||
: [];
|
||||
let siblingText = '';
|
||||
|
||||
// Get the text of all siblings and put it into a single string.
|
||||
if ( siblings?.length > 0 ) {
|
||||
siblingText = Array.from( siblings )
|
||||
.map( ( child ) => child.textContent )
|
||||
.filter( Boolean )
|
||||
.join( ' ' )
|
||||
.trim();
|
||||
}
|
||||
return siblingText !== '' && siblingText === text;
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: fix
|
||||
|
||||
Blocks: Fix JS unit tests
|
||||
Loading…
Reference in New Issue