Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidlj95/angular-18-cypress-jasmine-types
Minimal reproduction for JetBrains IDEs issue about unit test types and Cypress
https://github.com/davidlj95/angular-18-cypress-jasmine-types
cypress jasmine jetbrains-ides minimal-reproduction unit-testing webstorm
Last synced: 18 days ago
JSON representation
Minimal reproduction for JetBrains IDEs issue about unit test types and Cypress
- Host: GitHub
- URL: https://github.com/davidlj95/angular-18-cypress-jasmine-types
- Owner: davidlj95
- Created: 2024-09-22T18:55:35.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-18T10:37:59.000Z (18 days ago)
- Last Synced: 2024-10-18T14:37:35.655Z (18 days ago)
- Topics: cypress, jasmine, jetbrains-ides, minimal-reproduction, unit-testing, webstorm
- Language: HTML
- Homepage: https://youtrack.jetbrains.com/issue/WEB-68686
- Size: 293 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular18CypressJasmineTypes
This is a minimal reproduction for [an issue](https://youtrack.jetbrains.com/issue/WEB-68686) in JetBrains IDEs. TL;DR: IDE thinks unit tests are Chai/Mocha tests but they're Jasmine ones. Probably because confusing them with Cypress tests instead. Therefore unit test assertions (i.e.: `toBeTruthy`) appear in red color as the definitions aren't found. Though they actually work (like when running them with `ng test`)
## UPDATE: Refer to `app/spec` Typescript configs
After [reply from a JetBrains team member](https://youtrack.jetbrains.com/issue/WEB-68998/Paths-from-tsconfig.app.json-are-ignored#focus=Comments-27-10762562.0-0), the suggested fix is to refer to `tsconfig.app/spec.json` from `tsconfig.json`
This has been applied in [commit `24f929b`](https://github.com/davidlj95/angular-18-cypress-jasmine-types/commit/24f929b1da27a88d2c623c2c99c55e0c8961d555)
After that, when using WebStorm 2024.2.3 seems the issue about assertion types is fixed.
Though the docs / "Go to declaration" of `beforeEach`, `describe`, `it` and `expect` are wrong.
When using Cmd + B and F1 to see docs, Mocha/Chai docs appear:![](screenshot-mochasmine.png)
Mocha ones appear for `beforeEach`, `describe` and `it`. Chai ones for `expect`.
When using "Go to declaration or usages" you go to `(chai|mocha)/index.d.ts`
## Creating the repository
To create the repository, a fresh Angular app has been created with the following command:```shell
pnpm dlx @angular/cli new \
--package-manager=pnpm \
angular-18-cypress-jasmine-types
```Choosing defaults: CSS + no SSR/SSG. Using `pnpm` for `p`erformance purposes.
## Reproducing the issue
The issue isn't be there when cloning the repo. However, switch into one of the two branches:
- [`root-schematic`](https://github.com/davidlj95/angular-18-cypress-jasmine-types/tree/root-schematic). Where Cypress has been added via [Cypress Angular Schematic](https://www.npmjs.com/package/@cypress/schematic)
- [`root-manual`](https://github.com/davidlj95/angular-18-cypress-jasmine-types/tree/root-manual). Where Cypress has been added manually by `pnpm install -DE cypress`For instance, `git checkout root-manual`. Then run `pnpm install`. Open the example unit test file `app.component.spec.ts`. The issue appears. `toBeTruthy` appears in red color. Amongst the rest of assertions too.
### Extra notes
When switching back to `main` branch to write this note in `README.md` the issue disappeared. Switching to a branch where Cypress has been added, raises the issue back again.Notice some time must pass for the red color to appear. What is instant is that hovering over `toBeTruthy` or other assertions triggers a popup saying that there are no definitions available. When if in `main` branch where no Cypress exists, hovering over the assertion triggers a popup with Jasmine's documentation
Turned off `Test Automation` plugin just in case. Restored default settings just incase. Invalidated caches too.
> Now `Test Automation` plugin is reporting an issue about OpenAPI when enabling it back. Will create a separate issue for that too.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.5.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.