From 771bc4e7a620ee13a641a5e8bbb913d1364b36b4 Mon Sep 17 00:00:00 2001
From: Josh McCall <joshmccall221@gmail.com>
Date: Mon, 27 Jun 2016 08:56:33 +0000
Subject: [PATCH 1/2] VendingMachineKata:Display

---
 src/components/vending-machine.jsx       |  8 +++++++-
 test/components/vending-machine_spec.jsx | 14 +++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/vending-machine.jsx b/src/components/vending-machine.jsx
index 58e5925..f48b179 100644
--- a/src/components/vending-machine.jsx
+++ b/src/components/vending-machine.jsx
@@ -28,7 +28,13 @@ export default React.createClass({
                        style: coinContainerStyle} }  = coinContainer;
         return (
             <div className={root_css_class} style={root_style}>
-                <section className={displayContainerClassName} style={displayContainerStyle}><h4>Display: {defaultMessage}</h4></section>
+            <section className={displayContainerClassName} style={displayContainerStyle}>
+                <h4>Display: {defaultMessage}</h4>
+                <div>Balance: ${balance}</div>
+                <div>Selected Product: {selectedProduct}</div>
+                <div>CoinReturn: ${coinReturn}</div>
+                <div>Vend: {vend}</div>
+            </section>
                 <section className={coinContainerClassName} style={coinContainerStyle}>
                     {validCoins.map((vc,i) =>{
                         return <button 
diff --git a/test/components/vending-machine_spec.jsx b/test/components/vending-machine_spec.jsx
index 69d5850..5bbac90 100644
--- a/test/components/vending-machine_spec.jsx
+++ b/test/components/vending-machine_spec.jsx
@@ -142,8 +142,8 @@ const renderer  = ReactTestUtils.createRenderer(),
       {type      : coinContainerType } = coinContainer,
       {type      : displayContainerType, 
        className : displayContainerClassName,
-       stle      : displayContainerStyle,
-       props     : {children:  {props: {children: insert_coin}}}} = displayContainer;
+       stle      : displayContainerStyle} = displayContainer,
+       [insertCoin, balance, selectedProduct, vend] = displayContainer.props.children;
 
    const {
        rootContainer   :{props:{css_class:expected_root_css_class, style: expected_root_style }},  
@@ -175,7 +175,15 @@ describe.only('Vending Machine Kata component is rendered:', () => {
                             expect(displayContainerType).to.eql('section');
                             expect(displayContainer.props.style).to.eql(expected_display_style);
                             expect(displayContainer.props.className).to.eql(expected_display_css_class);
-                            expect(insert_coin).to.eql(['Display: ',expectedProps.displayContainer.defaultMessage]);
+                            expect(insertCoin.type).to.eql('h4');
+                            expect(insertCoin.props.children).to.eql(['Display: ',expectedProps.displayContainer.defaultMessage]);
+                            expect(balance.type).to.eql('div');
+                            expect(balance.props.children).to.eql([ 'Balance: $', '0.00' ]);
+                            expect(selectedProduct.type).to.eql('div');
+                            expect(selectedProduct.props.children).to.eql([ 'Selected Product: ', 'NONE' ]);
+                            expect(vend.type).to.eql('div');
+                            expect(vend.props.children).to.eql([ 'CoinReturn: $', '0.00' ]);
+ 
                         });
                         it('should update disply when valid coin is inserted.',()=>{});
                         it('should place rejected coins in coin return',()=>{});

From acfe08548b7c4158a4dcea6bd69205aaa7053654 Mon Sep 17 00:00:00 2001
From: Josh McCall <joshmccall221@gmail.com>
Date: Mon, 27 Jun 2016 09:59:08 +0000
Subject: [PATCH 2/2] VendingMachineKata:LifeCycle Test

---
 test/components/vending-machine_spec.jsx | 50 +++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/test/components/vending-machine_spec.jsx b/test/components/vending-machine_spec.jsx
index 5bbac90..f35ba4a 100644
--- a/test/components/vending-machine_spec.jsx
+++ b/test/components/vending-machine_spec.jsx
@@ -132,7 +132,7 @@ let expectedProps ={
         }
     };
 
-const renderer  = ReactTestUtils.createRenderer(),
+let renderer  = ReactTestUtils.createRenderer(),
       tree      = renderer.render(<VendingMachine {...expectedProps}/>),
 
       {type: root_type, 
@@ -185,7 +185,53 @@ describe.only('Vending Machine Kata component is rendered:', () => {
                             expect(vend.props.children).to.eql([ 'CoinReturn: $', '0.00' ]);
  
                         });
-                        it('should update disply when valid coin is inserted.',()=>{});
+                        it('should update disply when valid coin is inserted.',()=>{
+                            let props ={
+                                    rootContainer: { props : { css_class: 'container-container',
+                                            style: {margin:'auto', width:'90%',backgroundColor:'gray'} }, },
+                                    displayContainer: {
+                                        props : { css_class: 'display-container', style: {float:'left', width:'45%', padding: '15px'} },
+                                        defaultMessage:'INSERT COIN',
+                                        balance: '0.20',
+                                        selectedProduct: 'NONE', 
+                                        coinReturn:'0.00',
+                                        vend: 'EMPTY'
+                                    },
+                                    productsContainer:{ props : { css_class: 'products-div', },
+                                        products: [{'name': 'cola' , 'price': '1.00'},
+                                                   {'name': 'chips', 'price': '1.50'}, 
+                                                   {'name': 'candy', 'price': '0.65'}]    
+                                    },
+                                    coinContainer:{
+                                        props : { css_class: 'coins-container', style: {float:'left', width:'45%', padding: '15px'} },
+                                        validCoins: [
+                                            {'name'     : 'Quater',
+                                             'value'    : '25',
+                                             'weight'   : '5.670',
+                                             'diameter' : '24.26'},
+                                            {'name'     : 'Dime',
+                                             'value'    : '10',
+                                             'weight'   : '2.268',
+                                             'diameter' : '17.91'},
+                                            {'name'     : 'Nickel',
+                                             'value'    : '5',
+                                             'weight'   : '5.000',
+                                             'diameter' : '21.21'}
+                                        ],
+                                        invalidCoins: [
+                                            {'name'     : 'Pennies',
+                                             'value'    : '.01',
+                                             'weight'   : '2.500',
+                                             'diameter' : '19.05'},
+                                        ]
+                                    },
+                                    clickHandler:  function(){}
+                            };
+                          tree = renderer.render(<VendingMachine {...props}/>);
+                          expect(tree.props.children[0].props.children[1].props.children).to.eql([ 'Balance: $', '0.20' ]);
+                          //console.log(tree.props.children[0].props.children[1].props.children);
+                        });
+
                         it('should place rejected coins in coin return',()=>{});
                         it('TODO',()=>{});
                     });