Component Testing on Angular components

[azaeng04]

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]

+1

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

[lmiller1990]

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]

Thanks @lmiller1990 we look forward to the PR.

[JessicaSachs]

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]

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]

Please! This would be amazing to have!

[azaeng04]

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 bahmutov/cypress-angular-unit-test#248: https://github.com/jscutlery/test-utils/tree/main/packages/cypress-mount:

[yjaaidi]

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

• ✅ as much symmetry as possible with the Angular build,
• ✅ a different API (this is also why we created a new library),
• ✅ Storybook stories support,
• ✅ 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]

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]

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]

Everyone is used to living in React's shadow 💀

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

[slavoroi]

Amazing job! Thanks!
Waiting for updates 🥰

[lmiller1990]

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]

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]

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]

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

[yjaaidi]

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

[azaeng04]

EXCITING TIMES!!!! 😃 @yjaaidi

[LeJeanbono]

🎉 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]

💯 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 #16434

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

[dgrbrady]

🎉 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 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:

// 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]

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]

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]

@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]

Any update on this being pulled into the cypress monorepo?

[lmiller1990]

@jordanpowell88 was working on this most recently, here's the PR: #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: #15903 (comment), but we will hopefully have first class support soon, too.

[TheColorRed]

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]

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]

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]

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]

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]

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]

It will be released in 10.5

[jordanpowell88]

Closing this as it is a duplicate issue of #22819