feat: package manager in update modal (#20123)

cypress-io · Feb 11, 2022 · 9cad97a · 9cad97a · cypress-bot · Feb 11, 2022
1 parent faa8fb5
commit 9cad97a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -196,7 +196,7 @@ describe('App Top Nav Workflows', () => {
         cy.findByRole('dialog', { name: 'Upgrade to Cypress 10.1.0' }).as('upgradeModal').within(() => {
           cy.validateExternalLink({ name: 'Need help', href: 'https://on.cypress.io' })
           cy.contains('You are currently running Version 10.0.0 of Cypress').should('be.visible')
-          cy.contains('npm install --save-dev cypress@10.1.0').should('be.visible')
+          cy.contains('npm install -D cypress@10.1.0').should('be.visible')
           cy.findByRole('button', { name: 'Close' }).click()
         })
 

diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
@@ -127,6 +127,10 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
   it('shows hint and modal to upgrade to latest version of cypress', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       onResult: (result) => {
+        if (result.currentProject) {
+          result.currentProject.packageManager = 'yarn'
+        }
+
         result.versions = {
           __typename: 'VersionData',
           current: {
@@ -161,6 +165,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
 
     cy.contains(`${defaultMessages.topNav.updateCypress.title} 8.7.0`).should('be.visible')
     cy.contains('test-project').should('be.visible')
+    cy.contains('code', 'yarn add -D cypress').should('be.visible')
     cy.percySnapshot('after upgrade modal open')
 
     cy.get('body').type('{esc}') // dismiss modal with keyboard

diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -185,6 +185,7 @@
     :installed-version="versions.current.version"
     :latest-version="versions.latest.version"
     :project-name="props.gql?.currentProject?.title"
+    :install-command="installCommand"
     @close="showUpdateModal = false"
   />
 </template>
@@ -229,11 +230,11 @@ fragment TopNav on Query {
   currentProject {
     id
     title
-    
+    packageManager
     currentBrowser {
-    id
-    displayName
-    majorVersion
+      id
+      displayName
+      majorVersion
     }
     ...VerticalBrowserListItems
   }
@@ -333,6 +334,19 @@ const resetPrompt = (event) => {
   }
 }
 
+const installCommand = computed(() => {
+  switch (props.gql.currentProject?.packageManager) {
+    case 'npm':
+      return 'npm install -D '
+    case 'yarn':
+      return 'yarn add -D '
+    case 'pnpm':
+      return 'pnpm add -D '
+    default:
+      return 'npm install -D '
+  }
+})
+
 onKeyStroke(['Enter', ' ', 'Escape'], (event) => {
   resetPrompt(event)
 })

diff --git a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.cy.tsx b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.cy.tsx
@@ -8,19 +8,35 @@ describe('<UpdateCypressModal />', { viewportWidth: 1000, viewportHeight: 750 },
   it('renders expected content & emits expected events', () => {
     const handleClose = cy.stub()
 
-    cy.mount(() => <UpdateCypressModal installedVersion={installedVersion} latestVersion={latestVersion} show={true} onClose={handleClose}></UpdateCypressModal>)
+    cy.mount(() => (<UpdateCypressModal
+      installedVersion={installedVersion}
+      latestVersion={latestVersion}
+      show={true}
+      onClose={handleClose}
+      installCommand="npm i "/>))
 
     cy.contains(`${defaultMessages.topNav.updateCypress.title} ${latestVersion}`).should('be.visible')
-    cy.contains(`${defaultMessages.topNav.updateCypress.currentlyRunning}`.replace('{0}', installedVersion)).should('be.visible')
-    cy.contains(`${defaultMessages.topNav.updateCypress.pasteToUpgradeGlobal.replace('{0}', defaultMessages.topNav.updateCypress.rememberToCloseInsert)}`).should('be.visible')
+    cy.contains(defaultMessages.topNav.updateCypress.currentlyRunning
+    .replace('{0}', installedVersion)).should('be.visible')
+
+    cy.contains(defaultMessages.topNav.updateCypress.pasteToUpgradeGlobal
+    .replace('{0}', defaultMessages.topNav.updateCypress.rememberToCloseInsert)).should('be.visible')
+
     cy.contains(`cypress@${latestVersion}`).should('be.visible')
     cy.findByLabelText('Close').click().then(() => {
       expect(handleClose).to.have.been.calledOnce
     })
   })
 
   it('renders project-specific instructions when a project name prop is present', () => {
-    cy.mount(() => <UpdateCypressModal projectName="test-project" installedVersion={installedVersion} latestVersion={latestVersion} show={true}></UpdateCypressModal>)
-    cy.contains(`${defaultMessages.topNav.updateCypress.pasteToUpgradeProject.replace('{0}', defaultMessages.topNav.updateCypress.rememberToCloseInsert)}`).should('be.visible')
+    cy.mount(() => (<UpdateCypressModal
+      projectName="test-project"
+      installedVersion={installedVersion}
+      latestVersion={latestVersion}
+      show={true}
+      installCommand="npm i "/>))
+
+    cy.contains(defaultMessages.topNav.updateCypress.pasteToUpgradeProject
+    .replace('{0}', defaultMessages.topNav.updateCypress.rememberToCloseInsert)).should('be.visible')
   })
 })
diff --git a/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue b/packages/frontend-shared/src/gql-components/topnav/UpdateCypressModal.vue
@@ -1,6 +1,6 @@
 <template>
   <StandardModal
-    class="transition duration-200 transition-all w-680px"
+    class="transition transition-all w-680px duration-200"
     variant="bare"
     :title="title"
     :model-value="show"
@@ -38,13 +38,12 @@ import { useI18n } from '@cy/i18n'
 const { t } = useI18n()
 
 const props = withDefaults(defineProps<{
-  installCommand?: string
+  installCommand: string
   installedVersion: string
   latestVersion: string
   projectName?: string
   show: boolean
 }>(), {
-  installCommand: 'npm install --save-dev ',
   projectName: '', // in global mode, project won't be populated so an empty string is fine
 })