Skip to content

Commit

Permalink
chore: normalize CT adapter readme documents (#24590)
Browse files Browse the repository at this point in the history
  • Loading branch information
@astone123
astone123 committed Nov 9, 2022
1 parent 547b700 commit 141c799
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 374 deletions.
79 changes: 2 additions & 77 deletions npm/angular/README.md
View file
@@ -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('<app-hello-world></app-hello-world>', {
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)
3 changes: 2 additions & 1 deletion npm/mount-utils/README.md
View file
Expand Up @@ -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:

Expand All @@ -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:

Expand Down
89 changes: 2 additions & 87 deletions npm/react/README.md
View file
@@ -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(<HelloWorld />)
// 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(<Footer />)
})
```

See [docs/styles.md](./docs/styles.md) for full list of options.
```
You may also specify the `ReactDOM` package to use. This can be useful in complex monorepo setups that have different versions of React and React DOM installed. If you see an error relating to [mismatching versions of React or React DOM](https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom), this may be the solution. You can do this using the `ReactDom` option:
```jsx
// if you have multiple versions of ReactDom in your monorepo
import ReactDom from 'react-dom'
mount(<Todo todo={todo} />, { reactDom: ReactDom })
```

## Compatibility

| @cypress/react | cypress |
| -------------- | ------- |
| <= v5 | <= v9 |
| >= v6 | >= v10 |
Mount React 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 [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be done for advanced use-cases.
## Development

Run `yarn build` to compile and sync packages to the `cypress` cli package.
Expand All @@ -90,10 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples

Run `yarn test` to execute headless Cypress tests.

## 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)
7 changes: 7 additions & 0 deletions npm/react18/README.md
View file
@@ -0,0 +1,7 @@
# @cypress/react18

Mount React 18 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 [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react18` should only be done for advanced use-cases.
## [Changelog](./CHANGELOG.md)
70 changes: 1 addition & 69 deletions npm/svelte/README.md
View file
Expand Up @@ -2,69 +2,7 @@

Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**

> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-svelte#Configuring-Component-Testing) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be used for advanced use-cases.
## Install

- Requires Svelte >= 3
- Requires Cypress v10.7.0 or later
- Requires [Node](https://nodejs.org/en/) version 12 or above

```sh
npm install --save-dev @cypress/svelte
```

## 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).

## Example

```js
import { mount } from '@cypress/svelte'
import HelloWorld from './HelloWorld.svelte'

describe('HelloWorld component', () => {
it('works', () => {
mount(HelloWorld)
// now use standard Cypress commands
cy.contains('Hello World!').should('be.visible')
})
})
```

## 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/HelloWorld.svelte
import './styles/main.css'
import HelloWorld from './HelloWorld.svelte'

it('looks right', () => {
// styles are applied
mount(HelloWorld)
})
```

> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
## Compatibility

| @cypress/svelte | cypress |
| -------------- | ------- |
| >= v1 | >= v10 |
> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
## Development

Expand All @@ -74,10 +12,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples

Run `yarn test` to execute headless Cypress tests.

## 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)
74 changes: 2 additions & 72 deletions npm/vue/README.md
View file
@@ -1,65 +1,8 @@
# @cypress/vue

Mount Vue 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 [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-vue#Configuring-Component-Testing) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be used for advanced use-cases.
### How is this different from @cypress/vue2?
Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) if you're still using vue@2, and this package if you're on vue@3.

## Installation

- Requires Cypress v7.0.0 or later
- Requires [Node](https://nodejs.org/en/) version 12 or above
- Requires Vue 3.x. If you are using Vue 2.x, you want [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) instead.

```sh
npm i -D @cypress/vue
```

## Usage and Examples

```js
// components/HelloWorld.spec.js
import { mount } from '@cypress/vue'
import { HelloWorld } from './HelloWorld.vue'
describe('HelloWorld component', () => {
it('works', () => {
mount(HelloWorld)
// 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.

### Styles

One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.

```js
import Todo from './Todo.vue'
import '../styles/main.css'
const todo = {
id: '123',
title: 'Write more tests',
}

mount(Todo, { props: { todo } })
```

### Global Vue Options

You can pass extensions (global components, mixins, modules to use)
when mounting Vue component. Use `{ extensions: { ... }}` object inside
the `options`.

- `components` - object of 'id' and components to register globally, see [Components](npm/vue/cypress/component/basic/components) example
- `use` (alias `plugins`) - list of plugins, see [Plugins](npm/vue/cypress/component/basic/plugins)
- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](npm/vue/cypress/component/basic/mixins) example
- `filters` - hash of global filters, see [Filters](npm/vue/cypress/component/basic/filters) example
Mount Vue 3 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 [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be done for advanced use-cases.
## Development

Run `yarn build` to compile and sync packages to the `cypress` cli package.
Expand All @@ -68,17 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples

Run `yarn test` to execute headless Cypress tests.

## Compatibility

| @cypress/vue | cypress |
| ------------ | ------- |
| <= v3 | <= v9 |
| >= v4 | >= v10 |

## 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)

5 comments on commit 141c799

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 141c799 Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/11.0.1/linux-arm64/develop-141c79997567eded32673a7a081a8587085534ec/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 141c799 Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/11.0.1/linux-x64/develop-141c79997567eded32673a7a081a8587085534ec/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 141c799 Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin arm64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/11.0.1/darwin-arm64/develop-141c79997567eded32673a7a081a8587085534ec/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 141c799 Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/11.0.1/darwin-x64/develop-141c79997567eded32673a7a081a8587085534ec/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 141c799 Nov 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/11.0.1/win32-x64/develop-141c79997567eded32673a7a081a8587085534ec/cypress.tgz

Please sign in to comment.