I'm trying to do some testings for my components which mostly contain element-plus elements. However, when running tests, I'm not able to access to elements in the <template> tag .
From the example below, I'm not able to render the <template #dropdown> in the snapshot:
example.spec.js
import { ElementPlus } from 'element-plus'
import { createI18n } from 'vue-i18n'
import { mount } from '#vue/test-utils'
import store from '#/store/index'
import TTT from '../../../TTT.vue'
const i18n = createI18n({
// vue-i18n options here ...
})
describe('test', () => {
const wrapper = mount(TTT, {
global: {
plugins: [ElementPlus, i18n, store],
},
})
expect(wrapper)
test('snapShot', () => {
expect(wrapper.element).toMatchSnapshot()
})
})
TTT.vue
<template>
<el-dropdown class="me-3" :hide-timeout="0" :show-timeout="0">
<span class="el-dropdown-link h-100">
<a href="#" class="px-4 py-3 text-white font-18" #click.prevent><font-awesome-icon class="font1R6" icon="earth-americas" /></a>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item #click.prevent="handleChangeLanguage(item.value)"> 123 </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
snapshot
exports[`test snapShot 1`] = `
<el-dropdown
class="me-3"
hide-timeout="0"
show-timeout="0"
>
<span
class="el-dropdown-link h-100"
>
<a
class="px-4 py-3 text-white font-18"
href="#"
>
<font-awesome-icon
class="font1R6"
icon="earth-americas"
/>
</a>
</span>
</el-dropdown>
`;
I tried to change the template tag to slot, i.e. <template #dropdown> to <slot name="dropdown">. The content did reflect in snapshot, but some errors showed up on the website.
If anyone knows the solution, please let me know. I'm stuck for days....
The following code fixed the issue:
const wrapper = mount(Component, {
global: {
stubs: {
teleport: { template: '<div />' },
},
},
})
Related
I'm just starting to use VueJS & Tailwind, having never really used anything related to npm before.
I have the below code, making use of Tailwind & Headless UI which through debugging, I know I'm like 99% of the way there... except for the continuous error message
Uncaught ReferenceError: posts is not defined
I know this should be straight forward, but everything I've found either here or with Google hasn't worked. Where am I going wrong?
<template>
<Listbox as="div" v-model="selected">
<ListboxLabel class="">
Country
</ListboxLabel>
<div class="mt-1 relative">
<ListboxButton class="">
<span class="">
<img :src="selected.flag" alt="" class="" />
<span class="">{{ selected.name }}</span>
</span>
<span class="">
<SelectorIcon class="" aria-hidden="true" />
</span>
</ListboxButton>
<transition leave-active-class="" leave-from-class="opacity-100" leave-to-class="opacity-0">
<ListboxOptions class="">
<ListboxOption as="template" v-for="country in posts" :key="country" :value="country" v-slot="{ active, selected }">
<li :class="">
<div class="">
<img :src="country.flag" alt="" class="" />
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
{{ country.latin }}
</span>
</div>
<span v-if="selected" :class="">
<CheckIcon class="" aria-hidden="true" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</template>
<script>
import { ref } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '#headlessui/vue'
import { CheckIcon, SelectorIcon } from '#heroicons/vue/solid'
import axios from 'axios'
export default {
data() {
return {
response: null,
posts: undefined,
};
},
components: {
Listbox,
ListboxButton,
ListboxLabel,
ListboxOption,
ListboxOptions,
CheckIcon,
SelectorIcon,
},
mounted: function() {
axios.get('http://localhost')
.then(response => {
this.posts = response.data;
});
},
setup() {
const selected = ref(posts[30])
return {
selected,
}
},
}
</script>
The offending line is const selected = ref(posts[30]) which I know I need to somehow define posts, but I don't get how?
CAUSE OF YOUR ERROR:
You are trying to access an array element before the array is populated. Thus the undefined error.
EXPLANATION
You are using a mix of composition api and options api. Stick to one.
I am writing this answer assuming you will pick the composition api.
Follow the comments in the below snippet;
<script>
// IMPORT ONMOUNTED HOOK
import { ref, onMounted } from 'vue'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '#headlessui/vue'
import { CheckIcon, SelectorIcon } from '#heroicons/vue/solid'
import axios from 'axios'
export default {
// YOU DO NOT NEED TO DEFINE THE DATA PROPERTY WHEN USING COMPOSITION API
/*data() {
return {
response: null,
posts: undefined,
};
},*/
components: {
Listbox,
ListboxButton,
ListboxLabel,
ListboxOption,
ListboxOptions,
CheckIcon,
SelectorIcon,
},
// YOU DO NOT NEED THESE LIFE CYCLE HOOKS; COMPOSITION API PROVIDES ITS OWN LIFECYCLE HOOKS
/*mounted: function() {
axios.get('http://localhost')
.then(response => {
this.posts = response.data;
});
},*/
setup() {
// YOU ARE TRYING TO ACCESS AN ELEMENT BEFORE THE ARRAY IS POPULATED; THUS THE ERROR
//const selected = ref(posts[30])
const posts = ref(undefined);
const selected = ref(undefined);
onMounted(()=>{
// CALL THE AXIOS METHOD FROM WITHIN THE LIFECYCLE HOOK AND HANDLE THE PROMISE LIKE A BOSS
axios.get('http://localhost')
.then((res) => {
selected.value = res[30];
});
});
return {
selected,
}
},
}
</script>
According to your comment; you should first check if the “selected != null” before using ‘selected’ inside the template. You can use a shorthand version like this
<img :src=“selected?.flag” />
I have a problem rendering icons dynamically. I use v-for to get all the data from the object array. Also, I have a second array where I save the name of the icons I worked with. However, when the first array is looping, the second array (icons) doesn't move.
I tried to create a method that maps the data from the first and second array to create a new array. But nothing happens.
My code:
Component.vue
<template>
<div class="items">
<div class="item" v-for="(param, index) in params" :key="index">
<font-awesome-icon :icon="['fab', 'temp']" :temp="getIcon" :key="index" class="fab fa" />
<h3 class="skills-title">{{ param.name }}.</h3>
<p style="display: none">{{ param.description }}.</p>
</div>
</div>
</template>
<script>
export default {
name: "PxSkillCard",
data() {
return {
params: [],
icons: ["laravel", "wordpress-simple"],
};
},
methods: {
getIcon() {
let temp = this.params.map((aux, index) => {
return [aux, this.icons[index]];
});
},
},
};
</script>
And I separated the fontawesome file in a apart module
fontawesome.js
import Vue from "vue";
import { library } from "#fortawesome/fontawesome-svg-core";
import {
faLaravel,
faWordpressSimple
} from "#fortawesome/free-brands-svg-icons";
import { faPlus } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
library.add(
faLaravel,
faWordpressSimple
);
Vue.component("font-awesome-icon", FontAwesomeIcon);
The final result is:
What about with my code (or my logic)?
You are already looping through everything in your template, there's no need to loop again in your function.
Something like this should work.
<template>
<div class="items">
<div class="item" v-for="(param, index) in params" :key="index">
<font-awesome-icon :icon="['fab', icons[index]]" :key="index" class="fab fa" />
<h3 class="skills-title">{{ param.name }}.</h3>
<p style="display: none">{{ param.description }}.</p>
</div>
</div>
</template>
<script>
export default {
name: "PxSkillCard",
data() {
return {
params: [],
icons: ["laravel", "wordpress-simple"],
};
},
};
</script>
This assume, both arrays are the same size and the data in params and icons are in the correct order.
I am passing array as a prop to another component, and when I want to read this on mounted in that component, I got Proxy {}. How to read data from this prop? You can see in example when I want to console log prop, result is Proxy {}. I can see all values in HTML structure, but not in the console on mounted.
<template>
<div class="custom-select-container">
<div class="selected-item" #click="openSelect">
<span class="selected-items-text">{{ selectedItem.name }}</span>
<span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />
</div>
<transition name="fade">
<ul v-show="options.length && showOptions" class="custom-select-options">
<li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>
</ul>
</transition>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
props: {
options: {
type: Array,
default: () => []
}
},
setup(props) {
let showOptions = ref(false);
let selectedItem = ref(props.options[0])
const openSelect = () => {
showOptions.value = !showOptions.value
}
onMounted(() => {
console.log('test', props.options)
})
return {
openSelect,
showOptions,
selectedItem
}
}
}
</script>
Parent component where I am passing data:
<template>
<div class="page-container">
<div>
<div class="items-title">
<h3>List of categories</h3>
<span>({{ allCategories.length }})</span>
</div>
<div class="items-container">
<div class="item" v-for="(category, index) in allCategories" :key="index">
<span class="item-cell size-xs">{{ index + 1 }}.</span>
<span class="item-cell size-l">{{ category.name }}</span>
</div>
</div>
</div>
<custom-select
:options="allCategories"
/>
</div>
</template>
<script>
import CustomSelect from '../components/Input/CustomSelect'
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
components: {
CustomSelect
},
computed: {
},
setup() {
const store = useStore()
const allCategories = computed(() => store.getters['categories/getAllCategories'])
return {
allCategories
}
}
}
</script>
That's how reactivity works in Vue3.
use
console.log(JSON.parse(JSON.stringify(data))
or
console.log(JSON.stringify(data, null, 2))
to show the content of proxies in console
I am attempting to refactor my code to use vuex. I am getting 2 errors: app.js:81010 [Vue warn]: Error in mounted hook: "ReferenceError: $store is not defined" and ReferenceError: $store is not defined. I think I imported vuex properly.
My goal is to update my bootstrap-vue data-table with the employee data from my database using vuex.
In the EmployeeDataTable.vue file I have a getEmployees method in methods: {} which I would like it to dispatch the fetchAllEmployees action from employees.js. fetchAllEmployees should grab all of the employees from the database and save the result to the employees.js employees: [] state.
I am now confused and need help getting in the right direction to fix this issue.
I don't know if I needed to show all of this code, but I wanted to show the flow of my components.
Entry point App.js:
import Vue from 'vue';
import store from './store';
import router from './router';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import App from './components/App';
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App,
},
router,
store,
});
Vuex Store index.js:
import Vue from 'vue';
import Vuex from 'vuex';
import Employees from './modules/employees';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
Employees,
}
});
Vuex module employees.js:
const state = {
employees: [],
employeesStatus: null,
};
const getters = {
allEmployees: (state) => state.employees
};
const actions = {
fetchAllEmployees({commit, state}) {
commit('setPostsStatus', 'loading');
axios.get('/api/employees')
.then(res => {
commit('employees', res.data);
commit('employeesStatus', 'success');
})
.catch(error => {
commit('setEmployeesStatus', 'error');
});
},
};
const mutations = {
setEmployees(state, employees) {
state.employees = employees;
},
setEmployeesStatus(state, status) {
state.employeesStatus = status;
}
};
export default {
state, getters, actions, mutations,
};
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
DashBoard.vue:
<template>
<div>
<b-container>
<b-row>
<b-col class="col-12 col-sm-12 col-md-5 col-lg-4 col-xl-4">
<b-list-group class="d-flex horiz mx-5">
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component='home'">
<i class="fas fa-home"></i>
<span class="custom-sm-d-none">Home</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'projects'">
<i class="fas fa-project-diagram"></i>
<span class="custom-sm-d-none">Projects</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'employees'">
<i class="fas fa-user"></i>
<span class="custom-sm-d-none">Employees</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'customers'">
<i class="fas fa-users"></i>
<span class="custom-sm-d-none">Customers</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="list-group-item-padding">
<b-link v-on:click="component = 'batch-create-material-list'">
<i class="fas fa-toolbox"></i>
<span class="custom-sm-d-none">Materials</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="">
<b-link v-on:click="component = 'product-list'">
<i class="fas fa-clipboard-list icon-5x"></i>
<span class="custom-sm-d-none">Tasks</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-12 col-md-7 col-lg-8 col-xl-8">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import Home from '../../components/admin/Home';
import Projects from '../../components/admin/Projects';
import Employees from '../../components/admin/Employees';
import Customers from '../../components/admin/Customers'
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'home': Home,
'projects': Projects,
'employees': Employees,
'customers': Customers,
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list',
}
},
}
</script>
<style scoped>
/* small screen below 768px width */
#media only screen and (max-width : 691px) {
.custom-sm-d-none{display:none;}
.horiz {
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 10px;
}
.list-group-item-padding {
margin-right: 10px;
}
}
</style>
Component Employees.vue:
<template>
<div>
<EmployeeDataTable/>
<CreateEmployee />
</div>
</template>
<script>
import EmployeeDataTable from "./EmployeeDataTable"
import CreateEmployee from "./CreateEmployee"
export default {
components: {
EmployeeDataTable,
CreateEmployee,
},
}
</script>
<style scoped>
</style>
Component EmployeeDataTable.vue:
<template>
<div class="overflow-auto pb-3" style="background: white; ">
<b-card
header="Employees"
header-tag="header"
>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="employee-table"
ref="employee-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</b-card>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "EmployeeDataTable",
data() {
return {
perPage: 3,
currentPage: 1,
items: [],
}
},
computed: {
...mapGetters(['allEmployees']),
rows() {
return this.items.length
}
},
methods: {
getEmployees() {
$store.dispatch('fetchAllEmployees').then(() => {
console.log('Dispatched getEmployees method!');
});
}
},
mounted() {
this.getEmployees();
}
}
</script>
Use this.$store instead of $store in the component. Change your API call to:
axios.get('/api/employees')
.then(res => {
commit('setEmployees', res.data);
commit('setEmployeesStatus', 'success');
})
.catch(error => {
commit('setEmployeesStatus', 'error');
});
The difference now is that you're calling the mutation names. In your success commit, you had the state names instead of the mutations.
One common convention people use in Vuex is to name mutations in all caps, and it might help in a situation like this (by making it more obvious if you used a state name instead). You'd rename them to SET_EMPLOYEES and SET_EMPLOYEES_STATUS.
I have a simple situation that I want to render cart-badge based on window width value but it always show the last one even though windowWidth does change the value. Please advise me what to do !
<template v-if="windowWidth>=1024">
<div class="nav-user-account"> {{windowWidth}}
<div class="nav-cart nav-cart-box">
<span class="text hidden-sm">Cart</span>
<span class="cart-number" id="nav-cart-num">{{cartItemCount}}</span>
</div>
</div>
</template>
<template v-if="windowWidth<1024">
<a href="#" style="color:#ff6a00" class="icon-cart">
{{windowWidth}}
<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
<span class="cart-num">2</span>
</a>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
windowWidth: window.innerWidth,
}
},
computed: {
...mapGetters('cart', {
cartItemCount: 'getShoppingCartItemsCount'
})
},
mounted() {
this.$nextTick(() => {
window.addEventListener('resize', () => {
this.windowWidth= window.innerWidth
});
})
},
}
</script>
UPDATED: as Tony19 pointed out, i need a master template outside of these 2 template.
<template>
<div>
<template v-if="windowWidth>=1024">...</template>
<template v-else></template>
</div>
</template>