From f1c3d51d1f597002c1a2d03c936e2745c1bd9d62 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Fri, 21 May 2021 15:52:37 +0530 Subject: [PATCH] Fix: #1721 Replaced column with info icon with transaction id column for CSV (#1776) * Removed column with info icon and added a new column Transaction Id for CSV - removed info icon which was at the start of the table - added a transaction_id column only for CSV file - updated snapshot - updated changelog Review Changes - Added spec to test CSV download method - fixed change log in readme and changelog file - fix es lint comment rule * snapshot updates * Review changes - Readability changes in the test file. - Better matching logic for CSV column array. --- changelog.txt | 1 + client/transactions/list/index.js | 19 +- .../list/test/__snapshots__/index.js.snap | 359 +++--------------- client/transactions/list/test/index.js | 69 ++++ readme.txt | 1 + 5 files changed, 137 insertions(+), 312 deletions(-) diff --git a/changelog.txt b/changelog.txt index 24c6cad1035..8704a687c00 100644 --- a/changelog.txt +++ b/changelog.txt @@ -9,6 +9,7 @@ * Fix - Transactions and deposits counts on the table summary are rendered as "undefined". * Update - Deposit overview details. * Add - Redirect to WooCommerce home page after successful WooCommerce Payments KYC (Know Your Customer). +* Fix - Added CSV column heading for transaction id column. = 2.4.0 - 2021-05-12 = * Update - Improve the Connect Account page. diff --git a/client/transactions/list/index.js b/client/transactions/list/index.js index e1ea9776ebe..ca12a155a9e 100644 --- a/client/transactions/list/index.js +++ b/client/transactions/list/index.js @@ -29,7 +29,7 @@ import { useTransactions, useTransactionsSummary } from 'data'; import OrderLink from 'components/order-link'; import RiskLevel, { calculateRiskMapping } from 'components/risk-level'; import ClickableCell from 'components/clickable-cell'; -import DetailsLink, { getDetailsURL } from 'components/details-link'; +import { getDetailsURL } from 'components/details-link'; import { displayType } from 'transactions/strings'; import { formatStringValue } from 'utils'; import { formatCurrency } from 'utils/currency'; @@ -41,14 +41,12 @@ import TransactionsFilters from '../filters'; import Page from '../../components/page'; import wcpayTracks from 'tracks'; -const getColumns = ( includeDeposit, includeSubscription, sortByDate ) => +const getColumns = ( includeDeposit, includeSubscription ) => [ { - key: 'details', - label: '', - required: true, - // Match background of details and date when sorting. - cellClassName: 'info-button ' + ( sortByDate ? 'is-sorted' : '' ), + key: 'transaction_id', + label: __( 'Transaction Id', 'woocommerce-payments' ), + visible: false, }, { key: 'date', @@ -165,9 +163,7 @@ export const TransactionsList = ( props ) => { const clickable = ( children ) => ( { children } ); - const detailsLink = ( - - ); + const orderUrl = ; const orderSubscriptions = txn.order && txn.order.subscriptions; const subscriptionsValue = @@ -206,7 +202,8 @@ export const TransactionsList = ( props ) => { // Map transaction into table row. const data = { - details: { value: txn.transaction_id, display: detailsLink }, + // eslint-disable-next-line camelcase + transaction_id: { value: txn.transaction_id }, date: { value: txn.date, display: clickable( diff --git a/client/transactions/list/test/__snapshots__/index.js.snap b/client/transactions/list/test/__snapshots__/index.js.snap index cef35ea693f..c6618d6f15b 100644 --- a/client/transactions/list/test/__snapshots__/index.js.snap +++ b/client/transactions/list/test/__snapshots__/index.js.snap @@ -224,15 +224,6 @@ exports[`Transactions list renders correctly when can filter by several currenci - - - Sort by Date and time in ascending order @@ -298,7 +289,7 @@ exports[`Transactions list renders correctly when can filter by several currenci scope="col" > Sort by Amount in descending order @@ -340,7 +331,7 @@ exports[`Transactions list renders correctly when can filter by several currenci scope="col" > Sort by Fees in descending order @@ -382,7 +373,7 @@ exports[`Transactions list renders correctly when can filter by several currenci scope="col" > Sort by Net in descending order @@ -484,30 +475,8 @@ exports[`Transactions list renders correctly when can filter by several currenci - - - - - - - - - Jan 2, 2020 / 12:46PM - + @@ -605,30 +574,8 @@ exports[`Transactions list renders correctly when can filter by several currenci - - - - - - - - - Jan 4, 2020 / 11:22PM - + @@ -1002,15 +949,6 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` - - - Sort by Date and time in ascending order @@ -1076,7 +1014,7 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` scope="col" > Sort by Amount in descending order @@ -1118,7 +1056,7 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` scope="col" > Sort by Fees in descending order @@ -1160,7 +1098,7 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` scope="col" > Sort by Net in descending order @@ -1262,30 +1200,8 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` - - - - - - - - - Jan 2, 2020 / 12:46PM - + @@ -1383,30 +1299,8 @@ exports[`Transactions list renders correctly when filtered by currency 1`] = ` - - - - - - - - - Jan 4, 2020 / 11:22PM - + @@ -1755,15 +1649,6 @@ exports[`Transactions list renders correctly when filtered by deposit 1`] = ` - - - Sort by Date and time in ascending order @@ -1829,7 +1714,7 @@ exports[`Transactions list renders correctly when filtered by deposit 1`] = ` scope="col" > Sort by Amount in descending order @@ -1871,7 +1756,7 @@ exports[`Transactions list renders correctly when filtered by deposit 1`] = ` scope="col" > Sort by Fees in descending order @@ -1913,7 +1798,7 @@ exports[`Transactions list renders correctly when filtered by deposit 1`] = ` scope="col" > Sort by Net in descending order @@ -1999,30 +1884,8 @@ exports[`Transactions list renders correctly when filtered by deposit 1`] = ` - - - - - - - - - Jan 4, 2020 / 11:22PM - + @@ -2401,15 +2264,6 @@ exports[`Transactions list subscription column renders correctly 1`] = ` - - - Sort by Date and time in ascending order @@ -2475,7 +2329,7 @@ exports[`Transactions list subscription column renders correctly 1`] = ` scope="col" > Sort by Amount in descending order @@ -2517,7 +2371,7 @@ exports[`Transactions list subscription column renders correctly 1`] = ` scope="col" > Sort by Fees in descending order @@ -2559,7 +2413,7 @@ exports[`Transactions list subscription column renders correctly 1`] = ` scope="col" > Sort by Net in descending order @@ -2677,30 +2531,8 @@ exports[`Transactions list subscription column renders correctly 1`] = ` - - - - - - - - - Jan 2, 2020 / 12:46PM - + @@ -2808,30 +2640,8 @@ exports[`Transactions list subscription column renders correctly 1`] = ` - - - - - - - - - Jan 4, 2020 / 11:22PM - + @@ -3223,15 +3033,6 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = - - - Sort by Date and time in ascending order @@ -3297,7 +3098,7 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = scope="col" > Sort by Amount in descending order @@ -3339,7 +3140,7 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = scope="col" > Sort by Fees in descending order @@ -3381,7 +3182,7 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = scope="col" > Sort by Net in descending order @@ -3483,30 +3284,8 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = - - - - - - - - - Jan 2, 2020 / 12:46PM - + @@ -3604,30 +3383,8 @@ exports[`Transactions list when not filtered by deposit renders correctly 1`] = - - - - - - - - - Jan 4, 2020 / 11:22PM - + diff --git a/client/transactions/list/test/index.js b/client/transactions/list/test/index.js index 4103c1e0788..4e701d8736c 100644 --- a/client/transactions/list/test/index.js +++ b/client/transactions/list/test/index.js @@ -13,11 +13,22 @@ import { getQuery, updateQueryString } from '@woocommerce/navigation'; import { TransactionsList } from '../'; import { useTransactions, useTransactionsSummary } from 'data'; +import { downloadCSVFile } from '@woocommerce/csv-export'; + jest.mock( 'data', () => ( { useTransactions: jest.fn(), useTransactionsSummary: jest.fn(), } ) ); +jest.mock( '@woocommerce/csv-export', () => { + const actualModule = jest.requireActual( '@woocommerce/csv-export' ); + + return { + ...actualModule, + downloadCSVFile: jest.fn(), + }; +} ); + const getMockTransactions = () => [ { // eslint-disable-next-line camelcase @@ -326,4 +337,62 @@ describe( 'Transactions list', () => { const { container } = render( ); expect( container ).toMatchSnapshot(); } ); + + describe( 'CSV download', () => { + beforeEach( () => { + useTransactions.mockReturnValue( { + transactions: getMockTransactions(), + isLoading: false, + } ); + + useTransactionsSummary.mockReturnValue( { + transactionsSummary: { + count: 10, + currency: 'usd', + // eslint-disable-next-line camelcase + store_currencies: [ 'eur', 'usd' ], + fees: 100, + total: 1000, + net: 900, + }, + isLoading: false, + } ); + } ); + + afterEach( () => { + jest.resetAllMocks(); + } ); + + afterAll( () => { + jest.restoreAllMocks(); + } ); + + test( 'should render expected columns in CSV when the download button is clicked', () => { + const { getByRole } = render( ); + getByRole( 'button', { name: 'Download' } ).click(); + + const expected = [ + '"Transaction Id"', + '"Date / Time"', + 'Type', + 'Amount', + 'Fees', + 'Net', + '"Order #"', + 'Source', + 'Customer', + 'Email', + 'Country', + '"Risk level"', + 'Deposit', + ]; + + // checking if columns in CSV are rendered correctly + expect( + downloadCSVFile.mock.calls[ 0 ][ 1 ] + .split( '\n' )[ 0 ] + .split( ',' ) + ).toEqual( expected ); + } ); + } ); } ); diff --git a/readme.txt b/readme.txt index 44f25a077cb..943f611e2df 100644 --- a/readme.txt +++ b/readme.txt @@ -110,6 +110,7 @@ Please note that our support for the checkout block is still experimental and th * Fix - Transactions and deposits counts on the table summary are rendered as "undefined". * Update - Deposit overview details. * Add - Redirect to WooCommerce home page after successful WooCommerce Payments KYC (Know Your Customer). +* Fix - Added CSV column heading for transaction id column. = 2.4.0 - 2021-05-12 = * Update - Improve the Connect Account page.