Skip to content

Commit

Permalink
chore: update docs to svelte 5
Browse files Browse the repository at this point in the history
  • Loading branch information
AtofStryker committed Dec 5, 2024
1 parent 9889ea3 commit d2e7999
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 36 deletions.
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 is 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

0 comments on commit d2e7999

Please sign in to comment.