feat: Replace Vue.extend with defineComponent in editor-ui (no-changelog) (#6033)

* refactor: replace Vue.extend with defineComponent in editor-ui

* fix: change $externalHooks extractions from mixins

* fix: refactor externalHooks mixin

packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts

@@ -1,5 +1,5 @@
 import { vi, describe, it, expect } from 'vitest';
-import Vue from 'vue';
+import Vue, { defineComponent } from 'vue';
 import { PiniaVuePlugin } from 'pinia';
 import { createTestingPinia } from '@pinia/testing';
 import { render } from '@testing-library/vue';
@@ -47,7 +47,7 @@ const executionsData = Array.from({ length: 2 }, () => ({
 
 let getPastExecutionsSpy = vi.fn().mockResolvedValue({ count: 0, results: [], estimated: false });
 
-const mockRestApiMixin = Vue.extend({
+const mockRestApiMixin = defineComponent({
 	methods: {
 		restApi() {
 			return {

packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts

@@ -1,20 +1,23 @@
 import VariablesRow from '../VariablesRow.vue';
 import { EnvironmentVariable } from '@/Interface';
-import { fireEvent, render } from '@testing-library/vue';
+import { fireEvent } from '@testing-library/vue';
 import { createPinia, setActivePinia } from 'pinia';
 import { setupServer } from '@/__tests__/server';
 import { afterAll, beforeAll } from 'vitest';
 import { useSettingsStore, useUsersStore } from '@/stores';
+import { renderComponent } from '@/__tests__/utils';
 
 describe('VariablesRow', () => {
 	let server: ReturnType<typeof setupServer>;
+	let pinia: ReturnType<typeof createPinia>;
 
 	beforeAll(() => {
 		server = setupServer();
 	});
 
 	beforeEach(async () => {
-		setActivePinia(createPinia());
+		pinia = createPinia();
+		setActivePinia(pinia);
 
 		await useSettingsStore().getSettings();
 		await useUsersStore().loginWithCookie();
@@ -33,11 +36,12 @@ describe('VariablesRow', () => {
 	};
 
 	it('should render correctly', () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 			},
 			stubs,
+			pinia,
 		});
 
 		expect(wrapper.html()).toMatchSnapshot();
@@ -45,11 +49,12 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show edit and delete buttons on hover', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);
@@ -59,12 +64,13 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show key and value inputs in edit mode', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 				editing: true,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);
@@ -82,12 +88,13 @@ describe('VariablesRow', () => {
 	});
 
 	it('should show cancel and save buttons in edit mode', async () => {
-		const wrapper = render(VariablesRow, {
+		const wrapper = renderComponent(VariablesRow, {
 			props: {
 				data: environmentVariable,
 				editing: true,
 			},
 			stubs,
+			pinia,
 		});
 
 		await fireEvent.mouseEnter(wrapper.container);