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

Set up Jest for JS testing (https://github.com/woocommerce/woocommerce-blocks/pull/130) 

* Set up Jest testing

* Add a snapshot test for the product preview component
This commit is contained in:
Kelly Dwan 2018-11-16 10:43:51 -05:00 committed by GitHub
parent 9090fb41a1
commit 882cd4c7bb
8 changed files with 6145 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-blocks/.eslintrc.js
View File

@ -10,6 +10,7 @@ module.exports = {
browser: false,
es6: true,
node: true,
'jest/globals': true,
},
parserOptions: {
sourceType: 'module',
@ -26,6 +27,7 @@ module.exports = {
'wordpress',
'react',
'jsx-a11y',
'jest',
],
rules: {
'array-bracket-spacing': [ 'error', 'always' ],

2
plugins/woocommerce-blocks/assets/js/products-block.jsx
View File

@ -348,7 +348,7 @@ class ProductsBlockSettingsEditor extends Component {
/**
* One product in the product block preview.
*/
class ProductPreview extends Component {
export class ProductPreview extends Component {
render() {
const { product } = this.props;

55
plugins/woocommerce-blocks/assets/js/test/__snapshots__/product-preview.js.snap Normal file
View File

@ -0,0 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProductPreview should render a single product preview with an image 1`] = `
<div
className="product-preview"
>
<img
alt=""
src="https://example.local/product.jpg"
/>
<div
className="product-title"
>
Winter Jacket
</div>
<div
className="product-price"
dangerouslySetInnerHTML={
Object {
"__html": "<span class=\\"woocommerce-Price-amount amount\\"><span class=\\"woocommerce-Price-currencySymbol\\">&#36;</span>65.00</span>",
}
}
/>
<span
className="product-add-to-cart"
>
Add to cart
</span>
</div>
`;
exports[`ProductPreview should render a single product preview without an image 1`] = `
<div
className="product-preview"
>
<div
className="product-title"
>
Winter Jacket
</div>
<div
className="product-price"
dangerouslySetInnerHTML={
Object {
"__html": "<span class=\\"woocommerce-Price-amount amount\\"><span class=\\"woocommerce-Price-currencySymbol\\">&#36;</span>65.00</span>",
}
}
/>
<span
className="product-add-to-cart"
>
Add to cart
</span>
</div>
`;

39
plugins/woocommerce-blocks/assets/js/test/product-preview.js Normal file
View File

@ -0,0 +1,39 @@
/**
* External dependencies
*/
import renderer from 'react-test-renderer';
/**
* Internal dependencies
*/
import { ProductPreview } from '../products-block';
describe( 'ProductPreview', () => {
test( 'should render a single product preview with an image', () => {
const product = {
id: 1,
name: 'Winter Jacket',
price_html:
'<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>65.00</span>',
images: [
{
src: 'https://example.local/product.jpg',
},
],
};
const component = renderer.create( <ProductPreview product={ product } /> );
expect( component.toJSON() ).toMatchSnapshot();
} );
test( 'should render a single product preview without an image', () => {
const product = {
id: 1,
name: 'Winter Jacket',
price_html:
'<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>65.00</span>',
images: [],
};
const component = renderer.create( <ProductPreview product={ product } /> );
expect( component.toJSON() ).toMatchSnapshot();
} );
} );

6016
plugins/woocommerce-blocks/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
plugins/woocommerce-blocks/package.json
View File

@ -14,16 +14,31 @@
"start": "cross-env BABEL_ENV=default webpack --watch",
"lint": "npm run lint:css && npm run lint:js",
"lint:css": "stylelint assets/css",
"lint:js": "eslint assets/js --ext=js,jsx"
"lint:js": "eslint assets/js --ext=js,jsx",
"test": "wp-scripts test-unit-js --config tests/js/jest.config.json",
"test:help": "wp-scripts test-unit-js --help",
"test:update": "wp-scripts test-unit-js --updateSnapshot --config tests/js/jest.config.json",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"@babel/core": "7.1.5",
"@wordpress/babel-plugin-import-jsx-pragma": "1.1.2",
"@wordpress/babel-preset-default": "3.0.1",
"@wordpress/blocks": "5.3.1",
"@wordpress/components": "6.0.1",
"@wordpress/date": "2.2.1",
"@wordpress/editor": "7.0.1",
"@wordpress/element": "2.1.7",
"@wordpress/i18n": "3.0.1",
"@wordpress/jest-preset-default": "3.0.2",
"@wordpress/rich-text": "2.0.4",
"@wordpress/scripts": "2.4.3",
"autoprefixer": "9.3.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.4",
"clean-webpack-plugin": "0.1.19",
"core-js": "2.5.7",
"cross-env": "5.2.0",
"css-loader": "1.0.1",
"eslint": "5.9.0",
@ -35,6 +50,7 @@
"mini-css-extract-plugin": "0.4.4",
"node-sass": "4.10.0",
"postcss-loader": "3.0.0",
"react-test-renderer": "16.6.3",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"stylelint": "9.8.0",

16
plugins/woocommerce-blocks/tests/js/jest.config.json Normal file
View File

@ -0,0 +1,16 @@
{
"rootDir": "../../",
"collectCoverageFrom": [
"assets/js/**/*.js",
"!**/node_modules/**",
"!**/vendor/**",
"!**/test/**"
],
"moduleDirectories": ["node_modules"],
"setupFiles": [
"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js",
"<rootDir>/tests/js/setup-globals"
],
"preset": "@wordpress/jest-preset-default",
"verbose": true
}

20
plugins/woocommerce-blocks/tests/js/setup-globals.js Normal file
View File

@ -0,0 +1,20 @@
// Set up `wp.*` aliases. Doing this because any tests importing wp stuff will likely run into this.
global.wp = {};
// Set up our settings global.
global.wc_product_block_data = {};
const wordPressPackages = [
'blocks',
'components',
'date',
'editor',
'element',
'i18n',
];
wordPressPackages.forEach( ( lib ) => {
Object.defineProperty( global.wp, lib, {
get: () => require( `@wordpress/${ lib }` ),
} );
} );