GithubTabHeaderView tests

Author: smashwilson

lib/views/github-tab-header-view.js

@@ -13,6 +13,8 @@ export default class GithubTabHeaderView extends React.Component {
     workdir: PropTypes.string,
     workdirs: PropTypes.shape({[Symbol.iterator]: PropTypes.func.isRequired}).isRequired,
     contextLocked: PropTypes.bool.isRequired,
+    changingWorkDir: PropTypes.bool.isRequired,
+    changingLock: PropTypes.bool.isRequired,
     handleWorkDirChange: PropTypes.func.isRequired,
     handleLockToggle: PropTypes.func.isRequired,
   }
@@ -22,11 +24,15 @@ export default class GithubTabHeaderView extends React.Component {
       <header className="github-Project">
         {this.renderUser()}
         <select className="github-Project-path input-select"
-          value={this.props.workdir ? path.normalize(this.props.workdir) : undefined}
+          value={this.props.workdir}
+          disabled={this.props.changingWorkDir}
           onChange={this.props.handleWorkDirChange}>
           {this.renderWorkDirs()}
         </select>
-        <button className="github-Project-lock btn btn-small" onClick={this.props.handleLockToggle}>
+        <button
+          className="github-Project-lock btn btn-small"
+          disabled={this.props.changingLock}
+          onClick={this.props.handleLockToggle}>
           <Octicon icon={this.props.contextLocked ? 'lock' : 'globe'} />
         </button>
       </header>

test/views/github-tab-header-view.test.js

@@ -15,7 +15,13 @@ describe('GithubTabHeaderView', function() {
   function build(options = {}) {
     const props = {
       user: nullAuthor,
+      workdir: null,
       workdirs: createWorkdirs([]),
+      contextLocked: false,
+      changingWorkDir: false,
+      changingLock: false,
+      handleWorkDirChange: () => {},
+      handleLockToggle: () => {},
       ...options,
     };
     return shallow(<GithubTabHeaderView {...props} />);
@@ -29,7 +35,7 @@ describe('GithubTabHeaderView', function() {
 
     beforeEach(function() {
       select = sinon.spy();
-      wrapper = build({handleWorkDirSelect: select, workdirs: createWorkdirs(paths), workdir: path2});
+      wrapper = build({handleWorkDirChange: select, workdirs: createWorkdirs(paths), workdir: path2});
     });
 
     it('renders an option for all given working directories', function() {
@@ -49,6 +55,42 @@ describe('GithubTabHeaderView', function() {
     });
   });
 
+  describe('context lock control', function() {
+    it('renders locked when the lock is engaged', function() {
+      const wrapper = build({contextLocked: true});
+
+      assert.isTrue(wrapper.exists('Octicon[icon="lock"]'));
+    });
+
+    it('renders unlocked when the lock is disengaged', function() {
+      const wrapper = build({contextLocked: false});
+
+      assert.isTrue(wrapper.exists('Octicon[icon="globe"]'));
+    });
+
+    it('calls handleLockToggle when the lock is clicked', function() {
+      const handleLockToggle = sinon.spy();
+      const wrapper = build({handleLockToggle});
+
+      wrapper.find('button').simulate('click');
+      assert.isTrue(handleLockToggle.called);
+    });
+  });
+
+  describe('when changes are in progress', function() {
+    it('disables the workdir select while the workdir is changing', function() {
+      const wrapper = build({changingWorkDir: true});
+
+      assert.isTrue(wrapper.find('select').prop('disabled'));
+    });
+
+    it('disables the context lock toggle while the context lock is changing', function() {
+      const wrapper = build({changingLock: true});
+
+      assert.isTrue(wrapper.find('button').prop('disabled'));
+    })
+  });
+
   describe('with falsish props', function() {
     let wrapper;