Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: normalize CT adapter readme documents #24590

Merged
merged 4 commits into from Nov 9, 2022
Merged

chore: normalize CT adapter readme documents #24590

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
305a9ca
chore: normalize npm readme documents
astone123 Nov 8, 2022
0eb854b
chore: fix typo
astone123 Nov 8, 2022
53b4764
chore: feedback
astone123 Nov 9, 2022
12bf338
Merge branch 'develop' into astone123/normalize-npm-readmes
astone123 Nov 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
79 changes: 2 additions & 77 deletions npm/angular/README.md
View file
Open in desktop
@@ -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)
2 changes: 1 addition & 1 deletion npm/mount-utils/README.md
View file
Open in desktop
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.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I figured that we should leave this one since it contains info that isn't captured in the docs, and it's a little different from our other adapter packages

This libraries exports some shared types and utility functions designed to build adapters for components frameworks.

It is used in:

Expand Down
89 changes: 2 additions & 87 deletions npm/react/README.md
View file
Open in desktop
@@ -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
Open in desktop
@@ -0,0 +1,7 @@
# @cypress/react
astone123 marked this conversation as resolved.
Show resolved Hide resolved

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
Open in desktop
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
Open in desktop
@@ -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 components in the open source [Cypress.io](https://www.cypress.io/) test runner
astone123 marked this conversation as resolved.
Show resolved Hide resolved

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