Compare text

Find the difference between two text files

Real-time editor
Hide whitespace changes
Hide unchanged lines
Disable line wrap
Layout
Diff precision
Text styles
Syntax highlighting

Untitled diff

Created Diff never expires
0 removals
74 lines
7 additions
74 lines
/**
/**
* @format
* @format
* @jest-environment jsdom
* @jest-environment jsdom
*/
*/


/**
/**
* External dependencies
* External dependencies
*/
*/
import { shallow } from 'enzyme';
import { shallow } from 'enzyme';
import React from 'react';
import React from 'react';
import { identity, noop } from 'lodash';
import { identity, noop } from 'lodash';


/**
/**
* Internal dependencies
* Internal dependencies
*/
*/
import { CreditCardFormFields } from '../';
import { CreditCardFormFieldsUX } from '../';
import { shouldRenderAdditionalCountryFields } from 'lib/checkout/processor-specific';
import { shouldRenderAdditionalCountryFields } from 'lib/checkout/processor-specific';


jest.mock( 'i18n-calypso', () => ( {
jest.mock( 'i18n-calypso', () => ( {
localize: x => x,
localize: x => x,
} ) );
} ) );


jest.mock( 'lib/checkout/processor-specific', () => {
jest.mock( 'lib/checkout/processor-specific', () => {
return {
return {
shouldRenderAdditionalCountryFields: jest.fn( false ),
shouldRenderAdditionalCountryFields: jest.fn( false ),
};
};
} );
} );


// Gets rid of warnings such as 'UnhandledPromiseRejectionWarning: Error: No available storage method found.'
// Gets rid of warnings such as 'UnhandledPromiseRejectionWarning: Error: No available storage method found.'
jest.mock( 'lib/user', () => () => {} );
jest.mock( 'lib/user', () => () => {} );


const defaultProps = {
const defaultProps = {
card: {},
card: {},
countriesList: [],
countriesList: [],
eventFormName: 'A fine form',
eventFormName: 'A fine form',
translate: identity,
translate: identity,
isFieldInvalid: identity,
isFieldInvalid: identity,
onFieldChange: noop,
onFieldChange: noop,
isNewTransaction: true,
isNewTransaction: true,
};
};


describe( 'CreditCardFormFields', () => {
describe( 'CreditCardFormFieldsUX', () => {
test( 'should have `CreditCardFormFields` class', () => {
test( 'should have `CreditCardFormFieldsUX` class', () => {
const wrapper = shallow( <CreditCardFormFields { ...defaultProps } /> );
const wrapper = shallow( <CreditCardFormFieldsUX { ...defaultProps } /> );
expect( wrapper.find( '.credit-card-form-fields' ) ).toHaveLength( 1 );
expect( wrapper.find( '.credit-card-form-fields' ) ).toHaveLength( 1 );
} );
} );


test( 'should not render ebanx fields', () => {
test( 'should not render ebanx fields', () => {
const wrapper = shallow( <CreditCardFormFields { ...defaultProps } /> );
const wrapper = shallow( <CreditCardFormFieldsUX { ...defaultProps } /> );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 0 );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 0 );
} );
} );


describe( 'with ebanx activated', () => {
describe( 'with ebanx activated', () => {
beforeAll( () => {
beforeAll( () => {
shouldRenderAdditionalCountryFields.mockReturnValue( true );
shouldRenderAdditionalCountryFields.mockReturnValue( true );
} );
} );
afterAll( () => {
afterAll( () => {
shouldRenderAdditionalCountryFields.mockReturnValue( false );
shouldRenderAdditionalCountryFields.mockReturnValue( false );
} );
} );


test( 'should display Ebanx fields when an Ebanx payment country is selected and there is a transaction in process', () => {
test( 'should display Ebanx fields when an Ebanx payment country is selected and there is a transaction in process', () => {
const wrapper = shallow( <CreditCardFormFields { ...defaultProps } /> );
const wrapper = shallow( <CreditCardFormFieldsUX { ...defaultProps } /> );
wrapper.setProps( { card: { country: 'BR' } } );
wrapper.setProps( { card: { country: 'BR' } } );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 1 );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 1 );
} );
} );


test( 'should not display Ebanx fields when there is a transaction in process', () => {
test( 'should not display Ebanx fields when there is a transaction in process', () => {
const wrapper = shallow( <CreditCardFormFields { ...defaultProps } /> );
const wrapper = shallow( <CreditCardFormFieldsUX { ...defaultProps } /> );
wrapper.setProps( { card: { country: 'BR' }, isNewTransaction: false } );
wrapper.setProps( { card: { country: 'BR' }, isNewTransaction: false } );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 0 );
expect( wrapper.find( 'CountrySpecificPaymentFields' ) ).toHaveLength( 0 );
} );
} );
} );
} );
} );
} );


Saved diffs