bahmutov / bahmutov/cypress-angular-unit-test

Components and Styles not rendering

Open
#284 11 comments 1 reaction 0 assignees View on GitHub
🐛 bug
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.