I am using avoriaz for testing in vuejs . Here is my code for testing and components.
<template>
<v-container fluid class="login-container">
<div class="hyperlogo">
<center>
<img src='../../../assets/logo.png' height="100" width="100">
<p>HyperEmail</p>
<a>v0.11.1</a>
</center>
</div>
<v-layout row wrap>
<v-flex xs6 md4 offset-md4>
<v-card class="login-card">
<v-card-text class="login-text">
<v-text-field
v-on:focus="focusUser"
label="Username"
placeholder="Username"
class="mt-5"
v-model="username"
#keyup.enter.native="validateData"
v-bind:rules="[userNameError]"
></v-text-field>
<v-text-field
v-on:focus="focusPassword"
label="Password"
placeholder="Password"
v-model="password"
type="password"
v-on:keyup.enter.native="validateData"
v-bind:rules="[passwordError]"
></v-text-field>
</v-card-text>
<div #click="validateData" class="button-style">
<v-btn block primary light >Login</v-btn>
</div>
</v-card>
</v-flex>
<Error v-if="error" :text="error.msg" :onDestroy="resetError" />
</v-layout>
</v-container>
</template>
For testing
import Login from '#/containers/views/login/Login.vue'
describe('Login.vue', () => {
it('checks text inside login component', () => {
const wrapper = mount(Login)
// let parent = wrapper.find('.hyperlogo')[0]
// expect(wrapper.contains('.hyperlogo')).to.equal(true)
if (wrapper.find('.hyperlogo')[0]) {
console.log('Yes it is there')
}
expect(wrapper.text()).to.equal('')
expect(wrapper.find('center')[0].is('center')).to.equal(true)
})
})
Here wrapper.find is not working
Error : - TypeError: Cannot read property 'is' of undefined .. Can anyone helps me to solve this type of error ??
Related
I want to update dropdown list. Here is my dropdown
<div v-for="(field, key) in config" :key="key">
<div>
<v-row>
<v-col cols="1">
<div class="mt-4 ml-3">
</div>
</v-col>
<v-col cols="5">
<v-autocomplete
dense
:items="items[key]"
item-text="description"
item-value="id"
no-filter
return-object
single-line
#change="(event) => updateData(event, key)"
#click="click()"
>
</v-autocomplete>
</v-col>
</v-row>
</div>
</div>
methods: {
updateData(value, index) {
getReport(this.id, this.param).then((res) => {
this.items[index] = res.data.data;
});
},
},
and my code. How can I update the this.items[index]. Is this way correct ? It does not update this.items.
Try to avoid this reactivity issue by using this.$set helper :
this.$set(this.items,index,res.data.data);
So I want to bind batch_code data from dashboard.vue parent to review.vue child component
so, the dashboard contains details like the batch_code, then I have trouble passing the data to the review component, of which it will get the batch_code upon clicking the "Rate and Review" button
when I did try, I am just getting null values from returning said data. any suggestions?
dashboard.vue
<template>
<div>
<v-col cols="10" class="mx-auto">
<v-card class="pa-4" outlined>
<v-card-title class="pb-0 pt-2">Dashbard</v-card-title>
<div v-if="checkifEmpty()">
<v-row>
<v-col
v-for="item in myBatch.all_batch"
:key="item.batch_code"
cols="6"
>
<v-card class="ma-2" outlined>
<div class="d-flex">
<v-avatar class="ma-3" size="150" tile>
<v-img :src="item.image"></v-img>
</v-avatar>
<div>
<v-card-title class="pb-0 pt-2"
>{{ item.offer }} ({{ item.level }})</v-card-title
>
<v-card-text>
<div class="mt-0">{{ item.techer_name }}</div>
<div class="mt-0">{{ item.batch_name }}</div>
<div class="Heading 6 pb-0">
{{ item.start_date }} -
{{ item.end_date }}
</div>
<div class="subtitle-1 pb-0">{{ item.type }}</div>
</v-card-text>
</div>
<v-btn elevation="3" v-on:click="openReviewDialog"
>Rate and Review!</v-btn
>
</div>
</v-card>
</v-col>
</v-row>
</div>
<div v-else>
<v-card-text class="pb-0 pt-2"
>You have no enrolled offers</v-card-text
>
</div>
</v-card>
</v-col>
<review />
</div>
</template>
<script>
import store from "../../store/index";
import review from "./review"
export default {
name: "Dashboard",
components:{
review,
},
computed: {
myBatch() {
return store.getters.getMyOffers;
},
},
methods: {
checkifEmpty() {
let batch = this.myBatch;
if (batch == null || batch.all_batch.length == 0) {
return false;
} else {
return true;
}
},
openReviewDialog() {
this.$store.dispatch("setreviewDialog");
this.sidebarFront = false;
}
},
};
</script>
<style>
</style>
review.vue
<template>
<v-row justify="center">
<v-dialog v-model="reviewDialog" persistent max-width="900px">
<v-card>
<v-card-title class="justify-center">
<span class="headline font-weight-bold"
>Rate and Review this Course!</span
>
</v-card-title>
<v-card-text>
<v-container fluid>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-form
ref="userReview"
v-model="userReviewForm"
lazy-validation
>
<v-text-field
rounded
outlined
v-model="subject"
label="Subject"
required
></v-text-field>
<v-text-field
rounded
outlined
v-model="batch_code"
label="batch_code"
readonly
></v-text-field>
<v-textarea
rounded
outlined
v-model="review"
counter="250"
label="Review"
required
></v-textarea>
<v-rating v-model="rating">
<template v-slot:item="props">
<v-icon
:color="props.isFilled ? 'orange lighten-1' : 'grey lighten-1'"
size = "30"
#click="handleRatingChange(props)">mdi-star</v-icon>
</template>
</v-rating>
<div>
<v-btn
:loading="loginLoader"
large
block
rounded
elevation="0"
color="primary"
#click="submit"
>
Submit
</v-btn>
</div>
</v-form>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<div class="close"> <v-btn color="error" text #click="closeReviewDialog()"> Close </v-btn></div>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import store from "../../store/index";
export default {
props: {
item:{
batch_code: null;
}
},
name: "review",
data() {
return {
getters: store.getters,
rating: null
};
},
computed: {
reviewDialog: function () {
return this.getters.getreviewDialog;
},
},
methods: {
closeReviewDialog: function () {
//this.show = false;
//this.$refs.card.hide();
//store.dispatch("removeLoginError");
store.dispatch("setreviewDialog");
},
handleRatingChange(props){
console.log(props.index + 1)
this.rating = props.index +1
}
},
};
</script>
'''
p.s: i don't know if it's different when calling props for a component than to a dialog box.
just update your code like below tips,
openReviewDialog() {
this.$store.dispatch("setreviewDialog", **your_rating_data**);
this.sidebarFront = false;
}
so update your dispatch/action accordingly in store.
and when loading your form just pull data from the store using getter and show on dialog.
I am creating a form inside a Vue component using Vue.js & Vuetify but the list of schools I want to display in the autocomplete box are missing. I have included them as an array in the data function in the component but they are not showing up and the following error is thrown in the console.
[Vuetify] Unable to locate target [data-app]
<template>
<div class="app">
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
name: "signup",
data: function() {
return {
showPassword: false,
schools: [
"Ipswich High School",
"Northgate High School",
"Kesgrave",
"Ipswich Academy"
]
};
}
};
</script>
For Vuetify to work, you need to wrap all of your content into a <v-app> component. The error tells you that you're missing this component.
<template>
<div class="app">
<v-app>
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
</template>
The functionality of the component will not work properly unless the form is contained within a <v-app></v-app> wrapper
I'm starting to use vuetify along with a 'payment gateway' that I'm learning, but I've had a little problem.
If I have a form like this:
<form #submit.prevent="continuar" id="customer-form">
<div class="card-errors"></div>
<div class="form-group">
<label>Nombre del usuario de tarjeta</label>
<input type="text" data-epayco="card[name]">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" data-epayco="card[email]">
</div>
...
<button type="submit">¡Pagar ahora!</button>
</form>
The "Token" parameter returns a value that is not undefined.
continuar(event){
ePayco.token.create(event.target, (error, token) => {
if(!error) {
console.log("token: " + token)
} else {
console.log(error)
}
})
},
But when I use vuetify the "Token" parameter returns "undefined" even when the "Epayco" library shows a message that everything has happened correctly.
<form id="customer-form" #submit.prevent="continuar">
<div class="card-errors"></div>
<v-layout row align-center>
<v-flex md3 offset-md1 class="mr-3">
<v-layout justify-end>
<span>Nombre en la tarjeta*</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco="card[name]"/>
</v-flex>
</v-layout>
<v-layout row align-center>
<v-flex md3 offset-md1 class="mr-3">
<v-layout justify-end>
<span>Email</span>
</v-layout>
</v-flex>
<v-flex md4>
<v-text-field data-epayco="card[email]"/>
</v-flex>
</v-layout>
......
<v-layout class="my-3" justify-center>
<v-btn type="submit">Pagar</v-btn>
</v-layout>
</form>
Does anyone know why the problem?
It should be noted that when an error occurs the parameter 'error' returns the error and not undefined
According to the example here it appears you should be using the ePayco.token.create() function a bit differently.
epayco.token.create(paymentDetails)
.then(function(token) {
console.log(token);
})
.catch(function(err) {
console.log("err: " + err);
});
I'm seeing lots of documentation for client-side validation with Vuetify, but finding it very difficult to find docs for server side validation messages for vuetify and vue.
PROBLEM
I have this component:
<template>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-text>
<v-container>
<h3>Register Now</h3>
<form v-on:submit.prevent="onSubmit">
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
type="email"
ref="user_email"
id="email">
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
label="Password"
type="password"
ref="user_password"
id="password">
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn type="submit">Sign Up</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import axios from 'axios'
import router from 'vue-router'
export default {
data() {
return {
errors: [],
}
},
methods: {
onSubmit: function () {
axios.post('/users', {
user: {
email: this.$refs.user_email.value,
password: this.$refs.user_password.value
}
})
.then(response => {
})
.catch(error => {
this.errors.push(error.response.data.errors);
})
}
}
}
</script>
It basically collects errors that come back from the server. Those are the error messages I want to show if something goes wrong.
EXAMPLE:
If the email is blank, this will capture the "email_is_blank" message with the errors array. But how can I take that message and display it in the form using Vue.js and Vuetify?
Codepen example
One of the ways would be to create object with value and error string:
data: () => ({
email: {
value: '',
error: ''
}
})
Then bind your model to object value, and error-messages prop to object error:
<v-text-field
v-model="email.value"
label="email"
:error-messages="email.error"
></v-text-field>
In your response just change the value of error:
...
.then(response => {
this.email.error = response.errors.email // or whatever the path is to the relevant error message from the server
})