Implement NewVersionAvailable component

src-react/__tests__/components/alert-area/new-version-available.test.js

@@ -0,0 +1,52 @@
+jest.dontMock('components/alert-area/new-version-available');
+import sinon from 'sinon';
+import React from 'react';
+import { shallow, mount, render } from 'enzyme';
+import NewVersionAvailable from 'components/alert-area/new-version-available';
+
+describe('alert-area/new-version-available component', () => {
+  let wrapper;
+  let platform = 'windows';
+  const latestVersion = '1.3';
+  const onDismiss = sinon.spy();
+
+  beforeEach(() => {
+    wrapper = mount(
+      <NewVersionAvailable 
+        latestVersion={ latestVersion }
+        platform={ platform }
+        onDismiss={ onDismiss } />
+    );
+  });
+
+  it("should render successfully", function() {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.alert.alert-info').length).toBe(1);
+    expect(wrapper.contains(<span>{ latestVersion }</span>)).toBe(true);
+    expect(wrapper.contains(<a href="https://github.com/FredrikNoren/ungit">available</a>)).toBe(true);
+    expect(wrapper.contains(<a href="https://github.com/FredrikNoren/ungit/blob/master/CHANGELOG.md">changelog</a>)).toBe(true);
+    expect(wrapper.contains(<code>{ ' npm update -g ungit' }</code>)).toBe(true);
+    expect(wrapper.find('button').length).toBe(1);
+  });
+
+  it('should trigger click events when clicking dismiss button', () => {
+    wrapper.find('button').simulate('click');
+    expect(onDismiss.callCount).toBe(1);
+  });
+
+  describe('when platform is not existing', () => {
+    beforeEach(() => {
+      platform = null;
+      wrapper = mount(
+        <NewVersionAvailable 
+          latestVersion={ latestVersion }
+          platform={ platform }
+          onDismiss={ onDismiss } />
+      );
+    });
+
+    it('should render installation indication with sudo -H ', () => {
+      expect(wrapper.contains(<code>{ 'sudo -H npm update -g ungit' }</code>)).toBe(true);
+    });
+  });
+});

src-react/__tests__/reducers/app.js

@@ -228,4 +228,23 @@ describe('app.js reducers', () => {
       });
     });
   });
+
+  describe('when DISMISS_GIT_VERSION_ERROR action dispatch', () => {
+    it('should force set gitVersionErrorDismissed as ture in localStorage', () => {
+      const state = app(initialState, { type: types.DISMISS_GIT_VERSION_ERROR }, {});
+      expect(localStorage.getItem('gitVersionErrorDismissed')).toEqual('true');
+    });
+
+    it('gitVersionErrorVisible state will be false', () => {
+      const state = app(initialState, { type: types.DISMISS_GIT_VERSION_ERROR }, {});
+      expect(state.gitVersionErrorVisible).toBe(false);
+    });
+  });
+
+  describe('when DISMISS_NEW_VERSION action dispatch', () => {
+    it('showNewVersionAvailable state will be false', () => {
+      const state = app(initialState, { type: types.DISMISS_NEW_VERSION }, {});
+      expect(state.showNewVersionAvailable).toBe(false);
+    });
+  });
 });

src-react/actions/version.js

@@ -31,4 +31,8 @@ export function fetchGitVersion() {
 
 export function dismissGitVersionError() {
   return { type: types.DISMISS_GIT_VERSION_ERROR };
+}
+
+export function dismissNewVersion() {
+  return { type: types.DISMISS_NEW_VERSION };
 }

src-react/components/alert-area/index.js

@@ -43,7 +43,8 @@ class AlertArea extends Component {
           showNewVersionAvailable ? (
             <NewVersionAvailable
               latestVersion={ latestVersion }
-              platform={ platform }/>
+              platform={ platform }
+              onDismiss={ actions.dismissNewVersion }/>
           ) : null
         }
         {

src-react/components/alert-area/new-version-available.js

@@ -1,21 +1,23 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
 
 class NewVersionAvailable extends Component {
   static propTypes = {
     latestVersion: PropTypes.string,
-    platform: PropTypes.string
+    platform: PropTypes.string,
+    onDismiss: PropTypes.func.isRequired
   }
 
   render() {
-    const newVersionInstallCommand = `#{this.props.platform ? '' : 'sudo -H'}npm update -g ungit`;
+    const { platform, onDismiss } = this.props;
     return (
       <div className="alert alert-info">
-        A new version of ungit (<span>{ this.props.latestVersion }</span>) is
+        A new version of ungit (<span>{ this.props.latestVersion }</span>) is&nbsp;
         <a href="https://github.com/FredrikNoren/ungit">available</a>! Run
-        <code>{ newVersionInstallCommand }</code> to install.
-        See what's new in the
+        <code>{ `${platform ? '' : 'sudo -H'} npm update -g ungit` }</code> to install.
+        See what's new in the&nbsp;
         <a href="https://github.com/FredrikNoren/ungit/blob/master/CHANGELOG.md">changelog</a>.
-        <button type="button" className="close" data-bind="click: dismissNewVersion">&times;</button>
+        <button type="button" className="close" onClick={ () => onDismiss() }>&times;</button>
       </div>
     );
   }

src-react/constants/action-types.js

@@ -15,4 +15,5 @@ export const FETCH_LATEST_VERSION_SUCCESS = 'FETCH_LATEST_VERSION_SUCCESS';
 export const FETCH_GIT_VERSION_SUCCESS = 'FETCH_GIT_VERSION_SUCCESS';
 export const FETCH_UNGIT_CONFIG_SUCCESS = 'FETCH_UNGIT_CONFIG_SUCCESS';
 
-export const DISMISS_GIT_VERSION_ERROR = 'DISMISS_GIT_VERSION_ERROR';
+export const DISMISS_GIT_VERSION_ERROR = 'DISMISS_GIT_VERSION_ERROR';
+export const DISMISS_NEW_VERSION = 'DISMISS_NEW_VERSION';

src-react/containers/path.js

@@ -26,9 +26,10 @@ class Path extends Component {
       app,
       path: { pending, errMessage },
       actions: {
-        dismissGitVersionError
+        dismissGitVersionError,
+        dismissNewVersion
       } } = this.props;
-    const alertAreaActions = { dismissGitVersionError };
+    const alertAreaActions = { dismissGitVersionError, dismissNewVersion };
 
     return (
       <div>

src-react/reducers/app.js

@@ -43,6 +43,10 @@ function app(state, action, config) {
       return { ...state, gitVersionErrorVisible: false };
     }
 
+    case types.DISMISS_NEW_VERSION: {
+      return { ...state, showNewVersionAvailable: false };
+    }
+
     default:
       const NPSSurveyLastDismissed = parseInt(localStorage.getItem('NPSSurveyLastDismissed') || '0', 10);
       const monthsSinceNPSLastDismissed = (Date.now() - NPSSurveyLastDismissed) / (1000 * 60 * 60 * 24 * 30);