Nx: [feature request] CLI option to create nested e2e project

[chriswnewman]

I recently started trying to adopt nx and monorepo-style development. One thing that strikes me as being different for no apparent reason, is that e2e projects for newly generated apps are moved outside of the main app folder.

Nx Workspace

    -nx-app
        -src
    -nx-app-e2e
dist
node_modules
libs

Standalone Angular app

    -dist
    -e2e
    -node_modules
    -src

I can appreciate the reasoning for moving the node_modules and dist folders above the level of individual project. But I can't say the same for e2e.

Without knowing the reasoning behind this design decision, my opinion is that it would be nice to have a CLI option to preserve the nested e2e folder style of traditionally generated Angular apps. The default for this option could even be the current behavior.

There is an unanswered question on SO related to this.
https://stackoverflow.com/questions/51763075/why-does-nrwl-nx-create-a-separate-e2e-project-for-each-app

[dallastjames]

I agree with this. I use NX extensively across multiple projects and each time I create a new app, I restructure it so that the e2e code lives inside of the app folder as opposed to along side of it. I'd love a CLI option built in to handle this. 👍

[s-f-a-g]

Totally agree !

[chriswnewman]

So I've been spending some time trying to implement this feature but I've hit a wall. Even moving files and folders manually, I'm not able to successfully run ng e2e my-app-e2e.

Here's what I'm doing.
1) Renaming my-app-e2e to e2e and move it inside of my-app.
2) Update my-app-e2e project entry in angular.json
2a) change root from "apps/my-app-e2e" to "apps/my-app/e2e"
2b) change architect.e2e.options.protractorConfig from "apps/my-app-e2e/protractor.conf.js" to "apps/my-app/e2e/protractor.conf.js"
2c) change architect.lint.options.tsConfig from "apps/my-app-e2e/tsconfig.e2e.json" to "apps/my-app/e2e/tsconfig.e2e.json"
3) Update my-app/e2e/tsconfig.e2e.json
3a) change extends from "../../tsconfig.json" to "../../../tsconfig.json"
3b) change compilerOptions.outDir from "../../../dist/out-tsc/apps/my-app-e2e" to "../../../dist/out-tsc/apps/my-app-e2e"

I feel like I've accounted for all the necessary file path changes.
I canng lint my-app-e2e because of the updated path in 2c above.
But when I try ng e2e my-app-e2e I'm getting typescript compilation errors because it can't recognize jasmine stuff:

ERROR in apps/my-app/e2e/src/app.e2e-spec.ts(3,1): error TS2304: Cannot find name 'describe'.
apps/my-app/e2e/src/app.e2e-spec.ts(6,3): error TS2304: Cannot find name 'beforeEach'.
apps/my-app/e2e/src/app.e2e-spec.ts(10,3): error TS2304: Cannot find name 'it'.
apps/my-app/e2e/src/app.e2e-spec.ts(12,5): error TS2304: Cannot find name 'expect'.
｢wdm｣: Failed to compile.

@dallastjames I might be missing something here, I'd be interested to know how you restructure your apps.

[chriswnewman]

I was able to workaround the problem I was having.
In addition to the file path changes, I had to make two additions to the app.e2e-spec.ts file:
1) added 'import {} from 'jasmine'
-workaround for compilation problems similar to https://github.com/angular/angular-cli/issues/5082
2) added type assertion to jasmine expectation statement: expect\ -workaround for https://github.com/angular/protractor/issues/4176

I'll open a PR for this feature request shortly!

[bcabanes]

Hi @chriswnewman!
I see that @vsavkin has already answered your request and will share the information here while closing.

If you create more than one application in a non-Nx CLI6 project, the CLI will create e2e tests as siblings to the applications they are testing. E2E tests placed inside the application is a special case in the CLI6 setup--it's only the case when there is a single top level application.

The application schematic provided by Nx extends the application schematic provided by the CLI. That is why you get the current layout in an Nx workspace. We also have decided to stay as close to the standard CLI schematics as possible.

[chriswnewman]

For anyone still interested, this will be the default behavior in Angular CLI 8.0 https://github.com/angular/angular-cli/issues/12326

[vdjurdjevic]

Nx still creates separate project for e2e tests. It this ever going to be an option? It is possible to restructure project manually and adjust workspace.json to point to updated file locations but we still have two projects in workspace. In my opinion, apps folder should contain applications. E2E testing is part of the application, not another application. So when i want to run e2e tests, it's common sense to type nx e2e myapp (not nx e2e myapp-e2e), and expect it to run tests inside that application. Correct me if I am wrong, but i don't see any reason for e2e test suit to be an application in workspace. It's cluttering my dependency graph also. Why whould i need it on dependency graph, its just a dev tool..

[atifsyedali]

Can someone explain the reasoning behind this decision for us non-Angular folks? E.g. I have a storybook in a lib project, but I also want my e2e Cypress test for the storybook in the same lib project. Why would the e2e tests for a lib project have its own app?

[adams-family]

I would also be very interested in this feature, as well. It seems like Angular 8+ intended to nest e2e projects by default: https://github.com/angular/angular-cli/issues/12326 - however, I just installed nx with Angular 9 and my e2e projects are still siblings.

There are so many people wanting to nest e2e INTO the project folder it belongs to, is there a specific reason why not to have a CLI argument for this? I found it really counter-productive to manually refactor each time :(

Thanks!

[vdjurdjevic]

Since this is still not supported, I found a way to make better folder structure that requires minimal config update. I just generate an app in folder with --directory option for example folder blog. And starting structure is apps/blog/blog and apps/blog/blog-e2e. Now I rename blog to app and blog-e2e to e2e, and i end up with apps/blog/app and apps/blog/e2e folders. Then just update paths in workspace.json. This way app names stay the same, nx sees them as blog and blog-e2e, and no need to update paths in tsconfig.json files (include, exclude, etc). So, slightly better structure, with minimal effort :)

[silas-joekel]

Is there any update on this topic? I think it is a good idea to have nx as close to ng as possible and therefor it could be a good idea to provide the nested e2e option.