closes cypress-io#2871

louise-hayes · Feb 22, 2019 · 66e3848 · 66e3848
1 parent e324444
commit 66e3848
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/packages/desktop-gui/cypress/integration/update_banner_spec.coffee b/packages/desktop-gui/cypress/integration/update_banner_spec.coffee
@@ -86,6 +86,8 @@ describe "Update Banner", ->
 
     it "modal has info about updating package.json", ->
       cy.get(".modal").contains("npm install --save-dev cypress@#{NEW_VERSION}")
+      cy.get(".modal").contains("yarn add cypress@#{NEW_VERSION}")
+
 
     it "links to 'open' doc on click of open command", ->
       cy.get(".modal").contains("cypress open").click().then =>

diff --git a/packages/desktop-gui/src/update/update-banner.jsx b/packages/desktop-gui/src/update/update-banner.jsx
@@ -9,15 +9,14 @@ import ipc from '../lib/ipc'
 
 @observer
 class UpdateBanner extends Component {
-  @observable showingModal = false
-
+  @observable showingModal = false;
   componentDidMount () {
+
     if (!appStore.isDev) {
       this.checkId = setInterval(this._checkForUpdate, human('60 minutes'))
       this._checkForUpdate()
     }
   }
-
   componentWillUnmount () {
     document.getElementsByTagName('html')[0].classList.remove('has-updates')
 
@@ -33,25 +32,34 @@ class UpdateBanner extends Component {
     document.getElementsByTagName('html')[0].classList.add('has-updates')
 
     return (
-      <div id='updates-available'>
+      <div id="updates-available">
         New updates are available
         <strong onClick={() => this._toggleModal(true)}>
-          <i className='fa fa-download'></i>{' '}
-          Update
+          <i className="fa fa-download" /> Update
         </strong>
         <BootstrapModal
           show={this.showingModal}
           onHide={() => this._toggleModal(false)}
-          backdrop='static'
+          backdrop="static"
         >
-          <div className='update-modal modal-body os-dialog'>
-            <BootstrapModal.Dismiss className='btn btn-link close'>x</BootstrapModal.Dismiss>
-            <h4><i className='fa fa-download'></i> Update Available</h4>
+          <div className="update-modal modal-body os-dialog">
+            <BootstrapModal.Dismiss className="btn btn-link close">
+              x
+            </BootstrapModal.Dismiss>
+            <h4>
+              <i className="fa fa-download" /> Update Available
+            </h4>
             <p>
-              <a href='#' onClick={this._openChangelog}><strong>Version {appStore.newVersion}</strong></a> is now available (currently running <strong>Version {appStore.displayVersion}</strong>)
+              <a href="#" onClick={this._openChangelog}>
+                <strong>Version {appStore.newVersion}</strong>
+              </a>{' '}
+              is now available (currently running{' '}
+              <strong>Version {appStore.displayVersion}</strong>)
             </p>
             <hr />
-            <p><strong>To update Cypress:</strong></p>
+            <p>
+              <strong>To update Cypress:</strong>
+            </p>
             {this._instructions()}
           </div>
         </BootstrapModal>
@@ -65,7 +73,9 @@ class UpdateBanner extends Component {
         <ol>
           <li>
             <span>
-              <a href='#' onClick={this._openDownload}><i className='fa fa-download'></i> Download the new version.</a>
+              <a href="#" onClick={this._openDownload}>
+                <i className="fa fa-download" /> Download the new version.
+              </a>
             </span>
           </li>
           <li>
@@ -84,19 +94,37 @@ class UpdateBanner extends Component {
           <span>Quit this app.</span>
         </li>
         <li>
-          <span>Run <code>npm install --save-dev cypress@{appStore.newVersion}</code></span>
+          <span>
+            If using npm, Run{' '}
+            <code>
+              {'npm install --save-dev'} cypress@{appStore.newVersion}
+            </code>
+          </span>
+          <span>
+            <br/>
+            If using yarn, Run{' '}
+            <code>
+              {'yarn add'} cypress@{appStore.newVersion}
+            </code>
+          </span>
         </li>
         <li>
-          <span>Run <a href='#' onClick={this._openCyOpenDoc}><code>node_modules/.bin/cypress open</code></a> to open the new version.</span>
+          <span>
+            Run{' '}
+            <a href="#" onClick={this._openCyOpenDoc}>
+              <code>node_modules/.bin/cypress open</code>
+            </a>{' '}
+            to open the new version.
+          </span>
         </li>
       </ol>
     )
-
   }
 
   _checkForUpdate () {
     ipc.offUpdaterCheck()
-    ipc.updaterCheck()
+    ipc
+    .updaterCheck()
     .then((version) => {
       if (version) appStore.setNewVersion(version)
     })
@@ -107,7 +135,7 @@ class UpdateBanner extends Component {
 
   @action _toggleModal = (showModal) => {
     this.showingModal = showModal
-  }
+  };
 
   _openChangelog (e) {
     e.preventDefault()
@@ -117,12 +145,12 @@ class UpdateBanner extends Component {
   _openDownload = (e) => {
     e.preventDefault()
     ipc.externalOpen('https://download.cypress.io/desktop')
-  }
+  };
 
   _openCyOpenDoc = (e) => {
     e.preventDefault()
     ipc.externalOpen('https://on.cypress.io/how-to-open-cypress')
-  }
+  };
 }
 
 export default UpdateBanner