Hey! 👋

Welcome to another part of component testing in Cypress. Today we will take a look into components with slots.

Slots are a powerful way of how we can pass content, template or even a whole another component within your component. In my component called Dropdown.vue, I have a <slot /> element, that will render our dropdown items. Simplified code would look something like this:

<template>
  <div>
    <div>Dropdown items</div>
    <hr>
    <slot />
  </div>
</template>

Passing slots into Cypress is very easy. We can add a property that will render the slot we need. We can confirm everything works as intended by creating the following component test:

import Dropdown from '@/components/common/Dropdown.vue';

it('shows dropdown', () => {
  cy.mount(Dropdown, {
    slots: {
      default: 'Add a new list'
    }
  });

  cy.contains('Add a new list')
      .should('be.visible')
});

See the "Add a new list"? This is what will get rendered as an item in the dropdown component. We confirm that everything works as expected with the Cypress assertion.

But what if instead a text, our component takes another component? In this case, we need to make sure to render the slot by using Vue’s h() function. We can even pass props to this child component as a second argument of this function.It looks something like this:

const dropdownActionItem = () => h(DropdownItem, { itemText: 'Add new list' })

We can then pass this function as a property into our slots attribute, the same way we did with text in the last example. The full test that tests different components rendered within the slots will look something like this:

import Dropdown from '@/components/common/Dropdown.vue';
import DropdownItem from '@/components/common/DropdownItem.vue';
import { h } from 'vue';

const dropdownActionItem = () => h(DropdownItem, { itemText: 'Add new list' })
const dropdownCloseItem = () => h(DropdownItem, { itemText: 'Delete list', warning: true })

it('shows dropdown', () => {
  cy.mount(Dropdown, {
    slots: {
      default: [dropdownActionItem, dropdownCloseItem],
    }
  });

  cy.contains('Add new list')
    .should('be.visible')

  cy.contains('Delete list')
    .should('be.visible')
    .and('have.class', 'warning')

  cy.get('[data-cy=dropdown-item]')
    .should('have.length', 2)
    
});

This test will render two subcomponents, one with a "warning" styling passed as a prop. Then we make an assertion on component styling and rendering.

This is a great way of testing components that are usually coupled together and see that they work properly.

That’s it, see you next time! 👋

​

​

​

​

​

​

​

​