bahmutov / bahmutov/cypress-angular-unit-test
Issues when setting up (in an Angular CLI Library project)
- Dominant language
- TypeScript
- Stars
- 160
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
There are a few things I stumbled over when trying to set up cypress-angular-unit-test for our Angular Component Library.
Currently it looks like the repo is setup in a way to test components of an application. But we want to test components of a library. Here they come:
* First of all the guide tells you to modify the cypress config files. It could use a note that you need to run cypress once for the config files to be generated. Just a little thing but the guide should just give you a small heads up.
* Next the guide tells you to import the typescript file "cy-ts-preprocessor.ts" in the javascript file "index.js". It doesn't work out. You actually need to make "cypress/plugin/index.js" a typescript file i.e. rename it to "cyrpress/plugin/index.ts" and tell the cypress json, what the index file is. ( "pluginsFile": "cypress/plugins/index.ts"). Also the helper.ts isn't mentioned.
* Now cypress finally launches and you can start writing a test. But when running your first test you notice, that it can't resolve "angular2-template-loader". That also needs to be installed via NPM.
* Then it says it can't resolve 'cypress-angular-unit-test/support'. I actually have to call require('cypress-angular-unit-test/dist/support');. Not sure why this is here. Last time i tried it, it wasn't an issue.
* Next up I can't render the component because it says "Expected 'styles' to be an array of strings.". So something is off with the webpack config. I change cy-ts-preprocessor to not use raw-loader for css/scss files but to-string-loader in the following way:
```
{
test: /\.(css|scss)$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}
```
(we are using .scss files for this library)
* Then it says "The template specified for component CardComponent is not a string". I use html-loader instead of raw-loader and it seems to work.
* After all that we come to the more curious stuff. I get some template parse errors. After updating the test, to include all needed modules, it says it can not resolve all parameters for a specific third-party-component that is used inside of a component that is used in the component that i test here. "Can't resolve all parameters for InlineSVGComponent: (?, ?)."
* after removing every mention of the icon component that uses the third-party InlineSVGComponent i see that the test now finally runs and loads my component, but without any Styling whatsoever.
The Spec File for my test:
```
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { initEnv, mount } from 'cypress-angular-unit-test';
import { ButtonModule } from '../../button/button.module';
import { LoadingModule } from '../../misc/loading/loading.module';
import { CardComponent } from './card.component';
describe('CardComponent', () => {
it('shows the input', () => {
// Init Angular stuff
initEnv(CardComponent, {
imports: [
CommonModule,
ButtonModule,
TranslateModule,
LoadingModule,
]
});
// component + any inputs object
mount(CardComponent, { title: 'Hello World' });
// use any Cypress command afterwards
cy.contains('Hello World');
});
});
```
So yeah this leaves me with a situation that doesn't allow me to use cypress to unit test my angular components, because the styles arent loading and i cant't even load all needed components.
Im pretty sure most of this has to do with the loader situation. Im not sure why the raw-loader throws these errors, and why the other loaders dont seem to include the css correctly.
If anyone has any clues please hit me up. If anyone needs more code ill talk with my boss about it.
EDIT:
I found out, after some testing that i get the same "Can't resolve all parameters for CheckboxComponent: (?)." error when trying to render components with paramters in their constuctors. Like the CheckboxComponent for example has the following constructor:
```
constructor(injector: Injector) {
super(injector);
}
```
So the (?) is signifying the injector parameter. No clue how to resolve this tho.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the setup guide and the generated Cypress configuration, then inspect cypress/plugin/index.js or index.ts, cy-ts-preprocessor.ts, helper.ts, and the support import mentioned in the report. Reproduce the supplied CardComponent spec while isolating the loader, stylesheet, template, dependency-injection, and component-resolution failures. Done means Angular library components can run with their styles and required dependencies under Cypress.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, cypress, typescript, webpack
- Domain
- build-system, frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100