Ada-C8 · galestorm · Dec 11, 2017 · Dec 11, 2017 · Dec 12, 2017 · Dec 12, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -1,120 +1,123 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Ada Trader</title>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Rubik+Mono+One">
-  </head>
-  <body>
-    <main id="application" class="content">
-      <header class="row">
-        <h1 class="logo">Ada Trader</h1>
-      </header>
-
-      <div class="workspace row">
-
-        <div class="columns large-8 small-12">
-
-          <div id="quotes-container" class="quotes-container columns small-10 small-offset-1 end">
-            <h2>Quotes</h2>
-            <div class="quotes-list-container">
-              <ul id="quotes" class="quotes">
-              </ul>
-            </div>
+<head>
+  <title>Ada Trader</title>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Rubik+Mono+One">
+</head>
+<body>
+  <main id="application" class="content">
+    <header class="row">
+      <h1 class="logo">Ada Trader</h1>
+    </header>
+
+    <div class="workspace row">
+
+      <div class="columns large-8 small-12">
+
+        <div id="quotes-container" class="quotes-container columns small-10 small-offset-1 end">
+          <h2>Quotes</h2>
+          <div class="quotes-list-container">
+            <ul id="quotes" class="quotes">
+            </ul>
           </div>
-
         </div>
 
-        <div class="columns large-4 small-12 trade-column">
+      </div>
 
-          <div id="trades-container" class="trades-container columns small-10 small-offset-1">
-            <h2>Trade History</h2>
-            <div class="trades-list-container">
-              <ul id="trades" class="trades">
-              </ul>
-            </div>
-          </div>
+      <div class="columns large-4 small-12 trade-column">
 
+        <div id="trades-container" class="trades-container columns small-10 small-offset-1">
+          <h2>Trade History</h2>
+          <div class="trades-list-container">
+            <ul id="trades" class="trades">
+            </ul>
+          </div>
         </div>
+
       </div>
+    </div>
+
+    <hr />
 
-      <hr />
-
-      <div id="order-workspace" class="order-workspace row">
-
-       <div class="columns large-8 small-12">
-         <div class="orders-container columns large-10 large-offset-1">
-           <h2>Open Orders</h2>
-           <div class="orders-list-container">
-             <ul id="orders" class="orders">
-             </ul>
-           </div>
-         </div>
-       </div>
-
-       <div class="columns large-4 small-12 trade-column">
-         <div class="order-entry-form columns small-10 small-offset-1">
-           <h3>Order Entry Form</h3>
-           <form>
-             <label for="symbol">Symbol</label>
-             <select name="symbol">
-               <!-- Option entries should be added here using JavaScript -->
-             </select>
-             <label for="price-target">Price</label>
-             <input type="number" name="price-target" step="0.10" min="0.00" placeholder="100.00" />
-             <label>Action</label>
-             <button class="btn-buy alert button">Buy</button>
-             <button class="btn-sell success button">Sell</button>
-           </form>
-           <div class="form-errors">
-           </div>
-         </div>
-
-       </div>
+    <div id="order-workspace" class="order-workspace row">
 
+      <div class="columns large-8 small-12">
+        <div class="orders-container columns large-10 large-offset-1">
+          <h2>Open Orders</h2>
+          <div class="orders-list-container">
+            <ul id="orders" class="orders">
+            </ul>
+          </div>
+        </div>
       </div>
