fix(ProcessEditor): e.appendChild is not a function (#12613)

* fix(ProcessEditor): typeNode.appendChild is not a function
Altinn · Apr 4, 2024 · cb2f905 · cb2f905
1 parent 9aa95d5
commit cb2f905
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 20 deletions.
diff --git a/...d/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx b/...d/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.test.tsx
@@ -55,7 +55,7 @@ describe('ConfigContent', () => {
   });
   it('should render heading for selected task', () => {
     renderConfigContent({
-      modelerRef: { current: '<div></div>' as unknown as Modeler },
+      modelerRef: { current: { get: () => {} } as unknown as Modeler },
       bpmnDetails: { ...mockBpmnDetails, taskType: 'data' as BpmnTaskType },
     });
 
@@ -68,7 +68,7 @@ describe('ConfigContent', () => {
   it('should render helpText for selected task', async () => {
     const user = userEvent.setup();
     renderConfigContent({
-      modelerRef: { current: '<div></div>' as unknown as Modeler },
+      modelerRef: { current: { get: () => {} } as unknown as Modeler },
       bpmnDetails: { ...mockBpmnDetails, taskType: 'data' as BpmnTaskType },
     });
 
@@ -82,7 +82,7 @@ describe('ConfigContent', () => {
 
   it('should render EditTaskId component', () => {
     renderConfigContent({
-      modelerRef: { current: '<div></div>' as unknown as Modeler },
+      modelerRef: { current: { get: () => {} } as unknown as Modeler },
       bpmnDetails: { ...mockBpmnDetails, taskType: 'data' as BpmnTaskType },
     });
 
@@ -95,7 +95,7 @@ describe('ConfigContent', () => {
     'should render correct header config for each taskType',
     (taskType) => {
       renderConfigContent({
-        modelerRef: { current: '<div></div>' as unknown as Modeler },
+        modelerRef: { current: { get: () => {} } as unknown as Modeler },
         bpmnDetails: { ...mockBpmnDetails, taskType: taskType as BpmnTaskType },
       });
 

diff --git a/...es/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx b/...es/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.test.tsx
@@ -8,7 +8,11 @@ import { useBpmnConfigPanelFormContext } from '../../../../contexts/BpmnConfigPa
 jest.mock('../../../../contexts/BpmnContext', () => ({
   useBpmnContext: () => ({
     modelerRef: {
-      current: '<div></div>',
+      current: {
+        get: () => ({
+          updateProperties: jest.fn(),
+        }),
+      },
     },
     setBpmnDetails: jest.fn(),
     bpmnDetails: {
@@ -20,16 +24,6 @@ jest.mock('../../../../contexts/BpmnContext', () => ({
   }),
 }));
 
-jest.mock('../../../../hooks/useBpmnModeler', () => ({
-  useBpmnModeler: () => ({
-    getModeler: () => ({
-      get: () => ({
-        updateProperties: jest.fn(),
-      }),
-    }),
-  }),
-}));
-
 jest.mock('../../../../contexts/BpmnConfigPanelContext', () => ({
   useBpmnConfigPanelFormContext: jest.fn(),
 }));

diff --git a/...ackages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.tsx b/...ackages/process-editor/src/components/ConfigPanel/ConfigContent/EditTaskId/EditTaskId.tsx
@@ -6,7 +6,6 @@ import { KeyVerticalIcon } from '@studio/icons';
 import { useBpmnContext } from '../../../../contexts/BpmnContext';
 
 import { useBpmnConfigPanelFormContext } from '../../../../contexts/BpmnConfigPanelContext';
-import { useBpmnModeler } from '../../../../hooks/useBpmnModeler';
 import type Modeling from 'bpmn-js/lib/features/modeling/Modeling';
 
 import classes from './EditTaskId.module.css';
@@ -16,10 +15,9 @@ export const EditTaskId = ({ ...rest }: EditTaskIdProps): React.ReactElement =>
   const { t } = useTranslation();
   const { bpmnDetails, modelerRef, setBpmnDetails } = useBpmnContext();
   const { setMetaDataForm } = useBpmnConfigPanelFormContext();
-  const { getModeler } = useBpmnModeler();
 
-  const modeler = getModeler(modelerRef.current as unknown as HTMLDivElement);
-  const modeling: Modeling = modeler.get('modeling');
+  const modelerInstance = modelerRef.current;
+  const modeling: Modeling = modelerInstance.get('modeling');
 
   const updateId = (value: string): void => {
     modeling.updateProperties(bpmnDetails.element, {

diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigPanel.test.tsx
@@ -57,7 +57,7 @@ describe('ConfigPanel', () => {
 
   it('should render ConfigPanel if bpmn type is task', () => {
     renderConfigPanel({
-      modelerRef: { current: '' as unknown as Modeler },
+      modelerRef: { current: { get: () => {} } as unknown as Modeler },
       bpmnDetails: { ...mockBpmnDetails, type: BpmnTypeEnum.Task },
     });
     const editTaskIdButton = screen.getByRole('button', {