only scroll specs and leave filter in place

cypress-io · Aug 1, 2019 · b512bde · b512bde
1 parent 6bf3242
commit b512bde
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 31 deletions.
diff --git a/packages/desktop-gui/cypress/fixtures/specs.json b/packages/desktop-gui/cypress/fixtures/specs.json
@@ -27,8 +27,32 @@
       "relative": "cypress/unit/admin_users/admin/users/bar_list_spec.coffee"
     },
     {
-      "name": "admin_users/admin/users/all/admin/baz_list_spec.coffee",
-      "relative": "cypress/unit/admin_users/admin/users/all/admin/baz_list_spec.coffee"
+      "name": "admin_users/admin/users/all/admin/one_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/one_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/two_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/two_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/three_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/three_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/four_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/four_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/five_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/five_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/six_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/six_list_spec.coffee"
+    },
+    {
+      "name": "admin_users/admin/users/all/admin/last_list_spec.coffee",
+      "relative": "cypress/unit/admin_users/admin/users/all/admin/last_list_spec.coffee"
     }
   ]
 }
diff --git a/packages/desktop-gui/cypress/fixtures/specs_windows.json b/packages/desktop-gui/cypress/fixtures/specs_windows.json
@@ -27,8 +27,8 @@
       "relative": "cypress\\unit\\admin_users\\admin\\users\\bar_list_spec.coffee"
     },
     {
-      "name": "admin_users\\admin\\users\\all\\admin\\baz_list_spec.coffee",
-      "relative": "cypress\\unit\\admin_users\\admin\\users\\all\\admin\\baz_list_spec.coffee"
+      "name": "admin_users\\admin\\users\\all\\admin\\last_list_spec.coffee",
+      "relative": "cypress\\unit\\admin_users\\admin\\users\\all\\admin\\last_list_spec.coffee"
     }
   ]
 }
diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js
@@ -11,6 +11,8 @@ describe('Specs List', function () {
       this.win = win
       this.ipc = win.App.ipc
 
+      this.numSpecs = this.specs.integration.length + this.specs.unit.length
+
       cy.stub(this.ipc, 'getOptions').resolves({ projectRoot: '/foo/bar' })
       cy.stub(this.ipc, 'getCurrentUser').resolves(this.user)
       cy.stub(this.ipc, 'getSpecs').yields(null, this.specs)
@@ -144,7 +146,7 @@ describe('Specs List', function () {
         })
 
         it('lists test specs', function () {
-          cy.get('.file a').last().should('contain', 'baz_list_spec.coffee')
+          cy.get('.file a').last().should('contain', 'last_list_spec.coffee')
           cy.get('.file a').last().should('not.contain', 'admin_users')
         })
       })
