From fa818a7308cb08b34520fa9b70df5423e3f13327 Mon Sep 17 00:00:00 2001 From: nbloomf Date: Tue, 22 Oct 2019 16:39:27 -0500 Subject: [PATCH] Add tests for composite-checkout package --- npm-shrinkwrap.json | 132 ++++++++++++++++++ package.json | 4 +- packages/composite-checkout/jest.config.js | 5 + .../test/components/checkout-step.js | 110 +++++++++++++++ .../test/components/checkout.js | 60 ++++++++ .../composite-checkout/test/enzyme-adapter.js | 8 ++ .../test/lib/join-classes.js | 22 +++ 7 files changed, 340 insertions(+), 1 deletion(-) create mode 100644 packages/composite-checkout/jest.config.js create mode 100644 packages/composite-checkout/test/components/checkout-step.js create mode 100644 packages/composite-checkout/test/components/checkout.js create mode 100644 packages/composite-checkout/test/enzyme-adapter.js create mode 100644 packages/composite-checkout/test/lib/join-classes.js diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 883b43f3a21d9..0dee508c22251 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -2847,6 +2847,12 @@ } } }, + "@sheerun/mutationobserver-shim": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", + "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==", + "dev": true + }, "@sinonjs/commons": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.6.0.tgz", @@ -2910,6 +2916,75 @@ "resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.0.2.tgz", "integrity": "sha512-Nggtk7/ljfNPpAX8CjxxLkMKuO6u2gH1ozmTvGclWF2pNcxTf6YGghYNYNWZRKrimXGhQ8yZqvAHep7h80K04g==" }, + "@testing-library/dom": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.8.1.tgz", + "integrity": "sha512-b+Q4wryafqsSTFBV14cc5xqhN/OVB9oMeUQvZwy1kVx+kdqs4zQAcyvCsFkdcqx7NxibWpUN/fBIUaqyAEhitw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.6.2", + "@sheerun/mutationobserver-shim": "^0.3.2", + "@types/testing-library__dom": "^6.0.0", + "aria-query": "3.0.0", + "pretty-format": "^24.9.0", + "wait-for-expect": "^3.0.0" + } + }, + "@testing-library/jest-dom": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.0.tgz", + "integrity": "sha512-H61OmRhGPWLrj9emyISx0qjp8jvC9RWyRniuLAq75Ny5XfPiOvWfnY3Wm2Tf0HXusX+PG40I94Gw792IAtSKKg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.1", + "chalk": "^2.4.1", + "css": "^2.2.3", + "css.escape": "^1.5.1", + "jest-diff": "^24.0.0", + "jest-matcher-utils": "^24.0.0", + "lodash": "^4.17.11", + "pretty-format": "^24.0.0", + "redent": "^3.0.0" + }, + "dependencies": { + "indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true + }, + "redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "requires": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + } + }, + "strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "requires": { + "min-indent": "^1.0.0" + } + } + } + }, + "@testing-library/react": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.3.0.tgz", + "integrity": "sha512-FTPCwmLo0tLtP50Au2uGz4/N1BcJTnBx4StDVHZ47zPMEj1/+J2rk/RTj8SLoHRKWCtcmhN4wRmudOXQNP29/w==", + "dev": true, + "requires": { + "@babel/runtime": "^7.6.0", + "@testing-library/dom": "^6.3.0", + "@types/testing-library__react": "^9.1.0" + } + }, "@types/babel__core": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz", @@ -3098,6 +3173,25 @@ "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==", "dev": true }, + "@types/testing-library__dom": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.5.3.tgz", + "integrity": "sha512-E/LSnbzo25gCLy/YOHKY9KJ+rfI8hy5cfbScyZqVuFw9CUMn1faWEDnxMcVHgjAbWtTStfllB8TwNKCx8bAKeA==", + "dev": true, + "requires": { + "pretty-format": "^24.3.0" + } + }, + "@types/testing-library__react": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.2.tgz", + "integrity": "sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==", + "dev": true, + "requires": { + "@types/react-dom": "*", + "@types/testing-library__dom": "*" + } + }, "@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", @@ -7439,6 +7533,26 @@ "randomfill": "^1.0.3" } }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -7614,6 +7728,12 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==" }, + "css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", + "dev": true + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -14937,6 +15057,12 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "min-indent": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz", + "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=", + "dev": true + }, "mini-css-extract-plugin-with-rtl": { "version": "github:Automattic/mini-css-extract-plugin-with-rtl#f48ce03f385390257bdacbfec4759d38df983361", "from": "github:Automattic/mini-css-extract-plugin-with-rtl#v0.7.0-with-rtl", @@ -24017,6 +24143,12 @@ "browser-process-hrtime": "^0.1.2" } }, + "wait-for-expect": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.1.tgz", + "integrity": "sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==", + "dev": true + }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", diff --git a/package.json b/package.json index c0745b8046f18..29580d0640b63 100644 --- a/package.json +++ b/package.json @@ -295,9 +295,11 @@ "@automattic/babel-plugin-transform-wpcalypso-async": "file:./packages/babel-plugin-transform-wpcalypso-async", "@automattic/calypso-build": "file:./packages/calypso-build", "@automattic/calypso-color-schemes": "file:./packages/calypso-color-schemes", + "@automattic/composite-checkout": "file:./packages/composite-checkout", "@automattic/webpack-extensive-lodash-replacement-plugin": "file:./packages/webpack-extensive-lodash-replacement-plugin", "@automattic/webpack-inline-constant-exports-plugin": "file:./packages/webpack-inline-constant-exports-plugin", - "@automattic/composite-checkout": "file:./packages/composite-checkout", + "@testing-library/jest-dom": "4.2.0", + "@testing-library/react": "9.3.0", "@types/classnames": "2.2.9", "@types/debug": "4.1.4", "@types/lodash": "4.14.144", diff --git a/packages/composite-checkout/jest.config.js b/packages/composite-checkout/jest.config.js new file mode 100644 index 0000000000000..e6f1242d491df --- /dev/null +++ b/packages/composite-checkout/jest.config.js @@ -0,0 +1,5 @@ +module.exports = { + rootDir: __dirname, + testMatch: [ '**/test/**/*.[jt]s?(x)' ], + modulePathIgnorePatterns: [ 'enzyme-adapter.js' ], +}; diff --git a/packages/composite-checkout/test/components/checkout-step.js b/packages/composite-checkout/test/components/checkout-step.js new file mode 100644 index 0000000000000..d30ea2f2ede79 --- /dev/null +++ b/packages/composite-checkout/test/components/checkout-step.js @@ -0,0 +1,110 @@ +/** + * External dependencies + */ +import React from 'react'; +import { shallow } from '../enzyme-adapter'; + +/** + * Internal dependencies + */ +import CheckoutStep from '../../src/components/checkout-step'; + +describe( 'CheckoutStep', function() { + describe( 'inactive and incomplete', function() { + const component = ( + empty } + /> + ); + it( 'displays a checkout step', function() { + expect( shallow( component ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'does not display an active step', function() { + expect( shallow( component ).is( '.checkout-step--is-active' ) ).toBe( false ); + } ); + it( 'does not display a complete step', function() { + expect( shallow( component ).is( '.checkout-step--is-complete' ) ).toBe( false ); + } ); + } ); + + describe( 'active and incomplete', function() { + const component = ( + empty } + /> + ); + it( 'displays a checkout step', function() { + expect( shallow( component ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'displays an active step', function() { + expect( shallow( component ).is( '.checkout-step--is-active' ) ).toBe( true ); + } ); + it( 'does not display a complete step', function() { + expect( shallow( component ).is( '.checkout-step--is-complete' ) ).toBe( false ); + } ); + } ); + + describe( 'with custom class name', function() { + const component = ( + empty } + /> + ); + it( 'displays a checkout step when a custom class is used', function() { + expect( shallow( component ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'is selectable by the custom class name if one is set', function() { + expect( shallow( component ).is( '.custom-class' ) ).toBe( true ); + } ); + } ); + + describe( 'with two custom class names', function() { + const component = ( + empty } + /> + ); + it( 'displays a checkout step with a custom class is used', function() { + expect( shallow( component ).is( '.checkout-step' ) ).toBe( true ); + } ); + it( 'is selectable by the first custom class name if one is set', function() { + expect( shallow( component ).is( '.custom-class-1' ) ).toBe( true ); + } ); + it( 'is selectable by the second custom class name if one is set', function() { + expect( shallow( component ).is( '.custom-class-2' ) ).toBe( true ); + } ); + } ); + + describe( 'with children', function() { + const component = ( + } + /> + ); + it( 'renders its children', function() { + expect( shallow( component ).contains(
) ).toBe( true ); + } ); + } ); +} ); diff --git a/packages/composite-checkout/test/components/checkout.js b/packages/composite-checkout/test/components/checkout.js new file mode 100644 index 0000000000000..80f8985aadd11 --- /dev/null +++ b/packages/composite-checkout/test/components/checkout.js @@ -0,0 +1,60 @@ +/** + * External dependencies + */ +import React from 'react'; +import { render, getAllByLabelText } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +/** + * Internal dependencies + */ +import Checkout from '../../src/components/checkout'; + +test( 'When we enter checkout, the line items and total are rendered', () => { + const { container } = render( + { + return; + } } + onFailure={ () => { + return; + } } + successRedirectUrl="#" + failureRedirectUrl="#" + /> + ); + + // Product line items show the correct price + getAllByLabelText( container, 'Illudium Q-36 Explosive Space Modulator' ).map( element => + expect( element ).toHaveTextContent( '$55' ) + ); + getAllByLabelText( container, 'Air Jordans' ).map( element => + expect( element ).toHaveTextContent( '$120' ) + ); + + // All elements labeled 'Total' show the expected price + getAllByLabelText( container, 'Total' ).map( element => + expect( element ).toHaveTextContent( '$175' ) + ); +} ); diff --git a/packages/composite-checkout/test/enzyme-adapter.js b/packages/composite-checkout/test/enzyme-adapter.js new file mode 100644 index 0000000000000..edb842748b191 --- /dev/null +++ b/packages/composite-checkout/test/enzyme-adapter.js @@ -0,0 +1,8 @@ +/** + * External dependencies + */ +import { configure, shallow, mount, render } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure( { adapter: new Adapter() } ); +export { shallow, mount, render }; diff --git a/packages/composite-checkout/test/lib/join-classes.js b/packages/composite-checkout/test/lib/join-classes.js new file mode 100644 index 0000000000000..d34e5918d4f68 --- /dev/null +++ b/packages/composite-checkout/test/lib/join-classes.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import joinClasses from '../../src/lib/join-classes'; + +describe( 'joinClasses', function() { + it( 'returns an empty string when passed an empty array', function() { + expect( joinClasses( [] ) ).toBe( '' ); + } ); + + it( 'returns a single class when passed a singleton array', function() { + expect( joinClasses( [ 'foo' ] ) ).toBe( 'foo' ); + } ); + + it( 'returns two space-delimited classes when passed a doubleton array', function() { + expect( joinClasses( [ 'foo', 'bar' ] ) ).toBe( 'foo bar' ); + } ); + + it( 'converts numeric arguments to strings', function() { + expect( joinClasses( [ 27, 0.1 ] ) ).toBe( '27 0.1' ); + } ); +} );