Bug 1192740 - Adding New contacts parent component for contact list, contact add, contact edit and contact import views under Contacts tab. r=aoprea

browser/components/loop/content/js/contacts.js

@@ -330,10 +330,9 @@ loop.contacts = (function(_, mozL10n) {
 
     propTypes: {
       mozLoop: React.PropTypes.object.isRequired,
-      notifications: React.PropTypes.instanceOf(
-                     loop.shared.models.NotificationCollection).isRequired,
-      // Callback to handle entry to the add/edit contact form.
-      startForm: React.PropTypes.func.isRequired
+      notifications: React.PropTypes.instanceOf(loop.shared.models.NotificationCollection).isRequired,
+      switchToContactAdd: React.PropTypes.func.isRequired,
+      switchToContactEdit: React.PropTypes.func.isRequired
     },
 
     /**
@@ -532,13 +531,13 @@ loop.contacts = (function(_, mozL10n) {
     },
 
     handleAddContactButtonClick: function() {
-      this.props.startForm("contacts_add");
+      this.props.switchToContactAdd();
     },
 
     handleContactAction: function(contact, actionName) {
       switch (actionName) {
         case "edit":
-          this.props.startForm("contacts_edit", contact);
+          this.props.switchToContactEdit(contact);
           break;
         case "remove":
           this.props.mozLoop.confirm({
@@ -748,13 +747,87 @@ loop.contacts = (function(_, mozL10n) {
     }
   });
 
+  const ContactsControllerView = React.createClass({displayName: "ContactsControllerView",
+    propTypes: {
+      initialSelectedTabComponent: React.PropTypes.string,
+      mozLoop: React.PropTypes.object.isRequired,
+      notifications: React.PropTypes.object.isRequired
+    },
+
+    getInitialState: function() {
+      return {
+        currentComponent: this.props.initialSelectedTabComponent || "contactList",
+        contactFormData: {}
+      };
+    },
+
+    /* XXX We should have success/Fail callbacks that the children call instead of this
+    * Children should not have knowledge of other views
+    * However, this is being implemented in this way so the view can be directed appropriately
+    * without making it too complex
+    */
+    switchComponentView: function(componentName) {
+      return function() {
+        this.setState({currentComponent: componentName});
+      }.bind(this);
+    },
+
+    handleAddEditContact: function(componentName) {
+      return function(contactFormData) {
+        this.setState({
+          contactFormData: contactFormData || {},
+          currentComponent: componentName
+        });
+      }.bind(this);
+    },
+
+    /* XXX Consider whether linkedStated makes sense for this */
+    render: function() {
+      switch(this.state.currentComponent) {
+        case "contactAdd":
+          return (
+            React.createElement(ContactDetailsForm, {
+              contactFormData: this.state.contactFormData, 
+              mode: "add", 
+              mozLoop: this.props.mozLoop, 
+              ref: "contacts_add", 
+              switchToInitialView: this.switchComponentView("contactList")})
+          );
+        case "contactEdit":
+          return (
+            React.createElement(ContactDetailsForm, {
+              contactFormData: this.state.contactFormData, 
+              mode: "edit", 
+              mozLoop: this.props.mozLoop, 
+              ref: "contacts_edit", 
+              switchToInitialView: this.switchComponentView("contactList")})
+          );
+        case "contactList":
+        default:
+          return (
+            React.createElement(ContactsList, {
+              mozLoop: this.props.mozLoop, 
+              notifications: this.props.notifications, 
+              ref: "contacts_list", 
+              switchToContactAdd: this.handleAddEditContact("contactAdd"), 
+              switchToContactEdit: this.handleAddEditContact("contactEdit")})
+          );
+      }
+    }
+  });
+
   const ContactDetailsForm = React.createClass({displayName: "ContactDetailsForm",
     mixins: [React.addons.LinkedStateMixin],
 
     propTypes: {
+      contactFormData: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
-      // Callback used to change the selected tab - it is passed the tab name.
-      selectTab: React.PropTypes.func.isRequired
+      mozLoop: React.PropTypes.object.isRequired,
+      switchToInitialView: React.PropTypes.func.isRequired
+    },
+
+    componentDidMount: function() {
+      this.initForm(this.props.contactFormData);
     },
 
     getInitialState: function() {
@@ -769,12 +842,14 @@ loop.contacts = (function(_, mozL10n) {
 
     initForm: function(contact) {
       let state = this.getInitialState();
-      if (contact) {
+      // Test for an empty contact object
+      if (_.keys(contact).length > 0) {
         state.contact = contact;
         state.name = contact.name[0];
         state.email = getPreferred(contact, "email").value;
         state.tel = getPreferred(contact, "tel").value;
       }
+
       this.setState(state);
     },
 
@@ -792,10 +867,7 @@ loop.contacts = (function(_, mozL10n) {
         return;
       }
 
-      this.props.selectTab("contacts");
-
-      let contactsAPI = navigator.mozLoop.contacts;
-
+      let contactsAPI = this.props.mozLoop.contacts;
       switch (this.props.mode) {
         case "edit":
           this.state.contact.name[0] = this.state.name.trim();
@@ -812,7 +884,7 @@ loop.contacts = (function(_, mozL10n) {
           break;
         case "add":
           var contact = {
-            id: navigator.mozLoop.generateUUID(),
+            id: this.props.mozLoop.generateUUID(),
             name: [this.state.name.trim()],
             email: [{
               pref: true,
@@ -836,10 +908,12 @@ loop.contacts = (function(_, mozL10n) {
           });
           break;
       }
+
+      this.props.switchToInitialView();
     },
 
     handleCancelButtonClick: function() {
-      this.props.selectTab("contacts");
+      this.props.switchToInitialView();
     },
 
     render: function() {
@@ -899,6 +973,7 @@ loop.contacts = (function(_, mozL10n) {
     ContactsList: ContactsList,
     ContactDetail: ContactDetail,
     ContactDetailsForm: ContactDetailsForm,
+    ContactsControllerView: ContactsControllerView,
     _getPreferred: getPreferred,
     _setPreferred: setPreferred
   };

browser/components/loop/content/js/contacts.jsx

@@ -330,10 +330,9 @@ loop.contacts = (function(_, mozL10n) {
 
     propTypes: {
       mozLoop: React.PropTypes.object.isRequired,
-      notifications: React.PropTypes.instanceOf(
-                     loop.shared.models.NotificationCollection).isRequired,
-      // Callback to handle entry to the add/edit contact form.
-      startForm: React.PropTypes.func.isRequired
+      notifications: React.PropTypes.instanceOf(loop.shared.models.NotificationCollection).isRequired,
+      switchToContactAdd: React.PropTypes.func.isRequired,
+      switchToContactEdit: React.PropTypes.func.isRequired
     },
 
     /**
@@ -532,13 +531,13 @@ loop.contacts = (function(_, mozL10n) {
     },
 
     handleAddContactButtonClick: function() {
-      this.props.startForm("contacts_add");
+      this.props.switchToContactAdd();
     },
 
     handleContactAction: function(contact, actionName) {
       switch (actionName) {
         case "edit":
-          this.props.startForm("contacts_edit", contact);
+          this.props.switchToContactEdit(contact);
           break;
         case "remove":
           this.props.mozLoop.confirm({
@@ -748,13 +747,87 @@ loop.contacts = (function(_, mozL10n) {
     }
   });
 
+  const ContactsControllerView = React.createClass({
+    propTypes: {
+      initialSelectedTabComponent: React.PropTypes.string,
+      mozLoop: React.PropTypes.object.isRequired,
+      notifications: React.PropTypes.object.isRequired
+    },
+
+    getInitialState: function() {
+      return {
+        currentComponent: this.props.initialSelectedTabComponent || "contactList",
+        contactFormData: {}
+      };
+    },
+
+    /* XXX We should have success/Fail callbacks that the children call instead of this
+    * Children should not have knowledge of other views
+    * However, this is being implemented in this way so the view can be directed appropriately
+    * without making it too complex
+    */
+    switchComponentView: function(componentName) {
+      return function() {
+        this.setState({currentComponent: componentName});
+      }.bind(this);
+    },
+
+    handleAddEditContact: function(componentName) {
+      return function(contactFormData) {
+        this.setState({
+          contactFormData: contactFormData || {},
+          currentComponent: componentName
+        });
+      }.bind(this);
+    },
+
+    /* XXX Consider whether linkedStated makes sense for this */
+    render: function() {
+      switch(this.state.currentComponent) {
+        case "contactAdd":
+          return (
+            <ContactDetailsForm
+              contactFormData={this.state.contactFormData}
+              mode="add"
+              mozLoop={this.props.mozLoop}
+              ref="contacts_add"
+              switchToInitialView={this.switchComponentView("contactList")} />
+          );
+        case "contactEdit":
+          return (
+            <ContactDetailsForm
+              contactFormData={this.state.contactFormData}
+              mode="edit"
+              mozLoop={this.props.mozLoop}
+              ref="contacts_edit"
+              switchToInitialView={this.switchComponentView("contactList")} />
+          );
+        case "contactList":
+        default:
+          return (
+            <ContactsList
+              mozLoop={this.props.mozLoop}
+              notifications={this.props.notifications}
+              ref="contacts_list"
+              switchToContactAdd={this.handleAddEditContact("contactAdd")}
+              switchToContactEdit={this.handleAddEditContact("contactEdit")} />
+          );
+      }
+    }
+  });
+
   const ContactDetailsForm = React.createClass({
     mixins: [React.addons.LinkedStateMixin],
 
     propTypes: {
+      contactFormData: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
-      // Callback used to change the selected tab - it is passed the tab name.
-      selectTab: React.PropTypes.func.isRequired
+      mozLoop: React.PropTypes.object.isRequired,
+      switchToInitialView: React.PropTypes.func.isRequired
+    },
+
+    componentDidMount: function() {
+      this.initForm(this.props.contactFormData);
     },
 
     getInitialState: function() {
@@ -769,12 +842,14 @@ loop.contacts = (function(_, mozL10n) {
 
     initForm: function(contact) {
       let state = this.getInitialState();
-      if (contact) {
+      // Test for an empty contact object
+      if (_.keys(contact).length > 0) {
         state.contact = contact;
         state.name = contact.name[0];
         state.email = getPreferred(contact, "email").value;
         state.tel = getPreferred(contact, "tel").value;
       }
+
       this.setState(state);
     },
 
@@ -792,10 +867,7 @@ loop.contacts = (function(_, mozL10n) {
         return;
       }
 
-      this.props.selectTab("contacts");
-
-      let contactsAPI = navigator.mozLoop.contacts;
-
+      let contactsAPI = this.props.mozLoop.contacts;
       switch (this.props.mode) {
         case "edit":
           this.state.contact.name[0] = this.state.name.trim();
@@ -812,7 +884,7 @@ loop.contacts = (function(_, mozL10n) {
           break;
         case "add":
           var contact = {
-            id: navigator.mozLoop.generateUUID(),
+            id: this.props.mozLoop.generateUUID(),
             name: [this.state.name.trim()],
             email: [{
               pref: true,
@@ -836,10 +908,12 @@ loop.contacts = (function(_, mozL10n) {
           });
           break;
       }
+
+      this.props.switchToInitialView();
     },
 
     handleCancelButtonClick: function() {
-      this.props.selectTab("contacts");
+      this.props.switchToInitialView();
     },
 
     render: function() {
@@ -899,6 +973,7 @@ loop.contacts = (function(_, mozL10n) {
     ContactsList: ContactsList,
     ContactDetail: ContactDetail,
     ContactDetailsForm: ContactDetailsForm,
+    ContactsControllerView: ContactsControllerView,
     _getPreferred: getPreferred,
     _setPreferred: setPreferred
   };

browser/components/loop/content/js/panel.js

@@ -14,8 +14,7 @@ loop.panel = (function(_, mozL10n) {
   var Button = sharedViews.Button;
   var ButtonGroup = sharedViews.ButtonGroup;
   var Checkbox = sharedViews.Checkbox;
-  var ContactsList = loop.contacts.ContactsList;
-  var ContactDetailsForm = loop.contacts.ContactDetailsForm;
+  var ContactsControllerView = loop.contacts.ContactsControllerView;
 
   var TabView = React.createClass({displayName: "TabView",
     propTypes: {
@@ -838,6 +837,7 @@ loop.panel = (function(_, mozL10n) {
   var PanelView = React.createClass({displayName: "PanelView",
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      initialSelectedTabComponent: React.PropTypes.string,
       mozLoop: React.PropTypes.object.isRequired,
       notifications: React.PropTypes.object.isRequired,
       roomStore:
@@ -916,11 +916,6 @@ loop.panel = (function(_, mozL10n) {
       }
     },
 
-    startForm: function(name, contact) {
-      this.refs[name].initForm(contact);
-      this.selectTab(name);
-    },
-
     selectTab: function(name) {
       // The tab view might not be created yet (e.g. getting started or fxa
       // re-sign in.
@@ -987,28 +982,10 @@ loop.panel = (function(_, mozL10n) {
                         userProfile: this.state.userProfile})
             ), 
             React.createElement(Tab, {name: "contacts"}, 
-              React.createElement(ContactsList, {mozLoop: this.props.mozLoop, 
-                            notifications: this.props.notifications, 
-                            selectTab: this.selectTab, 
-                            startForm: this.startForm})
-            ), 
-            React.createElement(Tab, {hidden: true, name: "contacts_add"}, 
-              React.createElement(ContactDetailsForm, {
-                mode: "add", 
-                ref: "contacts_add", 
-                selectTab: this.selectTab})
-            ), 
-            React.createElement(Tab, {hidden: true, name: "contacts_edit"}, 
-              React.createElement(ContactDetailsForm, {
-                mode: "edit", 
-                ref: "contacts_edit", 
-                selectTab: this.selectTab})
-            ), 
-            React.createElement(Tab, {hidden: true, name: "contacts_import"}, 
-              React.createElement(ContactDetailsForm, {
-                mode: "import", 
-                ref: "contacts_import", 
-                selectTab: this.selectTab})
+              React.createElement(ContactsControllerView, {initialSelectedTabComponent: this.props.initialSelectedTabComponent, 
+                                      mozLoop: this.props.mozLoop, 
+                                      notifications: this.props.notifications, 
+                                      ref: "contactControllerView"})
             )
           ), 
           React.createElement("div", {className: "footer"}, 

browser/components/loop/content/js/panel.jsx

@@ -14,8 +14,7 @@ loop.panel = (function(_, mozL10n) {
   var Button = sharedViews.Button;
   var ButtonGroup = sharedViews.ButtonGroup;
   var Checkbox = sharedViews.Checkbox;
-  var ContactsList = loop.contacts.ContactsList;
-  var ContactDetailsForm = loop.contacts.ContactDetailsForm;
+  var ContactsControllerView = loop.contacts.ContactsControllerView;
 
   var TabView = React.createClass({
     propTypes: {
@@ -838,6 +837,7 @@ loop.panel = (function(_, mozL10n) {
   var PanelView = React.createClass({
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      initialSelectedTabComponent: React.PropTypes.string,
       mozLoop: React.PropTypes.object.isRequired,
       notifications: React.PropTypes.object.isRequired,
       roomStore:
@@ -916,11 +916,6 @@ loop.panel = (function(_, mozL10n) {
       }
     },
 
-    startForm: function(name, contact) {
-      this.refs[name].initForm(contact);
-      this.selectTab(name);
-    },
-
     selectTab: function(name) {
       // The tab view might not be created yet (e.g. getting started or fxa
       // re-sign in.
@@ -987,28 +982,10 @@ loop.panel = (function(_, mozL10n) {
                         userProfile={this.state.userProfile} />
             </Tab>
             <Tab name="contacts">
-              <ContactsList mozLoop={this.props.mozLoop}
-                            notifications={this.props.notifications}
-                            selectTab={this.selectTab}
-                            startForm={this.startForm} />
-            </Tab>
-            <Tab hidden={true} name="contacts_add">
-              <ContactDetailsForm
-                mode="add"
-                ref="contacts_add"
-                selectTab={this.selectTab} />
-            </Tab>
-            <Tab hidden={true} name="contacts_edit">
-              <ContactDetailsForm
-                mode="edit"
-                ref="contacts_edit"
-                selectTab={this.selectTab} />
-            </Tab>
-            <Tab hidden={true} name="contacts_import">
-              <ContactDetailsForm
-                mode="import"
-                ref="contacts_import"
-                selectTab={this.selectTab}/>
+              <ContactsControllerView initialSelectedTabComponent={this.props.initialSelectedTabComponent}
+                                      mozLoop={this.props.mozLoop}
+                                      notifications={this.props.notifications}
+                                      ref="contactControllerView" />
             </Tab>
           </TabView>
           <div className="footer">

browser/components/loop/test/desktop-local/contacts_test.js

@@ -155,12 +155,14 @@ describe("loop.contacts", function() {
         getAll: function(callback) {
           callback(null, [].concat(fakeFewerContacts));
         },
+        add: sandbox.stub(),
         on: sandbox.stub()
       },
       calls: {
         startDirectCall: function() {},
         clearCallInProgress: function() {}
-      }
+      },
+      generateUUID: sandbox.stub()
     };
 
     fakeWindow = {
@@ -197,7 +199,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       var promo = listView.getDOMNode().querySelector(".contacts-gravatar-promo");
@@ -223,7 +226,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       var promo = listView.getDOMNode().querySelector(".contacts-gravatar-promo");
@@ -237,7 +241,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -254,7 +259,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -270,7 +276,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -285,7 +292,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -301,7 +309,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -316,7 +325,8 @@ describe("loop.contacts", function() {
         React.createElement(loop.contacts.ContactsList, {
           mozLoop: navigator.mozLoop,
           notifications: notifications,
-          startForm: function() {}
+          switchToContactAdd: sandbox.stub(),
+          switchToContactEdit: sandbox.stub()
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
@@ -328,6 +338,69 @@ describe("loop.contacts", function() {
     });
   });
 
+  describe("ContactsControllerView - contactAdd", function() {
+    var view;
+
+    beforeEach(function() {
+      view = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsControllerView, {
+          initialSelectedTabComponent: "contactAdd",
+          mozLoop: navigator.mozLoop,
+          notifications: notifications
+        }));
+    });
+
+    it("should switch component to Contact List view", function() {
+      view.switchComponentView("contactList")();
+
+      expect(view.refs.contacts_list).to.not.eql(null);
+    });
+  });
+
+  describe("ContactsControllerView - contactEdit", function() {
+    var view;
+
+    beforeEach(function() {
+      view = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsControllerView, {
+          initialSelectedTabComponent: "contactEdit",
+          mozLoop: navigator.mozLoop,
+          notifications: notifications
+        }));
+    });
+
+    it("should switch component to Contact List view", function() {
+      view.switchComponentView("contactList")();
+
+      expect(view.refs.contacts_list).to.not.eql(null);
+    });
+  });
+
+  describe("ContactsControllerView - contactList", function() {
+    var view;
+
+    beforeEach(function() {
+      view = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsControllerView, {
+          initialSelectedTabComponent: "contactList",
+          mozLoop: navigator.mozLoop,
+          notifications: notifications
+        }));
+    });
+
+    it("should switch component to Contact Add view", function() {
+      view.handleAddEditContact("contactAdd")({});
+
+      expect(view.refs.contacts_add).to.not.eql(null);
+    });
+
+    it("should switch component to Contact Edit view", function() {
+      view.handleAddEditContact("contactEdit")();
+
+      expect(view.refs.contacts_edit).to.not.eql(null);
+    });
+  });
+
   describe("ContactsList", function () {
     var node;
     beforeEach(function() {
@@ -344,7 +417,8 @@ describe("loop.contacts", function() {
           React.createElement(loop.contacts.ContactsList, {
             mozLoop: navigator.mozLoop,
             notifications: notifications,
-            startForm: function() {}
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
           }));
         node = listView.getDOMNode();
       });
@@ -375,7 +449,8 @@ describe("loop.contacts", function() {
           React.createElement(loop.contacts.ContactsList, {
             mozLoop: navigator.mozLoop,
             notifications: notifications,
-            startForm: function() {}
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
           }));
         node = listView.getDOMNode();
       });
@@ -406,7 +481,8 @@ describe("loop.contacts", function() {
           React.createElement(loop.contacts.ContactsList, {
             mozLoop: navigator.mozLoop,
             notifications: notifications,
-            startForm: function() {}
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
           }));
         node = listView.getDOMNode();
       });
@@ -509,7 +585,8 @@ describe("loop.contacts", function() {
           React.createElement(loop.contacts.ContactsList, {
             mozLoop: navigator.mozLoop,
             notifications: notifications,
-            startForm: function() {}
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
           }));
         node = listView.getDOMNode();
       });
@@ -529,6 +606,35 @@ describe("loop.contacts", function() {
         });
     });
 
+    describe("#handleContactAddEdit", function() {
+
+      beforeEach(function() {
+        listView = TestUtils.renderIntoDocument(
+          React.createElement(loop.contacts.ContactsList, {
+            mozLoop: navigator.mozLoop,
+            notifications: notifications,
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
+          }));
+      });
+
+      it("should call switchToContactAdd function when Add Contact button is clicked",
+        function() {
+          var addContactBttn = listView.getDOMNode().querySelector(".contact-controls .primary");
+
+          React.addons.TestUtils.Simulate.click(addContactBttn);
+
+          sinon.assert.calledOnce(listView.props.switchToContactAdd);
+        });
+
+      it("should call switchToContactEdit function when selecting to Edit Contact",
+        function() {
+          listView.handleContactAction({}, "edit");
+
+          sinon.assert.calledOnce(listView.props.switchToContactEdit);
+        });
+    });
+
     describe("#handleImportButtonClick", function() {
       beforeEach(function() {
         sandbox.stub(navigator.mozLoop.contacts, "getAll", function(cb) {
@@ -538,12 +644,13 @@ describe("loop.contacts", function() {
           React.createElement(loop.contacts.ContactsList, {
             mozLoop: navigator.mozLoop,
             notifications: notifications,
-            startForm: function() {}
+            switchToContactAdd: sandbox.stub(),
+            switchToContactEdit: sandbox.stub()
           }));
         node = listView.getDOMNode();
       });
 
-      it("should notify the end user from a succesful import", function() {
+      it("should notify the end user from a successful import", function() {
         sandbox.stub(notifications, "successL10n");
         navigator.mozLoop.startImport = function(opts, cb) {
           cb(null, {success: 42});
@@ -580,8 +687,10 @@ describe("loop.contacts", function() {
         beforeEach(function() {
           view = TestUtils.renderIntoDocument(
             React.createElement(loop.contacts.ContactDetailsForm, {
+              contactFormData: {},
               mode: "add",
-              selectTab: function() {}
+              mozLoop: navigator.mozLoop,
+              switchToInitialView: sandbox.stub()
             }));
         });
 
@@ -684,6 +793,26 @@ describe("loop.contacts", function() {
           expect(emailInput.checkValidity()).to.equal(true);
           expect(telInput.checkValidity()).to.equal(true);
         });
+
+        it("should call switchToInitialView when Add Contact button is clicked", function() {
+          var nameInput = view.getDOMNode().querySelector("input[type='text']");
+          var emailInput = view.getDOMNode().querySelector("input[type='email']");
+          var addButton = view.getDOMNode().querySelector(".button-accept");
+
+          TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
+          TestUtils.Simulate.change(emailInput, {target: {value: "test@example.com"}});
+          React.addons.TestUtils.Simulate.click(addButton);
+
+          sinon.assert.calledOnce(view.props.switchToInitialView);
+        });
+
+        it("should call switchToInitialView when Cancel button is clicked", function() {
+          var cancelButton = view.getDOMNode().querySelector(".button-cancel");
+
+          React.addons.TestUtils.Simulate.click(cancelButton);
+
+          sinon.assert.calledOnce(view.props.switchToInitialView);
+        });
       });
 
       describe("edit mode", function() {
@@ -692,8 +821,10 @@ describe("loop.contacts", function() {
         beforeEach(function() {
           view = TestUtils.renderIntoDocument(
             React.createElement(loop.contacts.ContactDetailsForm, {
+              contactFormData: {},
               mode: "edit",
-              selectTab: function() {}
+              mozLoop: navigator.mozLoop,
+              switchToInitialView: sandbox.stub()
             }));
         });
 

browser/components/loop/test/desktop-local/panel_test.js

@@ -237,6 +237,36 @@ describe("loop.panel", function() {
       });
     });
 
+    describe("Contacts", function() {
+      var view, roomsTab, contactsTab;
+
+      beforeEach(function() {
+        view = TestUtils.renderIntoDocument(
+          React.createElement(loop.panel.PanelView, {
+            dispatcher: dispatcher,
+            initialSelectedTabComponent: "contactList",
+            mozLoop: navigator.mozLoop,
+            notifications: notifications,
+            roomStore: roomStore,
+            selectedTab: "contacts",
+            showTabButtons: true
+          }));
+
+        [roomsTab, contactsTab] =
+          TestUtils.scryRenderedDOMComponentsWithClass(view, "tab");
+      });
+
+      it("should expect Contacts tab to be selected when Contacts List displayed", function() {
+        expect(contactsTab.getDOMNode().classList.contains("selected"))
+          .to.be.true;
+      });
+
+      it("should expect Rooms tab to be not selected when Contacts List displayed", function() {
+        expect(roomsTab.getDOMNode().classList.contains("selected"))
+          .to.be.false;
+      });
+    });
+
     describe("AccountLink", function() {
       beforeEach(function() {
         navigator.mozLoop.calls = { clearCallInProgress: function() {} };

browser/components/loop/ui/ui-showcase.js

@@ -892,12 +892,25 @@
               React.createElement("div", {className: "panel"}, 
                 React.createElement(PanelView, {client: mockClient, 
                            dispatcher: dispatcher, 
+                           initialSelectedTabComponent: "contactAdd", 
                            mozLoop: mockMozLoopLoggedIn, 
                            notifications: notifications, 
                            roomStore: roomStore, 
-                           selectedTab: "contacts_add", 
+                           selectedTab: "contacts", 
                            userProfile: {email: "test@example.com"}})
               )
+            ), 
+            React.createElement(FramedExample, {cssClass: "fx-embedded-panel", 
+                           dashed: true, 
+                           height: 321, 
+                           summary: "Contact Form - Edit", 
+                           width: 332}, 
+              React.createElement("div", {className: "panel"}, 
+                React.createElement(ContactDetailsForm, {contactFormData: fakeManyContacts[1], 
+                                    mode: "edit", 
+                                    mozLoop: mockMozLoopLoggedIn, 
+                                    switchToInitialView: noop})
+              )
             )
           ), 
 

browser/components/loop/ui/ui-showcase.jsx

@@ -892,13 +892,26 @@
               <div className="panel">
                 <PanelView client={mockClient}
                            dispatcher={dispatcher}
+                           initialSelectedTabComponent="contactAdd"
                            mozLoop={mockMozLoopLoggedIn}
                            notifications={notifications}
                            roomStore={roomStore}
-                           selectedTab="contacts_add"
+                           selectedTab="contacts"
                            userProfile={{email: "test@example.com"}} />
               </div>
             </FramedExample>
+            <FramedExample cssClass="fx-embedded-panel"
+                           dashed={true}
+                           height={321}
+                           summary="Contact Form - Edit"
+                           width={332}>
+              <div className="panel">
+                <ContactDetailsForm contactFormData={fakeManyContacts[1]}
+                                    mode={"edit"}
+                                    mozLoop={mockMozLoopLoggedIn}
+                                    switchToInitialView={noop} />
+              </div>
+            </FramedExample>
           </Section>
 
           <Section name="Availability Dropdown">