From daa9c92fd6b73342e275853c7d29138d8b2aaa20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krist=C3=B3fer=20Reykjal=C3=ADn?= Date: Fri, 9 Aug 2019 00:39:32 +0000 Subject: [PATCH] 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: https://github.com/babel/babel/issues/10179#issuecomment-510254948 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 | 2 +- .../test/__snapshots__/index.js.snap | 100 +++++++++++++++++- client/transactions/test/index.js | 93 ++++++++-------- tests/js/jest-global-setup.js | 5 + ...tup-globals.js => jest-test-file-setup.js} | 0 tests/js/jest.config.json | 5 +- 6 files changed, 156 insertions(+), 49 deletions(-) create mode 100644 tests/js/jest-global-setup.js rename tests/js/{setup-globals.js => jest-test-file-setup.js} (100%) diff --git a/client/transactions/index.js b/client/transactions/index.js index c59f5a6a2fd..d673fea93b4 100644 --- a/client/transactions/index.js +++ b/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. diff --git a/client/transactions/test/__snapshots__/index.js.snap b/client/transactions/test/__snapshots__/index.js.snap index 1ad242e7be2..335f3bb55be 100644 --- a/client/transactions/test/__snapshots__/index.js.snap +++ b/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`] = ` + – + , + "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": + visa + , + "value": "visa", + }, + Object { + "display": + – + , + "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" diff --git a/client/transactions/test/index.js b/client/transactions/test/index.js index 0b7fde5b423..4afff9c48c1 100644 --- a/client/transactions/test/index.js +++ b/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( ); - expect( tree ).toMatchSnapshot(); + const list = shallow( + + ); + expect( list ).toMatchSnapshot(); } ); } ); diff --git a/tests/js/jest-global-setup.js b/tests/js/jest-global-setup.js new file mode 100644 index 00000000000..8e66f71c404 --- /dev/null +++ b/tests/js/jest-global-setup.js @@ -0,0 +1,5 @@ +/** @format **/ + +module.exports = async () => { + process.env.TZ = 'America/New_York'; +} diff --git a/tests/js/setup-globals.js b/tests/js/jest-test-file-setup.js similarity index 100% rename from tests/js/setup-globals.js rename to tests/js/jest-test-file-setup.js diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json index d2f628691cd..514f61d0c13 100644 --- a/tests/js/jest.config.json +++ b/tests/js/jest.config.json @@ -2,10 +2,11 @@ "rootDir": "../../", "moduleDirectories": ["node_modules", "/client"], "moduleNameMapper": { - }, + }, + "globalSetup": "/tests/js/jest-global-setup.js", "setupFiles": [ "/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js", - "/tests/js/setup-globals" + "/tests/js/jest-test-file-setup.js" ], "preset": "@wordpress/jest-preset-default", "testPathIgnorePatterns": [