Testing slots?

[bestguy]

Perhaps this is more svelte API question, but it's not clear how to test component slots, for example:

Badge.svelte:

<span class="badge">
  <slot />
</span>

Badge.spec.js:

describe('Badge', () => {
  test('should render text', () => {
   // Where to pass child text?
    const { container } = render(Badge, { props: { color: 'primary' } }); 
  });
});

Looking for default slots primarily, and do not want to add props for this.

[ematipico]

Yes it's more a svelte API question that should be redirected to their repository.

Anyway:

import Button from './Button.svelte';

const { container } = render(Badge, { props: { color: 'primary' }, slots: { default: Button } }); 

[oieduardorabelo]

afaik is still wip, there's no way to declare slots from the Component API, see:

• Option to set slots when create component instance sveltejs/svelte#2588
• add slots option to component constructor options object sveltejs/svelte#2684

we could patch the workaround until it is merged to the main api, what do you think?

something like:

import Badge from './Badge.svelte';
import Button from './Button.svelte';

const { container } = render(
  Badge, 
  { props: { color: 'primary' } }, // component props
  { slots: { default: Button } } // component ctx
);

ping @benmonro @EmilTholin

[benmonro]

2684 looks like it would work and I'm of the opinion that we should wait for that to be merged but I'll defer to @EmilTholin

[EmilTholin]

I agree with the rest of you that it's a Svelte API issue and that 2684 will resolve it.

In the meantime you could do the less than ideal solution of creating a test-specific component that renders Badge with a Button child component.

<!-- TestBadgeSlot.svelte -->
<Badge>
  <Button />
</Badge>

// Badge.test.js
import TestBadgeSlot from './TestBadgeSlot.svelte';

const { container } = render(
  TestBadgeSlot, 
  { props: { color: 'primary' } }
);

[bestguy]

Thanks for the info, I'll wait until sveltejs/svelte#2684 is merged.
Feel free to close this if you prefer, or open if you'd like to track status.

If by chance it's not merged for some reason a patch in this lib would be very useful 🙏

[benmonro]

Closing for now not feel free to reopen if that doesn't get merged in svelte

[tlux]

The mentioned issue (sveltejs/svelte#268) has been closed in favor of another refactoring in the svelte repo (which is still open!). Are there any news on how slots can be tested?

[oieduardorabelo]

the new pr to svelte api is still open: sveltejs/svelte#4296

this suggestion still stands: #48 (comment)

[bestguy]

If it helps, I worked around this by adding an optional children prop ala React:

https://github.com/bestguy/sveltestrap/blob/master/src/Alert.svelte#L37
that will conditionally render the slot unless children is passed.

Allows testing like:
https://github.com/bestguy/sveltestrap/blob/master/src/__test__/Alert.spec.js#L8

Not perfect 🤷‍♂️ but helps until there is a better option

[cbbfcd]

wait for the pr merged.

[gyurielf]

Still actual.

[brettinternet]

Should this be reopened until sveltejs/svelte#4296 is merged?

[Akolyte01]

It has been a year with no movement on that svelte PR. Can we open this again?

[benmonro]

Sure