Component Testing on Angular components

azaeng04 commented 3 years ago

What would you like?

I would like Cypress to add support for component testing Angular components. I feel it is just as important as the supported React/Vue.js frameworks.

Why is this needed?

To test on a component level.

ottocoster commented 3 years ago

+1

Also, how does this - https://github.com/bahmutov/cypress-angular-unit-test - relate to the new component testing feature?

lmiller1990 commented 3 years ago

I think we should be able to migrate the angular-unit-test plugin to the cypress monorepo relatively easily. We will discuss and investigate this soon.

azaeng04 commented 3 years ago

Thanks @lmiller1990 we look forward to the PR.

JessicaSachs commented 3 years ago

We spoke with @yjaaidi 2 weeks ago about this. I'm gonna loop him into this discussion. 👍🏻

We will likely not reuse the exisiting angular-unit-test plugin and instead opt for adapting the work @yjaaidi has already done in another project as it's more up-to-date

lmiller1990 commented 3 years ago

I didn't realize some other work was happening around Angular - my bad.

Either way, Angular support is a thing we can and will have!

azaeng04 commented 3 years ago

Please! This would be amazing to have!

azaeng04 commented 3 years ago

I see @yjaaidi has a test-util that can potentially be used for component testing? Unless there is something else specifically, but this is the repo that he mentioned under https://github.com/bahmutov/cypress-angular-unit-test/issues/248: https://github.com/jscutlery/test-utils/tree/main/packages/cypress-mount:

yjaaidi commented 3 years ago

Hey 👋! Yes! We've been working on @jscutlery/cypress-mount with @edbzn with the following goals in mind:

[X] ✅ as much symmetry as possible with the Angular build,
[X] ✅ a different API (this is also why we created a new library),
[X] ✅ Storybook stories support,
[X] ✅ Angular CDK Test Harnesses support (but that's a distinct library @jscutlery/cypress-harness),
[ ] 🚧 boost startup time using the same strategies adopted by the Cypress team for React & Vue,
[ ] 🚧 even more symmetry with the Angular build (we have to get rid of the custom webpack configuration that lies in this package)

We are working with both Cypress & Angular teams on the last two items. We hope that we will be able to merge the effort in the Cypress monorepo. @jscutlery/cypress-mount will probably be maintained as an adapter if the interface of the merged effort changes

literalpie commented 3 years ago

Does the cypress-mount package work with Cypress 7.0? I tried using it, but I think the changes in 7.0 mean that cypress-mount would need some work. Is this right, or am I missing something?

dgrbrady commented 3 years ago

Let me just say that hearing you say that there's a plan to support Angular is such a huge relief to me. It took me about a week to integrate Cypress component testing pre 7.0.0 into my project and that's just to get it working! Then when 7.0.0 released I found it broke everything and it wasn't a simple fix. I was so distraught. As an Angular dev I'm used to living in React and Vue's shadow but hearing that Angular support is on the way takes a load off my shoulders. I haven't been this excited to write unit tests since... well, ever! Cypress has completely changed the game for me and my team. So I'm more than willing to wait a little longer to get native support so that I can stop debugging how to fix "Error: loader 'my/component.scss' didn't return a string". Anyway, thanks to the Cypress team for your amazing work!

lmiller1990 commented 3 years ago

Everyone is used to living in React's shadow 💀

Anyway with the first class Component Testing runner, sunny days are ahead for all ⚡

slavoroi commented 3 years ago

Amazing job! Thanks! Waiting for updates :smiling_face_with_three_hearts:

lmiller1990 commented 3 years ago

This PR is adding a package, @cypress/mount-utils, that should help with integrating other frameworks (liek Angular). It basically exports some useful utils to ensure all component adapters work the same (eg, inject/clean up stylesheets before/after tests in the same manner). It might be useful for the Angular integration.

Looking forward to giving the Angular integration a go! I don't know much about Angular, but I made a small app once, it was pretty nice.

azaeng04 commented 3 years ago

Thanks @lmiller1990 it would be great if cypress could mount the components the same way Storybook does it with the global styles included under the assets folder.

lmiller1990 commented 3 years ago

Yes, we should definitely have something similar to preview-head.html or however Storybook is doing it nowdays. Great suggestion - this isn't Angular specific, we can probably add this fairly easily.

lmiller1990 commented 3 years ago

Latest work for this is here: https://github.com/bahmutov/cypress-angular-unit-test/pull/412/files

yjaaidi commented 3 years ago

We made some experiements on @jscutlery/cypress-mount and we should release Cypress 7 support really soon. Stay tuned 📻

azaeng04 commented 3 years ago

EXCITING TIMES!!!! 😃 @yjaaidi

LeJeanbono commented 3 years ago

🎉 cypress-angular-unit-test 3.8.0 is released for Cypress component testting v7 !!! 🎉 Any feedback is appreciate ! I will work with @lmiller1990 to merge it in the cypress monorepo :)

https://github.com/bahmutov/cypress-angular-unit-test/releases/tag/v3.8.0

JessicaSachs commented 3 years ago

💯 Wunderbar. Next steps will be to remove the build tooling that is unrelated to Circle CI. There are a lot of GH actions, etc in the current PR https://github.com/cypress-io/cypress/pull/16434/

I'm going to comment on that PR right now with merge criteria.

dgrbrady commented 3 years ago

🎉 cypress-angular-unit-test 3.8.0 is released for Cypress component testting v7 !!! 🎉 Any feedback is appreciate ! I will work with @lmiller1990 to merge it in the cypress monorepo :)

