diff --git a/ui-packages/packages/components-common/src/components/FormRenderer/tests/FormRenderer.test.tsx b/ui-packages/packages/components-common/src/components/FormRenderer/tests/FormRenderer.test.tsx index fb24024ec8..95f519e383 100644 --- a/ui-packages/packages/components-common/src/components/FormRenderer/tests/FormRenderer.test.tsx +++ b/ui-packages/packages/components-common/src/components/FormRenderer/tests/FormRenderer.test.tsx @@ -123,7 +123,6 @@ describe('FormRenderer test', () => { const { container } = render(); expect(screen).toMatchSnapshot(); - // screen.debug() // const form = container.findWhere((node) => node.type() === AutoForm); // expect(form.exists()).toBeTruthy(); diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/CustomDashboardListToolbar.tsx b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/CustomDashboardListToolbar.tsx index 95d86a23e2..38c9c6acdb 100755 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/CustomDashboardListToolbar.tsx +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/CustomDashboardListToolbar.tsx @@ -129,7 +129,7 @@ const CustomDashboardListToolbar: React.FC< id="apply-filter" variant="primary" onClick={doApplyFilter} - data-testit="apply-filter" + data-testid="apply-filter" > Apply Filter diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/CustomDashboardListToolbar.test.tsx b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/CustomDashboardListToolbar.test.tsx index 3452258692..6af988bdf8 100755 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/CustomDashboardListToolbar.test.tsx +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/CustomDashboardListToolbar.test.tsx @@ -17,21 +17,17 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; import CustomDashboardListToolbar from '../CustomDashboardListToolbar'; -import { act } from 'react-dom/test-utils'; -import { ToolbarFilter } from '@patternfly/react-core/dist/js/components/Toolbar'; -import { Button } from '@patternfly/react-core/dist/js/components/Button'; -import { Tooltip } from '@patternfly/react-core/dist/js/components/Tooltip'; describe('CustomDashboard list toolbar tests', () => { it('render toolbar', () => { - render( + const { container } = render( ); - expect(screen).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('apply filter click', () => { diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/__snapshots__/CustomDashboardListToolbar.test.tsx.snap b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/__snapshots__/CustomDashboardListToolbar.test.tsx.snap index c22cd8f671..190a9d7dd4 100644 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/__snapshots__/CustomDashboardListToolbar.test.tsx.snap +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardListToolbar/tests/__snapshots__/CustomDashboardListToolbar.test.tsx.snap @@ -1,56 +1,145 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CustomDashboard list toolbar tests render toolbar 1`] = ` -Object { - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "logTestingPlaygroundURL": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], -} +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
`; diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/CustomDashboardGallery.test.tsx b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/CustomDashboardGallery.test.tsx index b0036b22e7..5d3b6a04b5 100755 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/CustomDashboardGallery.test.tsx +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/CustomDashboardGallery.test.tsx @@ -16,7 +16,7 @@ import React from 'react'; import CustomDashboardsGallery from '../CustomDashboardsGallery'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { customDashboardInfos, MockedCustomDashboardListDriver @@ -28,59 +28,43 @@ const MockedComponent = (): React.ReactElement => { return <>; }; -jest.mock( - '@kogito-apps/components-common/dist/components/KogitoEmptyState', - () => - Object.assign({}, jest.requireActual('@kogito-apps/components-common'), { - KogitoEmptyState: () => { - return ; - } - }) -); - -jest.mock('@kogito-apps/components-common/dist/components/KogitoSpinner', () => - Object.assign({}, jest.requireActual('@kogito-apps/components-common'), { - KogitoSpinner: () => { - return ; - } - }) -); - describe('customDashboard gallery tests', () => { Date.now = jest.fn(() => 1487076708000); const driver = new MockedCustomDashboardListDriver(); it('renders gallery of customDashboard', () => { - const wrapper = mount( + const { container } = render( ); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('renders loading component', () => { - const wrapper = mount( + const { container } = render( ); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find(KogitoSpinner)).toBeTruthy(); + expect(container).toMatchSnapshot(); + const checkLoading = screen.getByText('Loading customDashboard...'); + expect(checkLoading).toBeTruthy(); }); it('renders empty state component', () => { - const wrapper = mount( + const { container } = render( ); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find(KogitoEmptyState)).toBeTruthy(); + expect(container).toMatchSnapshot(); + const checkEmptyState = screen.getByText('No results found'); + expect(checkEmptyState).toBeTruthy(); }); }); diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/__snapshots__/CustomDashboardGallery.test.tsx.snap b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/__snapshots__/CustomDashboardGallery.test.tsx.snap index 8d925e6e0e..5ab75c4784 100644 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/__snapshots__/CustomDashboardGallery.test.tsx.snap +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsGallery/tests/__snapshots__/CustomDashboardGallery.test.tsx.snap @@ -1,497 +1,341 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`customDashboard gallery tests renders empty state component 1`] = ` - - +
- - - +
+
+ +
+ No results found +
+
+ Try using different filters +
+
+
+
+
`; exports[`customDashboard gallery tests renders gallery of customDashboard 1`] = ` - - +
-
- +
-
- +
- +
+
+

+ dashboard1 +

+
+
+
+
-
- -
+
- - -
+ Path + + + +
+
+

- + +

+
+
+
+
- - -
+ + +
+
+

-

- - - - - -
-
- - -
-
- -

- /user/home -

- -
-
- - - - -
-
- - -
-
- -

- - - -

- -
-
- - - - - -
-
- -
- - + in 5 years + +

+ +
+
+ +
- - + +
+
-
- +
+ Empty +
+
+
+

+ dashboard2 +

+
+
+
- -
- -
+
- - -
+ Path + + + +
+
+

+ /user/home +

+ +
+
+
+
+
- - -
+ + +
+
+

-

-
- - - - -
-
- - -
-
- -

- /user/home -

- -
-
- - - - -
-
- - -
-
- -

- - - -

- -
-
- - - -
- -
-
- -
- - + in 5 years + +

+ +
+ + + - + - - + + `; exports[`customDashboard gallery tests renders loading component 1`] = ` - - +
+
- - - +
+
+

+ Loading customDashboard... +

+
- - +
+ `; diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/CustomDashboardsTable.test.tsx b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/CustomDashboardsTable.test.tsx index 83d7251c62..ea90069a71 100755 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/CustomDashboardsTable.test.tsx +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/CustomDashboardsTable.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import CustomDashboardsTable from '../CustomDashboardsTable'; import { customDashboardInfos, @@ -25,22 +25,10 @@ import { DataTable } from '@kogito-apps/components-common/dist/components/DataTa Date.now = jest.fn(() => 1487076708000); //14.02.2017 -const MockedComponent = (): React.ReactElement => { - return <>; -}; - -jest.mock('@kogito-apps/components-common/dist/components/DataTable', () => - Object.assign({}, jest.requireActual('@kogito-apps/components-common'), { - DataTable: () => { - return ; - } - }) -); - describe('customDashboard table test', () => { const driver = new MockedCustomDashboardListDriver(); it('renders table', () => { - const wrapper = mount( + const { container } = render( { setDashboardsData={jest.fn()} /> ); - const dataTable = wrapper.find(DataTable); - expect(dataTable.exists()).toBeTruthy(); + expect(container).toMatchSnapshot(); + const checkTable = container.querySelector('table'); + expect(checkTable).toBeTruthy(); }); }); diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/__snapshots__/CustomDashboardsTable.test.tsx.snap b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/__snapshots__/CustomDashboardsTable.test.tsx.snap new file mode 100644 index 0000000000..a75925cf20 --- /dev/null +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/components/CustomDashboardsTable/tests/__snapshots__/CustomDashboardsTable.test.tsx.snap @@ -0,0 +1,172 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`customDashboard table test renders table 1`] = ` +
+
+ + + + + + + + + + + + + + + + + +
+ + + +
+ + + dashboard1 + + + + +
+ + + dashboard2 + + + + +
+
+
+`; diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/tests/CustomDashboardListEnvelopeView.test.tsx b/ui-packages/packages/custom-dashboard-list/src/envelope/tests/CustomDashboardListEnvelopeView.test.tsx index c754f5341b..aa2628e85e 100644 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/tests/CustomDashboardListEnvelopeView.test.tsx +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/tests/CustomDashboardListEnvelopeView.test.tsx @@ -25,17 +25,19 @@ import CustomDashboardListEnvelopeView, { describe('CustomDashboardListEnvelopeView tests', () => { jest.mock('../components/CustomDashboardList/CustomDashboardList'); - it('Snapshot', () => { + it('Snapshot', async () => { const channelApi = new MockedMessageBusClientApi(); const forwardRef = React.createRef(); - - const { container } = render( - - ); + let container; + await act(async () => { + container = render( + + ).container; + }); expect(screen).toMatchSnapshot(); @@ -45,17 +47,16 @@ describe('CustomDashboardListEnvelopeView tests', () => { } }); - const CustomDashboardListEnvelopeView = container.getElementsByClassName( - 'pf-m-toggle-group-container' - ); - expect(CustomDashboardListEnvelopeView).toMatchSnapshot(); + const CustomDashboardListEnvelopeViewCheck = + container.getElementsByClassName('pf-m-toggle-group-container'); + expect(CustomDashboardListEnvelopeViewCheck).toMatchSnapshot(); const dashboardList = screen.getByText('Loading Dashboard...'); - screen.debug(); - // const dashboardList = envelopeView.find(CustomDashboardList); - // expect(dashboardList.exists()).toBeTruthy(); - // expect(dashboardList.props().isEnvelopeConnectedToChannel).toBeTruthy(); - // expect(dashboardList.props().driver).not.toBeNull(); + expect(dashboardList).toBeTruthy(); + + const listTable = container.querySelector('table'); + + expect(listTable).toBeTruthy(); }); }); diff --git a/ui-packages/packages/custom-dashboard-list/src/envelope/tests/__snapshots__/CustomDashboardListEnvelopeView.test.tsx.snap b/ui-packages/packages/custom-dashboard-list/src/envelope/tests/__snapshots__/CustomDashboardListEnvelopeView.test.tsx.snap index acf722bb3b..39dbdea7a2 100644 --- a/ui-packages/packages/custom-dashboard-list/src/envelope/tests/__snapshots__/CustomDashboardListEnvelopeView.test.tsx.snap +++ b/ui-packages/packages/custom-dashboard-list/src/envelope/tests/__snapshots__/CustomDashboardListEnvelopeView.test.tsx.snap @@ -54,3 +54,147 @@ Object { "queryByTitle": [Function], } `; + +exports[`CustomDashboardListEnvelopeView tests Snapshot 2`] = ` +HTMLCollection [ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ , +] +`; diff --git a/ui-packages/packages/custom-dashboard-view/config/Jest-config/test-setup.js b/ui-packages/packages/custom-dashboard-view/config/Jest-config/test-setup.js index fa68854d2d..5666d9c4a2 100755 --- a/ui-packages/packages/custom-dashboard-view/config/Jest-config/test-setup.js +++ b/ui-packages/packages/custom-dashboard-view/config/Jest-config/test-setup.js @@ -1,6 +1,4 @@ -const enzyme = require('enzyme'); -const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); + const { TextDecoder } = require('util'); global.TextDecoder = TextDecoder; -enzyme.configure({ adapter: new Adapter() }); diff --git a/ui-packages/packages/custom-dashboard-view/jest.config.js b/ui-packages/packages/custom-dashboard-view/jest.config.js new file mode 100644 index 0000000000..b03cd499c2 --- /dev/null +++ b/ui-packages/packages/custom-dashboard-view/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', + 'dist/', + 'src/types/', + './tests/mocks/', + './src/api/', + './src/envelope/contexts/', + './src/envelope/index.ts', + './src/envelope/CustomDashboardViewEnvelope.tsx', + 'mocks/' + ], + 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' + } +}; diff --git a/ui-packages/packages/custom-dashboard-view/package.json b/ui-packages/packages/custom-dashboard-view/package.json index f0c2c4e915..4b40674614 100644 --- a/ui-packages/packages/custom-dashboard-view/package.json +++ b/ui-packages/packages/custom-dashboard-view/package.json @@ -43,15 +43,12 @@ "@kie-tools/dashbuilder-client": "^0.30.0", "@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-dom": "^17.0.20", "@types/react-router-dom": "^5.3.3", - "@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-junit": "^14.0.1", @@ -60,51 +57,6 @@ "typescript": "^4.9.5", "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/types/", - "./tests/mocks/", - "./src/api/", - "./src/envelope/contexts/", - "./src/envelope/index.ts", - "mocks/" - ], - "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" - } - }, "lint-staged": { "*.{ts,tsx}": [ "pnpm run format", diff --git a/ui-packages/packages/custom-dashboard-view/src/embedded/tests/EmbeddedCustomDashboardView.test.tsx b/ui-packages/packages/custom-dashboard-view/src/embedded/tests/EmbeddedCustomDashboardView.test.tsx index 12817cf1ad..484c176044 100644 --- a/ui-packages/packages/custom-dashboard-view/src/embedded/tests/EmbeddedCustomDashboardView.test.tsx +++ b/ui-packages/packages/custom-dashboard-view/src/embedded/tests/EmbeddedCustomDashboardView.test.tsx @@ -17,7 +17,7 @@ import React from 'react'; import { EmbeddedCustomDashboardView } from '../EmbeddedCustomDashboardView'; import { MockedCustomDashboardViewDriver } from './utils/Mocks'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; describe('EmbeddedCustomDashboardView tests', () => { it('Snapshot', () => { @@ -27,14 +27,11 @@ describe('EmbeddedCustomDashboardView tests', () => { driver: new MockedCustomDashboardViewDriver() }; - const wrapper = mount(); + const { container } = render(); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.props().driver).toStrictEqual(props.driver); - expect(wrapper.props().targetOrigin).toStrictEqual(props.targetOrigin); + const contentDiv = container.querySelector('div'); - const contentDiv = wrapper.find('div'); - - expect(contentDiv.exists()).toBeTruthy(); + expect(contentDiv).toBeTruthy(); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui-packages/packages/custom-dashboard-view/src/embedded/tests/__snapshots__/EmbeddedCustomDashboardView.test.tsx.snap b/ui-packages/packages/custom-dashboard-view/src/embedded/tests/__snapshots__/EmbeddedCustomDashboardView.test.tsx.snap index e19386e540..55dd11ba2e 100644 --- a/ui-packages/packages/custom-dashboard-view/src/embedded/tests/__snapshots__/EmbeddedCustomDashboardView.test.tsx.snap +++ b/ui-packages/packages/custom-dashboard-view/src/embedded/tests/__snapshots__/EmbeddedCustomDashboardView.test.tsx.snap @@ -1,33 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EmbeddedCustomDashboardView tests Snapshot 1`] = ` - - -
- - +
+
+
`; diff --git a/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/CustomDashboardView.test.tsx b/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/CustomDashboardView.test.tsx index 75c3fd3e25..bbe3bdeceb 100755 --- a/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/CustomDashboardView.test.tsx +++ b/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/CustomDashboardView.test.tsx @@ -14,18 +14,14 @@ * limitations under the License. */ -import { mount } from 'enzyme'; -import { ServerErrors } from '@kogito-apps/components-common/dist/components/ServerErrors'; +import { render, fireEvent } from '@testing-library/react'; import React from 'react'; import CustomDashboardView, { CustomDashboardViewProps } from '../CustomDashboardView'; import { act } from 'react-dom/test-utils'; -import { Card } from '@patternfly/react-core/dist/js/components/Card'; -import { Bullseye } from '@patternfly/react-core/dist/js/layouts/Bullseye'; import { BrowserRouter } from 'react-router-dom'; import { MockedCustomDashboardViewDriver } from '../../../../embedded/tests/utils/Mocks'; -import wait from 'waait'; const props: CustomDashboardViewProps = { isEnvelopeConnectedToChannel: true, @@ -33,26 +29,27 @@ const props: CustomDashboardViewProps = { customDashboardName: 'name', targetOrigin: 'targetOrigin' }; -const MockedComponent = (): React.ReactElement => { - return <>; -}; describe('Custom Dashboard View tests', () => { it('Snapshot tests with data', async () => { (props.driver.getCustomDashboardContent as jest.Mock).mockResolvedValue( 'its a yml file' ); - let wrapper; await act(async () => { - wrapper = mount(); - wrapper = wrapper.update().find('CustomDashboardView'); - wait(); + fireEvent( + window, + new MessageEvent('message', { data: 'ready', origin: 'targetOrigin' }) + ); + }); + let container; + await act(async () => { + container = render().container; }); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find(CustomDashboardView)).toMatchSnapshot(); - expect(wrapper.find(CustomDashboardView)).toBeTruthy(); - const iframeWrapper = wrapper.find('iframe'); - expect(iframeWrapper.find('iframe').props()['src']).toEqual( + expect(container).toMatchSnapshot(); + + const iframeWrapper = container.querySelector('iframe'); + + expect(iframeWrapper?.getAttribute('src')).toEqual( 'resources/webapp/custom-dashboard-view/dashbuilder/index.html' ); expect(props.driver.getCustomDashboardContent).toHaveBeenCalled(); @@ -62,32 +59,55 @@ describe('Custom Dashboard View tests', () => { (props.driver.getCustomDashboardContent as jest.Mock).mockRejectedValue({ message: 'network issue' }); - let wrapper; await act(async () => { - wrapper = mount( + fireEvent( + window, + new MessageEvent('message', { data: 'ready', origin: 'targetOrigin' }) + ); + }); + let container; + await act(async () => { + container = render( - ); - wrapper = wrapper.update().find('CustomDashboardView'); + ).container; }); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find(CustomDashboardView)).toMatchSnapshot(); - expect(wrapper.find(CustomDashboardView)).toBeTruthy(); - const cardWrapper = wrapper.update().find(Card); - expect(cardWrapper.find(Card)).toMatchSnapshot(); - expect(cardWrapper.find(Card).props()['className']).toEqual( - 'kogito-custom-dashboard-view-__card-size' + expect(container).toMatchSnapshot(); + + const cardWrapper = container.querySelector('article'); + expect(cardWrapper).toMatchSnapshot(); + + expect(cardWrapper.getAttribute('class')).toEqual( + 'pf-c-card kogito-custom-dashboard-view-__card-size' ); - const bullseyeWrapper = wrapper.update().find(Card); - expect(bullseyeWrapper.find(Bullseye)).toMatchSnapshot(); - const serverErrorsWrapper = wrapper.update().find(ServerErrors); - expect(serverErrorsWrapper.find(ServerErrors)).toMatchSnapshot(); expect(props.driver.getCustomDashboardContent).toHaveBeenCalled(); - expect(serverErrorsWrapper.find(ServerErrors).props()['error']).toEqual( - 'network issue' + expect(container.querySelector('h1').textContent).toEqual( + 'Error fetching data' ); }); + + it('With wrong target origin', async () => { + (props.driver.getCustomDashboardContent as jest.Mock).mockRejectedValue({ + message: 'network issue' + }); + await act(async () => { + fireEvent( + window, + new MessageEvent('message', { data: 'ready', origin: 'whatever' }) + ); + }); + let container; + await act(async () => { + container = render( + + + + ).container; + }); + + expect(container).toMatchSnapshot(); + }); }); diff --git a/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/__snapshots__/CustomDashboardView.test.tsx.snap b/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/__snapshots__/CustomDashboardView.test.tsx.snap index 518ba1fb14..3707195586 100644 --- a/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/__snapshots__/CustomDashboardView.test.tsx.snap +++ b/ui-packages/packages/custom-dashboard-view/src/envelope/components/CustomDashboardView/tests/__snapshots__/CustomDashboardView.test.tsx.snap @@ -1,767 +1,239 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Custom Dashboard View tests Snapshot tests with data 1`] = ` - +