Class Component issues

[navidshad]

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 extensible

This 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)
	})
})

[CristianoGil]

+1

[spencermtheodo]

+1

[vjself]

+1

[mike-merilaht]

+1

[lmiller1990]

Thanks for the bug report. I am not even sure if this is something we can fix without modifying Vue Class Component.

For anyone following/waiting on a fix: happy to accept a PR, but I won't be able to prioritise this issue in the near future. The class component appears not to be actively maintained, and is not generally recommended by Evan: vuejs/core#4744 (comment)

If you feel strongly about this, I can help review or give you some pointers. Isolating the issue is probably not hard;

• setData: https://github.com/vuejs/vue-test-utils-next/blob/2700e88351fe9853288f974b9d0469f6084380d7/src/vueWrapper.ts#L227
• calls mergeDeep: https://github.com/vuejs/vue-test-utils-next/blob/2700e88351fe9853288f974b9d0469f6084380d7/src/utils.ts#L47

Clone the repo, add a class component example and write code in mergeDeep until it works. If it's not possible, we might need to add a feature to the class component repo to support setData.

[tsiotska]

As temporary workaround i use
wrapper.vm.changedData['firstName'] = 'foo'

[lmiller1990]

Related: #572

[cexbrayat]

As vue-class-component has been deprecated for a long time (see https://github.com/vuejs/vue-class-component?tab=readme-ov-file#deprecated-vue-class-component), I think we should close this.