feat: updated scaffolding, new project & user banners, ability to rem…

…ove scaffolding (#15826)

* update example build scripts

* remove old scaffolding relics

* update

* Fix some issues with scaffolding

* Correctly fix issues with scaffolding

* Replace old onboarding with new banner

* Add ability to remove scaffolded files

* Add banner for new users

* Update tests for new scaffolding

* Compare file sizes before removing

* Add tests for remove file

* Save when user opened cypress rather than boolean

* Update intro link and add tets for banners

* fix small issue

* Update design and copy of onboarding banners

* Update style of new spec file button

* Improve outline button active statE

* Update design of new project a bit more

* Fix specs list tests

* Update banner copy and layout

* Update banner copy and layout

* Switch to docs style alerts

* Fix testing logic

* Update banner styles a bit

* Update banners

* Add confirmation modal for delete specs

* Update tests and fix states

* Upgrade kitchensink dep

* Upgrade kitchen sink version and fix unit tests

* Update integration scaffolding test

* Add further description to warning modal

* Update test for new user and new project case

* Remove check to file tree when removing files

* Update kitchensink version

* Fix edge case where banner could appear when no files have been scaffolded

* Fix tests

* Update styling for 'note' when deleting files

* fix issue with path on windows

* Change remove command

* Fix rm dir

* Fix for windows

* Try to use appveyor to test

* appveyor please

* getting some feedback

* Why doesn't this work

* more info

* I have a feeling this works

* maybe its the other path

* please

* this is the one

* this is it

* this should work

* try reverting that change that might not be needed

* remove appveyor testing scaffolding

Co-authored-by: Jennifer Shehane <[email protected]>

cli/types/cypress.d.ts

@@ -2763,8 +2763,6 @@ declare namespace Cypress {
     clientRoute: string
     configFile: string
     cypressEnv: string
-    integrationExampleName: string
-    integrationExamplePath: string
     isNewProject: boolean
     isTextTerminal: boolean
     morgan: boolean

packages/desktop-gui/cypress/fixtures/config.json

@@ -128,8 +128,6 @@
   "execTimeout": 60000,
   "fileServerFolder": "/Users/jennifer/Dev/Projects/cypress-example-kitchensink",
   "fixturesFolder": "/Users/jennifer/Dev/Projects/cypress-example-kitchensink/cypress/fixtures",
-  "integrationExamplePath": "/Users/jennifer/Dev/Projects/cypress-example-kitchensink/cypress/integration/examples",
-  "integrationExampleName": "examples",
   "integrationFolder": "/Users/jennifer/Dev/Projects/cypress-example-kitchensink/cypress/integration",
   "isHeadless": false,
   "isNewProject": false,

packages/desktop-gui/cypress/integration/specs_list_spec.js

@@ -24,10 +24,11 @@ describe('Specs List', function () {
       cy.stub(this.ipc, 'openFinder')
       cy.stub(this.ipc, 'openFile')
       cy.stub(this.ipc, 'externalOpen')
-      cy.stub(this.ipc, 'onboardingClosed')
+      cy.stub(this.ipc, 'hasOpenedCypress').resolves(true)
       cy.stub(this.ipc, 'onSpecChanged')
       cy.stub(this.ipc, 'setUserEditor')
       cy.stub(this.ipc, 'showNewSpecDialog').resolves({ specs: null, path: null })
+      cy.stub(this.ipc, 'removeScaffoldedFiles').resolves()
 
       this.openProject = this.util.deferred()
       cy.stub(this.ipc, 'openProject').returns(this.openProject.promise)
@@ -58,8 +59,10 @@ describe('Specs List', function () {
       })
     })
 
-    it('displays help link', () => {
-      cy.contains('a', 'Need help?')
+    it('launches system save dialog on click of new spec file', function () {
+      cy.contains('New Spec File').click().then(function () {
+        expect(this.ipc.showNewSpecDialog).to.be.called
+      })
     })
 
     it('opens link to docs on click of help link', () => {
@@ -96,98 +99,76 @@ describe('Specs List', function () {
     })
   })
 
-  describe('first time onboarding specs', function () {
+  describe('new project onboarding', function () {
     beforeEach(function () {
       this.config.isNewProject = true
 
       this.openProject.resolve(this.config)
     })
 
-    context('modal', () => {
-      it('displays', () => {
-        cy.contains('.modal', 'To help you get started').should('be.visible')
+    context('banner', function () {
+      it('displays', function () {
+        cy.get('.new-project-banner')
         cy.percySnapshot()
       })
 
-      it('displays the scaffolded files', () => {
-        cy.get('.folder-preview-onboarding').within(function () {
-          cy.contains('span', 'fixtures').siblings('ul').within(function () {
-          })
-
-          cy.contains('example.json')
-          cy.contains('span', 'integration').siblings('ul').within(() => {
-            cy.contains('examples')
-          })
-
-          cy.contains('span', 'support').siblings('ul').within(function () {
-            cy.contains('commands.js')
-            cy.contains('defaults.js')
-
-            cy.contains('index.js')
-          })
-
-          cy.contains('span', 'plugins').siblings('ul').within(() => {
-            cy.contains('index.js')
-          })
-        })
-      })
-
-      it('lists folders and files alphabetically', () => {
-        cy.get('.folder-preview-onboarding').within(() => {
-          cy.contains('fixtures').parent().next()
-          .contains('integration')
-        })
+      it('is dismissable', function () {
+        cy.get('.new-project-banner').find('.close').click()
+        cy.get('.new-project-banner').should('not.exist')
       })
 
-      it('truncates file lists with more than 3 items', () => {
-        cy.get('.folder-preview-onboarding').within(function () {
-          cy.contains('examples').closest('.new-item').find('li')
-          .should('have.length', 3)
+      it('does not display new user banner even when closed', function () {
+        this.ipc.hasOpenedCypress.resolves(false)
 
-          cy.get('.is-more').should('have.text', ' ... 17 more files ...')
-        })
+        cy.get('.new-user-banner').should('not.exist')
+        cy.get('.new-project-banner').find('.close').click()
+        cy.get('.new-project-banner').should('not.exist')
+        cy.get('.new-user-banner').should('not.exist')
       })
 
-      it('can dismiss the modal', function () {
-        cy.contains('OK, got it!').click()
-
-        cy.get('.modal').should('not.be.visible')
-        .then(function () {
-          expect(this.ipc.onboardingClosed).to.be.called
+      it('opens link to docs on click of help link', function () {
+        cy.contains('a', 'How to write your first test').click().then(function () {
+          expect(this.ipc.externalOpen).to.be.calledWithMatch({ url: 'https://on.cypress.io/writing-first-test' })
         })
       })
 
-      it('triggers open:finder on click of example folder', function () {
-        cy.get('.modal').contains('examples').click().then(() => {
-          expect(this.ipc.openFinder).to.be.calledWith(this.config.integrationExamplePath)
+      it('removes scaffolded files on click and confirmation', function () {
+        cy.contains('delete example files').click()
+        cy.get('.confirm-remove-scaffolded-files').should('be.visible')
+        cy.contains('Yes, delete files').click().then(function () {
+          expect(this.ipc.removeScaffoldedFiles).to.be.called
+          cy.get('.new-project-banner').should('not.exist')
         })
       })
+    })
+  })
 
-      it('triggers open:finder on click of text folder', function () {
-        cy.get('.modal').contains('cypress/integration').click().then(() => {
-          expect(this.ipc.openFinder).to.be.calledWith(this.config.integrationFolder)
-        })
-      })
+  describe('first time user in existing project', function () {
+    beforeEach(function () {
+      this.openProject.resolve(this.config)
+      this.ipc.hasOpenedCypress.resolves(false)
     })
 
     context('banner', function () {
-      beforeEach(function () {
-        cy.get('.modal').find('.btn-success').click()
-      })
-
       it('displays', function () {
-        cy.get('.first-test-banner')
+        cy.get('.new-user-banner')
         cy.percySnapshot()
       })
 
       it('is dismissable', function () {
-        cy.get('.first-test-banner').find('.close').click()
-        cy.get('.first-test-banner').should('not.exist')
+        cy.get('.new-user-banner').find('.close').click()
+        cy.get('.new-user-banner').should('not.exist')
       })
 
-      it('opens link to docs on click of help link', function () {
-        cy.contains('a', 'How to write tests').click().then(function () {
-          expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/writing-first-test')
+      it('opens link to docs on click of how to link', function () {
+        cy.contains('a', 'How to write your first test').click().then(function () {
+          expect(this.ipc.externalOpen).to.be.calledWithMatch({ url: 'https://on.cypress.io/writing-first-test' })
+        })
+      })
+
+      it('opens link to intro guide on click of intro link', function () {
+        cy.contains('a', 'Introduction guide to Cypress').click().then(function () {
+          expect(this.ipc.externalOpen).to.be.calledWithMatch({ url: 'https://on.cypress.io/intro-to-cypress' })
         })
       })
     })

packages/desktop-gui/src/app/intro.jsx

@@ -34,8 +34,8 @@ class Default extends Component {
             onDrop={this._drop}
           >
             <span className="fa-stack fa-lg">
-              <i className="fas fa-folder fa-stack-2x"></i>
-              <i className="fas fa-plus fa-stack-1x"></i>
+              <i className="fas fa-folder fa-stack-2x" />
+              <i className="fas fa-plus fa-stack-1x" />
             </span>
             <p>Drag your project here or <a href="#" onClick={this._selectProject}>select manually</a>.</p>
           </div>
@@ -51,7 +51,7 @@ class Default extends Component {
     return (
       <div className='local-install-notice alert alert-info alert-dismissible'>
         <p className='text-center'>
-          <i className='fas fa-info-circle'></i>{' '}
+          <i className='fas fa-info-circle' />{' '}
           We recommend versioning Cypress per project and{' '}
           <a onClick={this._openHelp} className='helper-docs-link'>
             installing it via <span className='mono'>npm</span>

packages/desktop-gui/src/lib/ipc.js

@@ -71,7 +71,9 @@ register('updater:check', false)
 register('updater:run', false)
 register('window:open')
 register('window:close')
-register('onboarding:closed')
+register('new:project:banner:closed')
+register('has:opened:cypress')
+register('remove:scaffolded:files')
 register('set:clipboard:text')
 register('set:prompt:shown')
 

packages/desktop-gui/src/project-nav/browsers.jsx

@@ -35,7 +35,7 @@ export default class Browsers extends Component {
       return (
         <li className='close-browser'>
           <button className='btn btn-xs btn-danger' onClick={this._closeBrowser.bind(this)}>
-            <i className='fas fa-fw fa-times'></i>
+            <i className='fas fa-fw fa-times' />
             Stop
           </button>
         </li>

packages/desktop-gui/src/project-nav/project-nav.jsx

@@ -12,19 +12,19 @@ export default class ProjectNav extends Component {
         <ul className='nav left-nav'>
           <li>
             <Link to={routes.specs(project)}>
-              <i className='fas fa-code'></i>{' '}
+              <i className='fas fa-code' />{' '}
               Tests
             </Link>
           </li>
           <li>
             <Link to={routes.runs(project)}>
-              <i className='fas fa-database'></i>{' '}
+              <i className='fas fa-database' />{' '}
               Runs
             </Link>
           </li>
           <li>
             <Link to={routes.settings(project)}>
-              <i className='fas fa-cog'></i>{' '}
+              <i className='fas fa-cog' />{' '}
               Settings
             </Link>
           </li>