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`] = ` +
+
+
+
+
+ + + +
+
+
+
+ +
+ +
+ +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+ + +
+
+
+
+ + + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+
+