vendredi 20 mars 2020

Testing svelte components that use slots

I am using Testing Library as part of a svelte app and on the whole it's working very well. However I have a component that takes an array as a prop, filters it with an input and then passes the filtered array on to a slot. I would like to test that the slot receives the correctly filtered array. I'm thinking that setting up a dummy slot would be the way to go and then simply use getByText to make sure only the correct elements are in the page.

Component code:

<script>
  export let list = [{ name: 'Adam' }];

  let filter = "";

  $: filteredList = list.filter(({ name }) => name.includes(filter));
</script>

<span class="wrapper">
  <input
    bind:value={filter}
    name={fieldName}
    type="search" />
</span>
<slot {filteredList} />

Aucun commentaire:

Enregistrer un commentaire