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.

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

chore: update docs to svelte 5 #6028

Merged
merged 2 commits into from
Dec 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions docs/app/component-testing/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ following development servers and frameworks:
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-6 |
| [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 17-19 | Webpack 5 |
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 4 | Vite 4-6 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 4 | Webpack 4-5 |
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 5 | Vite 4-6 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 5 | Webpack 4-5 |

The following integrations are built and maintained by Cypress community members.

Expand Down Expand Up @@ -618,14 +618,10 @@ it('clicking + fires a change event with the incremented value', () => {

```js
it('clicking + fires a change event with the incremented value', () => {
const changeSpy = cy.spy().as('changeSpy')
cy.mount(Stepper).then(({ component }) => {
component.$on('change', changeSpy)
})
const onChangeSpy = cy.spy().as('onChangeSpy')
cy.mount(Stepper, { props: { onChange: onChangeSpy } })
cy.get('[data-cy=increment]').click()
cy.get('@changeSpy').should('have.been.calledWithMatch', {
detail: { count: 1 },
})
cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})
```

Expand Down
18 changes: 8 additions & 10 deletions docs/app/component-testing/svelte/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,11 @@ import { mount } from 'cypress/svelte'
<tr>
<td>Signature</td>
<td>
mount&lt;T extends SvelteComponent&gt;(Component:
SvelteConstructor&lt;T&gt;, options?: MountOptions&lt;T&gt;):
Cypress.Chainable&lt;MountReturn&lt;T&gt;&gt;
mount(Component: Component&lt;Record&lt;string, any&gt;, Record&lt;string,
any&gt;, any&gt;, options?: MountOptions):
Cypress.Chainable&lt;MountReturn&gt;
</td>
</tr>
<tr>
<td>Generic Param T</td>
<td>The component type</td>
</tr>
<tr>
<td>Returns</td>
<td>Cypress.Chainable&lt;MountReturn&gt;</td>
Expand All @@ -44,12 +40,14 @@ import { mount } from 'cypress/svelte'
</thead>
<tr>
<td>component</td>
<td>SvelteConstructor&lt;T&gt;</td>
<td>
Component&lt;Record&lt;string, any&gt;, Record&lt;string, any&gt;, any&gt;
</td>
<td>Svelte component being mounted</td>
</tr>
<tr>
<td>options</td>
<td>MountOptions&lt;T&gt; (optional)</td>
<td>MountOptions (optional)</td>
<td>options to customize the component being mounted</td>
</tr>
</table>
Expand Down Expand Up @@ -117,7 +115,7 @@ Type that the `mount` function yields
</thead>
<tr>
<td>component</td>
<td>T</td>
<td>Record&lt;string, any&gt;</td>
<td></td>
</tr>
</table>
17 changes: 7 additions & 10 deletions docs/app/component-testing/svelte/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,18 @@ it('mounts', () => {

### Testing Event Handlers

To test emitted events from a Svelte component, we can use access the component
instances and use `$on` method to listen to events raised. We can also pass in a
To test emitted events from a Svelte component, we need to pass in a callback
for when we increment the stepper. The Stepper component
will need to invoke this callback for us. We can also pass in a
Cypress spy so we can query the spy later for results. In the example below, we
listen to the `change` event and validate it was called as expected:
pass in the `onChange` callback handler and validate it was called as expected:

```js
it('clicking + fires a change event with the incremented value', () => {
const changeSpy = cy.spy().as('changeSpy')
cy.mount(Stepper).then(({ component }) => {
component.$on('change', changeSpy)
})
const onChangeSpy = cy.spy().as('onChangeSpy')
cy.mount(Stepper, { props: { onChange: onChangeSpy } })
cy.get('[data-cy=increment]').click()
cy.get('@changeSpy').should('have.been.calledWithMatch', {
detail: { count: 1 },
})
cy.get('@onChangeSpy').should('have.been.calledWith', 1)
})
```

Expand Down
6 changes: 3 additions & 3 deletions docs/app/component-testing/svelte/overview.mdx
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 Svelte 4 in a variety of different
Cypress Component Testing supports Svelte 5 in a variety of different
frameworks:

- [Svelte with Vite](#Svelte-with-Vite)
Expand Down Expand Up @@ -93,7 +93,7 @@ bundler.

#### Svelte Vite Sample Apps

- [Svelte 4 Vite 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)
- [Svelte 5 Vite 6 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-vite-ts)

### Svelte with Webpack

Expand Down Expand Up @@ -129,4 +129,4 @@ in manually via the `webpackConfig` option.

#### Svelte Webpack Sample Apps

- [Svelte 4 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)
- [Svelte 5 Webpack 5 with Typescript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts)
8 changes: 4 additions & 4 deletions docs/app/references/migration-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -246,17 +246,17 @@ module.exports = defineConfig({
})
```

### Svelte 3 for Component Testing is no longer supported
### Svelte 3 and 4 for Component Testing are no longer supported

With Cypress 14, Cypress no longer ships the Svelte 3 component testing harness with the Cypress binary.
With Cypress 14, Cypress no longer ships the Svelte 3 and 4 component testing harness with the Cypress binary.

However, if you have not been able to upgrade Svelte and still need the Cypress Svelte 3 test harness, it can be installed independently via version 2.x.x of the [@cypress/svelte](https://www.npmjs.com/package/@cypress/svelte) package.
However, if you have not been able to upgrade Svelte and still need the Cypress Svelte 3 and 4 test harness, it can be installed independently via version 2.x.x of the [@cypress/svelte](https://www.npmjs.com/package/@cypress/svelte) package.

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

Note that this version of the test harness is deprecated and no longer actively supported by Cypress and is intended to serve as a temporary work around until you are able to migrate your project to Svelte 4+. The Cypress launchpad will also warn against Component testing mismatched dependencies, but this will not stop you from running your component tests.
Note that this version of the test harness is deprecated and no longer actively supported by Cypress and is intended to serve as a temporary work around until you are able to migrate your project to Svelte 5+. The Cypress launchpad will also warn against Component testing mismatched dependencies, but this will not stop you from running your component tests.

To update, inside your support file (ex: `./cypress/support/component.(js|ts)`) or wherever your mount function is imported, change

Expand Down