From 5174f2458bdefff9026049a6263c25ce055698d3 Mon Sep 17 00:00:00 2001 From: Oleksii Kurinnyi Date: Mon, 13 Nov 2023 16:13:07 +0200 Subject: [PATCH] fix: CheTooltip component Signed-off-by: Oleksii Kurinnyi --- packages/dashboard-frontend/jest.config.js | 2 +- packages/dashboard-frontend/jest.setup.ts | 14 ----- packages/dashboard-frontend/jest.setup.tsx | 40 +++++++++++++ .../CheTooltip/__tests__/CheTooltip.spec.tsx | 59 +++++++++++++++---- .../__snapshots__/CheTooltip.spec.tsx.snap | 27 +++++++-- .../src/components/CheTooltip/index.tsx | 22 ++----- .../__snapshots__/index.spec.tsx.snap | 26 ++++++-- .../__tests__/GetStartedTab.spec.tsx | 2 +- .../GitServicesTab/ProviderIcon/index.tsx | 18 ++---- .../GitServicesTab/ProviderWarning/index.tsx | 2 +- .../src/utils/che-tooltip.ts | 24 -------- 11 files changed, 142 insertions(+), 94 deletions(-) delete mode 100644 packages/dashboard-frontend/jest.setup.ts create mode 100644 packages/dashboard-frontend/jest.setup.tsx delete mode 100644 packages/dashboard-frontend/src/utils/che-tooltip.ts diff --git a/packages/dashboard-frontend/jest.config.js b/packages/dashboard-frontend/jest.config.js index 5dcf16187..89d202df5 100644 --- a/packages/dashboard-frontend/jest.config.js +++ b/packages/dashboard-frontend/jest.config.js @@ -34,7 +34,7 @@ module.exports = { }, ], }, - setupFilesAfterEnv: ['./jest.setup.ts'], + setupFilesAfterEnv: ['./jest.setup.tsx'], setupFiles: ['./src/inversify.config.ts'], collectCoverageFrom: [ ...base.collectCoverageFrom, diff --git a/packages/dashboard-frontend/jest.setup.ts b/packages/dashboard-frontend/jest.setup.ts deleted file mode 100644 index 2b40c1f9e..000000000 --- a/packages/dashboard-frontend/jest.setup.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2018-2023 Red Hat, Inc. - * This program and the accompanying materials are made - * available under the terms of the Eclipse Public License 2.0 - * which is available at https://www.eclipse.org/legal/epl-2.0/ - * - * SPDX-License-Identifier: EPL-2.0 - * - * Contributors: - * Red Hat, Inc. - initial API and implementation - */ - -import '@testing-library/jest-dom'; -import '@/utils/che-tooltip'; diff --git a/packages/dashboard-frontend/jest.setup.tsx b/packages/dashboard-frontend/jest.setup.tsx new file mode 100644 index 000000000..91db413f8 --- /dev/null +++ b/packages/dashboard-frontend/jest.setup.tsx @@ -0,0 +1,40 @@ +/* + * Copyright (c) 2018-2023 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import '@testing-library/jest-dom'; + +import React from 'react'; + +jest.mock('@patternfly/react-core', () => { + return { + ...jest.requireActual('@patternfly/react-core'), + // mock the Tooltip component from @patternfly/react-core + Tooltip: jest.fn(props => { + const { content, children, ...rest } = props; + return ( +
+ {JSON.stringify(rest)} +
{content}
+
{children}
+
+ ); + }), + }; +}); + +jest.mock('@/components/CheTooltip', () => { + return { + CheTooltip: jest.fn(props => { + return React.createElement('div', null, props.children, props.content); + }), + }; +}); diff --git a/packages/dashboard-frontend/src/components/CheTooltip/__tests__/CheTooltip.spec.tsx b/packages/dashboard-frontend/src/components/CheTooltip/__tests__/CheTooltip.spec.tsx index eb2561e43..50ccc1dad 100644 --- a/packages/dashboard-frontend/src/components/CheTooltip/__tests__/CheTooltip.spec.tsx +++ b/packages/dashboard-frontend/src/components/CheTooltip/__tests__/CheTooltip.spec.tsx @@ -10,27 +10,60 @@ * Red Hat, Inc. - initial API and implementation */ +import { TooltipPosition } from '@patternfly/react-core'; import React from 'react'; -import renderer, { ReactTestRendererJSON } from 'react-test-renderer'; -import CheTooltip from '@/components/CheTooltip'; +import { CheTooltip, Props } from '@/components/CheTooltip'; +import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer'; + +// use actual CheTooltip component +jest.unmock('@/components/CheTooltip'); + +const { createSnapshot, renderComponent } = getComponentRenderer(getComponent); describe('CheTooltip component', () => { - it('should render CheTooltip component correctly', () => { - const content = Tooltip text.; + afterEach(() => { + jest.clearAllMocks(); + }); - const component = ( - - <>some text - + test('snapshot', () => { + const props = { + content: Tooltip text., + }; + + const snapshot = createSnapshot(props); + + expect(snapshot.toJSON()).toMatchSnapshot(); + }); + + test('passed props', () => { + const props: Props = { + position: TooltipPosition.right, + exitDelay: 500, + content: Tooltip text., + }; + + renderComponent(props); + + const tooltipProps = screen.getByTestId('tooltip-props'); + expect(tooltipProps).toHaveTextContent( + '{"isContentLeftAligned":true,"style":{"border":"1px solid","borderRadius":"3px","opacity":"0.9"},"position":"right","exitDelay":500}', ); - expect(getComponentSnapshot(component)).toMatchSnapshot(); + const tooltipContent = screen.getByTestId('tooltip-content'); + expect(tooltipContent).toHaveTextContent('Tooltip text.'); + + const tooltipPlacedTo = screen.getByTestId('tooltip-placed-to'); + expect(tooltipPlacedTo).toHaveTextContent('some text'); + + screen.debug(); }); }); -function getComponentSnapshot( - component: React.ReactElement, -): null | ReactTestRendererJSON | ReactTestRendererJSON[] { - return renderer.create(component).toJSON(); +function getComponent(props: Props): React.ReactElement { + return ( + +
some text
+ + ); } diff --git a/packages/dashboard-frontend/src/components/CheTooltip/__tests__/__snapshots__/CheTooltip.spec.tsx.snap b/packages/dashboard-frontend/src/components/CheTooltip/__tests__/__snapshots__/CheTooltip.spec.tsx.snap index 55aa5a4fc..36f652655 100644 --- a/packages/dashboard-frontend/src/components/CheTooltip/__tests__/__snapshots__/CheTooltip.spec.tsx.snap +++ b/packages/dashboard-frontend/src/components/CheTooltip/__tests__/__snapshots__/CheTooltip.spec.tsx.snap @@ -1,10 +1,27 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CheTooltip component should render CheTooltip component correctly 1`] = ` -
- some text - - Tooltip text. +exports[`CheTooltip component snapshot 1`] = ` +
+ + {"isContentLeftAligned":true,"style":{"border":"1px solid","borderRadius":"3px","opacity":"0.9"}} +
+ + Tooltip text. + +
+
+
+ some text +
+
`; diff --git a/packages/dashboard-frontend/src/components/CheTooltip/index.tsx b/packages/dashboard-frontend/src/components/CheTooltip/index.tsx index 392ab55a7..f9e2d3418 100644 --- a/packages/dashboard-frontend/src/components/CheTooltip/index.tsx +++ b/packages/dashboard-frontend/src/components/CheTooltip/index.tsx @@ -10,31 +10,19 @@ * Red Hat, Inc. - initial API and implementation */ -import { Tooltip, TooltipPosition } from '@patternfly/react-core'; +import { Tooltip, TooltipProps } from '@patternfly/react-core'; import React from 'react'; -type Props = { - children: React.ReactElement; - content: React.ReactNode; - position?: TooltipPosition; -}; +export type Props = Omit; -class CheTooltip extends React.PureComponent { +export class CheTooltip extends React.PureComponent { public render(): React.ReactElement { - const { content, position, children } = this.props; - return ( - {children} - + {...this.props} + /> ); } } - -export default CheTooltip; diff --git a/packages/dashboard-frontend/src/components/WorkspaceEvents/Item/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/WorkspaceEvents/Item/__tests__/__snapshots__/index.spec.tsx.snap index d30b6cb52..1c837df60 100644 --- a/packages/dashboard-frontend/src/components/WorkspaceEvents/Item/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/dashboard-frontend/src/components/WorkspaceEvents/Item/__tests__/__snapshots__/index.spec.tsx.snap @@ -30,11 +30,29 @@ exports[`WorkspaceEventsItem component snapshot 1`] = ` - - P - + + {"aria":"none","aria-live":"polite"} + +
+ Pod +
+
+ + P + +
+
pod-name
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/__tests__/GetStartedTab.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/__tests__/GetStartedTab.spec.tsx index 40d1885da..f89f483ee 100644 --- a/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/__tests__/GetStartedTab.spec.tsx +++ b/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/__tests__/GetStartedTab.spec.tsx @@ -56,7 +56,7 @@ jest.mock('../SamplesListGallery', () => { describe('Samples list tab', () => { afterEach(() => { - jest.resetAllMocks(); + jest.clearAllMocks(); }); const renderComponent = (preferredStorageType: che.WorkspaceStorageType): RenderResult => { diff --git a/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderIcon/index.tsx b/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderIcon/index.tsx index 39a04cfd5..085730974 100644 --- a/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderIcon/index.tsx +++ b/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderIcon/index.tsx @@ -11,7 +11,6 @@ */ import { api } from '@eclipse-che/common'; -import { TooltipPosition } from '@patternfly/react-core'; import { CheckCircleIcon, ExclamationTriangleIcon, @@ -20,7 +19,7 @@ import { import React from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import CheTooltip from '@/components/CheTooltip'; +import { CheTooltip } from '@/components/CheTooltip'; import { AppState } from '@/store'; import * as GitOauthConfig from '@/store/GitOauthConfig'; import { @@ -78,29 +77,20 @@ export class ProviderIcon extends React.PureComponent { const { hasOauthToken, isSkipOauth } = this.state; if (hasOauthToken) { return ( - User has been authorized successfully.} - position={TooltipPosition.top} - > + User has been authorized successfully.}> ); } else if (isSkipOauth) { return ( - Authorization has been rejected by user.} - position={TooltipPosition.top} - > + Authorization has been rejected by user.}> ); } return ( - User has not been authorized yet.} - position={TooltipPosition.top} - > + User has not been authorized yet.}> ); diff --git a/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderWarning/index.tsx b/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderWarning/index.tsx index ed774636f..c1ebd8e49 100644 --- a/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderWarning/index.tsx +++ b/packages/dashboard-frontend/src/pages/UserPreferences/GitServicesTab/ProviderWarning/index.tsx @@ -13,7 +13,7 @@ import { WarningTriangleIcon } from '@patternfly/react-icons'; import React from 'react'; -import CheTooltip from '@/components/CheTooltip'; +import { CheTooltip } from '@/components/CheTooltip'; type Props = { serverURI: string; diff --git a/packages/dashboard-frontend/src/utils/che-tooltip.ts b/packages/dashboard-frontend/src/utils/che-tooltip.ts deleted file mode 100644 index 970f01518..000000000 --- a/packages/dashboard-frontend/src/utils/che-tooltip.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) 2018-2023 Red Hat, Inc. - * This program and the accompanying materials are made - * available under the terms of the Eclipse Public License 2.0 - * which is available at https://www.eclipse.org/legal/epl-2.0/ - * - * SPDX-License-Identifier: EPL-2.0 - * - * Contributors: - * Red Hat, Inc. - initial API and implementation - */ - -import { TooltipPosition } from '@patternfly/react-core'; -import React from 'react'; - -jest.mock('@/components/CheTooltip', () => { - return function CheTooltip(props: { - children: React.ReactElement; - content: React.ReactNode; - position?: TooltipPosition; - }): React.ReactElement { - return React.createElement('div', null, props.children, props.content); - }; -});