Closed
Description
I use typescript and vue-class-component on vue3. when I want to change the component data I will get an error:
await wrapper.setData({ showNextButton: true });
// TypeError: Cannot add property showNextButton, object is not extensibleThis is the component:
import { Vue, Options, prop } from "vue-class-component";
import { QuizMode } from "@/common/models/config";
import MarkdownComponent from "@/common/components/layout/Markdown.vue";
import ButtonCheckComponent from "./ButtonCheck.vue";
type SubmitFunction = (configNumber?: number) => Promise<boolean>;
class Props {
text = prop<string>({ required: true });
subtext = prop<string>({ default: "" });
type = prop<"multiple_choice" | "info">({ required: true });
submitFunction = prop<SubmitFunction>({ required: true });
}
@Options({
components: {
MarkdownComponent,
ButtonCheckComponent,
},
inject: ["quiz_mode", "staging", "staging_message"],
emits: ["next"],
})
export default class ConfigQuestion extends Vue.with(Props) {
quiz_mode!: QuizMode;
staging!: boolean;
staging_message!: string;
checking = false;
disabledCheckButton = false;
disabledNextButton = false;
status: string | null = null;
showNextButton = false;
check(configNumber?: number) {
this.checking = true;
this.disabledCheckButton = true;
this.submitFunction(configNumber)
.then((success) => {
this.status = success ? "correct" : "wrong";
this.showNextButton = true;
console.log('showNextButton', this.showNextButton);
})
.finally(() => {
this.checking = false;
});
}
next() {
if (this.disabledNextButton) return;
this.disabledNextButton = true;
this.$emit("next");
}
}And this is the test script:
import { expect } from 'chai';
import { shallowMount, mount, VueWrapper, flushPromises } from '@vue/test-utils';
import ConfigQuestionComponent from '@/modules/lab/components/ConfigQuestion.vue';
import { ComponentPublicInstance, nextTick } from 'vue';
describe("Lab Config Component", () => {
let is_submitFUnctionRun = false;
let wrapper: VueWrapper<ComponentPublicInstance>;
before(() => {
wrapper = shallowMount(ConfigQuestionComponent, {
props: {
text: "This is a config question",
subtext: "this is a subline",
type: "info",
submitFunction: () => new Promise<boolean>(() => {
is_submitFUnctionRun = true;
return is_submitFUnctionRun;
}),
},
global: {
provide: {
quiz_mode: 'Lab',
staging: false,
staging_message: '',
}
}
});
})
it("Expect to emit next event", async () => {
await wrapper.setData({ showNextButton: true });
//expect(wrapper.find('#next').exists()).eq(true)
})
})