13. End-to-End Testing

Activity 13.01: Adding the Ability to Set a User's Email and Tests

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/2IZP4To.

1. In order to keep track of the email, we'll set it as a piece of reactive state in data() and add an email type input to the page, which will be two-way bound to email using v-model. We also add a label and the corresponding markup. Note that we'll have a data-test-id attribute on the email input set to "email-input":

   <template>
     <div id="app" class="p-10">
       <div class="flex flex-col">
         <!-- rest of template -->
         <div class="flex flex-col mx-auto mb-4">
           <label
       ...