Add filters tests

client/data/transactions/resolvers.js

@@ -55,7 +55,7 @@ export const formatQueryFilters = ( query ) => ( {
 	customer_currency_is: query.customerCurrencyIs,
 	customer_currency_is_not: query.customerCurrencyIsNot,
 	source_is: query.sourceIs,
-	source_is_not: query.sourceIsNot, // @todo check why?
+	source_is_not: query.sourceIsNot,
 	search: query.search,
 	user_timezone: getUserTimeZone(),
 	locale: query.locale,

client/transactions/filters/index.tsx

@@ -17,7 +17,7 @@ import { Transaction } from 'wcpay/data';
 interface TransactionsFiltersProps {
 	storeCurrencies: string[];
 	customerCurrencies: string[];
-	transactionSources?: Transaction[ 'source' ][];
+	transactionSources: Transaction[ 'source' ][];
 }
 
 export const TransactionsFilters = ( {

client/transactions/filters/test/__snapshots__/index.tsx.snap

@@ -55,6 +55,26 @@ HTMLOptionsCollection [
 ]
 `;
 
+exports[`Transactions filters when filtering by payment method should render all types 1`] = `
+HTMLOptionsCollection [
+  <option
+    value="visa"
+  >
+    Visa
+  </option>,
+  <option
+    value="mastercard"
+  >
+    Mastercard
+  </option>,
+  <option
+    value="sofort"
+  >
+    SOFORT
+  </option>,
+]
+`;
+
 exports[`Transactions filters when filtering by risk level should render all types 1`] = `
 HTMLOptionsCollection [
   <option

client/transactions/filters/test/index.tsx

@@ -12,6 +12,7 @@ import { getQuery, updateQueryString } from '@woocommerce/navigation';
  * Internal dependencies
  */
 import { TransactionsFilters } from '../';
+import { Transaction } from 'wcpay/data';
 
 // TODO: this is a bit of a hack as we're mocking an old version of WC, we should relook at this.
 jest.mock( '@woocommerce/settings', () => ( {
@@ -33,6 +34,11 @@ function addAdvancedFilter( filter: string ) {
 
 const storeCurrencies = [ 'eur', 'usd' ];
 const customerCurrencies = [ 'eur', 'usd', 'gbp' ];
+const transactionSources: Transaction[ 'source' ][] = [
+	'visa',
+	'mastercard',
+	'sofort',
+];
 
 declare const global: {
 	wcSettings: { countries: Record< string, string > };
@@ -71,6 +77,7 @@ describe( 'Transactions filters', () => {
 			<TransactionsFilters
 				storeCurrencies={ storeCurrencies }
 				customerCurrencies={ customerCurrencies }
+				transactionSources={ transactionSources }
 			/>
 		);
 
@@ -85,6 +92,7 @@ describe( 'Transactions filters', () => {
 			<TransactionsFilters
 				storeCurrencies={ storeCurrencies }
 				customerCurrencies={ customerCurrencies }
+				transactionSources={ transactionSources }
 			/>
 		);
 	} );
@@ -250,6 +258,52 @@ describe( 'Transactions filters', () => {
 		} );
 	} );
 
+	describe( 'when filtering by payment method', () => {
+		let ruleSelector: HTMLElement;
+
+		beforeEach( () => {
+			addAdvancedFilter( 'Payment method' );
+			ruleSelector = screen.getByRole( 'combobox', {
+				name: /payment method filter/i,
+			} );
+		} );
+
+		test( 'should render all types', () => {
+			const typeSelect = screen.getByRole( 'combobox', {
+				name: /payment method$/i,
+			} ) as HTMLSelectElement;
+			expect( typeSelect.options ).toMatchSnapshot();
+		} );
+
+		test( 'should filter by is', () => {
+			user.selectOptions( ruleSelector, 'is' );
+
+			user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: /Select a payment method$/i,
+				} ),
+				'visa'
+			);
+			user.click( screen.getByRole( 'link', { name: /Filter/ } ) );
+
+			expect( getQuery().source_is ).toEqual( 'visa' );
+		} );
+
+		test( 'should filter by is_not', () => {
+			user.selectOptions( ruleSelector, 'is_not' );
+
+			user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: /Select a payment method$/i,
+				} ),
+				'visa'
+			);
+			user.click( screen.getByRole( 'link', { name: /Filter/ } ) );
+
+			expect( getQuery().source_is_not ).toEqual( 'visa' );
+		} );
+	} );
+
 	describe( 'when filtering by source device', () => {
 		let ruleSelector: HTMLElement;