build(angular): publish @cypress/angular to npm (#23387)

npm/angular/README.md

@@ -1,57 +1,37 @@
-> A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
+# @cypress/angular
 
-**Jump to:** [Comparison](#comparison), [Blog posts](#blog-posts), [Install](#install), Examples: [basic](#basic-examples), [advanced](#advanced-examples), [full](#full-examples), [external](#external-examples), [Style options](#options), [Code coverage](#code-coverage), [Visual testing](#visual-testing), [Common problems](#common-problems), [Chat](#chat)
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
 
-## TLDR
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-angular#Configuring-Component-Testing) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be used for advanced use-cases.
 
-- What is this? This package allows you to use [Cypress](https://www.cypress.io/) test runner to unit test your Angular components with zero effort. Here is a typical component testing, notice there is not external URL shown, since it is mounting the component directly.
-
-![Example component test](images/dynamic.gif)
-
-- How is this different from [Angular Testing](https://angular.io/guide/testing) or [ATL](https://testing-library.com/docs/angular-testing-library/intro/)? It is similar in functionality BUT runs the component in the real browser with full power of Cypress E2E test runner: [live GUI, full API, screen recording, CI support, cross-platform](https://www.cypress.io/features/), and [visual testing](https://on.cypress.io/visual-testing). 
-- Read [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/) by Gleb Bahmutov
-
-## Comparison
-
-<!-- prettier-ignore-start -->
-Feature | Jest / Karma / ATL | Cypress + `@cypress/angular`
---- | --- | ---
-Test runs in real browser | ❌ | ✅
-Supports shallow mount | ✅ | ❌
-Supports full mount | ✅ | ✅
-Test speed | 🏎 | [as fast as the app works in the browser](#fast-enough)
-Test can use additional plugins | maybe | use any [Cypress plugin](https://on.cypress.io/plugins)
-Test can interact with component | synthetic limited API | use any [Cypress command](https://on.cypress.io/api)
-Test can be debugged | via terminal and Node debugger | use browser DevTools
-Built-in time traveling debugger | ❌ | Cypress time traveling debugger
-Re-run tests on file or test change | ✅ | ✅
-Test output on CI | terminal | terminal, screenshots, videos
-Tests can be run in parallel | ✅ | ✅ via [parallelization](https://on.cypress.io/parallelization)
-Test against interface | if using `@testing-library/angular` | ✅ and can use `@testing-library/cypress`
-Spying and stubbing methods | Jest mocks | [Sinon library](https://on.cypress.io/stubs-spies-and-clocks)
-Stubbing imports | ✅ | ✅
-Stubbing clock | ✅ | ✅
-Code coverage | ✅ | ✅
-<!-- prettier-ignore-end -->
-
-If you are coming from Jest + ATL world, read [Test The Interface Not The Implementation](https://glebbahmutov.com/blog/test-the-interface/).
+## Install
 
-## Blog posts
+- Requires Cypress v7.0.0 or later
+- Requires [Node](https://nodejs.org/en/) version 12 or above
 
-- [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
+```sh
+npm install --save-dev @cypress/angular
+```
 
-## Install
+## Run
 
-Requires [Node](https://nodejs.org/en/) version 12 or above.
+Open cypress test runner
+```
+npx cypress open --component
+```
 
-```sh
-npm install --save-dev cypress @cypress/angular @cypress/webpack-dev-server
+If you need to run test in CI
+```
+npx cypress run --component
 ```
 
+For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
 
 ## API
 
-- `mount` allows you to mount a given Angular component as a mini web application and interact with it using Cypress commands
+- `mount` is the most important function, allows to mount a given Angular component as a mini web application and interact with it using Cypress commands
+- `MountConfig` Configuration used to configure your test
+- `createOutputSpy` factory function that creates new EventEmitter for your component and spies on it's `emit` method.
 
 ## Examples
 
@@ -68,87 +48,38 @@ describe('HelloWorldComponent', () => {
 })
 ```
 
-Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
-
-### Basic examples
-Coming Soon...
-
-
-### Advanced examples
-Coming Soon...
-
-### Full examples
-Coming Soon...
-
-### External examples
-Coming Soon...
-
-## Options
-
-
-## Code coverage
-
-In order to use code coverage you can follow the instructions from [docs](https://github.com/cypress-io/code-coverage). In most of cases you need to install 2 dependencies: 
-
-```
-npm i @cypress/code-coverage babel-plugin-istanbul
-
-yarn add @cypress/code-coverage babel-plugin-istanbul
-```
-
-If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the fly using `babel-plugin-istanbul` and generates report using dependency [cypress-io/code-coverage](https://github.com/cypress-io/code-coverage) (included). If you want to disable code coverage instrumentation and reporting, use `--env coverage=false` or `CYPRESS_coverage=false` or set in your `cypress.json` file
+```ts
+import { mount } from '@cypress/angular'
+import { HelloWorldComponent } from './hello-world.component'
 
-```json
-{
-  "env": {
-    "coverage": false
-  }
-}
+describe('HelloWorldComponent', () => {
+  it('works', () => {
+    mount('<app-hello-world></app-hello-world>', {
+      declarations: [HelloWorldComponent]
+    })
+    // now use standard Cypress commands
+    cy.contains('Hello World!').should('be.visible')
+  })
+})
 ```
 
-## Visual testing
-
-You can use any Cypress [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) to perform [visual testing](https://on.cypress.io/visual-testing) from the component tests. This repo has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), [visual-testing-with-happo](examples/visual-testing-with-happo), and [visual-testing-with-applitools](examples/visual-testing-with-applitools).
+Look at the examples in [cypress-component-testing-apps](https://github.com/cypress-io/cypress-component-testing-apps) repo. Here in the `angular` and `angular-standalone` folders are the two example applications showing various testing scenarios.
 
-For a larger Do-It-Yourself example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku) repository. I explain how to write visual testing using open source tools in this [blog post](https://glebbahmutov.com/blog/open-source-visual-testing-of-components/), [video talk](https://www.youtube.com/watch?v=00BNExlJUU8), and [slides](https://slides.com/bahmutov/i-see-what-is-going-on).
 
-## Common problems
+## Compatibility
 
-
-## Chat
-
-Come chat with us [on discord](https://discord.gg/7ZHYhZSW) in the #component-testing channel.
+| @cypress/angular | cypress |
+| -------------- | ------- |
+| >= v1          | >= v10.5  |
 
 ## Development
 
-See [docs/development.md](./docs/development.md)
-
-## Debugging
-
-You can see verbose logs from this plugin by running with environment variable
-
-```
-DEBUG=@cypress/angular
-```
-
-Because finding and modifying Webpack settings while running this plugin is done by [find-webpack](https://github.com/bahmutov/find-webpack) module, you might want to enable its debug messages too.
-
-```
-DEBUG=@cypress/angular,find-webpack
-```
-
-## Changelog
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
 
-[Changelog](./CHANGELOG.md)
+## License
 
-## Related tools
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/master/LICENSE)
 
-Same feature for unit testing components from other frameworks using Cypress
+This project is licensed under the terms of the [MIT license](/LICENSE).
 
-- [@cypress/react](https://github.com/cypress-io/cypress/tree/develop/npm/react)
-- [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue)
-- [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)
-- [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)
-- [@cypress/angular](https://github.com/bahmutov/@cypress/angular)
-- [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)
-- [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)
+## [Changelog](./CHANGELOG.md)

npm/angular/package.json

@@ -2,7 +2,6 @@
   "name": "@cypress/angular",
   "version": "0.0.0-development",
   "description": "Test Angular Components using Cypress",
-  "private": true,
   "main": "dist/index.js",
   "scripts": {
     "prebuild": "rimraf dist",