Add more Svelte examples

[bahmutov]

to confirm that all Svelte v3 features are working

List: https://svelte.dev/examples

Should go into cypress/components folder

[Pixcell]

Hi @bahmutov,

First, thank you for your work on this module ! I am in the process of trying to write unit tests for my component, which fetch some data onMount. I believe I have properly stubbed window.fetch, but I still can't get my test to work. Any help would be greatly appreciated:

Component:

<script>
	import { onMount } from 'svelte'
	import Array from './Array.svelte'

	let array = {
		Health: 'optimal'
  }
	let metrics = {
		Arrays: {}
	}

	onMount(async () => {
		const url = 'http://localhost:7447/json'
		const res = await fetch(url)
		metrics = await res.json()
		array = Object.entries(metrics.Arrays)[0][1]
	});
</script>

<style>
  .d-background {
		padding: 0 15px;
		max-width: 1200px;
		margin: auto;
  }
</style>

<div class="d-background">
	<Array {array} />
</div>

Test:

/* global describe, it, cy, Cypress */
import mount from 'cypress-svelte-unit-test'
import App from '/app/dashboard/App.svelte'

Cypress.on('window:before:load', (win) => {
})

describe('Array', () => {
  it('Should mount and display title', () => {
    cy.stub(window, 'fetch', (url) => new Promise((resolve, reject) => resolve({
      json: () => ({
        MyStubbedArray: {
          Health: 'Optimal',
          GUID: 'MyStubbedArray'
        }
      }),
      status: 200
    })))
    mount(App)
    cy.contains('h1', 'MyStubbedArray')
  })
})

Note: the cy.contains('h1', 'MyStubbedArray') is actually looking for a h1 inside the child component because I am not displaying anything relevant in the parent component.

Thank you in advance,

[Pixcell]

EDIT:

I got the test working Test:

/* global describe, it, cy, expect */
import mount from 'cypress-svelte-unit-test'
import App from '/app/dashboard/App.svelte'

describe('App', () => {
  it('Should mount, fetch data and display title', () => {
    // Stub window.fetch to respond with test data
    cy.stub(window, 'fetch', (url) => {
      return new Promise((resolve, reject) => resolve({
        json: () => {
          return new Promise((resolve, reject) => resolve({
            Arrays: {
              MyStubbedArray: {
                Health: 'Optimal',
                GUID: 'MyStubbedArray'
              }
            }
          }))
        },
        status: 200
      }))
    })

    // Mount component, wait for the mount to be completed then assert against fetch and check the html updated properly
    mount(App)
      .then(() => {
        expect(window.fetch).to.be.calledWith('http://localhost:7447/json')
        cy.contains('h1', 'MyStubbedArray')
      })
  })
})

This could be used as a template for async onMount example. The key was to look into the code and see that mount returns a promise and put the assertions in the then

[bahmutov]

@Pixcell from the component itself are you calling now window.fetch or still simply fetch?

[Pixcell]

@bahmutov Still simply fetch, but as the test demonstrate through the expect(window.fetch).to.be.calledWith('http://localhost:7447/json') fetch is just an alias for window.fetch

(If you change the expected value, the test fails)

[matoval]

to confirm that all Svelte v3 features are working

List: https://svelte.dev/examples

Should go into cypress/components folder

How can I contribute to this issue?