-    </main>
-    <footer>
-      <div class="columns small-12 medium-11 medium-offset-1">
-        <p class="footer-copy">&copy; 2017, Ada Developers Academy</p>
-    </div>
-    </footer>
-
-    <script type="text/template" id="quote-template">
-      <!-- The provided styles assume that you will insert this template
-      within an element with the class "quote" applied -->
-      <!-- <li class="quote"> -->
-      <div class="row small-12 columns">
-        <h3 class="symbol"><%- symbol %></h3>
-        <h3 class="price">$<%- price.toFixed(2) %></h3>
-        <div class="quote-actions">
-          <button class="btn-buy alert button">Buy</button>
-          <button class="btn-sell success button">Sell</button>
+
+      <div class="columns large-4 small-12 trade-column">
+        <div class="order-entry-form columns small-10 small-offset-1">
+          <h3>Order Entry Form</h3>
+          <form>
+            <label for="symbol">Symbol</label>
+            <select name="symbol">
+              <!-- <option>HUMOR</option>
+              <option>CLOTH</option>
+              <option>HABIT</option>
+              <option>SUPER</option> -->
+            </select>
+            <label for="price-target">Price</label>
+            <input type="number" name="price-target" step="0.10" min="0.00" placeholder="100.00" />
+            <label>Action</label>
+            <button class="btn-buy alert button">Buy</button>
+            <button class="btn-sell success button">Sell</button>
+          </form>
+          <div class="form-errors">
+          </div>
         </div>
+
       </div>
-      <!-- </li> -->
-    </script>
-
-    <script type="text/template" id="trade-template">
-      <li class="trade">
-        <span>
-          You <%- buy ? 'bought' : 'sold' %> <%- symbol %> at $<%- price.toFixed(2) %>
-        </span>
-      </li>
-    </script>
-
-    <script type="text/template" id="order-template">
+
+    </div>
+  </main>
+  <footer>
+    <div class="columns small-12 medium-11 medium-offset-1">
+      <p class="footer-copy">&copy; 2017, Ada Developers Academy</p>
+    </div>
+  </footer>
+
+  <script type="text/template" id="quote-template">
+    <!-- The provided styles assume that you will insert this template
+    within an element with the class "quote" applied -->
+    <!-- <li class="quote"> -->
+    <div class="row small-12 columns">
       <h3 class="symbol"><%- symbol %></h3>
-      <div class="detail">
-        <span class="action"><%- buy ? 'buy' : 'sell' %></span>
-        at
-        <span class="price">$<%- targetPrice.toFixed(2) %></span>
+      <h3 class="price">$<%- price.toFixed(2) %></h3>
+      <div class="quote-actions">
+        <button class="btn-buy alert button">Buy</button>
+        <button class="btn-sell success button">Sell</button>
       </div>
-      <button class="btn-cancel button secondary">Cancel</button>
-    </script>
+    </div>
+    <!-- </li> -->
+  </script>
+
+  <script type="text/template" id="trade-template">
+    <li class="trade">
+      <span>
+        You <%- buy ? 'bought' : 'sold' %> <%- symbol %> at $<%- price.toFixed(2) %>
+      </span>
+    </li>
+  </script>
+
+  <script type="text/template" id="order-template">
+    <h3 class="symbol"><%- symbol %></h3>
+    <div class="detail">
+      <span class="action"><%- buy ? 'buy' : 'sell' %></span>
+      at
+      <span class="price">$<%- targetPrice.toFixed(2) %></span>
+    </div>
+    <button class="btn-cancel button secondary">Cancel</button>
+  </script>
 
-    <script src="/app.bundle.js" charset="utf-8"></script>
-  </body>
+  <script src="/app.bundle.js" charset="utf-8"></script>
+</body>
 </html>
