KOGITO-9474: [SWF Dev UI] Enzyme to RTL migration

ui-packages/packages/cloud-event-form/config/Jest-config/test-setup.js

@@ -1,6 +1,4 @@
-const enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+require('jest-canvas-mock');
 const { TextDecoder } = require('util');
 
 global.TextDecoder = TextDecoder;
-enzyme.configure({ adapter: new Adapter() });

ui-packages/packages/cloud-event-form/jest.config.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  setupFiles: [
+    './config/Jest-config/test-shim.js',
+    './config/Jest-config/test-setup.js',
+    'core-js'
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  coveragePathIgnorePatterns: [
+    './src/static',
+    './src/api/',
+    'dist/',
+    './src/envelope/WorkflowFormEnvelope.tsx',
+    './src/embedded/tests/utils/Mocks.ts',
+    './src/envelope/tests/mocks/Mocks.ts',
+    './src/envelope/CloudEventFormEnvelope.tsx',
+    './src/envelope/index.ts'
+  ],
+  coverageReporters: [
+    [
+      'lcov',
+      {
+        projectRoot: '../../'
+      }
+    ]
+  ],
+  transformIgnorePatterns: [],
+  transform: {
+    '^.+.jsx?$': './config/Jest-config/babel-jest-wrapper.js',
+    '^.+.(ts|tsx)$': 'ts-jest',
+    '.(jpg|jpeg|png|svg)$': './config/Jest-config/fileMocks.js'
+  },
+  testMatch: ['**/tests/*.(ts|tsx|js)'],
+  moduleNameMapper: {
+    '.(scss|sass|css)$': 'identity-obj-proxy',
+    'monaco- editor': '<rootDir>/__mocks__/monacoMock.js'
+  }
+};

ui-packages/packages/cloud-event-form/package.json

@@ -45,63 +45,20 @@
     "@babel/core": "^7.22.8",
     "@kogito-apps/ouia-tools": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/enzyme": "^3.10.13",
+    "@testing-library/react": "^11.2.6",
     "@types/jest": "^26.0.24",
     "@types/react": "17.0.5",
     "@types/react-dom": "^17.0.20",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-jest": "^25.5.1",
     "copyfiles": "^2.4.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
+    "jest-canvas-mock": "2.5.2",
     "jest-junit": "^14.0.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.5.6",
     "typescript": "^4.9.5",
     "uuid": "^3.4.0",
     "waait": "^1.0.5"
-  },
-  "jest": {
-    "setupFiles": [
-      "./config/Jest-config/test-shim.js",
-      "./config/Jest-config/test-setup.js",
-      "core-js"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "coveragePathIgnorePatterns": [
-      "./src/static",
-      "dist/",
-      "./src/envelope/WorkflowFormEnvelope.tsx"
-    ],
-    "coverageReporters": [
-      [
-        "lcov",
-        {
-          "projectRoot": "../../"
-        }
-      ]
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "transformIgnorePatterns": [],
-    "transform": {
-      "^.+\\.jsx?$": "./config/Jest-config/babel-jest-wrapper.js",
-      "^.+\\.(ts|tsx)$": "ts-jest",
-      "\\.(jpg|jpeg|png|svg)$": "./config/Jest-config/fileMocks.js"
-    },
-    "testMatch": [
-      "**/tests/*.(ts|tsx|js)"
-    ],
-    "moduleNameMapper": {
-      "\\.(scss|sass|css)$": "identity-obj-proxy",
-      "monaco-editor": "<rootDir>/__mocks__/monacoMock.js"
-    }
   }
 }

ui-packages/packages/cloud-event-form/src/embedded/tests/EmbeddedCloudEventForm.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { EmbeddedCloudEventForm } from '../EmbeddedCloudEventForm';
 import { MockedCloudEventFormDriver } from './utils/Mocks';
@@ -28,17 +28,13 @@ describe('EmbeddedCloudEventForm tests', () => {
       driver: new MockedCloudEventFormDriver()
     };
 
-    const wrapper = mount(<EmbeddedCloudEventForm {...props} />);
+    const container = render(<EmbeddedCloudEventForm {...props} />).container;
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.props().driver).toStrictEqual(props.driver);
-    expect(wrapper.props().targetOrigin).toStrictEqual(props.targetOrigin);
-    expect(wrapper.props().isNewInstanceEvent).toBeUndefined();
-    expect(wrapper.props().defaultValues).toBeUndefined();
+    expect(container).toMatchSnapshot();
 
-    const contentDiv = wrapper.find('div');
+    const contentDiv = container.querySelector('div');
 
-    expect(contentDiv.exists()).toBeTruthy();
+    expect(contentDiv).toBeTruthy();
   });
 
   it('Snapshot - isNewInstanceEvent', () => {
@@ -48,17 +44,13 @@ describe('EmbeddedCloudEventForm tests', () => {
       isNewInstanceEvent: true
     };
 
-    const wrapper = mount(<EmbeddedCloudEventForm {...props} />);
+    const container = render(<EmbeddedCloudEventForm {...props} />).container;
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.props().driver).toStrictEqual(props.driver);
-    expect(wrapper.props().targetOrigin).toStrictEqual(props.targetOrigin);
-    expect(wrapper.props().isNewInstanceEvent).toStrictEqual(true);
-    expect(wrapper.props().defaultValues).toBeUndefined();
+    expect(container).toMatchSnapshot();
 
-    const contentDiv = wrapper.find('div');
+    const contentDiv = container.querySelector('div');
 
-    expect(contentDiv.exists()).toBeTruthy();
+    expect(contentDiv).toBeTruthy();
   });
 
   it('Snapshot - defaultValue', () => {
@@ -71,15 +63,12 @@ describe('EmbeddedCloudEventForm tests', () => {
       }
     };
 
-    const wrapper = mount(<EmbeddedCloudEventForm {...props} />);
+    const container = render(<EmbeddedCloudEventForm {...props} />).container;
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.props().driver).toStrictEqual(props.driver);
-    expect(wrapper.props().targetOrigin).toStrictEqual(props.targetOrigin);
-    expect(wrapper.props().defaultValues).not.toBeNull();
+    expect(container).toMatchSnapshot();
 
-    const contentDiv = wrapper.find('div');
+    const contentDiv = container.querySelector('div');
 
-    expect(contentDiv.exists()).toBeTruthy();
+    expect(contentDiv).toBeTruthy();
   });
 });

