bahmutov / bahmutov/cypress-angular-unit-test
Components and Styles not rendering
- Dominant language
- TypeScript
- Stars
- 160
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
from #277
### Current behavior
I've created a [repo](https://github.com/SarcevicAntonio/cy-ng-ut-issues) that contains two components, and two tests. Both show different issues.
1. The CardComponent Spec isn't getting rendered because it uses a third party libraries to render SVG (needed for our usecase) which throws an error in cypress:
```
Error: Can't resolve all parameters for InlineSVGComponent: (?, ?).
at syntaxError (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:10366)
at CompileMetadataResolver._getDependenciesMetadata (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:30280)
at CompileMetadataResolver._getTypeMetadata (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:30175)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:29790)
at CompileMetadataResolver._getEntryComponentMetadata (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:30375)
at eval (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:30031)
at Array.map ()
at CompileMetadataResolver.getNgModuleMetadata (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:30031)
at CompileMetadataResolver.getNgModuleSummary (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:29859)
at eval (:55857/__cypress/tests?p=projects/cyng-oasis/src/lib/container/card/card.component.spec.ts:29941)
```
2. The CheckboxComponent Spec shows that styles aren't loaded into cypress. You can use Storybook to see how the component should look like. Further details in the Readme.
### Desired behavior
1. Components should be rendering even when not using the @Inject() (which shouldn't be needed since we are not using custom provider). Especially since I can't change how third party components inject their dependencies.
2. The styles (CSS,SCSS,SASS) should be loading in cypress, since those are important for the UI and therefore testing.
### Test code to reproduce
[The repo I created is here](https://github.com/SarcevicAntonio/cy-ng-ut-issues).
### Versions
```
"@angular/core": "~10.2.1",
"@angular/material": "^10.2.6",
"cypress": "^6.1.0",
"cypress-angular-unit-test": "^3.6.0",
```
Thanks :)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by cloning the linked reproduction repository and reading its README, then run the CardComponent and CheckboxComponent specs in Cypress. Inspect card.component.spec.ts and the Storybook rendering to compare the component and style behavior. Done means both components render in Cypress, including third-party SVG dependencies, and CSS, SCSS, and SASS styles are loaded.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, cypress, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100