Fix transactions ui snapshot for fresh data (#177)

* Add packages necessary to run tests

For some reason jest can't find '@wordpress/api-fetch' unless it's
installed. Even though the test doesn't actually _use_ api-fetch, it
complains because one of the included files imports api-fetch.

* Fix `...` (spread operator) missing error.

Babel seems to need a specific package to support the `...` operator for
now.
See: babel/babel#10179 (comment)

npm i --save-dev @babel/plugin-proposal-object-rest-spread is sufficient
as a fix.

* Fix transactions UI snapshot

* Change from named test import to default import

* Fix exports to accommodate snapshot tests

* Configure jest and snapshot to use same timezone

* Rename jest config files to better represent their purpose

Renamed `setup-globals.js` to `jest-file-setup.js` to reflect the fact
that it contains configurations run before each test file.

Renamed `global-setup-jest.js` to `jest-global-setup.js` to fit the
naming pattern used for the aforementioned rename. This file includes
a global configuration run before each test suite.

client/transactions/index.js

@@ -27,7 +27,7 @@ const headers = [
 	{ key: 'risk_level', label: 'Risk Level', hiddenByDefault: true },
 ];
 
-const TransactionsList = ( props ) => {
+export const TransactionsList = ( props ) => {
 	const { transactions, showPlaceholder } = props;
 	const transactionsData = transactions.data || [];
 	// Do not display table loading view if data is already available.

client/transactions/test/__snapshots__/index.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Transactions page renders correctly 1`] = `
+exports[`Transactions list renders correctly 1`] = `
 <TableCard
   baseSearchQuery={Object {}}
   compareParam="filter"
@@ -71,7 +71,103 @@ exports[`Transactions page renders correctly 1`] = `
   onQueryChange={[Function]}
   query={Object {}}
   rowHeader={0}
-  rows={Array []}
+  rows={
+    Array [
+      Array [
+        Object {
+          "display": "Nov 1, 2019 / 2:46AM",
+          "value": 1572590800000,
+        },
+        Object {
+          "display": "Refund",
+          "value": "refund",
+        },
+        Object {
+          "display": null,
+        },
+        Object {
+          "display": <span>
+            –
+          </span>,
+          "value": undefined,
+        },
+        Object {
+          "display": null,
+        },
+        Object {
+          "display": null,
+        },
+        Object {
+          "display": null,
+        },
+        Object {
+          "display": "$10.00",
+          "value": 10,
+        },
+        Object {
+          "display": "$0.50",
+          "value": 0.5,
+        },
+        Object {
+          "display": "$9.50",
+          "value": 9.5,
+        },
+        Object {
+          "display": null,
+        },
+      ],
+      Array [
+        Object {
+          "display": "Nov 1, 2019 / 12:00AM",
+          "value": 1572580800000,
+        },
+        Object {
+          "display": "Charge",
+          "value": "charge",
+        },
+        Object {
+          "display": <code>
+            visa
+          </code>,
+          "value": "visa",
+        },
+        Object {
+          "display": <span>
+            –
+          </span>,
+          "value": undefined,
+        },
+        Object {
+          "display": "My name",
+          "value": "My name",
+        },
+        Object {
+          "display": "a@b.com",
+          "value": "a@b.com",
+        },
+        Object {
+          "display": "US",
+          "value": "US",
+        },
+        Object {
+          "display": "$15.00",
+          "value": 15,
+        },
+        Object {
+          "display": "$0.50",
+          "value": 0.5,
+        },
+        Object {
+          "display": "$14.50",
+          "value": 14.5,
+        },
+        Object {
+          "display": "Normal",
+          "value": "normal",
+        },
+      ],
+    ]
+  }
   rowsPerPage={10}
   showMenu={true}
   title="Transactions"

client/transactions/test/index.js

@@ -2,56 +2,61 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { mount, shallow } from 'enzyme';
-import apiFetch from '@wordpress/api-fetch';
-
-jest.mock( '@wordpress/api-fetch' );
+import { shallow } from 'enzyme';
 
 /**
  * Internal dependencies
  */
-import TransactionsPage from '../';
+import { TransactionsList } from '../';
 
-describe( 'Transactions page', () => {
+describe( 'Transactions list', () => {
 	test( 'renders correctly', () => {
-        apiFetch.mockResolvedValue( {
-            data: [
-                {
-                    created: 1572590800,
-                    type: 'refund',
-                    amount: 1000,
-                    fee: 50,
-                    // available_on: 1573199200,
-                },
-                {
-                    created: 1572580800,
-                    type: 'charge',
-                    source: {
-                        payment_method_details: {
-                            card: {
-                                brand: 'visa',
-                            },
-                        },
-                        billing_details: {
-                            name: 'My name',
-                            email: 'a@b.com',
-                            address: {
-                                country: 'US',
-                            },
-                        },
-                        outcome: {
-                            risk_level: 'normal',
-                        },
-                    },
-                    amount: 1500,
-                    fee: 50,
-                    // available_on: 1573189200,
-                },
-            ],
-        } );
+		const transactions = {
+			data: [
+				{
+					created: 1572590800,
+					type: 'refund',
+					source: {
+						object: 'refund',
+					},
+					amount: 1000,
+					fee: 50,
+					// available_on: 1573199200,
+				},
+				{
+					created: 1572580800,
+					type: 'charge',
+					source: {
+						object: 'charge',
+						payment_method_details: {
+							card: {
+								brand: 'visa',
+							},
+						},
+						billing_details: {
+							name: 'My name',
+							email: 'a@b.com',
+							address: {
+								country: 'US',
+							},
+						},
+						outcome: {
+							risk_level: 'normal',
+						},
+					},
+					amount: 1500,
+					fee: 50,
+					// available_on: 1573189200,
+				},
+			],
+		};
 
-		const tree = shallow( <TransactionsPage /> );
-		expect( tree ).toMatchSnapshot();
+		const list = shallow(
+			<TransactionsList
+				transactions={ transactions }
+				isLoading={ false }
+			/>
+		);
+		expect( list ).toMatchSnapshot();
 	} );
 } );

tests/js/jest-global-setup.js

@@ -0,0 +1,5 @@
+/** @format **/
+
+module.exports = async () => {
+	process.env.TZ = 'America/New_York';
+}

tests/js/jest.config.json

@@ -2,10 +2,11 @@
 	"rootDir": "../../",
 	"moduleDirectories": ["node_modules", "<rootDir>/client"],
 	"moduleNameMapper": {
-	},
+  },
+	"globalSetup": "<rootDir>/tests/js/jest-global-setup.js",
 	"setupFiles": [
 		"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js",
-		"<rootDir>/tests/js/setup-globals"
+		"<rootDir>/tests/js/jest-test-file-setup.js"
 	],
 	"preset": "@wordpress/jest-preset-default",
 	"testPathIgnorePatterns": [