Add full user flow test

src/components/BookDetails.js

@@ -8,8 +8,7 @@ const BookDetails = inject("shop")(observer(({book, shop}) => (
     <p>Price: ${book.price}€</p>
     <button
         onClick={() => {
-            shop.cart.addBook(book)
-            alert("Added to cart")
+            shop.cart.addBook(book);
         }}
     >
         Add to cart

src/components/Cart.js

@@ -15,11 +15,7 @@ const Cart = inject("shop")(observer(({ shop: { cart }}) => (
     <p><b>Total: {cart.total} €</b></p>
     <button
       disabled={!cart.canCheckout}
-      onClick={() => {
-        const total = cart.total
-        cart.clear()
-        alert(`Bought books for ${total} € !`)
-      }}
+      onClick={cart.checkout}
     >
       Submit order
     </button>

src/stores/CartStore.js

@@ -78,6 +78,13 @@ export default class CartStore {
             this.entries.push(entry)
         }
         entry.quantity += quantity
+        this.shop.alert("Added to cart")
+    }
+
+    @action.bound checkout() {
+        const total = this.total
+        this.clear()
+        this.shop.alert(`Bought books for ${total} € !`)
     }
 
     @action clear() {

src/stores/ShopStore.js

@@ -8,8 +8,9 @@ export default class ShopStore {
   cartStore
   viewStore
 
-  constructor(fetcher) {
+  constructor(fetcher, alert = windowAlert) {
     this.fetch = fetcher
+    this.alert = alert
     this.bookStore = new BookStore(this)
     this.cart = new CartStore(this)
     this.view = new ViewStore(this)
@@ -28,3 +29,7 @@ export default class ShopStore {
     return this.bookStore.sortedAvailableBooks
   }
 }
+
+function windowAlert(msg) {
+  window.alert(msg)
+}

src/stores/ShopStore.test.js

@@ -0,0 +1,43 @@
+import * as fs from "fs"
+import {when} from "mobx"
+import ShopStore from './ShopStore'
+
+const bookFetcher = () => Promise.resolve(JSON.parse(fs.readFileSync("./public/books.json")))
+
+it('as a user I can buy books', (done) => {
+  const alertSpy = jasmine.createSpy("alert")
+  const shop = new ShopStore(bookFetcher, alertSpy)
+
+  shop.view.openBooksPage()
+  expect(shop.view.page).toBe("books")
+  expect(shop.view.currentUrl).toBe("/")
+  expect(shop.isLoading).toBe(true)
+
+  when(
+      () => !shop.isLoading,
+      () => {
+          expect(shop.books.size).toBe(4)
+
+          shop.view.openBookPageById("978-1423103349")
+          expect(shop.view.page).toBe("book")
+          expect(shop.view.currentUrl).toBe("/book/978-1423103349")
+          expect(shop.view.selectedBook.name).toBe("The Sea of Monsters")
+          expect(alertSpy.calls.count()).toBe(0)
+
+          shop.cart.addBook(shop.view.selectedBook)
+          expect(alertSpy.calls.count()).toBe(1)
+
+          shop.view.openCartPage()
+          expect(shop.view.page).toBe("cart")
+          expect(shop.view.currentUrl).toBe("/cart")
+          expect(shop.cart.canCheckout).toBe(true)
+
+          shop.cart.checkout()
+          expect(alertSpy.calls.count()).toBe(2)
+          expect(shop.cart.entries.length).toBe(0)
+          expect(shop.cart.canCheckout).toBe(false)
+          done()
+      }
+  )
+})
+

src/stores/ViewStore.js

@@ -20,7 +20,7 @@ export default class ViewStore {
       case "book":
         return "/book/" + this.selectedBookId
       case "cart":
-        return "/cart/"
+        return "/cart"
       default:
         return "/404"
     }