Indentation of tests in the cypress electron app is poor

[cmcnicholas]

Current behavior:

Indentation in the electron runner for test cases is poorly organised.

Desired behavior:

To have a better layout for readability. Simply being nested correctly would help.

Steps to reproduce: (app code and test code)

Simply create a deeply nested hierarchy of tests.

Versions

3.1.5

[jennifer-shehane]

Hey @cmcnicholas, could you provide a screenshot / list of the file directory structure you have in your project? It's hard to tell from the image how it is supposed to look. Thanks!

[cmcnicholas]

Full output of our tests directory, this is in the root of the project, assume cypress.json is a sibling of the tests directory. We have a lot of data files so house our .json fixtures next to the test files themselves rather than replicate the structure in fixtures, hope that makes sense

----tests
-   ----e2e
-   -   ----fixtures
-   -   -       config.json
-   -   -       pikachu.jpeg
-   -   -       
-   -   ----plugins
-   -   -       index.js
-   -   -       webpack.config.js
-   -   -       
-   -   ----screenshots
-   -   -   ----Special.ts
-   -   -           File preview -- fake test 1 -- after all hook (failed) (1).png
-   -   -           File preview -- fake test 1 -- after all hook (failed).png
-   -   -           File preview -- fake test 1 -- before all hook (failed) (1).png
-   -   -           File preview -- fake test 1 -- before all hook (failed).png
-   -   -           
-   -   ----specs
-   -   -   -   SmokeTest.json
-   -   -   -   SmokeTest.ts
-   -   -   -   
-   -   -   ----all
-   -   -   -   ----full
-   -   -   -   -   ----data-explorer
-   -   -   -   -   -       DataExplorer.json
-   -   -   -   -   -       DataExplorer.ts
-   -   -   -   -   -       
-   -   -   -   -   ----file-explorer
-   -   -   -   -           FileExplorer.json
-   -   -   -   -           FileExplorer.ts
-   -   -   -   -           
-   -   -   -   ----right
-   -   -   -   -   ----cards
-   -   -   -   -   -   ----edit
-   -   -   -   -   -   -       EditGeneralCard.json
-   -   -   -   -   -   -       EditGeneralCard.ts
-   -   -   -   -   -   -       
-   -   -   -   -   -   ----info
-   -   -   -   -   -           InfoGeneralCard.json
-   -   -   -   -   -           InfoGeneralCard.ts
-   -   -   -   -   -           InfoQueriesCard.json
-   -   -   -   -   -           InfoQueriesCard.ts
-   -   -   -   -   -           
-   -   -   -   -   ----design
-   -   -   -   -   -   ----edit
-   -   -   -   -   -   -       EditGeneralDesign.json
-   -   -   -   -   -   -       EditGeneralDesign.ts
-   -   -   -   -   -   -       
-   -   -   -   -   -   ----info
-   -   -   -   -   -           InfoInterfacesDesign.json
-   -   -   -   -   -           InfoInterfacesDesign.ts
-   -   -   -   -   -           
-   -   -   -   -   ----group
-   -   -   -   -   -   ----edit
-   -   -   -   -   -   -       EditGeneralGroup.json
-   -   -   -   -   -   -       EditGeneralGroup.ts
-   -   -   -   -   -   -       
-   -   -   -   -   -   ----info
-   -   -   -   -   -           InfoGeneralGroup.json
-   -   -   -   -   -           InfoGeneralGroup.ts
-   -   -   -   -   -           
-   -   -   -   -   ----item
-   -   -   -   -   -   ----info
-   -   -   -   -   -           InfoTeamLeadersItem.json
-   -   -   -   -   -           InfoTeamLeadersItem.ts
-   -   -   -   -   -           InfoTeamMembersItem.json
-   -   -   -   -   -           InfoTeamMembersItem.ts
-   -   -   -   -   -           InfoTeamsItem.json
-   -   -   -   -   -           InfoTeamsItem.ts
-   -   -   -   -   -           
-   -   -   -   -   ----toolbar
-   -   -   -   -   -   ----basemaps
-   -   -   -   -   -   -       CreateBasemap.json
-   -   -   -   -   -   -       CreateBasemap.ts
-   -   -   -   -   -   -       
-   -   -   -   -   -   ----layers
-   -   -   -   -   -   -   -   Layers.json
-   -   -   -   -   -   -   -   Layers.ts
-   -   -   -   -   -   -   -   
-   -   -   -   -   -   -   ----layer
-   -   -   -   -   -   -   -       Layer.json
-   -   -   -   -   -   -   -       Layer.ts
-   -   -   -   -   -   -   -       LayerTags.json
-   -   -   -   -   -   -   -       LayerTags.ts
-   -   -   -   -   -   -   -       
-   -   -   -   -   -   -   ----style
-   -   -   -   -   -   -       -   StyleGeneral.json
-   -   -   -   -   -   -       -   StyleGeneral.ts
-   -   -   -   -   -   -       -   
-   -   -   -   -   -   -       ----edit
-   -   -   -   -   -   -               EditGeneralStyle.json
-   -   -   -   -   -   -               EditGeneralStyle.ts
-   -   -   -   -   -   -               
-   -   -   -   -   -   ----search
-   -   -   -   -   -           Search.json
-   -   -   -   -   -           Search.ts
-   -   -   -   -   -           
-   -   -   -   -   ----user
-   -   -   -   -       ----edit
-   -   -   -   -               EditUser.json
-   -   -   -   -               EditUser.ts
-   -   -   -   -               
-   -   -   -   ----split
-   -   -   -       ----center
-   -   -   -       -   -   Center.json
-   -   -   -       -   -   Center.ts
-   -   -   -       -   -   
-   -   -   -       -   ----designs
-   -   -   -       -   -       DesignGraph.json
-   -   -   -       -   -       DesignGraph.ts
-   -   -   -       -   -       
-   -   -   -       -   ----teams
-   -   -   -       -           TeamGraph.json
-   -   -   -       -           TeamGraph.ts
-   -   -   -       -           
-   -   -   -       ----left
-   -   -   -           ----activities
-   -   -   -           -   ----create
-   -   -   -           -       ----team
-   -   -   -           -       -       CreateTeam.json
-   -   -   -           -       -       CreateTeam.ts
-   -   -   -           -       -       
-   -   -   -           -       ----team-member
-   -   -   -           -               CreateTeamMember.json
-   -   -   -           -               CreateTeamMember.ts
-   -   -   -           -               
-   -   -   -           ----designer
-   -   -   -           -   ----create
-   -   -   -           -       ----attribute
-   -   -   -           -       -       CreateAttributeBoolean.ts
-   -   -   -           -       -       CreateAttributeDate.ts
-   -   -   -           -       -       CreateAttributeDateTime.ts
-   -   -   -           -       -       CreateAttributeGeoJson.ts
-   -   -   -           -       -       CreateAttributeJson.ts
-   -   -   -           -       -       CreateAttributeLink.ts
-   -   -   -           -       -       CreateAttributeNumber.ts
-   -   -   -           -       -       CreateAttributeSeasonal.ts
-   -   -   -           -       -       CreateAttributeStream.ts
-   -   -   -           -       -       CreateAttributeString.ts
-   -   -   -           -       -       CreateAttributeTime.ts
-   -   -   -           -       -       
-   -   -   -           -       ----design
-   -   -   -           -               CreateDesign.json
-   -   -   -           -               CreateDesign.ts
-   -   -   -           -               
-   -   -   -           ----map
-   -   -   -           -   ----layers
-   -   -   -           -   -   ----create
-   -   -   -           -   -           CreateLayer.json
-   -   -   -           -   -           CreateLayer.ts
-   -   -   -           -   -           CreateTag.json
-   -   -   -           -   -           CreateTag.ts
-   -   -   -           -   -           
-   -   -   -           -   ----style
-   -   -   -           -       ----create
-   -   -   -           -               CreateStyleAqs.json
-   -   -   -           -               CreateStyleAqs.ts
-   -   -   -           -               CreateStyleWfs.json
-   -   -   -           -               CreateStyleWfs.ts
-   -   -   -           -               
-   -   -   -           ----permissions
-   -   -   -           -   ----create
-   -   -   -           -       ----group
-   -   -   -           -       -       CreateGroup.json
-   -   -   -           -       -       CreateGroup.ts
-   -   -   -           -       -       
-   -   -   -           -       ----user
-   -   -   -           -               CreateUser.json
-   -   -   -           -               CreateUser.ts
-   -   -   -           -               
-   -   -   -           ----query-builder
-   -   -   -           -       CreateQueryBuilder.json
-   -   -   -           -       CreateQueryBuilder.ts
-   -   -   -           -       
-   -   -   -           ----settings
-   -   -   -               ----create
-   -   -   -                   ----card
-   -   -   -                   -       CreateCard.json
-   -   -   -                   -       CreateCard.ts
-   -   -   -                   -       
-   -   -   -                   ----card-query
-   -   -   -                           CreateCardQuery.json
-   -   -   -                           CreateCardQuery.ts
-   -   -   -                           
-   -   -   ----splash
-   -   -       ----login
-   -   -               Login.json
-   -   -               Login.ts
-   -   -               
-   -   ----support
-   -       -   before.ts
-   -       -   index.ts
-   -       -   
-   -       ----api
-   -       -       aqs.ts
-   -       -       card.ts
-   -       -       design.ts
-   -       -       file.ts
-   -       -       forge.ts
-   -       -       index.ts
-   -       -       item.ts
-   -       -       layer.ts
-   -       -       request.ts
-   -       -       RequestError.ts
-   -       -       session.ts
-   -       -       user.ts
-   -       -       userGroup.ts
-   -       -       
-   -       ----commands
-   -       -       config.ts
-   -       -       createCustomer.ts
-   -       -       createUser.ts
-   -       -       dataAttribute.ts
-   -       -       index.ts
-   -       -       login.ts
-   -       -       scaffold.ts
-   -       -       search.ts
-   -       -       setup.ts
-   -       -       teardown.ts
-   -       -       toast.ts
-   -       -       waitTask.ts
-   -       -       
-   -       ----models
-   -       -       AttributeFixtureJson.ts
-   -       -       ConfigFixtureJson.ts
-   -       -       DesignFixtureJson.ts
-   -       -       E2eConfig.ts
-   -       -       E2eCustomer.ts
-   -       -       E2eDesign.ts
-   -       -       E2eItem.ts
-   -       -       E2eSetup.ts
-   -       -       E2eUser.ts
-   -       -       index.ts
-   -       -       ItemFixtureJson.ts
-   -       -       Scaffold.ts
-   -       -       TaskError.ts
-   -       -       UserFixtureJson.ts
-   -       -       
-   -       ----utils
-   -               createRandomUserDetails.ts
-   -               index.ts

[jennifer-shehane]

Thanks!

The css for this is really naive and simply not handling nesting beyond 5 levels deep. Can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/specs/specs.scss#L238

Also, the fact that we list everything alphabetical, instead of showing folders first then spec files also causes confusion.

[cypress-bot]

The code for this is done in cypress-io/cypress#3711, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 3.3.0.