Unable to get jest working with route on Vue 2.7.14 #682
-
Ziggy version1.6.2 Laravel version9.52.16 DescriptionHi, I got a very simple test, but I'm unable to make it work, it constantly says that the Here's my test and my last try. import { createLocalVue, mount } from '@vue/test-utils'
import AdgemButton from '@/Components/Common/AdgemButton.vue';
import TableConfigurationModal from '@/Components/Modal/TableConfigurationModal.vue';
import { ZiggyVue } from 'ziggyvue';
import { Ziggy } from '../../../../resources/js/ziggy';
const localVue = createLocalVue()
localVue.use(ZiggyVue, Ziggy.routes)
test('adgem button is succesfully rendered with clasess', () => {
const wrapper = mount(TableConfigurationModal, {
localVue,
})
expect(wrapper.text()).toContain('Hello world')
})Here's my // jest.config.js
module.exports = {
"roots": [
"<rootDir>/tests/Vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/resources/js/$1",
"axios": "axios/dist/node/axios.cjs",
"^ziggyvue$": "<rootDir>/vendor/tightenco/ziggy/dist/vue",
},
"moduleFileExtensions": [ 'js', 'json', 'vue' ],
"setupFilesAfterEnv": [
"<rootDir>tests/Vue/setup.js"
],
"testEnvironment": "jsdom",
}And here's the trace of the error: Details
adgem button is succesfully rendered with clasess Ziggy call and contextJest tests are failing on the route helper.Ziggy configurationNot able to print this infoRoute definitionNot a route issue |
Beta Was this translation helpful? Give feedback.
Answered by
bakerkretzmar
Oct 19, 2023
Replies: 1 comment 3 replies
-
|
Can you share the contents of your There's one problem in your test setup but I don't think it's related—you need to pass the whole - localVue.use(ZiggyVue, Ziggy.routes)
+ localVue.use(ZiggyVue, Ziggy) |
Beta Was this translation helpful? Give feedback.
3 replies
-
|
I tried sending the whole Ziggy but it stills failing. Here's my <template>
<div>
<jet-dialog-modal :show="show" class="h-screen overflow-visible" max-width="xl" overflow="visible" @close="close">
<template #title>
<div class="flex justify-between pb-1">
<p class="font-bold">Table Configuration</p>
<div>
<a class="mr-1 cursor-pointer" @click="close()">
<font-awesome-icon icon="close" />
</a>
</div>
</div>
<hr class="mt-4" />
</template>
<template #content>
<div class="mb-4">
<p class="text-sm italic leading-tight select-none"
title="Double click on a field to move it to the other column.
Click on a field to select it.
Click on the single arrows to move selected.
Click on the double arrows to move all.">
<font-awesome-icon icon="circle-info"/>
Select the fields you want to display in the table.
</p>
</div>
<div class="flex flex-row items-center">
<div class="w-5/12 border border-solid">
<div class="text-center border-b border-solid">
Available Fields
</div>
<div class="h-64 overflow-y-scroll">
<div v-for="(field, index) in availableFields" :key="index"
class="p-1 text-sm tracking-wide uppercase border-t border-solid cursor-pointer select-none text-bold hover:bg-purple-200"
:class="{ 'bg-purple-200': field.selected }" @dblclick="moveRight(index)"
v-on:click="toggleSelected(index)">
{{ field.label }}
</div>
</div>
</div>
<div class="flex flex-col w-2/12">
<button title="Select All" @click="moveAllRight">
<font-awesome-icon icon="angles-right" />
</button>
<button title="Move Selected" @click="groupMoveRight" class="mb-3">
<font-awesome-icon icon="chevron-right" />
</button>
<button title="Discard Selected" @click="groupMoveLeft">
<font-awesome-icon icon="chevron-left" />
</button>
<button title="Discard All" @click="moveAllLeft">
<font-awesome-icon icon="angles-left" />
</button>
</div>
<div class="w-5/12 border border-solid">
<div class="text-center border-b border-solid">
Selected Fields
</div>
<div class="h-64 overflow-y-scroll">
<div v-for="(field, index) in selectedFields" :key="index"
class="p-1 text-sm tracking-wide uppercase border-t border-solid cursor-pointer select-none text-bold hover:bg-purple-200"
:class="{ 'bg-purple-200': field.selected }" @dblclick="moveLeft(index)"
v-on:click="toggleSelected(index)">
{{ field.label }}
</div>
</div>
</div>
</div>
</template>
<template #footer>
<div class="grid" :class="{ 'grid-cols-3 gap-4': id }">
<div v-if="id != null">
<adgem-button button-type="black" @click="deleteModal">
Delete current
</adgem-button>
</div>
<div class="col-span-2">
<adgem-button button-type="purple" @click="save">
Save
</adgem-button>
</div>
</div>
</template>
</jet-dialog-modal>
<confirmation-modal :show="showDeleteModal" @close="showDeleteModal = false" @confirm="deleteConfiguration">
<template v-slot:modal-content>
<div class="py-7">
This action will your current table fields configuration. The default table configuration will be used
instead.
</div>
</template>
</confirmation-modal>
</div>
</template>
<script>
import JetDialogModal from "@/Jetstream/DialogModal.vue";
import AdgemButton from "@/Components/Common/AdgemButton.vue";
import ConfirmationModal from '@/Components/Modal/ConfirmationModal.vue';
import axios from "axios";
export default {
components: {
JetDialogModal,
AdgemButton,
ConfirmationModal,
},
props: {
show: Boolean,
},
data() {
return {
availableFields: {},
selectedFields: {},
showDeleteModal: false,
id: null,
};
},
mounted() {
axios.get(route("case-list-fields.index")).then((res) => {
// Transform availableFields
this.availableFields = Object.keys(res.data.availableFields).reduce((acc, key) => {
acc[key] = { label: res.data.availableFields[key], selected: false };
return acc;
}, {});
// Transform selectedFields (if not provided, default to an empty object)
this.selectedFields = res.data.selectedFields
? Object.keys(res.data.selectedFields).reduce((acc, key) => {
acc[key] = { label: res.data.selectedFields[key], selected: false };
return acc;
}, {})
: {};
this.id = res.data.id ?? null;
});
},
methods: {
moveRight(index) {
this.$set(this.availableFields[index], 'selected', false)
this.selectedFields = {
...this.selectedFields,
[index]: this.availableFields[index],
};
delete this.availableFields[index];
},
moveLeft(index) {
this.$set(this.selectedFields[index], 'selected', false)
this.availableFields = {
...this.availableFields,
[index]: this.selectedFields[index],
};
delete this.selectedFields[index];
},
moveAllRight() {
for (const fieldIndex in this.availableFields) {
this.availableFields[fieldIndex].selected = false;
}
this.selectedFields = {
...this.selectedFields,
...this.availableFields,
};
this.availableFields = {};
},
moveAllLeft() {
for (const fieldIndex in this.selectedFields) {
this.selectedFields[fieldIndex].selected = false;
}
this.availableFields = {
...this.availableFields,
...this.selectedFields,
};
this.selectedFields = {};
},
toggleSelected(fieldIndex) {
if (this.availableFields[fieldIndex]) {
this.$set(this.availableFields[fieldIndex], 'selected', !this.availableFields[fieldIndex].selected);
} else if (this.selectedFields[fieldIndex]) {
this.$set(this.selectedFields[fieldIndex], 'selected', !this.selectedFields[fieldIndex].selected);
}
},
groupMoveRight() {
for (const field in this.availableFields) {
if (this.availableFields[field].selected) {
this.moveRight(field);
}
}
},
groupMoveLeft() {
for (const field in this.selectedFields) {
if (this.selectedFields[field].selected) {
this.moveLeft(field);
}
}
},
close() {
this.$root.$emit("table-configuration-modal:close");
},
save() {
axios
.post(route("view-configurations.store"), {
view_configuration: Object.keys(this.selectedFields),
view_name: "Default",
})
.then((res) => {
if (res.status === 201) {
sessionStorage.setItem(
"flash",
JSON.stringify({
banner: res.data.message,
bannerStyle: "success",
bannerShow: true,
}),
);
this.$root.$emit("table-configuration-modal:save");
}
})
.catch((err) => {
this.$root.$emit(
"flash-message",
JSON.stringify({
banner: err.response.data.message,
bannerStyle: "danger",
bannerShow: true,
}),
);
this.close();
});
},
deleteModal() {
this.showDeleteModal = true;
},
deleteConfiguration() {
axios
.delete(route("view-configurations.destroy", this.id))
.then((res) => {
if (res.status === 200) {
sessionStorage.setItem(
"flash",
JSON.stringify({
banner: res.data.message,
bannerStyle: "success",
bannerShow: true,
}),
);
this.$root.$emit("table-configuration-modal:save");
}
})
.catch((err) => {
this.$root.$emit(
"flash-message",
JSON.stringify({
banner: err.response.data.message,
bannerStyle: "danger",
bannerShow: true,
}),
);
this.close();
});
},
},
};
</script> |
Beta Was this translation helpful? Give feedback.
-
|
Within the |
Beta Was this translation helpful? Give feedback.
Answer selected by
danielsballes
-
|
Thanks! You're a life savior |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Within the
<script>tags of your Vue components the route function is available as a mixin, so it'sthis.route()not justroute(). That should fix this but let me know if it doesn't!