composite-checkout: add initial tests

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",

packages/composite-checkout/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	rootDir: __dirname,
+	testMatch: [ '**/test/**/*.[jt]s?(x)' ],
+	modulePathIgnorePatterns: [ 'enzyme-adapter.js' ],
+};

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 = (
+			<CheckoutStep
+				title={ 'Step' }
+				stepNumber={ 1 }
+				isActive={ false }
+				isComplete={ false }
+				stepContent={ <span>empty</span> }
+			/>
+		);
+		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 = (
+			<CheckoutStep
+				title={ 'Step' }
+				stepNumber={ 1 }
+				isActive={ true }
+				isComplete={ false }
+				stepContent={ <span>empty</span> }
+			/>
+		);
+		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 = (
+			<CheckoutStep
+				title={ 'Step' }
+				stepNumber={ 1 }
+				className={ 'custom-class' } // eslint-disable-line wpcalypso/jsx-classname-namespace
+				isActive={ false }
+				isComplete={ false }
+				stepContent={ <span>empty</span> }
+			/>
+		);
+		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 = (
+			<CheckoutStep
+				title={ 'Step' }
+				stepNumber={ 1 }
+				className={ 'custom-class-1 custom-class-2' } // eslint-disable-line wpcalypso/jsx-classname-namespace
+				isActive={ false }
+				isComplete={ false }
+				stepContent={ <span>empty</span> }
+			/>
+		);
+		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 = (
+			<CheckoutStep
+				title={ 'Step' }
+				stepNumber={ 1 }
+				isActive={ false }
+				isComplete={ false }
+				stepContent={ <br class="child-span" /> }
+			/>
+		);
+		it( 'renders its children', function() {
+			expect( shallow( component ).contains( <br class="child-span" /> ) ).toBe( true );
+		} );
+	} );
+} );

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(
+		<Checkout
+			locale="en-us"
+			items={ [
+				{
+					label: 'Illudium Q-36 Explosive Space Modulator',
+					id: 'space-modulator',
+					type: 'widget',
+					amount: { currency: 'USD', value: 5500, displayValue: '$55' },
+				},
+				{
+					label: 'Air Jordans',
+					id: 'sneakers',
+					type: 'apparel',
+					amount: { currency: 'USD', value: 12000, displayValue: '$120' },
+				},
+			] }
+			total={ {
+				label: 'Total',
+				id: 'total',
+				type: 'total',
+				amount: { currency: 'USD', value: 17500, displayValue: '$175' },
+			} }
+			onSuccess={ () => {
+				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' )
+	);
+} );

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 };