feat: Update Workflow class usage on the Frontend for better performance (no-changelog) (#17680)

This commit is contained in:
Alex Grozav
2025-08-04 15:04:00 +03:00
committed by GitHub
parent ff8531d544
commit 279dce639a
66 changed files with 659 additions and 660 deletions

View File

@@ -1,10 +1,8 @@
import { createPinia, setActivePinia } from 'pinia';
import { waitFor, waitForElementToBeRemoved, fireEvent } from '@testing-library/vue';
import { mock } from 'vitest-mock-extended';
import { waitFor, fireEvent } from '@testing-library/vue';
import NodeDetailsView from '@/components/NodeDetailsView.vue';
import { VIEWS } from '@/constants';
import type { IWorkflowDb } from '@/Interface';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsersStore } from '@/stores/users.store';
import { useNDVStore } from '@/stores/ndv.store';
@@ -13,7 +11,12 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { createComponentRenderer } from '@/__tests__/render';
import { setupServer } from '@/__tests__/server';
import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
import {
createTestWorkflow,
createTestWorkflowObject,
defaultNodeDescriptions,
mockNodes,
} from '@/__tests__/mocks';
import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
vi.mock('vue-router', () => {
@@ -26,7 +29,7 @@ vi.mock('vue-router', () => {
async function createPiniaStore(isActiveNode: boolean) {
const node = mockNodes[0];
const workflow = mock<IWorkflowDb>({
const workflow = createTestWorkflow({
connections: {},
active: true,
nodes: [node],
@@ -41,6 +44,7 @@ async function createPiniaStore(isActiveNode: boolean) {
nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
workflowsStore.workflow = workflow;
workflowsStore.workflowObject = createTestWorkflowObject(workflow);
workflowsStore.nodeMetadata[node.name] = { pristine: true };
if (isActiveNode) {
@@ -52,7 +56,7 @@ async function createPiniaStore(isActiveNode: boolean) {
return {
pinia,
currentWorkflow: workflowsStore.getCurrentWorkflow(),
workflowObject: workflowsStore.workflowObject,
nodeName: node.name,
};
}
@@ -78,13 +82,13 @@ describe('NodeDetailsView', () => {
});
it('should render correctly', async () => {
const { pinia, currentWorkflow } = await createPiniaStore(true);
const { pinia, workflowObject } = await createPiniaStore(true);
const renderComponent = createComponentRenderer(NodeDetailsView, {
props: {
teleported: false,
appendToBody: false,
workflowObject: currentWorkflow,
workflowObject,
},
global: {
mocks: {
@@ -104,14 +108,13 @@ describe('NodeDetailsView', () => {
describe('keyboard listener', () => {
test('should register and unregister keydown listener based on modal open state', async () => {
const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
const ndvStore = useNDVStore();
const { pinia, workflowObject } = await createPiniaStore(true);
const renderComponent = createComponentRenderer(NodeDetailsView, {
props: {
teleported: false,
appendToBody: false,
workflowObject: currentWorkflow,
workflowObject,
},
global: {
mocks: {
@@ -122,15 +125,13 @@ describe('NodeDetailsView', () => {
},
});
const { getByTestId, queryByTestId } = renderComponent({
const { getByTestId, queryByTestId, unmount } = renderComponent({
pinia,
});
const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
ndvStore.activeNodeName = nodeName;
await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
await waitFor(() => expect(queryByTestId('ndv-modal')).toBeInTheDocument());
@@ -141,9 +142,7 @@ describe('NodeDetailsView', () => {
true,
);
ndvStore.activeNodeName = null;
await waitForElementToBeRemoved(queryByTestId('ndv-modal'));
unmount();
expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), true);
@@ -152,14 +151,14 @@ describe('NodeDetailsView', () => {
});
test('should unregister keydown listener on unmount', async () => {
const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
const { pinia, workflowObject, nodeName } = await createPiniaStore(false);
const ndvStore = useNDVStore();
const renderComponent = createComponentRenderer(NodeDetailsView, {
props: {
teleported: false,
appendToBody: false,
workflowObject: currentWorkflow,
workflowObject,
},
global: {
mocks: {
@@ -194,14 +193,13 @@ describe('NodeDetailsView', () => {
});
test("should emit 'saveKeyboardShortcut' when save shortcut keybind is pressed", async () => {
const { pinia, currentWorkflow, nodeName } = await createPiniaStore(false);
const ndvStore = useNDVStore();
const { pinia, workflowObject } = await createPiniaStore(true);
const renderComponent = createComponentRenderer(NodeDetailsView, {
props: {
teleported: false,
appendToBody: false,
workflowObject: currentWorkflow,
workflowObject,
},
global: {
mocks: {
@@ -216,8 +214,6 @@ describe('NodeDetailsView', () => {
pinia,
});
ndvStore.activeNodeName = nodeName;
await waitFor(() => expect(getByTestId('ndv')).toBeInTheDocument());
await waitFor(() => expect(queryByTestId('ndv-modal')).toBeInTheDocument());