https://github.com/bahmutov/cypress-angular-unit-test/releases/tag/v3.8.0

@LejeanBono I just wanted to let you know that I have an Angular 11 app using Material and thanks to your 3.8.0 release, I can now do component unit tests on Cypress version 7.2.0. Thanks so much!! I did have a couple of notes however:

I had to modify my cypress/plugins/index.ts file to avoid getting a WebpackOptionsValidationError. I'm sure there's a better way to do this, but here's my full file for reference:
```
import * as webpackConfig from './webpack.config';
const { startDevServer } = require('@cypress/webpack-dev-server');
```

/**

@param on is used to hook into various events Cypress emits

@param config is the resolved Cypress config */ module.exports = (on: any, config: any) => { // remove the 'default' key to avoid WebpackOptionsValidationError delete webpackConfig['default']; on('dev-server:start', (options) => startDevServer({ options, webpackConfig, }), ); return config; };

- I also had to downgrade `html-webpack-plugin` from the latest to `4.0.0-alpha`. Using the latest version, gave me: `TypeError: Cannot read property 'tap' of undefined`. I referenced [this issue](https://github.com/webpack/webpack-dev-server/issues/1379) to get the working version
- If you have the `paths` property set in your `tsconfig.json`, you must also add them to the `cypress/plugins/webpack.config.ts` under `resolve.alias`. For example:
```json
// tsconfig.json
{
"paths": {
"@customPath/*": ["./src/app/customPath/*"]
}
}

// webpack.config.ts
module.exports = {
resolve: {
alias: {
  "@customPath": path.resolve('./src/app/customPath'),
}
}
}

I don't know if it's just a VS Code thing, but I could not get it to recognize the cypress types (cy, describe, beforeEach, etc) by supplying "types": ["cypress"] in the tsconfig.spec.json. I HAD to add it to tsconfig.json instead.

Idk if these issues were unique to me becuase of how something in our project was set up, but I thought I would consolidate all of the extra little "gotchas" I ran into here in case someone else finds themselves in the same situation :)

lmiller1990 commented 3 years ago

Thanks for the list of gotchas. I think the last two are pretty common in general (webpack and tsconfig do not know about each other, so you need to duplicate the aliases).

As for the first one, I wonder what happens if you do import * as webpackConfig from './webpack.config'; (without * as).

Either way, great to see you got it working! I hope we can find a smoother way to integrate other than just duplicating the webpack configuration, but for now it seems like that's the only way to configure Angular with Cypress.

yjaaidi commented 3 years ago

Hey everyone! We, @jscutlery (@edbzn & me), just released @jscutlery/cypress-angular.

It is Cypress 7 compatible and provides: ✅ Easy setup with one command using Angular CLI schematics or Nx generators. ✅ A simple mount function to test any of your components. ✅ Mount options allowing you to override style, providers, modules, child components...

❤️ Feedback, ideas & contributions are welcome!

azaeng04 commented 3 years ago

@yjaaidi is there a temp workaround for getting angular components to render the same way it would in production, when doing an ng serve, in cypress?

DJSdev commented 2 years ago

Any update on this being pulled into the cypress monorepo?

lmiller1990 commented 2 years ago

@jordanpowell88 was working on this most recently, here's the PR: https://github.com/cypress-io/cypress/pull/20042

We are focusing on hitting Cypress v10 with improved support for component testing in general (currently alpha), when that lands we should be more easily able to iterate and support additional frameworks. My understanding is it's already possible to use Angular w/ Cypress Component Testing as a third party project: https://github.com/cypress-io/cypress/issues/15903#issuecomment-843371697, but we will hopefully have first class support soon, too.

TheColorRed commented 2 years ago

I just learned about component testing, and was wondering if it executed faster than regular e2e tests? Our tests take about 45min - 1hr to run without using component testing.

lmiller1990 commented 2 years ago

It will depend, but generally yes - most e2e tests will create a fully blown server, database etc, component tests tend to be (mostly) browser only and much more lightweight + faster. They aren't a replacement for e2e tests, but definitely can be used along side them, so you don't need to spin up a full app to test every state of every component.

capc0 commented 2 years ago

Since cypress 10 is now released, it would be appreciated if angular component testing support receives some attention again.

It really should get a own section "Angular Component Testing" in the guides also https://docs.cypress.io/guides/component-testing/writing-your-first-component-test#Component-vs-End-to-End-in-a-Nutshell

lmiller1990 commented 2 years ago

Yep, agreed, we are working on it (@jordanpowell88 mainly). I'll find out more and let you know, there should be branch you can follow and try out.

jordanpowell88 commented 2 years ago

Just wanted to let everyone here know that I've been actively working on this. If you want to play around with the POC feel free to checkout my repo: https://github.com/jordanpowell88/angular-ct

NicBright commented 2 years ago

Any news on this? It seems that there has been no progress in the last 2 months (looking at the commits here https://github.com/jordanpowell88/angular-ct/commits/master). However there seems to be recent activity (-4 days) in a branch that aims to add angular ct schematics (however I don't see any value in the schematics if ct testing support is not ready yet): https://github.com/cypress-io/cypress/compare/feat-add-angular-ct-schematic

jordanpowell88 commented 2 years ago

It will be released in 10.5

jordanpowell88 commented 2 years ago

Closing this as it is a duplicate issue of #22819

cypress-io / cypress

Component Testing on Angular components #15903

What would you like?

Why is this needed?