From 68b83dab2df5bece90daded89086e25879b54e13 Mon Sep 17 00:00:00 2001 From: Mariia_Aloshyna Date: Wed, 10 Jan 2024 13:10:35 +0200 Subject: [PATCH] UIPFIMP-66: Jest/RTL: Increase test coverage for AbstractContainer component --- CHANGELOG.md | 1 + .../AbstractContainer.js | 9 +- .../tests/AbstractContainer.test.js | 164 ++++++++++++++++++ 3 files changed, 172 insertions(+), 2 deletions(-) create mode 100644 src/FindImportProfile/FindImportProfileContainer/tests/AbstractContainer.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 2836ff8..3158fc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Features added: * Jest/RTL: Increase test coverage for FindImportProfile component (UIPFIMP-65) +* Jest/RTL: Increase test coverage for AbstractContainer component (UIPFIMP-66) ## [7.0.0](https://github.com/folio-org/ui-plugin-find-import-profile/tree/v7.0.0) (2023-10-13) diff --git a/src/FindImportProfile/FindImportProfileContainer/AbstractContainer.js b/src/FindImportProfile/FindImportProfileContainer/AbstractContainer.js index 88e6d13..0021773 100644 --- a/src/FindImportProfile/FindImportProfileContainer/AbstractContainer.js +++ b/src/FindImportProfile/FindImportProfileContainer/AbstractContainer.js @@ -51,14 +51,14 @@ export class AbstractContainer extends Component { return get(this.props.resources, 'query', {}); }; - render(props) { + render() { const { stripes, resources, children, entityKey, profileShape, - } = props; + } = this.props; if (this.source) { this.source.update(this.props); @@ -92,4 +92,9 @@ AbstractContainer.propTypes = { mutator: PropTypes.object.isRequired, resources: PropTypes.object.isRequired, profileShape: PropTypes.object.isRequired, + children: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.node, + ]).isRequired, + entityKey: PropTypes.string, }; diff --git a/src/FindImportProfile/FindImportProfileContainer/tests/AbstractContainer.test.js b/src/FindImportProfile/FindImportProfileContainer/tests/AbstractContainer.test.js new file mode 100644 index 0000000..5aa875e --- /dev/null +++ b/src/FindImportProfile/FindImportProfileContainer/tests/AbstractContainer.test.js @@ -0,0 +1,164 @@ +import { runAxeTest } from '@folio/stripes-testing'; +import { + fireEvent, + render, + screen, +} from '@testing-library/react'; + +import { renderWithIntl } from '@folio/stripes-data-transfer-components/test/jest/helpers'; + +import '../../../../test/jest/__mock__'; + +import { + buildMutator, + buildResources, +} from '@folio/stripes-data-transfer-components/test/helpers'; + +import { + buildStripes, + translationsProperties, +} from '../../../../test/jest/helpers'; + +import { AbstractContainer } from '../AbstractContainer'; + +const mockFetchMore = jest.fn(); +const mockUpdateFn = jest.fn(); + +jest.mock('@folio/stripes/smart-components', () => ({ + ...jest.requireActual('@folio/stripes/smart-components'), + StripesConnectedSource: () => ({ + fetchMore: mockFetchMore, + update: mockUpdateFn, + }), +})); + +const mockUpdate = jest.fn(); +const mockReplace = jest.fn(); + +const stripesProp = buildStripes(); +const resourcesProp = buildResources({ + resourceName: 'records', + records: [{ firstRecord: 'firstRecordValue' }], +}); +const mutatorProp = buildMutator({ + sources: {}, + resultCount: {}, + query: { + update: mockUpdate, + replace: mockReplace, + }, +}); + +const mockedChildren = jest.fn(({ + onNeedMoreData, + querySetter, + queryGetter, +}) => ( + <> + Children + + + + +)); + +const profileShape = { + renderHeaders: () => ({ someColumn: 'someColumnMapped' }), + columnWidths: { someColumn: 'someColumnWidth' }, + visibleColumns: ['someColumn'], +}; + +const component = () => ( + + {mockedChildren} + +); + +const renderAbstractContainer = () => { + return renderWithIntl(component(), translationsProperties); +}; + +describe('AbstractContainer', () => { + it('should render with no axe errors', async () => { + const { container } = renderAbstractContainer(); + + await runAxeTest({ rootNode: container }); + }); + + describe('when component updated', () => { + it('should update source', () => { + const { rerender } = render(component()); + + rerender(component()); + + expect(mockUpdateFn).toHaveBeenCalledTimes(2); + }); + }); + + it('should renders children', () => { + const { getByText } = renderAbstractContainer(); + + expect(getByText('Children')).toBeInTheDocument(); + }); + + it('should pass proper props to children', () => { + renderAbstractContainer(); + + const expectedProps = { + columnMapping: profileShape.renderHeaders(), + columnWidths: profileShape.columnWidths, + data: { records: [{ firstRecord: 'firstRecordValue' }] }, + idPrefix: 'uiPluginFindImportProfile-', + modalLabel: expect.any(Object), + onNeedMoreData: expect.any(Function), + queryGetter: expect.any(Function), + querySetter: expect.any(Function), + renderFilters: expect.any(Function), + sortableColumns: profileShape.visibleColumns, + source: undefined, + stripes: expect.any(Object), + visibleColumns: profileShape.visibleColumns, + }; + + expect(mockedChildren).toHaveBeenCalledWith( + expect.objectContaining({ ...expectedProps }), + ); + }); + + it('should fetch more data', async () => { + renderAbstractContainer(); + + fireEvent.click(screen.getByText('OnNeedMoreData')); + + expect(mockFetchMore).toHaveBeenCalledTimes(1); + }); + + it('should update data', async () => { + renderAbstractContainer(); + + fireEvent.click(screen.getByText('UpdateQuery')); + + expect(mutatorProp.query.update).toHaveBeenCalled(); + }); +});