@@ -198,7 +200,6 @@ describe('Specs List', function () {
       context('displays list of specs', function () {
         it('lists main folders of specs', function () {
           cy.contains('.folder.level-0', 'integration')
-
           cy.contains('.folder.level-0', 'unit')
         })
 
@@ -211,8 +212,7 @@ describe('Specs List', function () {
         })
 
         it('lists folder with \'.\'', function () {
-          cy.get('.file').should('have.length', 7)
-
+          cy.get('.file').should('have.length', this.numSpecs)
           cy.get('.folder').should('have.length', 10)
         })
       })
@@ -226,10 +226,10 @@ describe('Specs List', function () {
         })
 
         it('hides children when folder clicked', function () {
-          cy.get('.file').should('have.length', 7)
+          cy.get('.file').should('have.length', this.numSpecs)
           cy.get('.folder .folder-name:first').click()
 
-          cy.get('.file').should('have.length', 2)
+          cy.get('.file').should('have.length', 8)
         })
 
         it('sets folder expanded when clicked twice', function () {
@@ -243,7 +243,7 @@ describe('Specs List', function () {
         it('hides children for every folder collapsed', function () {
           const lastExpandedFolderSelector = '.folder-expanded:last > div > .folder-name:last'
 
-          cy.get('.file').should('have.length', 7)
+          cy.get('.file').should('have.length', this.numSpecs)
 
           cy.get(lastExpandedFolderSelector).click()
           cy.get('.file').should('have.length', 6)
@@ -280,6 +280,14 @@ describe('Specs List', function () {
     })
 
     context('filtering specs', function () {
+      it('scrolls the specs and not the filter', function () {
+        this.ipc.getSpecs.yields(null, this.specs)
+        this.openProject.resolve(this.config)
+
+        cy.contains('last_list_spec').scrollIntoView()
+        cy.get('.filter').should('be.visible')
+      })
+
       describe('typing the filter', function () {
         beforeEach(function () {
           this.ipc.getSpecs.yields(null, this.specs)
@@ -289,13 +297,13 @@ describe('Specs List', function () {
         })
 
         it('displays only matching spec', () => {
-          cy.get('.outer-files-container .file')
+          cy.get('.specs-list .file')
           .should('have.length', 1)
           .and('contain', 'account_new_spec.coffee')
         })
 
         it('only shows matching folders', () => {
-          cy.get('.outer-files-container .folder')
+          cy.get('.specs-list .folder')
           .should('have.length', 2)
         })
 
@@ -304,21 +312,21 @@ describe('Specs List', function () {
           cy.get('.filter')
           .should('have.value', '')
 
-          cy.get('.outer-files-container .file')
-          .should('have.length', 7)
+          cy.get('.specs-list .file')
+          .should('have.length', this.numSpecs)
         })
 
         it('clears the filter if the user press ESC key', function () {
           cy.get('.filter').type('{esc}')
           .should('have.value', '')
 
-          cy.get('.outer-files-container .file')
-          .should('have.length', 7)
+          cy.get('.specs-list .file')
+          .should('have.length', this.numSpecs)
         })
 
         it('shows empty message if no results', function () {
           cy.get('.filter').clear().type('foobarbaz')
-          cy.get('.outer-files-container').should('not.exist')
+          cy.get('.specs-list').should('not.exist')
 
           cy.get('.empty-well').should('contain', 'No specs match your search: "foobarbaz"')
         })
@@ -328,8 +336,8 @@ describe('Specs List', function () {
           cy.get('.btn').contains('Clear search').click()
           cy.focused().should('have.id', 'filter')
 
-          cy.get('.outer-files-container .file')
-          .should('have.length', 7)
+          cy.get('.specs-list .file')
+          .should('have.length', this.numSpecs)
         })
 
         it('saves the filter to local storage for the project', function () {
@@ -427,7 +435,7 @@ describe('Specs List', function () {
 
       context('choose deeper nested spec', function () {
         beforeEach(() => {
-          cy.get('.file a').contains('a', 'baz_list_spec.coffee').as('deepSpec').click()
+          cy.get('.file a').contains('a', 'last_list_spec.coffee').as('deepSpec').click()
         })
 
         it('updates spec icon', () => {

diff --git a/packages/desktop-gui/src/project/project.scss b/packages/desktop-gui/src/project/project.scss
@@ -1,6 +1,6 @@
 .project-content {
+  display: flex;
   flex-grow: 2;
-  overflow: auto;
   margin-bottom: 0;
   width: 100%;
 }
diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx
@@ -22,7 +22,7 @@ class SpecsList extends Component {
     if (!specsStore.filter && !specsStore.specs.length) return this._empty()
 
     return (
-      <div id='tests-list-page'>
+      <div className='specs'>
         <header>
           <div className={cs('search', {
             'show-clear-filter': !!specsStore.filter,
@@ -73,7 +73,7 @@ class SpecsList extends Component {
     }
 
     return (
-      <ul className='outer-files-container list-as-table'>
+      <ul className='specs-list list-as-table'>
         {_.map(specsStore.specs, (spec) => this._specItem(spec, 0))}
       </ul>
     )
@@ -168,7 +168,7 @@ class SpecsList extends Component {
 
   _empty () {
     return (
-      <div id='tests-list-page'>
+      <div className='specs'>
         <div className='empty-well'>
           <h5>
             No files found in

diff --git a/packages/desktop-gui/src/specs/specs.scss b/packages/desktop-gui/src/specs/specs.scss
@@ -1,8 +1,10 @@
 // maximum supported file structure nesting level
 $max-nesting-level: 14;
 
-#tests-list-page {
-  position: relative;
+.specs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
   .empty-well code {
     display: block;
@@ -11,9 +13,6 @@ $max-nesting-level: 14;
   }
 
   header {
-    position: relative;
-    display: block;
-    width: 100%;
     height: 42px;
     background: #f5f5f5;
     border-bottom: 1px solid #ddd;
@@ -106,9 +105,10 @@ $max-nesting-level: 14;
     border-top: 0;
   }
 
-  .outer-files-container {
+  .specs-list {
     @include list-columns(100%);
     margin-bottom: 0;
+    overflow: auto;
   }
 
   .file, .folder {