<commit_before>/* Copyright (C) 2017 Canonical Ltd. */
'use strict';

const React = require('react');
const shapeup = require('shapeup');

const PaymentDetails = require('./details');
const GenericButton = require('../../generic-button/generic-button');
const GenericInput = require('../../generic-input/generic-input');
const PaymentDetailsAddress = require('./address/address');

const jsTestUtils = require('../../../utils/component-test-utils');

describe('PaymentDetails', () => {
  let acl, payment;

  beforeEach(() => {
    acl = {isReadOnly: sinon.stub().returns(false)};
    payment = {
      addAddress: sinon.stub(),
      addBillingAddress: sinon.stub(),
      getCountries: sinon.stub(),
      removeAddress: sinon.stub(),
      removeBillingAddress: sinon.stub(),
      reshape: shapeup.reshapeFunc,
      updateAddress: sinon.stub(),
      updateBillingAddress: sinon.stub()
    };
  });

  it('can display the details', () => {
    const addNotification = sinon.stub();
    const getCountries = sinon.stub();
    const addAddress = sinon.stub();
    const addBillingAddress = sinon.stub();
    const removeAddress = sinon.stub();
    const removeBillingAddress = sinon.stub();
    const validateForm = sinon.stub();
    const updateAddress = sinon.stub();
    const updateUser = sinon.stub();
    const paymentUser ={
      name: '<NAME>',
      email: '<EMAIL>',
      business: true,
      addresses: [{
        name: '<NAME>',
        line1: '10 Maple St',
        line2: '',
        city: 'Sasquatch',
        state: 'Bunnyhug',
        postcode: '90210',
        countryCode: 'CA',
        phones: ['12341234']
      }],
      vat: '1234',
      businessName: 'Spinachy business',
      billingAddresses: [{
        name: '<NAME>',
        line1: '9 Kangaroo St',
        line2: '',
        city: 'Snake',
        state: 'Spider',
        postcode: '9000',
        countryCode: 'AU',
        phones: ['00001111']
      }]
    };
    const component = jsTestUtils.shallowRender(
      <PaymentDetails
        acl={acl}
        addNotification={addNotification}
        payment={payment}
        paymentUser={paymentUser}
        updateUser={updateUser}
        username="spinach"
        validateForm={validateForm} />, true);
    const instance = component.getMountedInstance();
    const output = component.getRenderOutput();
    const expected = (
      <div className="payment__section">
        <h2 className="payment__title twelve-col">
          Account details
        </h2>
        <div className="payment-details-view twelve-col">
          <div className="payment-details-fields">
            <GenericInput
              disabled={true}
              label="Name"
              value="<NAME>" />
            <GenericInput
              disabled={true}
              label="Email address"
              value="<EMAIL>" />
            <GenericInput
              disabled={true}
              label="VAT number (optional)"
              value="1234" />
            <GenericInput
              disabled={true}
              label="Business name"
              value="Spinachy business" />
          </div>
          <h4>
            Addresses
            <GenericButton
              action={instance._toggleAddressEdit}
              disabled={false}
              extraClasses="payment-details-title-button"
              type="inline-neutral">
              Edit
            </GenericButton>
          </h4>
          <ul className="payment-details-addresses">
            {[<PaymentDetailsAddress
              acl={acl}
              addAddress={addAddress}
              addNotification={addNotification}
              address={{
                name: '<NAME>',
                line1: '10 Maple St',
                line2: '',
                city: 'Sasquatch',
                state: 'Bunnyhug',
                postcode: '90210',
                countryCode: 'CA',
                phones: ['12341234']
              }}
              close={instance._toggleAddressEdit}
              getCountries={getCountries}
              key="<NAME>"
              removeAddress={removeAddress}
              showEdit={false}
              updateAddress={updateAddress}
              updated={updateUser}
              username="spinach"
              validateForm={validateForm} />]}
          </ul>
          <h4>
            Billing addresses
            <GenericButton
              action={instance._toggleBillingAddressEdit}
              disabled={false}
              extraClasses="payment-details-title-button"
              type="inline-neutral">
              Edit
            </GenericButton>
          </h4>
          <ul className="payment-details-addresses">
            {[<PaymentDetailsAddress
              acl={acl}
              addAddress={addBillingAddress}
              addNotification={addNotification}
              address={{
                name: '<NAME>',
                line1: '9 Kangaroo St',
                line2: '',
                city: 'Snake',
                state: 'Spider',
                postcode: '9000',
                countryCode: 'AU',
                phones: ['00001111']
              }}
              close={instance._toggleBillingAddressEdit}
              getCountries={getCountries}
              key="<NAME>"
              removeAddress={removeBillingAddress}
              showEdit={false}
              updateAddress={updateAddress}
              updated={updateUser}
              username="spinach"
              validateForm={validateForm} />]}
          </ul>
        </div>
      </div>);
    expect(output).toEqualJSX(expected);
  });
});<commit_msg>Update payment details to use enzyme.<commit_after>/* Copyright (C) 2017 Canonical Ltd. */
'use strict';

