From 334e8aac5467f90adfa9f22b56804d38d242f005 Mon Sep 17 00:00:00 2001 From: Simon Seyock Date: Tue, 28 May 2024 09:46:29 +0200 Subject: [PATCH] fix(LayerTree): make contents of title clickable --- src/Grid/FeatureGrid/FeatureGrid.tsx | 2 +- src/LayerTree/LayerTree.less | 4 -- src/LayerTree/LayerTree.spec.tsx | 80 +++++++++++++--------------- src/LayerTree/LayerTree.tsx | 21 ++++++-- 4 files changed, 55 insertions(+), 52 deletions(-) diff --git a/src/Grid/FeatureGrid/FeatureGrid.tsx b/src/Grid/FeatureGrid/FeatureGrid.tsx index 02d732b55..1557be9c5 100644 --- a/src/Grid/FeatureGrid/FeatureGrid.tsx +++ b/src/Grid/FeatureGrid/FeatureGrid.tsx @@ -31,7 +31,7 @@ type OwnProps = { selectedFeatures: OlFeature[]) => void; }; -export type FeatureGridProps = OwnProps & RgCommonGridProps & TableProps; +export type FeatureGridProps = OwnProps & RgCommonGridProps & TableProps; const defaultClassName = `${CSS_PREFIX}feature-grid`; diff --git a/src/LayerTree/LayerTree.less b/src/LayerTree/LayerTree.less index 3f5232748..6fb4cd637 100644 --- a/src/LayerTree/LayerTree.less +++ b/src/LayerTree/LayerTree.less @@ -2,8 +2,4 @@ .out-of-range { opacity: 0.5; } - - .ant-tree-node-content-wrapper { - pointer-events: none; - } } diff --git a/src/LayerTree/LayerTree.spec.tsx b/src/LayerTree/LayerTree.spec.tsx index 94007076b..2becd1ae5 100644 --- a/src/LayerTree/LayerTree.spec.tsx +++ b/src/LayerTree/LayerTree.spec.tsx @@ -1,4 +1,4 @@ -import { act,fireEvent, render, screen } from '@testing-library/react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; import OlLayerBase from 'ol/layer/Base'; import OlLayerGroup from 'ol/layer/Group'; import OlLayerTile from 'ol/layer/Tile'; @@ -6,7 +6,7 @@ import OlMap from 'ol/Map'; import OlSourceTileWMS from 'ol/source/TileWMS'; import * as React from 'react'; -import TestUtil from '../Util/TestUtil';; +import TestUtil from '../Util/TestUtil'; import { renderInMapContext } from '@terrestris/react-util/dist/Util/rtlTestUtils'; import userEvent from '@testing-library/user-event'; @@ -237,13 +237,13 @@ describe('', () => { ); - const layer1Span = screen.queryByText('layer1'); - const layer2Span = screen.queryByText('layer2'); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!; // eslint-disable-next-line testing-library/no-node-access - expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!; + + expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked'); }); it('sets the layers visibility on check', async () => { @@ -251,24 +251,24 @@ describe('', () => { ); - const layer1Span = screen.getByText('layer1'); - const layer2Span = screen.getByText('layer2'); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!; // eslint-disable-next-line testing-library/no-node-access - expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!; + + expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked'); expect(layer1.getVisible()).toBe(true); expect(layer2.getVisible()).toBe(false); - await userEvent.click(layer1Span); - await userEvent.click(layer2Span); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + await userEvent.click(layer1Node.querySelector('.ant-tree-checkbox')!); // eslint-disable-next-line testing-library/no-node-access - expect(layer2Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked'); + await userEvent.click(layer2Node.querySelector('.ant-tree-checkbox')!); + + expect(layer1Node).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer2Node).toHaveClass('ant-tree-treenode-checkbox-checked'); expect(layer1.getVisible()).toBe(false); expect(layer2.getVisible()).toBe(true); @@ -279,23 +279,21 @@ describe('', () => { ); - const layer1Span = screen.getByText('layer1'); - const layer2Span = screen.getByText('layer2'); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!; // eslint-disable-next-line testing-library/no-node-access - expect(layer2Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + const layer2Node = screen.getByText('layer2').closest('.ant-tree-treenode')!; + + expect(layer1Node).toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer2Node).not.toHaveClass('ant-tree-treenode-checkbox-checked'); act(() => { layer1.setVisible(false); layer2.setVisible(true); }); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); - // eslint-disable-next-line testing-library/no-node-access - expect(layer2Span?.parentNode?.parentNode).toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer1Node).not.toHaveClass('ant-tree-treenode-checkbox-checked'); + expect(layer2Node).toHaveClass('ant-tree-treenode-checkbox-checked'); }); it('sets the out-of-range class if the layer is not visible', () => { @@ -303,17 +301,16 @@ describe('', () => { ); - const layer1Span = screen.getByText('layer1'); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).toHaveClass('out-of-range'); + const layer1Node = screen.getByText('layer1').closest('.ant-tree-treenode')!; + + expect(layer1Node).toHaveClass('out-of-range'); act(() => { map.getView().setZoom(10); }); - // eslint-disable-next-line testing-library/no-node-access - expect(layer1Span?.parentNode?.parentNode).not.toHaveClass('out-of-range'); + expect(layer1Node).not.toHaveClass('out-of-range'); }); it('adds/removes layers to the tree if added/removed internally', () => { @@ -374,11 +371,13 @@ describe('', () => { ); - const layerSubGroupSpan = screen.getByText('layerSubGroup'); + // eslint-disable-next-line testing-library/no-node-access + const layerSubGroupNode = screen.getByText('layerSubGroup').closest('.ant-tree-treenode')!; expect(layer3.getVisible()).toBe(false); - await userEvent.click(layerSubGroupSpan); + // eslint-disable-next-line testing-library/no-node-access + await userEvent.click(layerSubGroupNode.querySelector('.ant-tree-checkbox')!); expect(layer3.getVisible()).toBe(true); }); @@ -394,21 +393,18 @@ describe('', () => { await userEvent.click(caret); } - const layerSubGroupSpan = screen.getByText('layerSubGroup'); - // eslint-disable-next-line testing-library/no-node-access - let layerSubGroupCheckbox = layerSubGroupSpan?.parentNode?.parentNode?.querySelector('.ant-tree-checkbox-checked'); - - expect(layerSubGroupCheckbox).toBe(null); + const layerSubGroupNode = screen.getByText('layerSubGroup').closest('.ant-tree-treenode')!; - const layer3Span = screen.getByText('layer3'); + expect(layerSubGroupNode).not.toHaveClass('ant-tree-treenode-checkbox-checked'); - await userEvent.click(layer3Span); + // eslint-disable-next-line testing-library/no-node-access + const layer3Node = screen.getByText('layer3').closest('.ant-tree-treenode')!; // eslint-disable-next-line testing-library/no-node-access - layerSubGroupCheckbox = layerSubGroupSpan?.parentNode?.parentNode?.querySelector('.ant-tree-checkbox-checked'); + await userEvent.click(layer3Node.querySelector('.ant-tree-checkbox')!); - expect(layerSubGroupCheckbox).toBeInstanceOf(HTMLSpanElement); + expect(layerSubGroupNode).toHaveClass('ant-tree-treenode-checkbox-checked'); }); it('renders the layers in correct order', () => { diff --git a/src/LayerTree/LayerTree.tsx b/src/LayerTree/LayerTree.tsx index 13c1db27d..8fadb52e4 100644 --- a/src/LayerTree/LayerTree.tsx +++ b/src/LayerTree/LayerTree.tsx @@ -3,8 +3,15 @@ import './LayerTree.less'; import Logger from '@terrestris/base-util/dist/Logger'; import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap'; -import { Tree, TreeDataNode } from 'antd'; -import { BasicDataNode, DataNode, TreeProps } from 'antd/lib/tree'; +import { + Tree, + TreeDataNode +} from 'antd'; +import { + BasicDataNode, + DataNode, + TreeProps +} from 'antd/lib/tree'; import _isFunction from 'lodash/isFunction'; import { getUid } from 'ol'; import { EventsKey as OlEventsKey } from 'ol/events'; @@ -89,7 +96,7 @@ const LayerTree: React.FC = ({ return; } - let childNodes: TreeDataNode[] = []; + let childNodes: TreeDataNode[]|undefined = undefined; if (filterFunction && [layer].filter(filterFunction).length === 0) { return; @@ -108,10 +115,14 @@ const LayerTree: React.FC = ({ return { key: getUid(layer), - title: getTreeNodeTitle(layer), + title:
e.stopPropagation()} + > + {getTreeNodeTitle(layer)} +
, className: MapUtil.layerInResolutionRange(layer, map) ? '' : 'out-of-range', // Required to identify a group layer/node. - children: layer instanceof OlLayerGroup ? childNodes : undefined + children: childNodes } as TreeDataNode; }, [map, getTreeNodeTitle, filterFunction]);