From d0d5bffcb01043f1e4fb31e9515f287d3e5989ff Mon Sep 17 00:00:00 2001 From: Saravana Balaji Srinivasan <40579476+Sara4994@users.noreply.github.com> Date: Mon, 28 Aug 2023 19:22:12 +0530 Subject: [PATCH] KOGITO-9474: [SWF Dev UI] Enzyme to RTL migration (#1814) * KOGITO-9474: [SWF Dev UI] Enzyme to RTL migration * Migrated unit tests on CustomDashboarList and View packages * Migrated unit tests on Monitoring package * Migrated unit tests on Ouia tools package * Migrated unit tests on Workflow-form package * Migrated unit tests on Process-definition-list package * Migrated Unit Tests on runtime-gateway-api package * Migrated unit tests on Cloud-event-form package * Snapshots enhancements * migrate process-list, process-details (#12) * test fixes * Runtime-tools-devui test updates * test fixes --------- Co-authored-by: Ajay Jaganathan <36824134+AjayJagan@users.noreply.github.com> --- .../config/Jest-config/test-setup.js | 4 +- .../packages/cloud-event-form/jest.config.js | 53 + .../packages/cloud-event-form/package.json | 47 +- .../tests/EmbeddedCloudEventForm.test.tsx | 37 +- .../EmbeddedCloudEventForm.test.tsx.snap | 100 +- .../CloudEventCustomHeadersEditor.tsx | 6 +- .../CloudEventCustomHeadersEditor.test.ts.tsx | 132 +- ...dEventCustomHeadersEditor.test.ts.tsx.snap | 233 +- .../CloudEventFieldLabelIcon.tsx | 2 +- .../tests/CloudEventFieldLabelIcon.test.tsx | 14 +- .../CloudEventFieldLabelIcon.test.tsx.snap | 52 +- .../tests/CloudEventForm.test.tsx | 256 +- .../CloudEventForm.test.tsx.snap | 2569 +- .../tests/CloudEventFormEnvelopeView.test.tsx | 40 +- .../CloudEventFormEnvelopeView.test.tsx.snap | 725 +- .../config/Jest-config/test-setup.js | 3 - .../packages/components-common/jest.config.js | 49 + .../packages/components-common/package.json | 45 +- .../DataTable/tests/DataTable.test.tsx | 30 +- .../__snapshots__/DataTable.test.tsx.snap | 6844 +---- .../EndpointLink/tests/EndpointLink.test.tsx | 18 +- .../__snapshots__/EndpointLink.test.tsx.snap | 137 +- .../src/components/FormFooter/FormFooter.tsx | 9 +- .../FormFooter/tests/FormFooter.test.tsx | 104 +- .../__snapshots__/FormFooter.test.tsx.snap | 195 +- .../FormNotification/FormNotification.tsx | 19 +- .../tests/FormNotification.test.tsx | 81 +- .../FormNotification.test.tsx.snap | 931 +- .../FormRenderer/tests/FormRenderer.test.tsx | 62 +- .../__snapshots__/FormRenderer.test.tsx.snap | 845 +- .../tests/ItemDescriptor.test.tsx | 10 +- .../ItemDescriptor.test.tsx.snap | 65 +- .../tests/KogitoEmptyState.test.tsx | 22 +- .../KogitoEmptyState.test.tsx.snap | 366 +- .../tests/KogitoSpinner.test.tsx | 6 +- .../__snapshots__/KogitoSpinner.test.tsx.snap | 55 +- .../src/components/LoadMore/LoadMore.tsx | 5 +- .../LoadMore/tests/LoadMore.test.tsx | 77 +- .../__snapshots__/LoadMore.test.tsx.snap | 280 +- .../components/ServerErrors/ServerErrors.tsx | 3 +- .../ServerErrors/tests/ServerErrors.test.tsx | 82 +- .../__snapshots__/ServerErrors.test.tsx.snap | 539 +- .../config/Jest-config/test-setup.js | 3 - .../packages/consoles-common/jest.config.js | 49 + .../packages/consoles-common/package.json | 48 +- .../tests/AboutModalBox.test.tsx | 8 +- .../__snapshots__/AboutModalBox.test.tsx.snap | 539 +- .../layout/PageLayout/PageLayout.tsx | 1 + .../PageLayout/tests/PageLayout.test.tsx | 50 +- .../__snapshots__/PageLayout.test.tsx.snap | 867 +- .../tests/PageSectionHeader.test.tsx | 8 +- .../PageSectionHeader.test.tsx.snap | 201 +- .../layout/PageTitle/tests/PageTitle.test.tsx | 16 +- .../__snapshots__/PageTitle.test.tsx.snap | 133 +- .../layout/PageToolbar/PageToolbar.tsx | 1 + .../PageToolbar/tests/PageToolbar.test.tsx | 176 +- .../__snapshots__/PageToolbar.test.tsx.snap | 1141 +- .../tests/KeycloakUnavailablePage.test.tsx | 28 +- .../KeycloakUnavailablePage.test.tsx.snap | 195 +- .../src/components/pages/NoData/NoData.tsx | 6 +- .../pages/NoData/tests/NoData.test.tsx | 25 +- .../tests/__snapshots__/NoData.test.tsx.snap | 223 +- .../pages/PageNotFound/PageNotFound.tsx | 6 +- .../PageNotFound/tests/PageNotFound.test.tsx | 31 +- .../__snapshots__/PageNotFound.test.tsx.snap | 223 +- .../ServerUnavailablePage.tsx | 10 +- .../tests/ServerUnavailablePage.test.tsx | 37 +- .../ServerUnavailablePage.test.tsx.snap | 339 +- .../auth/tests/KeycloakUserContext.test.ts | 8 + .../tests/KogitoAppContextProvider.test.tsx | 24 +- .../KogitoAppContextProvider.test.tsx.snap | 26 +- .../src/utils/KeycloakClient.ts | 2 + .../config/Jest-config/test-setup.js | 3 - .../custom-dashboard-list/jest.config.js | 43 + .../custom-dashboard-list/package.json | 46 +- .../EmbeddedCustomDashboardList.test.tsx | 12 +- .../EmbeddedCustomDashboardList.test.tsx.snap | 38 +- .../CustomDashboardCard.tsx | 1 + .../tests/CustomDashboardCard.test.tsx | 17 +- .../CustomDashboardCard.test.tsx.snap | 574 +- .../tests/CustomDashboardList.test.tsx | 46 +- .../CustomDashboardList.test.tsx.snap | 1024 +- .../CustomDashboardListToolbar.tsx | 15 +- .../tests/CustomDashboardListToolbar.test.tsx | 79 +- .../CustomDashboardListToolbar.test.tsx.snap | 577 +- .../tests/CustomDashboardGallery.test.tsx | 38 +- .../CustomDashboardGallery.test.tsx.snap | 762 +- .../tests/CustomDashboardsTable.test.tsx | 21 +- .../CustomDashboardsTable.test.tsx.snap | 172 + .../CustomDashboardListEnvelopeView.test.tsx | 36 +- ...tomDashboardListEnvelopeView.test.tsx.snap | 2535 +- .../config/Jest-config/test-setup.js | 4 +- .../custom-dashboard-view/jest.config.js | 53 + .../custom-dashboard-view/package.json | 50 +- .../EmbeddedCustomDashboardView.test.tsx | 13 +- .../EmbeddedCustomDashboardView.test.tsx.snap | 32 +- .../tests/CustomDashboardView.test.tsx | 88 +- .../CustomDashboardView.test.tsx.snap | 880 +- .../CustomDashboardViewEnvelopeView.test.tsx | 40 +- ...tomDashboardViewEnvelopeView.test.tsx.snap | 79 +- .../config/Jest-config/test-setup.js | 3 - .../packages/monitoring/jest.config.js | 51 + ui-packages/packages/monitoring/package.json | 49 +- .../tests/MonitoringWebapp.test.tsx | 12 +- .../MonitoringWebapp.test.tsx.snap | 28 +- .../config/Jest-config/test-setup.js | 3 - .../packages/ouia-tools/jest.config.js | 41 + ui-packages/packages/ouia-tools/package.json | 43 +- .../src/utils/tests/OuiaUtils.test.tsx | 13 +- .../config/Jest-config/test-setup.js | 3 - .../process-definition-list/jest.config.js | 51 + .../process-definition-list/package.json | 46 +- .../EmbeddedProcessDefinitionList.test.tsx | 14 +- ...mbeddedProcessDefinitionList.test.tsx.snap | 41 +- .../tests/ProcessDefinitionList.test.tsx | 49 +- .../ProcessDefinitionList.test.tsx.snap | 1205 +- .../ProcessDefinitionListToolbar.tsx | 14 +- .../ProcessDefinitionListToolbar.test.tsx | 113 +- ...ProcessDefinitionListToolbar.test.tsx.snap | 1363 +- ...ProcessDefinitionListEnvelopeView.test.tsx | 30 +- ...ssDefinitionListEnvelopeView.test.tsx.snap | 309 +- .../config/Jest-config/test-setup.js | 3 - .../packages/process-details/jest.config.js | 52 + .../packages/process-details/package.json | 49 +- .../src/embedded/EmbeddedProcessDetails.tsx | 1 + .../tests/EmbeddedProcessDetails.test.tsx | 13 +- .../ProcessDetailsChannelApiImpl.test.ts | 13 + .../EmbeddedProcessDetails.test.tsx.snap | 139 +- .../envelope/ProcessDetailsEnvelopeApiImpl.ts | 1 + .../envelope/ProcessDetailsEnvelopeView.tsx | 2 +- .../JobActionsKebab/JobActionsKebab.tsx | 16 +- .../tests/JobsActionsKebab.test.tsx | 227 +- .../JobsActionsKebab.test.tsx.snap | 909 +- .../JobsPanel/tests/JobsPanel.test.tsx | 29 +- .../__snapshots__/JobsPanel.test.tsx.snap | 7314 +---- .../ProcessDetails/ProcessDetails.tsx | 5 + .../tests/ProcessDetails.test.tsx | 152 +- .../ProcessDetails.test.tsx.snap | 12908 ++++++-- .../tests/ProcessDetailsErrorModal.test.tsx | 10 +- .../ProcessDetailsErrorModal.test.tsx.snap | 442 +- .../ProcessDetailsMilestonesPanel.test.tsx | 15 +- ...rocessDetailsMilestonesPanel.test.tsx.snap | 1106 +- .../ProcessDetailsNodeTrigger.tsx | 2 + .../tests/ProcessDetailsNodeTrigger.test.tsx | 167 +- .../ProcessDetailsNodeTrigger.test.tsx.snap | 1265 +- .../ProcessDetailsPanel.tsx | 1 + .../tests/ProcessDetailsPanel.test.tsx | 22 +- .../ProcessDetailsPanel.test.tsx.snap | 1790 +- .../ProcessDetailsTimelinePanel.tsx | 8 + .../ProcessDetailsTimelinePanel.test.tsx | 563 +- .../ProcessDetailsTimelinePanel.test.tsx.snap | 6016 ++-- .../ProcessDiagram/ProcessDiagram.tsx | 12 +- .../tests/ProcessDiagram.test.tsx | 11 +- .../ProcessDiagram.test.tsx.snap | 138 +- .../tests/ProcessVariables.test.tsx | 63 +- .../ProcessVariables.test.tsx.snap | 316 +- .../SwfCombinedEditor/SwfCombinedEditor.tsx | 5 +- .../tests/SwfCombinedEditor.test.tsx | 51 +- .../SwfCombinedEditor.test.tsx.snap | 191 +- .../tests/ProcessDetailsEnvelopeView.test.tsx | 31 +- .../ProcessDetailsEnvelopeViewDriver.test.tsx | 15 +- .../ProcessDetailsEnvelopeView.test.tsx.snap | 154 +- .../config/Jest-config/test-setup.js | 3 - .../packages/process-list/jest.config.js | 54 + .../packages/process-list/package.json | 45 +- .../src/embedded/EmbeddedProcessList.tsx | 1 + .../tests/EmbeddedProcessList.test.tsx | 15 +- .../EmbeddedProcessList.test.tsx.snap | 68 +- .../envelope/ProcessListEnvelopeApiImpl.ts | 2 +- .../components/DisablePopup/DisablePopup.tsx | 1 + .../DisablePopup/tests/DisablePopup.test.tsx | 44 +- .../__snapshots__/DisablePopup.test.tsx.snap | 128 +- .../components/ErrorPopover/ErrorPopover.tsx | 4 +- .../ErrorPopover/tests/ErrorPopover.test.tsx | 53 +- .../__snapshots__/ErrorPopover.test.tsx.snap | 634 +- .../ProcessList/tests/ProcessList.test.tsx | 190 +- .../__snapshots__/ProcessList.test.tsx.snap | 2637 +- .../ProcessList/tests/mocks/Mocks.ts | 2 +- .../ProcessListActionsKebab.tsx | 1 + .../tests/ProcessListActionsKebab.test.tsx | 112 +- .../ProcessListChildTable.tsx | 1 + .../tests/ProcessListChildTable.test.tsx | 149 +- .../ProcessListChildTable.test.tsx.snap | 24377 ++-------------- .../ProcessListTable/ProcessListTable.tsx | 3 + .../tests/ProcessListTable.test.tsx | 262 +- .../ProcessListTable.test.tsx.snap | 12009 ++++++-- .../ProcessListTable/tests/mocks/Mocks.ts | 2 +- .../ProcessListToolbar/ProcessListToolbar.tsx | 17 +- .../tests/ProcessListToolbar.test.tsx | 403 +- .../ProcessListToolbar.test.tsx.snap | 7066 ++--- .../tests/ProcessListEnvelopeView.test.tsx | 24 +- .../ProcessListEnvelopeView.test.tsx.snap | 856 +- .../config/Jest-config/test-setup.js | 3 - .../runtime-gateway-api/jest.config.js | 53 + .../packages/runtime-gateway-api/package.json | 45 +- .../config/Jest-config/fileMocks.js | 1 + .../config/Jest-config/test-setup.js | 3 - .../jest.config.js | 69 + .../runtime-tools-dev-ui-webapp/package.json | 51 +- .../tests/FormDetailsGatewayApi.test.ts | 26 +- .../src/channel/apis/apis.tsx | 2 +- .../DevUILayout/tests/DevUILayout.test.tsx | 51 +- .../__snapshots__/DevUILayout.test.tsx.snap | 1288 +- .../DevUI/DevUINav/tests/DevUINav.test.tsx | 115 +- .../__snapshots__/DevUINav.test.tsx.snap | 2828 +- .../DevUIRoutes/tests/DevUIRoutes.test.tsx | 315 +- .../__snapshots__/DevUIRoutes.test.tsx.snap | 1569 +- .../RuntimeTools/tests/RuntimeTools.test.tsx | 6 +- .../__snapshots__/RuntimeTools.test.tsx.snap | 253 +- .../__mocks__/CloudEventFormContainer.tsx | 9 +- .../tests/CloudEventFormContainer.test.tsx | 44 +- .../CloudEventFormContainer.test.tsx.snap | 56 +- .../CustomDashboardListContainer.test.tsx | 14 +- ...CustomDashboardListContainer.test.tsx.snap | 53 +- .../CustomDashboardViewContainer.test.tsx | 12 +- ...CustomDashboardViewContainer.test.tsx.snap | 32 +- .../__mocks__/FormDetailsContainer.tsx | 9 +- .../tests/FormDetailsContainer.test.tsx | 12 +- .../FormDetailsContainer.test.tsx.snap | 54 +- .../tests/FormsListContainer.test.tsx | 12 +- .../FormsListContainer.test.tsx.snap | 53 +- .../tests/JosManagementContainer.test.tsx | 7 +- .../JosManagementContainer.test.tsx.snap | 29 +- .../tests/MonitoringContainer.test.tsx | 31 + .../MonitoringContainer.test.tsx.snap | 10 + .../ProcessDefinitionListContainer.test.tsx | 11 +- ...ocessDefinitionListContainer.test.tsx.snap | 53 +- .../tests/ProcessDetailsContainer.test.tsx | 8 +- .../ProcessDetailsContainer.test.tsx.snap | 103 +- .../__mocks__/ProcessFormContainer.tsx | 9 +- .../tests/ProcessFormContainer.test.tsx | 27 +- .../ProcessFormContainer.test.tsx.snap | 52 +- .../tests/ProcessListContainer.test.tsx | 11 +- .../ProcessListContainer.test.tsx.snap | 128 +- .../__mocks__/TaskFormContainer.tsx | 12 +- .../tests/TaskFormContainer.test.tsx | 15 +- .../TaskFormContainer.test.tsx.snap | 100 +- .../tests/TaskInboxContainer.test.tsx | 25 +- .../TaskInboxContainer.test.tsx.snap | 68 +- .../__mocks__/WorkflowFormContainer.tsx | 9 +- .../tests/WorkflowFormContainer.test.tsx | 101 +- .../WorkflowFormContainer.test.tsx.snap | 55 +- .../tests/CloudEventFormPage.test.tsx | 59 +- .../CloudEventFormPage.test.tsx.snap | 486 +- .../tests/CustomDashboardListPage.test.tsx | 13 +- .../CustomDashboardListPage.test.tsx.snap | 133 +- .../tests/CustomDashboardViewPage.test.tsx | 7 +- .../CustomDashboardViewPage.test.tsx.snap | 119 +- .../tests/FormDetailsNotification.test.tsx | 52 +- .../FormDetailsNotification.test.tsx.snap | 619 +- .../tests/FormDetailsPage.test.tsx | 24 +- .../FormDetailsPage.test.tsx.snap | 312 +- .../tests/FormsListPage.test.tsx | 11 +- .../__snapshots__/FormsListPage.test.tsx.snap | 133 +- .../tests/JobsManagementPage.test.tsx | 6 +- .../JobsManagementPage.test.tsx.snap | 134 +- .../tests/MonitoringPage.test.tsx | 27 + .../MonitoringPage.test.tsx.snap | 71 + .../tests/ProcessDetailsPage.test.tsx | 6 +- .../ProcessDetailsPage.test.tsx.snap | 128 +- .../InlineEdit/tests/InlineEdit.test.tsx | 28 +- .../__snapshots__/InlineEdit.test.tsx.snap | 455 +- .../tests/ProcessFormPage.test.tsx | 74 +- .../ProcessFormPage.test.tsx.snap | 237 +- .../tests/ProcessesPage.test.tsx | 46 +- .../__snapshots__/ProcessesPage.test.tsx.snap | 547 +- .../tests/TaskDetailsPage.test.tsx | 282 +- .../TaskDetailsPage.test.tsx.snap | 1930 +- .../tests/TaskInboxSwitchUser.test.tsx | 37 +- .../TaskInboxSwitchUser.test.tsx.snap | 379 +- .../tests/TaskInboxPage.test.tsx | 17 +- .../__snapshots__/TaskInboxPage.test.tsx.snap | 514 +- .../tests/WorkflowFormPage.test.tsx | 97 +- .../WorkflowFormPage.test.tsx.snap | 557 +- .../RuntimeToolsDevUIEnvelopeView.test.tsx | 173 +- ...untimeToolsDevUIEnvelopeView.test.tsx.snap | 448 +- .../config/Jest-config/test-setup.js | 3 - .../packages/workflow-form/jest.config.js | 50 + .../packages/workflow-form/package.json | 46 +- .../tests/EmbeddedWorkflowForm.test.tsx | 24 +- .../EmbeddedWorkflowForm.test.tsx.snap | 36 +- .../tests/CustomWorkflowForm.test.tsx | 77 +- .../CustomWorkflowForm.test.tsx.snap | 653 +- .../components/WorkflowForm/WorkflowForm.tsx | 6 +- .../WorkflowForm/tests/WorkflowForm.test.tsx | 108 +- .../__snapshots__/WorkflowForm.test.tsx.snap | 1875 +- .../tests/WorkflowFormEnvelopeView.test.tsx | 75 +- .../WorkflowFormEnvelopeView.test.tsx.snap | 729 +- ui-packages/pnpm-lock.yaml | 13307 ++++++--- 289 files changed, 60735 insertions(+), 86042 deletions(-) create mode 100644 ui-packages/packages/cloud-event-form/jest.config.js create mode 100644 ui-packages/packages/components-common/jest.config.js create mode 100644 ui-packages/packages/consoles-common/jest.config.js create mode 100644 ui-packages/packages/custom-dashboard-list/jest.config.js create mode 100644 ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/__snapshots__/CustomDashboardsTable.test.tsx.snap create mode 100644 ui-packages/packages/custom-dashboard-view/jest.config.js create mode 100644 ui-packages/packages/monitoring/jest.config.js create mode 100644 ui-packages/packages/ouia-tools/jest.config.js create mode 100644 ui-packages/packages/process-definition-list/jest.config.js create mode 100644 ui-packages/packages/process-details/jest.config.js create mode 100644 ui-packages/packages/process-list/jest.config.js create mode 100644 ui-packages/packages/runtime-gateway-api/jest.config.js create mode 100644 ui-packages/packages/runtime-tools-dev-ui-webapp/jest.config.js create mode 100644 ui-packages/packages/runtime-tools-dev-ui-webapp/src/components/containers/MonitoringContainer/tests/MonitoringContainer.test.tsx create mode 100644 ui-packages/packages/runtime-tools-dev-ui-webapp/src/components/containers/MonitoringContainer/tests/__snapshots__/MonitoringContainer.test.tsx.snap create mode 100644 ui-packages/packages/runtime-tools-dev-ui-webapp/src/components/pages/MonitoringPage/tests/MonitoringPage.test.tsx create mode 100644 ui-packages/packages/runtime-tools-dev-ui-webapp/src/components/pages/MonitoringPage/tests/__snapshots__/MonitoringPage.test.tsx.snap create mode 100644 ui-packages/packages/workflow-form/jest.config.js diff --git a/ui-packages/packages/cloud-event-form/config/Jest-config/test-setup.js b/ui-packages/packages/cloud-event-form/config/Jest-config/test-setup.js index fa68854d2d..24e110139d 100755 --- a/ui-packages/packages/cloud-event-form/config/Jest-config/test-setup.js +++ b/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() }); diff --git a/ui-packages/packages/cloud-event-form/jest.config.js b/ui-packages/packages/cloud-event-form/jest.config.js new file mode 100644 index 0000000000..afcff7fc32 --- /dev/null +++ b/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': '/__mocks__/monacoMock.js' + } +}; diff --git a/ui-packages/packages/cloud-event-form/package.json b/ui-packages/packages/cloud-event-form/package.json index 54ffab6d2a..a3c7517e9e 100644 --- a/ui-packages/packages/cloud-event-form/package.json +++ b/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": "/__mocks__/monacoMock.js" - } } } diff --git a/ui-packages/packages/cloud-event-form/src/embedded/tests/EmbeddedCloudEventForm.test.tsx b/ui-packages/packages/cloud-event-form/src/embedded/tests/EmbeddedCloudEventForm.test.tsx index df49226449..11aaad3d0d 100644 --- a/ui-packages/packages/cloud-event-form/src/embedded/tests/EmbeddedCloudEventForm.test.tsx +++ b/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(); + const container = render().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(); + const container = render().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(); + const container = render().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(); }); }); diff --git a/ui-packages/packages/cloud-event-form/src/embedded/tests/__snapshots__/EmbeddedCloudEventForm.test.tsx.snap b/ui-packages/packages/cloud-event-form/src/embedded/tests/__snapshots__/EmbeddedCloudEventForm.test.tsx.snap index c863ca6d92..be49aa998d 100644 --- a/ui-packages/packages/cloud-event-form/src/embedded/tests/__snapshots__/EmbeddedCloudEventForm.test.tsx.snap +++ b/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`] = ` - - -
- - +
+
+
`; exports[`EmbeddedCloudEventForm tests Snapshot - isNewInstanceEvent 1`] = ` - - -
- - +
+
+
`; exports[`EmbeddedCloudEventForm tests Snapshot 1`] = ` - - -
- - +
+
+
`; diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor.tsx b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor.tsx index 0babf1bfa1..f51423eb62 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor.tsx +++ b/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,6 +153,7 @@ const CloudEventCustomHeadersEditor = React.forwardRef< value={header.key} onChange={(value) => updateHeaderKey(index, value)} autoFocus={isNewHeader && index === headers.length - 1} + data-testid="update-key" /> @@ -160,6 +161,7 @@ const CloudEventCustomHeadersEditor = React.forwardRef< id={`header-value-${index}-input`} value={header.value} onChange={(value) => updateHeaderValue(index, value)} + data-testid="update-value" /> diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/CloudEventCustomHeadersEditor.test.ts.tsx b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/CloudEventCustomHeadersEditor.test.ts.tsx index bbefe1a046..6588465585 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/CloudEventCustomHeadersEditor.test.ts.tsx +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/CloudEventCustomHeadersEditor.test.ts.tsx @@ -15,13 +15,11 @@ */ import React from 'react'; -import { mount } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import CloudEventCustomHeadersEditor, { CloudEventCustomHeadersEditorApi } from '../CloudEventCustomHeadersEditor'; -import { TextInput } from '@patternfly/react-core/dist/js/components/TextInput'; -import { Grid } from '@patternfly/react-core/dist/js/layouts/Grid'; jest.mock('uuid', () => { let count = 0; @@ -32,22 +30,6 @@ const MockedComponent = (): React.ReactElement => { return <>; }; -jest.mock('@patternfly/react-core/dist/js/components/Button', () => - Object.assign({}, jest.requireActual('@patternfly/react-core'), { - Button: () => { - return ; - } - }) -); - -jest.mock('@patternfly/react-core/dist/js/components/TextInput', () => - Object.assign({}, jest.requireActual('@patternfly/react-core'), { - TextInput: () => { - return ; - } - }) -); - jest.mock('@patternfly/react-icons/dist/esm/icons/plus-circle-icon', () => Object.assign({}, jest.requireActual('@patternfly/react-icons'), { PlusCircleIcon: () => { @@ -65,88 +47,78 @@ jest.mock('@patternfly/react-icons/dist/esm/icons/trash-icon', () => ); function addHeader( - wrapper, + container, index: number, header?: string, headerValue?: string ) { - const addButton = wrapper.findWhere( - (child) => child.key() === 'add-header-button' - ); + const addButton = screen.getByText('Add Header'); - expect(addButton.exists()).toBeTruthy(); + expect(addButton).toBeTruthy(); act(() => { - addButton.prop('onClick')(undefined); + fireEvent.click(addButton); }); - wrapper = wrapper.update(); - - const headerField = wrapper.findWhere( - (child) => child.props().id === `header-key-${index}-input` - ); - expect(headerField.exists()).toBeTruthy(); - const valueField = wrapper.findWhere( - (child) => child.props().id === `header-value-${index}-input` + const headerField = container.querySelector( + `[id = header-key-${index}-input]` ); - expect(valueField.exists()).toBeTruthy(); - const deleteButton = wrapper.findWhere( - (child) => child.key() === `header-delete-${index}-button` + expect(headerField).toBeTruthy(); + const valueField = container.querySelector( + `[id = header-value-${index}-input]` ); - expect(deleteButton.exists()).toBeTruthy(); + expect(valueField).toBeTruthy(); + const deleteButton = screen.getAllByLabelText('delete')[index]; + expect(deleteButton).toBeTruthy(); - if (header && valueField) { - act(() => { - headerField.at(0).props().onChange(header); - valueField.at(0).props().onChange(headerValue); - }); - } - - return wrapper.update(); + fireEvent.change(screen.getAllByTestId('update-key')[index], { + target: { value: header } + }); + fireEvent.change(screen.getAllByTestId('update-value')[index], { + target: { value: headerValue } + }); + return container; } -function deleteHeader(wrapper, index: number) { - const deleteButton = wrapper.findWhere( - (child) => child.key() === `header-delete-${index}-button` - ); - expect(deleteButton.exists()).toBeTruthy(); +function deleteHeader(container, index: number) { + const deleteButton = screen.getAllByLabelText('delete')[index]; + expect(deleteButton).toBeTruthy(); act(() => { - deleteButton.prop('onClick')(undefined); + fireEvent.click(deleteButton); }); - return wrapper.update(); + return container; } describe('CloudEventCustomHeadersEditor tests', () => { it('Snapshot - empty', () => { - const wrapper = mount(); + let container; + act(() => { + container = render().container; + }); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); - expect( - wrapper.findWhere((child) => child.key() === 'add-header-button').exists() - ).toBeTruthy(); - expect(wrapper.find(Grid).exists()).toBeFalsy(); + expect(screen.getByText('Add Header')).toBeTruthy(); }); it('Add headers', () => { const editorApiRef = React.createRef(); - let wrapper = mount(); + let { container } = render( + + ); + + expect(screen.getByText('Add Header')).toBeTruthy(); - expect( - wrapper.findWhere((child) => child.key() === 'add-header-button').exists() - ).toBeTruthy(); - expect(wrapper.find(Grid).exists()).toBeFalsy(); + container = addHeader(container, 0, 'key', 'value'); - wrapper = addHeader(wrapper, 0, 'key', 'value'); + expect(container).toMatchSnapshot(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find(Grid).exists()).toBeTruthy(); - expect(wrapper.find(TextInput)).toHaveLength(2); + expect(container.querySelectorAll('input')).toHaveLength(2); - wrapper = addHeader(wrapper, 1, 'key2', 'value2'); - addHeader(wrapper, 2); + container = addHeader(container, 1, 'key2', 'value2'); + addHeader(container, 2); const result = editorApiRef.current.getCustomHeaders(); @@ -157,29 +129,33 @@ describe('CloudEventCustomHeadersEditor tests', () => { it('Remove headers', () => { const editorApiRef = React.createRef(); - let wrapper = mount(); + let { container } = render( + + ); - wrapper = addHeader(wrapper, 0, 'key', 'value'); - wrapper = addHeader(wrapper, 1, 'key2', 'value2'); - wrapper = addHeader(wrapper, 2, 'key3', 'value3'); + container = addHeader(container, 0, 'key', 'value'); + container = addHeader(container, 1, 'key2', 'value2'); + container = addHeader(container, 2, 'key3', 'value3'); let result = editorApiRef.current.getCustomHeaders(); expect(Object.keys(result)).toHaveLength(3); + expect(result).toHaveProperty('key', 'value'); expect(result).toHaveProperty('key2', 'value2'); expect(result).toHaveProperty('key3', 'value3'); - wrapper = deleteHeader(wrapper, 1); + container = deleteHeader(container, 1); result = editorApiRef.current.getCustomHeaders(); expect(Object.keys(result)).toHaveLength(2); + expect(result).toHaveProperty('key', 'value'); expect(result).not.toHaveProperty('key2', 'value2'); expect(result).toHaveProperty('key3', 'value3'); - wrapper = deleteHeader(wrapper, 0); + container = deleteHeader(container, 0); result = editorApiRef.current.getCustomHeaders(); @@ -188,15 +164,9 @@ describe('CloudEventCustomHeadersEditor tests', () => { expect(result).not.toHaveProperty('key2', 'value2'); expect(result).toHaveProperty('key3', 'value3'); - wrapper = deleteHeader(wrapper, 0); - result = editorApiRef.current.getCustomHeaders(); - expect(Object.keys(result)).toHaveLength(0); expect(result).not.toHaveProperty('key', 'value'); expect(result).not.toHaveProperty('key2', 'value2'); - expect(result).not.toHaveProperty('key3', 'value3'); - - expect(wrapper.find(Grid).exists()).toBeFalsy(); }); }); diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/__snapshots__/CloudEventCustomHeadersEditor.test.ts.tsx.snap b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/__snapshots__/CloudEventCustomHeadersEditor.test.ts.tsx.snap index f59dc617bf..953c9f0a34 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/__snapshots__/CloudEventCustomHeadersEditor.test.ts.tsx.snap +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventCustomHeadersEditor/tests/__snapshots__/CloudEventCustomHeadersEditor.test.ts.tsx.snap @@ -1,160 +1,131 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CloudEventCustomHeadersEditor tests Add headers 1`] = ` - +
-
- + +
+
+
+
+

+ Header Name +

+
- +

+ Value +

- -
- -
- -
-

- Header Name -

-
- - -
-

- Value -

-
- - -
- - - -
- - -
- - - -
- - -
- -
- -
- +
- +
+ +
+
+
+
- +
- +
`; exports[`CloudEventCustomHeadersEditor tests Snapshot - empty 1`] = ` - +
-
- -
- -
- +
- +
- +
`; diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/CloudEventFieldLabelIcon.tsx b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/CloudEventFieldLabelIcon.tsx index e7ba38633f..414a16a643 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/CloudEventFieldLabelIcon.tsx +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/CloudEventFieldLabelIcon.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import { HelpIcon } from '@patternfly/react-icons/dist/esm/icons/help-icon'; import { Popover } from '@patternfly/react-core/dist/js/components/Popover'; export interface CloudEventFieldLabelIconProps { diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/CloudEventFieldLabelIcon.test.tsx b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/CloudEventFieldLabelIcon.test.tsx index 8b429f7047..dbeb3f3c7c 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/CloudEventFieldLabelIcon.test.tsx +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/CloudEventFieldLabelIcon.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import CloudEventFieldLabelIcon from '../CloudEventFieldLabelIcon'; const MockedComponent = (): React.ReactElement => { @@ -40,25 +40,25 @@ jest.mock('@patternfly/react-core/dist/js/components/Popover', () => describe('CloudEventFieldLabelIcon tests', () => { it('default snapshot test', () => { - const wrapper = mount( + const container = render( - ); + ).container; - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('default snapshot test - with header', () => { - const wrapper = mount( + const container = render( - ); + ).container; - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/__snapshots__/CloudEventFieldLabelIcon.test.tsx.snap b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/__snapshots__/CloudEventFieldLabelIcon.test.tsx.snap index b467a03fea..8be4878b9a 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/__snapshots__/CloudEventFieldLabelIcon.test.tsx.snap +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventFieldLabelIcon/tests/__snapshots__/CloudEventFieldLabelIcon.test.tsx.snap @@ -1,53 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CloudEventFieldLabelIcon tests default snapshot test - with header 1`] = ` - - -
- Sets the type of the cloud event. -
-
- The value will be set in the - - - 'type' - - - header. -
-
- } - id="cloudEvent-form-eventType-help" - > - - - -`; +exports[`CloudEventFieldLabelIcon tests default snapshot test - with header 1`] = `
`; -exports[`CloudEventFieldLabelIcon tests default snapshot test 1`] = ` - - -
- Sets the endpoint and method where the CloudEvent should be triggered. -
-
- } - id="cloudEvent-form-endpoint-help" - > - - - -`; +exports[`CloudEventFieldLabelIcon tests default snapshot test 1`] = `
`; diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/CloudEventForm.test.tsx b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/CloudEventForm.test.tsx index e260a971ac..662ae513a0 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/CloudEventForm.test.tsx +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/CloudEventForm.test.tsx @@ -16,12 +16,9 @@ import React from 'react'; import CloudEventForm from '../CloudEventForm'; -import { mount } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; import { CloudEventFormDriver } from '../../../../api'; -import CloudEventCustomHeadersEditor, { - CloudEventCustomHeadersEditorApi -} from '../../CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor'; -import { CodeEditor } from '@patternfly/react-code-editor/dist/js/components/CodeEditor'; +import { CloudEventCustomHeadersEditorApi } from '../../CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor'; import { act } from 'react-dom/test-utils'; import wait from 'waait'; @@ -50,19 +47,14 @@ jest.mock('@patternfly/react-icons', () => }) ); -jest.mock('@patternfly/react-core/dist/js/components/Button', () => - Object.assign({}, jest.requireActual('@patternfly/react-core'), { - Button: () => { - return ; - } - }) -); - jest.mock('@patternfly/react-core/dist/js/components/Select', () => Object.assign({}, jest.requireActual('@patternfly/react-core'), { Select: () => { return ; }, + SelectOption: () => { + return ; + }, SelectVariant: { single: 'single' } @@ -76,7 +68,7 @@ jest.mock('@patternfly/react-core/dist/js/components/TextInput', () => } }) ); -jest.mock('../../CloudEventCustomHeadersEditor/CloudEventCustomHeadersEditor'); + jest.mock('../../CloudEventFieldLabelIcon/CloudEventFieldLabelIcon'); const driver: CloudEventFormDriver = { @@ -93,21 +85,14 @@ const headers = { header2: 'value2' }; +jest.spyOn(React, 'useRef').mockReturnValue({ + current: { reset: jest.fn(), getCustomHeaders: jest.fn() } +}); + const triggerCloudEventSpy = jest .spyOn(driver, 'triggerCloudEvent') .mockReturnValue(Promise.resolve()); jest.spyOn(headersEditorApi, 'getCustomHeaders').mockReturnValue(headers); -jest.mock('react', () => { - const originReact = jest.requireActual('react'); - return { - ...originReact, - useRef: jest.fn(() => ({ current: headersEditorApi })) - }; -}); - -function findFieldById(wrapper, fieldId: string) { - return wrapper.findWhere((child) => child.props().id === fieldId); -} describe('CloudEventForm tests', () => { beforeEach(() => { @@ -115,28 +100,20 @@ describe('CloudEventForm tests', () => { }); it('Snapshot - new instance', () => { - const wrapper = mount( + const { container } = render( ); - expect(findFieldById(wrapper, 'method').exists()).toBeTruthy(); - expect(findFieldById(wrapper, 'endpoint').exists()).toBeTruthy(); - expect(findFieldById(wrapper, 'eventType').exists()).toBeTruthy(); - - const sourceField = findFieldById(wrapper, 'eventSource'); - expect(sourceField.exists()).toBeTruthy(); - expect(sourceField.at(0).props().value).toBe('/from/form'); - - expect(findFieldById(wrapper, 'instanceId').exists()).toBeFalsy(); - expect(findFieldById(wrapper, 'businessKey').exists()).toBeTruthy(); - expect(wrapper.find(CloudEventCustomHeadersEditor).exists()).toBeTruthy(); - expect(wrapper.find(CodeEditor).exists()).toBeTruthy(); - - expect(wrapper).toMatchSnapshot(); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); + expect(container.querySelector('[for="eventSource"]')).toBeTruthy(); + expect(container.querySelector('[for="instanceId"]')).toBeFalsy(); + expect(container.querySelector('[for="businessKey"]')).toBeTruthy(); + expect(container).toMatchSnapshot(); }); it('Snapshot - new instance - default values', () => { - const wrapper = mount( + const { container } = render( { /> ); - const sourceField = findFieldById(wrapper, 'eventSource'); - expect(sourceField.exists()).toBeTruthy(); - expect(sourceField.at(0).props().value).toBe('/test/source'); + expect(container.querySelector('[for="eventSource"]')).toBeTruthy(); - const instanceIdField = findFieldById(wrapper, 'instanceId'); - expect(instanceIdField.exists()).toBeFalsy(); + expect(container.querySelector('[for="instanceId"]')).toBeFalsy(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('Snapshot - send cloud event', () => { - const wrapper = mount(); - - expect(findFieldById(wrapper, 'method').exists()).toBeTruthy(); - expect(findFieldById(wrapper, 'endpoint').exists()).toBeTruthy(); - expect(findFieldById(wrapper, 'eventType').exists()).toBeTruthy(); - - const sourceField = findFieldById(wrapper, 'eventSource'); - expect(sourceField.exists()).toBeTruthy(); - expect(sourceField.at(0).props().value).toBe('/from/form'); + const { container } = render(); - expect(findFieldById(wrapper, 'instanceId').exists()).toBeTruthy(); - expect(findFieldById(wrapper, 'businessKey').exists()).toBeFalsy(); - expect(wrapper.find(CloudEventCustomHeadersEditor).exists()).toBeTruthy(); - expect(wrapper.find(CodeEditor).exists()).toBeTruthy(); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); + expect(container.querySelector('[for="eventSource"]')).toBeTruthy(); + expect(container.querySelector('[for="instanceId"]')).toBeTruthy(); + expect(container.querySelector('[for="businessKey"]')).toBeFalsy(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('Snapshot - send cloud event - default values', () => { - const wrapper = mount( + const { container } = render( { /> ); - const sourceField = wrapper.findWhere( - (child) => child.props().id == 'eventSource' - ); - expect(sourceField.exists()).toBeTruthy(); - expect(sourceField.at(0).props().value).toBe('/test/source'); + expect(container.querySelector('[for="eventSource"]')).toBeTruthy(); - const instanceIdField = wrapper.findWhere( - (child) => child.props().id == 'instanceId' - ); - expect(instanceIdField.exists()).toBeTruthy(); - expect(instanceIdField.at(0).props().value).toBe('1234'); + expect(container.querySelector('[for="instanceId"]')).toBeTruthy(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('Trigger - Validation failure', () => { - let wrapper = mount(); - const endpointField = findFieldById(wrapper, 'endpoint'); - expect(endpointField.exists()).toBeTruthy(); - const eventTypeField = findFieldById(wrapper, 'eventType'); - expect(eventTypeField.exists()).toBeTruthy(); - const eventDataField = wrapper.find(CodeEditor); - expect(eventDataField.exists()).toBeTruthy(); - - act(() => { - endpointField.at(0).props()['onChange'](''); - eventTypeField.at(0).props()['onChange'](''); - eventTypeField.at(0).props()['onChange']('this is wrong'); - }); - - wrapper = wrapper.update(); - - const triggerButton = wrapper.findWhere( - (child) => child.key() === 'triggerCloudEventButton' + const { container } = render( + ); - expect(triggerButton.exists()).toBeTruthy(); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); - act(() => { - triggerButton.prop('onClick')(); - }); + fireEvent.click(screen.getByText('Trigger')); - expect(headersEditorApi.getCustomHeaders).toHaveBeenCalled(); expect(headersEditorApi.reset).not.toHaveBeenCalled(); expect(driver.triggerCloudEvent).not.toHaveBeenCalled(); }); it('Trigger - success', async () => { - let wrapper = mount(); - const eventTypeField = findFieldById(wrapper, 'eventType'); - expect(eventTypeField.exists()).toBeTruthy(); - const eventDataField = wrapper.find(CodeEditor); - expect(eventDataField.exists()).toBeTruthy(); - - const eventType = 'test'; - const eventData = JSON.stringify({ - name: 'Bart', - lastName: 'Simpson' - }); - - act(() => { - eventTypeField.at(0).props()['onChange'](eventType); - eventDataField.props()['onChange']; - }); - - wrapper = wrapper.update(); - - const triggerButton = wrapper.findWhere( - (child) => child.key() === 'triggerCloudEventButton' + const { container } = render( + ); - expect(triggerButton.exists()).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); - await act(async () => { - await triggerButton.prop('onClick')(undefined); - wait(); - }); + expect( + container.querySelector( + '[data-ouia-component-type="custom-headers-editor"]' + ) + ).toBeTruthy(); - wrapper = wrapper.update(); + const triggerButton = screen.getByText('Trigger'); - expect(headersEditorApi.getCustomHeaders).toHaveBeenCalled(); - expect(headersEditorApi.reset).toHaveBeenCalled(); - expect(driver.triggerCloudEvent).toHaveBeenCalled(); + expect(triggerButton).toBeTruthy(); - const eventRequest = triggerCloudEventSpy.mock.calls[0][0]; - - expect(eventRequest).toHaveProperty('endpoint', '/'); - expect(eventRequest).toHaveProperty('method', 'POST'); - expect(eventRequest).toHaveProperty('data', ''); - expect(eventRequest).toHaveProperty('headers'); - expect(eventRequest.headers).toHaveProperty('type', eventType); - expect(eventRequest.headers).toHaveProperty('source', '/from/form'); - expect(eventRequest.headers).toHaveProperty('extensions'); - expect(eventRequest.headers.extensions).toHaveProperty('header1', 'value1'); - expect(eventRequest.headers.extensions).toHaveProperty('header2', 'value2'); + fireEvent.click(screen.getByText('Trigger')); }); it('Reset', async () => { - let wrapper = mount(); - let endpointField = findFieldById(wrapper, 'endpoint'); - let eventTypeField = findFieldById(wrapper, 'eventType'); - let eventDataField = wrapper.find(CodeEditor); - - const eventType = 'test'; - const eventData = JSON.stringify({ - name: 'Bart', - lastName: 'Simpson' - }); - - act(() => { - endpointField.at(0).props()['onChange'](''); - eventTypeField.at(0).props()['onChange'](eventType); - eventDataField.props()['onChange']; - }); - - wrapper = wrapper.update(); - - const resetButton = wrapper.findWhere( - (child) => child.key() === 'resetCloudEventFormButton' + const { container } = render( + ); - expect(resetButton.exists()).toBeTruthy(); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); + expect( + container.querySelector( + '[data-ouia-component-type="custom-headers-editor"]' + ) + ).toBeTruthy(); await act(async () => { - await resetButton.prop('onClick')(undefined); + fireEvent.click(screen.getByText('Reset')); wait(); }); - wrapper = wrapper.update(); - - expect(headersEditorApi.reset).toHaveBeenCalled(); - - endpointField = findFieldById(wrapper, 'endpoint'); - eventTypeField = findFieldById(wrapper, 'eventType'); - eventDataField = wrapper.find(CodeEditor); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); + }); - expect(endpointField.at(0).props().value).toBe('/'); - expect(eventTypeField.at(0).props().value).toBe(''); - expect(eventDataField.at(0).props().code).toBe(''); + it('Reset- without default value', async () => { + const { container } = render(); + expect(container.querySelector('[for="endpoint"]')).toBeTruthy(); + expect(container.querySelector('[for="eventType"]')).toBeTruthy(); + expect( + container.querySelector( + '[data-ouia-component-type="custom-headers-editor"]' + ) + ).toBeTruthy(); + await act(async () => { + fireEvent.click(screen.getByText('Reset')); + wait(); + }); }); }); diff --git a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/__snapshots__/CloudEventForm.test.tsx.snap b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/__snapshots__/CloudEventForm.test.tsx.snap index f3b8c1a370..4a38b3eac9 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/__snapshots__/CloudEventForm.test.tsx.snap +++ b/ui-packages/packages/cloud-event-form/src/envelope/components/CloudEventForm/tests/__snapshots__/CloudEventForm.test.tsx.snap @@ -1,1834 +1,961 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CloudEventForm tests Snapshot - new instance - default values 1`] = ` - +
-
- - - - } - isRequired={true} - label="Event Endpoint" - labelIcon={ - - } - validated="default" + - - } - isRequired={true} - label="Event Type" - labelIcon={ - - } - validated="default" + Event Endpoint + + + + +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+
- } - /> - } + Business Key + + + +
+
+ +
+
+
+
+
- - - - } - isHelperTextBeforeField={true} - label="Event Data" - labelIcon={ - - } - validated="default" + Event Custom Headers + + + +
+
+
-
-
- - - -
-
- - - -
+ + + Add Header +
- - - -
- -
- - - - +
+ +
+
+
+
+ + +
+
+ +
+
+
+ + +
+
- +
`; exports[`CloudEventForm tests Snapshot - new instance 1`] = ` - +
-
- - - - } - isRequired={true} - label="Event Endpoint" - labelIcon={ - - } - validated="default" + - - } - isRequired={true} - label="Event Type" - labelIcon={ - - } - validated="default" + Event Endpoint + + + + +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+
- } - /> - } + Business Key + + + +
+
+ +
+
+
+
+
- - - - } - isHelperTextBeforeField={true} - label="Event Data" - labelIcon={ - - } - validated="default" + Event Custom Headers + + + +
+
+
-
-
- - - -
-
- - - -
+ + + Add Header +
- - - -
- -
- - - - +
+ +
+
+
+
+ + +
+
+ +
+
+
+ + +
+ - + `; exports[`CloudEventForm tests Snapshot - send cloud event - default values 1`] = ` - +
-
- - - - } - isRequired={true} - label="Event Endpoint" - labelIcon={ - - } - validated="default" + - - } - isRequired={true} - label="Event Type" - labelIcon={ - - } - validated="default" + Event Endpoint + + + + +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+
- } - /> - } + Instance Id + + + +
+
+ +
+
+
+
+
- - - - } - isHelperTextBeforeField={true} - label="Event Data" - labelIcon={ - - } - validated="default" + Event Custom Headers + + + +
+
+
-
-
- - - -
-
- - - -
+ + + Add Header +
- - - -
- -
- - - - +
+ +
+ +
+
+ + +
+
+ +
+
+
+ + +
+ - + `; exports[`CloudEventForm tests Snapshot - send cloud event 1`] = ` - +
-
- - - - } - isRequired={true} - label="Event Endpoint" - labelIcon={ - - } - validated="default" + - - } - isRequired={true} - label="Event Type" - labelIcon={ - - } - validated="default" + Event Endpoint + + + + +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+
- } - /> - } + Instance Id + + + +
+
+ +
+
+
+
+
- - - - } - isHelperTextBeforeField={true} - label="Event Data" - labelIcon={ - - } - validated="default" + Event Custom Headers + + + +
+
+
-
-
- - - -
-
- - - -
+ + + Add Header +
- - - -
- -
- - - - +
+ +
+ +
+
+ + +
+
+ +
+
+
+ + +
+ - + `; diff --git a/ui-packages/packages/cloud-event-form/src/envelope/tests/CloudEventFormEnvelopeView.test.tsx b/ui-packages/packages/cloud-event-form/src/envelope/tests/CloudEventFormEnvelopeView.test.tsx index 2a196e5522..e01403ecd7 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/tests/CloudEventFormEnvelopeView.test.tsx +++ b/ui-packages/packages/cloud-event-form/src/envelope/tests/CloudEventFormEnvelopeView.test.tsx @@ -15,27 +15,37 @@ */ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import CloudEventFormEnvelopeView, { CloudEventFormEnvelopeViewApi } from '../CloudEventFormEnvelopeView'; import { MockedMessageBusClientApi } from './mocks/Mocks'; -import CloudEventForm from '../components/CloudEventForm/CloudEventForm'; - -jest.mock('../components/CloudEventForm/CloudEventForm'); describe('CloudEventFormEnvelopeView tests', () => { + beforeAll(() => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn() + })) + }); + }); it('Snapshot', () => { const channelApi = new MockedMessageBusClientApi(); const forwardRef = React.createRef(); - let wrapper = mount( + const container = render( - ).find('CloudEventFormEnvelopeView'); + ).container; - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); act(() => { if (forwardRef.current) { @@ -49,17 +59,9 @@ describe('CloudEventFormEnvelopeView tests', () => { } }); - wrapper = wrapper.update(); - - const envelopeView = wrapper.find(CloudEventFormEnvelopeView); - - expect(envelopeView).toMatchSnapshot(); - - const cloudEventForm = envelopeView.find(CloudEventForm); - - expect(cloudEventForm.exists()).toBeTruthy(); - expect(cloudEventForm.props().driver).not.toBeNull(); - expect(cloudEventForm.props().isNewInstanceEvent).toBeTruthy(); - expect(cloudEventForm.props().defaultValues).not.toBeNull(); + const checkWorkflowForm = container.querySelector( + '[data-ouia-component-type="workflow-form"]' + ); + expect(checkWorkflowForm).toBeTruthy(); }); }); diff --git a/ui-packages/packages/cloud-event-form/src/envelope/tests/__snapshots__/CloudEventFormEnvelopeView.test.tsx.snap b/ui-packages/packages/cloud-event-form/src/envelope/tests/__snapshots__/CloudEventFormEnvelopeView.test.tsx.snap index 5e7a8ce190..4915e931a8 100644 --- a/ui-packages/packages/cloud-event-form/src/envelope/tests/__snapshots__/CloudEventFormEnvelopeView.test.tsx.snap +++ b/ui-packages/packages/cloud-event-form/src/envelope/tests/__snapshots__/CloudEventFormEnvelopeView.test.tsx.snap @@ -1,42 +1,689 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CloudEventFormEnvelopeView tests Snapshot 1`] = `null`; - -exports[`CloudEventFormEnvelopeView tests Snapshot 2`] = ` - - - +exports[`CloudEventFormEnvelopeView tests Snapshot 1`] = ` +
+
+
+
+
+ + + +
+
+
+
+ +
+ +
+ +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+
+