Skip to content

Commit

Permalink
chore: remove vue 2 docs from component testing as it is no longer su…
Browse files Browse the repository at this point in the history 
…pported in Cypress v14
  • Loading branch information
@AtofStryker
AtofStryker committed Nov 3, 2024
1 parent 369a79e commit 809e98d
Show file tree
Hide file tree
Showing 7 changed files with 6 additions and 264 deletions.
28 changes: 1 addition & 27 deletions docs/api/commands/mount.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,33 +49,7 @@ Cypress.Commands.add('mount', (component, options) => {
```

</TabItem>
<TabItem value='Vue 2'>

```js
import { mount } from 'cypress/vue2'

Cypress.Commands.add('mount', (component, options = {}) => {
// Setup options object
options.extensions = options.extensions || {}
options.extensions.plugins = options.extensions.plugins || []
options.extensions.components = options.extensions.components || {}

/* Add any global plugins */
// options.extensions.plugins.push({
// install(app) {
// app.use(MyPlugin);
// },
// });

/* Add any global components */
// options.extensions.components['Button'] = Button;

return mount(component, options)
})
```

</TabItem>
<TabItem value='Vue 3'>
<TabItem value='Vue'>

```js
import { mount } from 'cypress/vue'
Expand Down
6 changes: 3 additions & 3 deletions docs/app/component-testing/get-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ following development servers and frameworks:
| [Next.js 10-14](/app/component-testing/react/overview#Nextjs) | React 16-18 | Webpack 5 |
| [React with Vite](/app/component-testing/react/overview#React-with-Vite) | React 16-18 | Vite 4-5 |
| [React with Webpack](/app/component-testing/react/overview#React-with-Webpack) | React 16-18 | Webpack 4-5 |
| [Vue CLI 4-5](/app/component-testing/vue/overview#Vue-CLI) | Vue 2-3 | Webpack 4-5 |
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 2-3 | Vite 4-5 |
| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 2-3 | Webpack 4-5 |
| [Vue CLI 4-5](/app/component-testing/vue/overview#Vue-CLI) | Vue 3 | Webpack 4-5 |
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-5 |
| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 4-5 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 13-18 | Webpack 5 |
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 3-4 | Vite 4-5 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 3-4 | Webpack 4-5 |
Expand Down
7 changes: 1 addition & 6 deletions docs/app/component-testing/vue/api.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@ sidebar_label: API
### mount

```js
// Vue 3
import { mount } from 'cypress/vue'

// Vue 2
import { mount } from 'cypress/vue2'
```

<table class="api-table table-list">
Expand Down Expand Up @@ -59,8 +55,7 @@ import { mount } from 'cypress/vue2'
### MountOptions

([Vue 3 MountingOptions](https://test-utils.vuejs.org/api/#mount) or
[Vue 2 MountingOptions](https://v1.test-utils.vuejs.org/api/options.html)) from
[Vue Test Utils](https://test-utils.vuejs.org/)
[Vue Test Utils](https://test-utils.vuejs.org/))

### MountReturn

Expand Down
215 changes: 0 additions & 215 deletions docs/app/component-testing/vue/examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@ it('mounts', () => {

You can pass props and events to a component by setting `props` in the options:

<Tabs>
<TabItem value="Vue 3">

```js
cy.mount(Stepper, {
props: {
Expand All @@ -46,20 +43,6 @@ cy.mount(Stepper, {
})
```

</TabItem>
<TabItem value="Vue 2">

```js
cy.mount(Stepper, {
propsData: {
initial: 100,
},
})
```

</TabItem>
</Tabs>

### Testing Event Handlers

Pass a Cypress [spy](/app/guides/stubs-spies-and-clocks#Spies) to an event
Expand Down Expand Up @@ -496,8 +479,6 @@ Cypress.Commands.add('mount', (component, ...args) => {
To use Vue Router, create a command to register the plugin and pass in a custom
implementation of the router via the options param.

#### Vue 3

<Tabs>
<TabItem value="cypress/support/component.js">

Expand Down Expand Up @@ -598,95 +579,11 @@ promise's resolve before it continues with other commands:
</TabItem>
</Tabs>

#### Vue 2

<Tabs>
<TabItem value="cypress/support/component.js">

```js
import { mount } from 'cypress/vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
import { router } from '../../src/router'

Cypress.Commands.add('mount', (component, options = {}) => {
// Add the VueRouter plugin
Vue.use(VueRouter)

// Use the router passed in via options,
// or the default one if not provided
options.router = options.router || router

return mount(component, options)
})
```

</TabItem>
<TabItem value="Typings">

```ts
import { mount } from 'cypress/vue'
import VueRouter from 'vue-router'

type MountParams = Parameters<typeof mount>
type OptionsParam = MountParams[1] & { router?: VueRouter }

declare global {
namespace Cypress {
interface Chainable {
/**
* Helper mount function for Vue Components
* @param component Vue Component or JSX Element to mount
* @param options Options passed to Vue Test Utils
*/
mount(component: any, options?: OptionsParam): Chainable<any>
}
}
}
```

</TabItem>
<TabItem value="Spec Usage">

```js
import VueRouter from 'vue-router'
import Navigation from './Navigation.vue'
import { routes } from '../router'

it('home link should be active when url is "/"', () => {
// No need to pass in custom router as default url is '/'
cy.mount(Navigation)

cy.get('a').contains('Home').should('have.class', 'router-link-active')
})

it('login link should be active when url is "/login"', () => {
// Create a new router instance for each test
const router = new VueRouter({
mode: 'history',
routes,
})

// Change location to `/login`
router.push('/login')

// Pass the already initialized router for use
cy.mount(Navigation, { router })

cy.get('a').contains('Login').should('have.class', 'router-link-active')
})
```

</TabItem>
</Tabs>

### Vuex

To use a component that uses [Vuex](https://vuex.vuejs.org/), create a `mount`
command that configures a Vuex store for your component.

#### Vue 3

<Tabs>
<TabItem value="cypress/support/component.js">

Expand Down Expand Up @@ -778,102 +675,12 @@ it.only('User profile should display user name', () => {
</TabItem>
</Tabs>

#### Vue 2

<Tabs>
<TabItem value="cypress/support/component.js">

```js
import { mount } from 'cypress/vue'
import Vuex from 'vuex'
import { getStore } from '../../src/plugins/store'

Cypress.Commands.add('mount', (component, options = {}) => {
// Setup options object
options.extensions = options.extensions || {}
options.extensions.plugins = options.extensions.plugins || []

// Use store passed in from options, or initialize a new one
options.store = options.store || getStore()

// Add Vuex plugin
options.extensions.plugins.push(Vuex)

return mount(component, options)
})
```

:::info

The `getStore` method is a factory method that initializes Vuex and creates a
new store. It is important that the store be initialized with each new test to
ensure changes to the store don't affect other tests.

:::

</TabItem>
<TabItem value="Typings">

```ts
import { mount } from 'cypress/vue'
import { Store } from 'vuex'

type MountParams = Parameters<typeof mount>
type OptionsParam = MountParams[1]

declare global {
namespace Cypress {
interface Chainable {
/**
* Helper mount function for Vue Components
* @param component Vue Component or JSX Element to mount
* @param options Options passed to Vue Test Utils
*/
mount(
component: any,
options?: OptionsParam & { store?: Store }
): Chainable<any>
}
}
}
```

</TabItem>
<TabItem value="Spec Usage">

```js
import { getStore } from '@/plugins/store'
import UserProfile from './UserProfile.vue'

it.only('User profile should display user name', () => {
const user = { name: 'test person' }

// getStore is a factory method that creates a new store
const store = getStore()

// mutate the store with user
store.commit('setUser', user)

cy.mount(UserProfile, {
store,
})

cy.get('div.name').should('have.text', user.name)
})
```

</TabItem>
</Tabs>

### Global Components

If you have components that are registered globally in the main application
file, set them up in your mount command so your component will render them
properly:

<Tabs>
<TabItem value="Vue 3">

```js
import { mount } from 'cypress/vue'
import Button from '../../src/components/Button.vue'
Expand All @@ -889,25 +696,3 @@ Cypress.Commands.add('mount', (component, options = {}) => {
return mount(component, options)
})
```

</TabItem>
<TabItem value="Vue 2">

```js
import { mount } from 'cypress/vue2'
import Button from '../../src/components/Button.vue'

Cypress.Commands.add('mount', (component, options = {}) => {
// Setup options object
options.extensions = options.extensions || {}
options.extensions.components = options.extensions.components || {}

// Register global components
options.extensions.components['Button'] = Button

return mount(component, options)
})
```

</TabItem>
</Tabs>
3 changes: 1 addition & 2 deletions docs/app/component-testing/vue/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ sidebar_label: Overview

## Framework Support

Cypress Component Testing supports Vue 2+ with the following frameworks:
Cypress Component Testing supports Vue 3+ with the following frameworks:

- [Vue CLI](#Vue-CLI)
- [Vue with Vite](#Vue-with-Vite)
Expand Down Expand Up @@ -99,7 +99,6 @@ for more information.
#### Sample Vue CLI Apps

- [Vue 3 CLI 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-cli5-ts)
- [Vue 2 CLI 4 with JavaScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue2-cli4-js)

### Vue with Vite

Expand Down
4 changes: 0 additions & 4 deletions docs/partials/_import-mount-functions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,7 @@ in your actual browser.
:::

```js
// For Vue 3
import { mount } from 'cypress/vue'

// For Vue 2
import { mount } from 'cypress/vue2'
```

</TabItem>
Expand Down
7 changes: 0 additions & 7 deletions src/data/plugins.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -780,13 +780,6 @@
"keywords": ["component", "vue", "vue.js"],
"badge": "official"
},
{
"name": "Cypress Vue2",
"description": "Test Vue 2 components using Cypress Test Runner. This package is bundled with the cypress package and should not need to be installed separately. See the <a target=\"_blank\" href=\"/app/component-testing/vue/overview\">Vue Component Testing Docs</a> for mounting Vue components.",
"link": "https://github.com/cypress-io/cypress/tree/develop/npm/vue2",
"keywords": ["component", "vue", "vue.js"],
"badge": "official"
},
{
"name": "cypress-angular-unit-test",
"description": "Test Angular component using Cypress Test Runner.",
Expand Down

0 comments on commit 809e98d

Please sign in to comment.