diff --git a/app.js b/app.js index 2543265f..fc5de341 100644 --- a/app.js +++ b/app.js @@ -200,6 +200,7 @@ function setInitialValues() { amount: 0, }, required_fields: { + invoiceID: false, dueDate: false, currency: false, discount: false, diff --git a/app/components/form/InvoiceID.jsx b/app/components/form/InvoiceID.jsx new file mode 100644 index 00000000..03d7ca73 --- /dev/null +++ b/app/components/form/InvoiceID.jsx @@ -0,0 +1,67 @@ +// Libraries +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +// Custom Components +import { Section } from '../shared/Section'; + +// Animation +import _withFadeInAnimation from '../shared/hoc/_withFadeInAnimation'; + +// Styles +import styled from 'styled-components'; +const NoteContent = styled.textarea` + min-height: 36px; + border-radius: 4px; + padding: 10px; + display: block; + width: 100%; + border: 1px solid #f2f3f4; + color: #3a3e42; + font-size: 14px; +`; + +// Component +export class InvoiceID extends PureComponent { + constructor(props) { + super(props); + this.state = { invoiceID: this.props.invoiceID }; + this.handleInputChange = this.handleInputChange.bind(this); + } + + componentWillReceiveProps(nextProps) { + if (nextProps.invoiceID === "") { + this.setState({ invoiceID: "" }); + } + } + + handleInputChange(event) { + this.setState({ invoiceID: event.target.value }, () => { + this.props.updateFieldData('invoiceID', this.state.invoiceID); + }); + } + + render() { + const { t } = this.props; + return ( +
+ + +
+ ); + } +} + +InvoiceID.propTypes = { + invoiceID: PropTypes.string.isRequired, + t: PropTypes.func.isRequired, + updateFieldData: PropTypes.func.isRequired, +}; + +// Export +export default _withFadeInAnimation(InvoiceID); diff --git a/app/components/form/Settings.jsx b/app/components/form/Settings.jsx index 6d0bcbf8..180fb681 100644 --- a/app/components/form/Settings.jsx +++ b/app/components/form/Settings.jsx @@ -138,6 +138,15 @@ class Settings extends PureComponent { + + + + + { + let wrapper; + beforeEach(() => { + wrapper = mount( + + ); + }); + + // PROPS & STATE + it('receives correct props', () => { + expect(wrapper.prop('invoiceID')).toEqual(invoiceID); + expect(wrapper.prop('updateFieldData')).toEqual(updateFieldData); + }); + + // RENDER + it('renders necessary element', () => { + expect(wrapper.find('label')).toHaveLength(1); + expect(wrapper.find('input')).toHaveLength(1); + }); + + // LIFE CYCLE EVENTS + // TODO + it('render when necessary', () => {}); + + // PRIVATE METHOD + it('handleInputChange correctly', () => { + const spy = jest.spyOn(InvoiceID.prototype, 'handleInputChange'); + const wrap = mount( + + ); + const textInput = wrap.find('input'); + textInput.simulate('change', { target: { value: 'Invoice: 987-654-321' } }); + expect(spy).toHaveBeenCalled(); + }); + + // SNAPSHOT + it('matches snapshot', () => { + const tree = renderer + .create( + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/components/form/__tests__/Settings.spec.jsx b/app/components/form/__tests__/Settings.spec.jsx index 3c70a211..ac5fc4ee 100644 --- a/app/components/form/__tests__/Settings.spec.jsx +++ b/app/components/form/__tests__/Settings.spec.jsx @@ -23,6 +23,7 @@ const currentInvoice = { settings: { open: false, required_fields: { + invoiceID: false, dueDate: false, currency: false, discount: false, @@ -34,6 +35,7 @@ const currentInvoice = { tax: {}, currency: 'USD', required_fields: { + invoiceID: false, dueDate: false, currency: false, discount: false, @@ -68,13 +70,12 @@ describe('Settings component', () => { expect(wrapper.prop('toggleField')).toEqual(toggleField); expect(wrapper.prop('toggleFormSettings')).toEqual(toggleFormSettings); expect(wrapper.prop('updateSavedSettings')).toEqual(updateSavedSettings); - // expect(wrapper.prop('currentInvoice')).toEqual(currentInvoice); }); // RENDER it('renders necessary element', () => { - expect(wrapper.find('label')).toHaveLength(11); - expect(wrapper.find(Switch)).toHaveLength(5); + expect(wrapper.find('label')).toHaveLength(13); + expect(wrapper.find(Switch)).toHaveLength(6); }); // LIFE CYCLE EVENTS @@ -84,13 +85,19 @@ describe('Settings component', () => { // PRIsettingsE METHOD it('toggle field correctly', () => { // Setup - const dueDate = wrapper.find(Switch).at(0); - const currency = wrapper.find(Switch).at(1); - const discount = wrapper.find(Switch).at(2); - const tax = wrapper.find(Switch).at(3); - const note = wrapper.find(Switch).at(4); + const invoiceID = wrapper.find(Switch).at(0); + const dueDate = wrapper.find(Switch).at(1); + const currency = wrapper.find(Switch).at(2); + const discount = wrapper.find(Switch).at(3); + const tax = wrapper.find(Switch).at(4); + const note = wrapper.find(Switch).at(5); // Execute & Assert + invoiceID.find('input').simulate('change'); + expect(toggleField).toHaveBeenCalled(); + expect(toggleField).toHaveBeenCalledWith('invoiceID'); + expect(toggleField).not.toHaveBeenCalledWith('something-else'); + dueDate.find('input').simulate('change'); expect(toggleField).toHaveBeenCalled(); expect(toggleField).toHaveBeenCalledWith('dueDate'); diff --git a/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap new file mode 100644 index 00000000..a749e96e --- /dev/null +++ b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InvoiceID component matches snapshot 1`] = ` +
+ + +
+`; diff --git a/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap b/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap index b7236171..5fc49d62 100644 --- a/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap +++ b/app/components/form/__tests__/__snapshots__/Settings.spec.jsx.snap @@ -37,6 +37,29 @@ exports[`Settings component matches snapshot 1`] = `
+
+ + +
diff --git a/app/components/invoices/Invoice.jsx b/app/components/invoices/Invoice.jsx index 901ff341..0631c15d 100644 --- a/app/components/invoices/Invoice.jsx +++ b/app/components/invoices/Invoice.jsx @@ -177,7 +177,6 @@ class Invoice extends PureComponent { ); } - case 'paid': { return ( @@ -186,7 +185,6 @@ class Invoice extends PureComponent { ); } - case 'refunded': { return ( @@ -244,10 +242,12 @@ class Invoice extends PureComponent {

- {truncate(invoice._id, { - length: 8, - omission: '', - })} + { invoice.invoiceID + ? invoice.invoiceID + : truncate(invoice._id, { + length: 8, + omission: '', }) + }

diff --git a/app/components/settings/Invoice.jsx b/app/components/settings/Invoice.jsx index 9c99cdd8..689a4169 100644 --- a/app/components/settings/Invoice.jsx +++ b/app/components/settings/Invoice.jsx @@ -191,6 +191,18 @@ class Invoice extends Component {
+ + + + -