Testing an MEVN Application Chapter 9- Check that the sidebar consists of the Home and Contact page links
- Click on the Contact page
- The contact page should contain the text this is contact
- Click on the login page to make sure that the login works fine
- Add a movie to our application
- Rate the movie
- Finally, add the ability for users to log out of the application
These are the important parts of our application. So, we will need to add an identifier to all
of preceding components. The best practice for adding an identifier to the elements is to
define a class or an id while building the application itself. However, we will assign an
identifier to the now.
In App.vue, update the highlighted parts with the following code:
<template>
<v-app id="inspire">
<v-navigation-drawer
fixed
v-model="drawer"
app
>
<v-list dense>
<router-link v-bind:to="{ name: 'Home' }" class="side_bar_link">
<v-list-tile>
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content id="home">Home</v-list-tile-content>
</v-list-tile>
</router-link>
<router-link v-bind:to="{ name: 'Contact' }" class="side_bar_link">
<v-list-tile>
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content id="contact">Contact</v-list-tile-content>
</v-list-tile>
</router-link>
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon id="drawer" @click.stop="drawer = !drawer"></v-
toolbar-side-icon>