Lead SDET at @slidoapp, psychology graduate, @Cypress_io ambassador. Instructor at @eggheadio, @TestAutomationU and @Learn2Code_sk. I blog at http://filiphric.com
Component testing in Cypress #4: Passing props into your component
Hey! Nice to be back in your inbox 😃 Welcome to another issue of component testing newsletter.
​
Last time, we have successfully mounted a simple component. But maybe that component was way too simple. Let’s try something more fun. The component I want to test in today’s issue takes properties, that will change how the button is rendered.
<template>
<button class="button">
</button>
</template>
<script setup lang="ts">
defineProps({
buttonText: {
default: 'Save',
type: String,
}
});
</script>
​
In our application, there are multiple places where we call our component like this:
<SaveButton :buttonText="Save changes" />
With Cypress we can test these components in isolation and see how a component like this renders given different attributes. All that’s needed is to mount the component, but this time with passing our own props:
import SaveButton from './SaveButton.vue'
it('SaveButton component', () => {
cy.mount(SaveButton, {
props: {
buttonText: 'Hello world'
}
})
})
Easy, right? We are now ready to test different versions of the button that may appear in our application. And since we are in a Cypress test, we can use Cypress commands too. For example, we can check that the buttonText property it’s actually rendered in our button:
import SaveButton from './SaveButton.vue'
it('SaveButton component', () => {
const buttonText = 'Hello world'
cy.mount(SaveButton, {
props: {
buttonText
}
})
cy.get('button').should('have.text', buttonText)
})
I’ll keep it short and sweet today. Oh but I’m excited to show you more. Slots, spies, states, you name it. In fact, you can find a lesson about passing props and on all of these concepts egghead.io along with the rest of the course.
​
See you next time! 👋
​
Filip Hric
Lead SDET at @slidoapp, psychology graduate, @Cypress_io ambassador. Instructor at @eggheadio, @TestAutomationU and @Learn2Code_sk. I blog at http://filiphric.com
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...
🎉 My new Vue component testing course is out! Link is at the bottom of this email 🎉 Let’s continue from where we last finished. Once you set up your component testing configuration and your cy.mount() command, you are ready to go start testing! So let’s take a look at how this can be done. Where to place component tests With e2e testing, we usually have a dedicated folder where all of our tests are. But with component testing it is better to place your tests right next to your components....
Hey! Welcome to second issue of component testing in Cypress. Let‘s talk about how to set it all up and what’s going on with component testin in Cypress. With Cypress v10 set up of component testing is very simple. Actually, Cypress authors have made a great job making it as simple as possible. Once you open Cypress GUI using npx cypress open command, you will be welcomed by this screen: Framework and bundler Once you choose component testing, Cypress asks you to choose a framework and a...