diff --git a/spec/models/order_spec.js b/spec/models/order_spec.js
@@ -0,0 +1,89 @@
+import Order from 'models/order';
+
+describe('Order spec', () => {
+  let buyOrder;
+  let sellOrder;
+  beforeEach(() => {
+    buyOrder = new Order({
+      symbol: 'HELLO',
+      targetPrice: 90.00,
+      marketPrice: 100.00,
+      buy: true
+    });
+    sellOrder = new Order({
+      symbol: 'HELLO',
+      targetPrice: 100.00,
+      marketPrice: 90.00,
+      buy: false
+    })
+  });
+
+  describe('Order validations', () => {
+    it('is not valid unless it has a symbol', () => {
+
+      expect(buyOrder.isValid()).toBeTruthy();
+
+      expect(sellOrder.isValid()).toBeTruthy();
+
+      buyOrder.set('symbol', null);
+
+      expect(buyOrder.isValid()).toBeFalsy();
+
+      sellOrder.set('symbol', null);
+
+      expect(sellOrder.isValid()).toBeFalsy();
+    })
+
+    it('is not valid unless it has a numerical targetPrice', () => {
+      expect(buyOrder.isValid()).toBeTruthy();
+
+      expect(sellOrder.isValid()).toBeTruthy();
+
+      const badTargetPrices = [null, 'strings', '.', '-1']
+
+      badTargetPrices.forEach(function(element) {
+
+        buyOrder.set('targetPrice', element);
+
+        sellOrder.set('targetPrice', element);
+
+        expect(buyOrder.isValid()).toBeFalsy();
+
+        expect(sellOrder.isValid()).toBeFalsy();
+      })
+    })
+
+    it('must follow buy low, sell high', () => {
+      expect(buyOrder.isValid()).toBeTruthy();
+
+      expect(sellOrder.isValid()).toBeTruthy();
+
+      buyOrder.set('targetPrice', '110');
+
+      sellOrder.set('targetPrice', '80');
+
+      expect(buyOrder.isValid()).toBeFalsy();
+
+      expect(sellOrder.isValid()).toBeFalsy();
+
+    })
+  });
+
+  describe('Execute order', () => {
+    it('triggers a "buy" event on itself if new buyOrder is valid', () => {
+      const changeInfo = {symbol: 'HELLO', buy: true, currentPrice: 80}
+      spyOn(buyOrder, "trigger")
+      buyOrder.executeOrder(changeInfo)
+
+      expect(buyOrder.trigger).toHaveBeenCalledWith('buy', changeInfo);
+    });
+
+    it('triggers a "sell" event on itself if new sellOrder is valid', () => {
+      const changeInfo = {symbol: 'HELLO', buy: false, currentPrice: 110}
+      spyOn(sellOrder, "trigger")
+      sellOrder.executeOrder(changeInfo)
+
+      expect(sellOrder.trigger).toHaveBeenCalledWith('sell', changeInfo);
+    });
+  });
+});
diff --git a/src/app.js b/src/app.js
@@ -1,11 +1,22 @@
+// CSS
 import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
+// Vendor Modules
 import $ from 'jquery';
+import _ from 'underscore';
 
-import Simulator from 'models/simulator';
-import QuoteList from 'collections/quote_list';
+// Models
+import Simulator from './models/simulator';
+import QuoteList from './collections/quote_list';
+import OrderList from './collections/order_list';
+import Bus from './models/event_bus';
 
+// Views
+import QuoteListView from './views/quote_list_view';
+import OrderListView from './views/order_list_view';
+
+// Data
 const quoteData = [
   {
     symbol: 'HUMOR',
@@ -25,11 +36,37 @@ const quoteData = [
   },
 ];
 
+
 $(document).ready(function() {
-  const quotes = new QuoteList(quoteData);
+
+  const quoteList = new QuoteList(quoteData);
+
+  const orderList = new OrderList;
+
   const simulator = new Simulator({
-    quotes: quotes,
+    quotes: quoteList,
   });
 
+  const bus = new Bus;
+
   simulator.start();
+
+  const quoteListView = new QuoteListView({
+    model: quoteList,
+    template: _.template($('#quote-template').html()),
+    tradeTemplate: _.template($('#trade-template').html()),
+    el: 'main',
+    orderList: orderList,
+    bus: bus
+  });
+
+  const orderListView = new OrderListView({
+    model: orderList,
+    template: _.template($('#order-template').html()),
+    el: 'main',
+    quoteList: quoteList,
+    bus: bus
+  });
+
+  quoteListView.render();
 });
diff --git a/src/collections/order_list.js b/src/collections/order_list.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+
+const OrderList = Backbone.Collection.extend({
+  model: Order,
+});
+
+export default OrderList;
diff --git a/src/collections/quote_list.js b/src/collections/quote_list.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import Quote from 'models/quote';
+import Quote from '../models/quote';
 
 const QuoteList = Backbone.Collection.extend({
   model: Quote,