From 141c79997567eded32673a7a081a8587085534ec Mon Sep 17 00:00:00 2001 From: Adam Stone Date: Wed, 9 Nov 2022 12:29:28 -0500 Subject: [PATCH] chore: normalize CT adapter readme documents (#24590) --- npm/angular/README.md | 79 +--------------------------------- npm/mount-utils/README.md | 3 +- npm/react/README.md | 89 +-------------------------------------- npm/react18/README.md | 7 +++ npm/svelte/README.md | 70 +----------------------------- npm/vue/README.md | 74 +------------------------------- npm/vue2/README.md | 70 +----------------------------- 7 files changed, 18 insertions(+), 374 deletions(-) create mode 100644 npm/react18/README.md diff --git a/npm/angular/README.md b/npm/angular/README.md index 8537799fabcf..2e75bfe830b1 100644 --- a/npm/angular/README.md +++ b/npm/angular/README.md @@ -1,85 +1,10 @@ # @cypress/angular -Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+** - -> **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. - -## Install - -- Requires Cypress v7.0.0 or later -- Requires [Node](https://nodejs.org/en/) version 12 or above - -```sh -npm install --save-dev @cypress/angular -``` - -## Run - -Open cypress test runner -``` -npx cypress open --component -``` - -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` 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 - -```ts -import { mount } from '@cypress/angular' -import { HelloWorldComponent } from './hello-world.component' - -describe('HelloWorldComponent', () => { - it('works', () => { - mount(HelloWorldComponent) - // now use standard Cypress commands - cy.contains('Hello World!').should('be.visible') - }) -}) -``` - -```ts -import { mount } from '@cypress/angular' -import { HelloWorldComponent } from './hello-world.component' - -describe('HelloWorldComponent', () => { - it('works', () => { - mount('', { - declarations: [HelloWorldComponent] - }) - // now use standard Cypress commands - cy.contains('Hello World!').should('be.visible') - }) -}) -``` - -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. - - -## Compatibility - -| @cypress/angular | cypress | -| -------------- | ------- | -| >= v1 | >= v10.5 | +Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner +> **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/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be done for advanced use-cases. ## Development Run `yarn build` to compile and sync packages to the `cypress` cli package. -## License - -[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE) - -This project is licensed under the terms of the [MIT license](/LICENSE). - ## [Changelog](./CHANGELOG.md) diff --git a/npm/mount-utils/README.md b/npm/mount-utils/README.md index b789cf73af8b..6ca97dc425f8 100644 --- a/npm/mount-utils/README.md +++ b/npm/mount-utils/README.md @@ -2,7 +2,7 @@ > **Note** this package is not meant to be used outside of cypress component testing. -This librares exports some shared types and utility functions designed to build adapters for components frameworks. +This library exports some shared types and utility functions designed to build adapters for components frameworks. It is used in: @@ -22,6 +22,7 @@ All the functionality used to create the first party Mount adapters is available - Receive a component as the first argument. This could be class, function etc - depends on the framework. - Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework +- Call `getContainerEl` to access the root DOM element In addition, we recommend that Mount Adapters: diff --git a/npm/react/README.md b/npm/react/README.md index cc2793fedd9b..bd5602adfd59 100644 --- a/npm/react/README.md +++ b/npm/react/README.md @@ -1,87 +1,8 @@ # @cypress/react -Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+** - -> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-react#Configuring-Component-Testing) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be used for advanced use-cases. - -## Install - -- Requires Cypress v7.0.0 or later -- Requires [Node](https://nodejs.org/en/) version 12 or above - -```sh -npm install --save-dev @cypress/react -``` - -## Run - -Open cypress test runner -``` -npx cypress open --component -``` - -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` is the most important function, allows to mount a given React component as a mini web application and interact with it using Cypress commands -- `createMount` factory function that creates new `mount` function with default options - -## Examples - -```js -import React from 'react' -import { mount } from '@cypress/react' -import { HelloWorld } from './hello-world.jsx' -describe('HelloWorld component', () => { - it('works', () => { - mount() - // now use standard Cypress commands - cy.contains('Hello World!').should('be.visible') - }) -}) -``` - -Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios. - -## Options - -In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file: - -```js -// src/Footer.spec.js -import './styles/main.css' -import Footer from './Footer' -it('looks right', () => { - // styles are applied - mount(