Most of the documentation for testing Vue seems to be focused on the SPA/Vue-CLI use case. I am adding Vue to an existing Flask/Jinja rendered project. As such, the template for my root Vue instance is defined in the html file. I've been able to test individual components using the methods outlined in vue test utils without a build step. However, most of the logic is defined in the root instance options (i.e. showCondition variable or toggle method below).
Would I need to move the template definition from the html page (as defined inside of #app) to a template string inside of Vue instance options? Or is there a way to just mock the template for testing purposes? Also, interested in hearing approaches others take for testing Vue non Vue-CLI/SPA projects.
I realize the more modern way is to just use Vue for the entire front end. That is probably what I will use for my next project. But I'd like to find a way to add testing to the Vue front end functionality without requiring a full rebuild.
Thanks in advance.
Code is below or see here for JSfiddle
html file
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module" src="static/main.js"></script>
</head>
<body>
<div id="app">
<p v-show="showCondition">Server side generated content, visibility based on vue condition</p>
<button type="button" v-on:click="toggle_message">Toggle</button>
</div>
<p>Server side content outside of vue target div</p>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
showCondition: false,
},
methods: {
toggle_message: function(){
this.showCondition = ! this.showCondition;
},
},
});
Aucun commentaire:
Enregistrer un commentaire