ui-packages/packages/cloud-event-form/src/embedded/tests/__snapshots__/EmbeddedCloudEventForm.test.tsx.snap

@@ -1,101 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmbeddedCloudEventForm tests Snapshot - defaultValue 1`] = `
-<ForwardRef
-  defaultValues={
-    Object {
-      "cloudEventSource": "/local/source",
-      "instanceId": "1234",
-    }
-  }
-  driver={
-    Object {
-      "triggerCloudEvent": [MockFunction],
-    }
-  }
-  targetOrigin="origin"
->
-  <ForwardRef(RefForwardingEmbeddedEnvelope)
-    apiImpl={
-      EmbeddedCloudEventFormChannelApiImpl {
-        "driver": Object {
-          "triggerCloudEvent": [MockFunction],
-        },
-      }
-    }
-    config={
-      Object {
-        "containerType": "div",
-      }
-    }
-    origin="origin"
-    pollInit={[Function]}
-    refDelegate={[Function]}
-  >
-    <div />
-  </ForwardRef(RefForwardingEmbeddedEnvelope)>
-</ForwardRef>
+<div>
+  <div />
+</div>
 `;
 
 exports[`EmbeddedCloudEventForm tests Snapshot - isNewInstanceEvent 1`] = `
-<ForwardRef
-  driver={
-    Object {
-      "triggerCloudEvent": [MockFunction],
-    }
-  }
-  isNewInstanceEvent={true}
-  targetOrigin="origin"
->
-  <ForwardRef(RefForwardingEmbeddedEnvelope)
-    apiImpl={
-      EmbeddedCloudEventFormChannelApiImpl {
-        "driver": Object {
-          "triggerCloudEvent": [MockFunction],
-        },
-      }
-    }
-    config={
-      Object {
-        "containerType": "div",
-      }
-    }
-    origin="origin"
-    pollInit={[Function]}
-    refDelegate={[Function]}
-  >
-    <div />
-  </ForwardRef(RefForwardingEmbeddedEnvelope)>
-</ForwardRef>
+<div>
+  <div />
+</div>
 `;
 
 exports[`EmbeddedCloudEventForm tests Snapshot 1`] = `
-<ForwardRef
-  driver={
-    Object {
-      "triggerCloudEvent": [MockFunction],
-    }
-  }
-  targetOrigin="origin"
->
-  <ForwardRef(RefForwardingEmbeddedEnvelope)
-    apiImpl={
-      EmbeddedCloudEventFormChannelApiImpl {
-        "driver": Object {
-          "triggerCloudEvent": [MockFunction],
-        },
-      }
-    }
-    config={
-      Object {
-        "containerType": "div",
-      }
-    }
-    origin="origin"
-    pollInit={[Function]}
-    refDelegate={[Function]}
-  >
-    <div />
-  </ForwardRef(RefForwardingEmbeddedEnvelope)>
-</ForwardRef>
+<div>
+  <div />
+</div>
 `;

ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor.tsx

@@ -25,8 +25,8 @@ import { Button } from '@patternfly/react-core/dist/js/components/Button';
 import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid';
 import { Stack, StackItem } from '@patternfly/react-core/dist/js/layouts/Stack';
 import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import { TrashIcon } from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import {
   componentOuiaProps,
   OUIAProps
@@ -153,13 +153,15 @@ const CloudEventCustomHeadersEditor = React.forwardRef<
                         value={header.key}
                         onChange={(value) => updateHeaderKey(index, value)}
                         autoFocus={isNewHeader && index === headers.length - 1}
+                        data-testid="update-key"
                       />
                     </GridItem>
                     <GridItem span={7} key={`header-value-${header.uuid}`}>
                       <TextInput
                         id={`header-value-${index}-input`}
                         value={header.value}
                         onChange={(value) => updateHeaderValue(index, value)}
+                        data-testid="update-value"
                       />
                     </GridItem>
                     <GridItem span={1} key={`header-delete-${header.uuid}`}>