const React = require('react');
const shapeup = require('shapeup');
const enzyme = require('enzyme');

const PaymentDetails = require('./details');
const GenericButton = require('../../generic-button/generic-button');
const GenericInput = require('../../generic-input/generic-input');
const PaymentDetailsAddress = require('./address/address');

describe('PaymentDetails', () => {
  let acl, payment;

  const renderComponent = (options = {}) => enzyme.shallow(
    <PaymentDetails
      acl={options.acl || acl}
      addNotification={options.addNotification || sinon.stub()}
      payment={options.payment || payment}
      paymentUser={options.paymentUser || sinon.stub()}
      updateUser={options.updateUser || sinon.stub()}
      username={options.username || 'spinach'}
      validateForm={options.validateForm || sinon.stub()} />
  );

  beforeEach(() => {
    acl = {isReadOnly: sinon.stub().returns(false)};
    payment = {
      addAddress: sinon.stub(),
      addBillingAddress: sinon.stub(),
      getCountries: sinon.stub(),
      removeAddress: sinon.stub(),
      removeBillingAddress: sinon.stub(),
      reshape: shapeup.reshapeFunc,
      updateAddress: sinon.stub(),
      updateBillingAddress: sinon.stub()
    };
  });

  it('can display the details', () => {
    const paymentUser ={
      name: '<NAME>',
      email: '<EMAIL>',
      business: true,
      addresses: [{
        name: '<NAME>',
        line1: '10 Maple St',
        line2: '',
        city: 'Sasquatch',
        state: 'Bunnyhug',
        postcode: '90210',
        countryCode: 'CA',
        phones: ['12341234']
      }],
      vat: '1234',
      businessName: 'Spinachy business',
      billingAddresses: [{
        name: '<NAME>',
        line1: '9 Kangaroo St',
        line2: '',
        city: 'Snake',
        state: 'Spider',
        postcode: '9000',
        countryCode: 'AU',
        phones: ['00001111']
      }]
    };
    const wrapper = renderComponent({ paymentUser });
    const expected = (
      <div className="payment__section">
        <h2 className="payment__title twelve-col">
          Account details
        </h2>
        <div className="payment-details-view twelve-col">
          <div className="payment-details-fields">
            <GenericInput
              disabled={true}
              label="Name"
              value="<NAME>" />
            <GenericInput
              disabled={true}
              label="Email address"
              value="<EMAIL>" />
            <GenericInput
              disabled={true}
              label="VAT number (optional)"
              value="1234" />
            <GenericInput
              disabled={true}
              label="Business name"
              value="Spinachy business" />
          </div>
          <h4>
            Addresses
            <GenericButton
              action={wrapper.find('GenericButton').at(0).prop('action')}
              disabled={false}
              extraClasses="payment-details-title-button"
              type="inline-neutral">
              Edit
            </GenericButton>
          </h4>
          <ul className="payment-details-addresses">
            {[<PaymentDetailsAddress
              acl={acl}
              addAddress={sinon.stub()}
              addNotification={sinon.stub()}
              address={{
                name: '<NAME>',
                line1: '10 Maple St',
                line2: '',
                city: 'Sasquatch',
                state: 'Bunnyhug',
                postcode: '90210',
                countryCode: 'CA',
                phones: ['12341234']
              }}
              close={wrapper.find('PaymentDetailsAddress').at(0).prop('close')}
              getCountries={sinon.stub()}
              key="<NAME>"
              removeAddress={sinon.stub()}
              showEdit={false}
              updateAddress={sinon.stub()}
              updated={sinon.stub()}
              username="spinach"
              validateForm={sinon.stub()} />]}
          </ul>
          <h4>
            Billing addresses
            <GenericButton
              action={wrapper.find('GenericButton').at(1).prop('action')}
              disabled={false}
              extraClasses="payment-details-title-button"
              type="inline-neutral">
              Edit
            </GenericButton>
          </h4>
          <ul className="payment-details-addresses">
            {[<PaymentDetailsAddress
              acl={acl}
              addAddress={sinon.stub()}
              addNotification={sinon.stub()}
              address={{
                name: '<NAME>',
                line1: '9 Kangaroo St',
                line2: '',
                city: 'Snake',
                state: 'Spider',
                postcode: '9000',
                countryCode: 'AU',
                phones: ['00001111']
              }}
              close={wrapper.find('PaymentDetailsAddress').at(1).prop('close')}
              getCountries={sinon.stub()}
              key="<NAME>"
              removeAddress={sinon.stub()}
              showEdit={false}
              updateAddress={sinon.stub()}
              updated={sinon.stub()}
              username="spinach"
              validateForm={sinon.stub()} />]}
          </ul>
        </div>
      </div>);
    assert.compareJSX(wrapper, expected);
  });
});
{'fraction_non_alphanumeric': 0.13580135440180588, 'fraction_numerical': 0.015169300225733635, 'mean_word_length': 1.7080684596577018, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 84, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4442382', 'n_tokens_mistral': 2988, 'n_tokens_neox': 2892, 'n_words': 546}