We have the following vue.js component and the goal is to test article.title if it's working properly.
We have the test Class Gridcard.spec.js for using jest for testing.
the Data() that are passed from the Backend from the
class Article has the following attributes
**article.id** **article.title** **article.text** **article.points**
<template>
<div class="col" v-for= " article in articles" v-bind:key= "article.lid" >
<h5 class="card-title"> {{ article.title }}</h5>
</div>
</template>
<script>
export default {
name: 'Gridcard',
props: {
title: String
},
components: { },
data () {
return {
articles: [],
}
},
methods: {
mounted () {
const base = process.env.VUE_APP_BACKEND_BASE_URL + '/api/v1/article'
const requestOptions = {
method: 'GET',
redirect: 'follow'
}
fetch(base, requestOptions)
.then(response => response.json())
.then(result => result.forEach(article=> {
this.articles.push(article)
}))
.catch(error => console.log('error', error))
}
}
</script>
<style scoped>
</style>