diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx index a85b4182f..7bbcece32 100644 --- a/packages/material-renderers/src/complex/MaterialTableControl.tsx +++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx @@ -42,6 +42,7 @@ import { TableCell, TableHead, TableRow, + Tooltip, Typography, } from '@mui/material'; import { @@ -319,35 +320,55 @@ const NonEmptyRowComponent = ({ {showSortButtons ? ( - - - + + + + - - - + + + + ) : null} - openDeleteDialog(childPath, rowIndex)} - size='large' + - - + openDeleteDialog(childPath, rowIndex)} + size='large' + > + + + diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx index f6ad22d71..7df2561eb 100644 --- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx +++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx @@ -39,6 +39,7 @@ import { Avatar, Grid, IconButton, + Tooltip, } from '@mui/material'; import { ExpandMore as ExpandMoreIcon, @@ -169,26 +170,40 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => { {showSortButtons && enabled ? ( - - - + + + + - - - + + + + ) : ( @@ -196,14 +211,20 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => { )} {enabled && ( - - - + + + + )} diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx index 56bb4b99e..b3752d234 100644 --- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx @@ -23,7 +23,12 @@ THE SOFTWARE. */ import './MatchMediaMock'; -import { ControlElement, DispatchCellProps, JsonSchema } from '@jsonforms/core'; +import { + ArrayTranslationEnum, + ControlElement, + DispatchCellProps, + JsonSchema, +} from '@jsonforms/core'; import * as React from 'react'; import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer'; @@ -32,6 +37,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme'; import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react'; import { initCore, TestEmitter } from './util'; +import { checkTooltip, checkTooltipTranslation } from './tooltipChecker'; Enzyme.configure({ adapter: new Adapter() }); @@ -699,4 +705,108 @@ describe('Material array control', () => { .find({ 'aria-label': 'Move item down' }); expect(downButton.is('[disabled]')).toBe(true); }); + + it('should have a tooltip for add button', () => { + wrapper = checkTooltip( + fixture.schema, + fixture.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(0), + ArrayTranslationEnum.addTooltip, + { + id: 'tooltip-add', + }, + fixture.data + ); + }); + it('should have a translatable tooltip for add button', () => { + wrapper = checkTooltipTranslation( + fixture.schema, + fixture.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(0), + { + id: 'tooltip-add', + }, + fixture.data + ); + }); + + it('should have a tooltip for delete button', () => { + wrapper = checkTooltip( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + ArrayTranslationEnum.removeTooltip, + { + id: 'tooltip-remove', + }, + fixture2.data + ); + }); + it('should have a translatable tooltip for delete button', () => { + wrapper = checkTooltipTranslation( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + { + id: 'tooltip-remove', + }, + fixture2.data + ); + }); + + it('should have a tooltip for up button', () => { + wrapper = checkTooltip( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + ArrayTranslationEnum.up, + { + id: 'tooltip-up', + }, + fixture2.data + ); + }); + it('should have a translatable tooltip for up button', () => { + wrapper = checkTooltipTranslation( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + { + id: 'tooltip-up', + }, + fixture2.data + ); + }); + + it('should have a tooltip for down button', () => { + wrapper = checkTooltip( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + ArrayTranslationEnum.down, + { + id: 'tooltip-down', + }, + fixture2.data + ); + }); + it('should have a translatable tooltip for down button', () => { + wrapper = checkTooltipTranslation( + fixture2.schema, + fixture2.uischema, + wrapper, + (wrapper) => wrapper.find('tr').at(1), + { + id: 'tooltip-down', + }, + fixture2.data + ); + }); }); diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx index ae1bc86cf..5114b15d3 100644 --- a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx @@ -23,10 +23,14 @@ THE SOFTWARE. */ import './MatchMediaMock'; -import { ControlElement, JsonSchema7 } from '@jsonforms/core'; +import { + ArrayTranslationEnum, + ControlElement, + JsonSchema7, +} from '@jsonforms/core'; import * as React from 'react'; -import { materialRenderers } from '../../src'; +import { ArrayLayoutToolbar, materialRenderers } from '../../src'; import { MaterialArrayLayout, materialArrayLayoutTester, @@ -36,6 +40,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react'; import { Accordion } from '@mui/material'; import { createTesterContext, initCore } from './util'; +import { checkTooltip, checkTooltipTranslation } from './tooltipChecker'; Enzyme.configure({ adapter: new Adapter() }); @@ -629,4 +634,108 @@ describe('Material array layout', () => { const noDataLabel = wrapper.find('div>div>p').text(); expect(noDataLabel.includes('Translated')).toBeTruthy(); }); + + it('should have a tooltip for add button', () => { + wrapper = checkTooltip( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find(ArrayLayoutToolbar), + ArrayTranslationEnum.addTooltip, + { + id: 'tooltip-add', + }, + data + ); + }); + it('should have a translatable tooltip for add button', () => { + wrapper = checkTooltipTranslation( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find(ArrayLayoutToolbar), + { + id: 'tooltip-add', + }, + data + ); + }); + + it('should have a tooltip for delete button', () => { + wrapper = checkTooltip( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + ArrayTranslationEnum.removeTooltip, + { + id: 'tooltip-remove', + }, + data + ); + }); + it('should have a translatable tooltip for delete button', () => { + wrapper = checkTooltipTranslation( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + { + id: 'tooltip-remove', + }, + data + ); + }); + + it('should have a tooltip for up button', () => { + wrapper = checkTooltip( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + ArrayTranslationEnum.up, + { + id: 'tooltip-up', + }, + data + ); + }); + it('should have a translatable tooltip for up button', () => { + wrapper = checkTooltipTranslation( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + { + id: 'tooltip-up', + }, + data + ); + }); + + it('should have a tooltip for down button', () => { + wrapper = checkTooltip( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + ArrayTranslationEnum.down, + { + id: 'tooltip-down', + }, + data + ); + }); + it('should have a translatable tooltip for down button', () => { + wrapper = checkTooltipTranslation( + nestedSchema, + uischemaWithSortOption, + wrapper, + (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0), + { + id: 'tooltip-down', + }, + data + ); + }); }); diff --git a/packages/material-renderers/test/renderers/tooltipChecker.tsx b/packages/material-renderers/test/renderers/tooltipChecker.tsx new file mode 100644 index 000000000..7754133d7 --- /dev/null +++ b/packages/material-renderers/test/renderers/tooltipChecker.tsx @@ -0,0 +1,70 @@ +import { EnzymePropSelector, mount, ReactWrapper } from 'enzyme'; +import { + arrayDefaultTranslations, + ArrayTranslationEnum, + ControlElement, + JsonSchema, +} from '@jsonforms/core'; +import { JsonForms } from '@jsonforms/react'; +import { materialRenderers } from '../../src'; +import { Tooltip } from '@mui/material'; +import * as React from 'react'; + +export const checkTooltip = ( + schema: JsonSchema, + uiSchema: ControlElement, + wrapper: ReactWrapper, + findTooltipWrapper: ( + wrapper: ReactWrapper + ) => ReactWrapper, + tooltipEnum: ArrayTranslationEnum, + tooltipFilter: EnzymePropSelector | string, + data?: any +): ReactWrapper => { + wrapper = mount( + + ); + + expect( + findTooltipWrapper(wrapper).find(Tooltip).filter(tooltipFilter).props()[ + 'title' + ] + ).toBe( + arrayDefaultTranslations.find((ar) => ar.key == tooltipEnum).default() + ); + return wrapper; +}; + +export const checkTooltipTranslation = ( + schema: JsonSchema, + uiSchema: ControlElement, + wrapper: ReactWrapper, + findTooltipWrapper: ( + wrapper: ReactWrapper + ) => ReactWrapper, + tooltipFilter: EnzymePropSelector | string, + data?: any +): ReactWrapper => { + const translate = () => 'Translated'; + wrapper = mount( + + ); + + expect( + findTooltipWrapper(wrapper).find(Tooltip).filter(tooltipFilter).props()[ + 'title' + ] + ).toBe('Translated'); + return wrapper; +};