fix: tree events (#1733)

* fix: tree events * fix: integration test
nexxtway · Jul 20, 2020 · 979ff3b · 979ff3b
1 parent 35ba4eb
commit 979ff3b
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 45 deletions.
diff --git a/src/components/Tree/__test__/tree.spec.js b/src/components/Tree/__test__/tree.spec.js
@@ -40,36 +40,44 @@ const data = [
 
 describe('<Tree/>', () => {
     it('should call onNodeExpand with the right parameters when the button is clicked', () => {
-        const nodePath = [2, 1];
         const onNodeExpandMock = jest.fn();
         const component = mount(<Tree data={data} onNodeExpand={onNodeExpandMock} />);
         component
             .find('ButtonIcon')
             .at(1)
             .simulate('click');
-        expect(onNodeExpandMock).toHaveBeenCalledWith({ nodePath });
+        expect(onNodeExpandMock).toHaveBeenCalledTimes(1);
+        expect(onNodeExpandMock).toHaveBeenCalledWith({
+            nodePath: [2, 1],
+            name: 'node-3.2',
+        });
     });
     it('should call onNodeCheck with the right parameters when the node is selected', () => {
-        const nodePath = [2];
         const onNodeCheckMock = jest.fn();
         const component = mount(<Tree data={data} onNodeCheck={onNodeCheckMock} />);
         component
             .find('PrimitiveCheckbox')
             .at(2)
             .find('input')
             .simulate('change');
-        expect(onNodeCheckMock).toHaveBeenCalledWith({ nodePath });
+        expect(onNodeCheckMock).toHaveBeenCalledTimes(1);
+        expect(onNodeCheckMock).toHaveBeenCalledWith({
+            nodePath: [2],
+            name: 'node-3',
+        });
     });
     it('should call onNodeSelect with the right data', () => {
-        const name = 'node-2';
-        const nodePath = [1];
         const onNodeSelectMock = jest.fn();
         const component = mount(<Tree data={data} onNodeSelect={onNodeSelectMock} />);
         component
             .find('li')
             .at(1)
             .simulate('click');
-        expect(onNodeSelectMock).toHaveBeenCalledWith({ name, nodePath });
+        expect(onNodeSelectMock).toHaveBeenCalledTimes(1);
+        expect(onNodeSelectMock).toHaveBeenCalledWith({
+            nodePath: [1],
+            name: 'node-2',
+        });
     });
     it('should render the correct number of children', () => {
         const component = mount(<Tree data={data} />);

diff --git a/src/components/Tree/child.js b/src/components/Tree/child.js
@@ -9,8 +9,10 @@ import Label from './styled/label';
 import IconContainer from './styled/iconContainer';
 import InputCheckbox from './styled/inputCheckbox';
 import ChildrenContainerUl from './styled/childrenContainer';
+import InnerContainer from './styled/innerContainer';
 import getNodeLevel from './helpers/getNodeLevel';
 import getTabIndex from './helpers/getTabIndex';
+import shouldSelectNode from './helpers/shouldSelectNode';
 
 export default function Child(props) {
     const {
@@ -38,12 +40,17 @@ export default function Child(props) {
     const tabIndex = getTabIndex({ selectedNode, isFirstNode, isSelected });
 
     const handleNodeSelect = event => {
-        event.stopPropagation();
-        onNodeSelect({ name, nodePath });
+        if (shouldSelectNode(event.target, name)) {
+            onNodeSelect({ name, nodePath });
+        }
     };
 
-    const handleExpandCollapse = () => {
-        return onNodeExpand({ nodePath });
+    const handleNodeExpand = () => {
+        return onNodeExpand({ name, nodePath });
+    };
+
+    const handleNodeCheck = () => {
+        onNodeCheck({ name, nodePath });
     };
 
     return (
@@ -65,20 +72,17 @@ export default function Child(props) {
                 ariaLevelValue={ariaLevelValue}
                 hasChildren={hasChildren}
             >
-                <ExpandCollapseButton
-                    hasChildren={hasChildren}
-                    isExpanded={isExpanded === true}
-                    isLoading={isLoading === true}
-                    onClick={handleExpandCollapse}
-                />
-                <RenderIf isTrue={hasCheckbox}>
-                    <InputCheckbox
-                        type="checkbox"
-                        label=""
-                        checked={isChecked}
-                        onChange={() => onNodeCheck({ nodePath })}
+                <InnerContainer data-id="no-selectable-container">
+                    <ExpandCollapseButton
+                        hasChildren={hasChildren}
+                        isExpanded={isExpanded === true}
+                        isLoading={isLoading === true}
+                        onClick={handleNodeExpand}
                     />
-                </RenderIf>
+                    <RenderIf isTrue={hasCheckbox}>
+                        <InputCheckbox checked={isChecked} onChange={handleNodeCheck} />
+                    </RenderIf>
+                </InnerContainer>
                 <RenderIf isTrue={hasIcon}>
                     <IconContainer>{icon}</IconContainer>
                 </RenderIf>

diff --git a/src/components/Tree/helpers/shouldSelectNode.js b/src/components/Tree/helpers/shouldSelectNode.js
@@ -0,0 +1,13 @@
+export default function shouldSelectNode(element, name) {
+    let parentElement = element;
+    while (parentElement) {
+        if (parentElement.getAttribute('data-id') === 'no-selectable-container') {
+            return false;
+        }
+        if (parentElement.tagName === 'LI') {
+            return parentElement.id === name;
+        }
+        parentElement = parentElement.parentNode;
+    }
+    return false;
+}
diff --git a/src/components/Tree/index.d.ts b/src/components/Tree/index.d.ts
@@ -1,10 +1,6 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../types';
 
-interface nodePath {
-    nodePath: number[];
-}
-
 interface selectValue {
     nodePath: number[];
     name: string;
@@ -21,8 +17,8 @@ interface DataItem {
 
 export interface TreeProps extends BaseProps {
     data?: DataItem[];
-    onNodeExpand?: (args: nodePath) => void;
-    onNodeCheck?: (args: nodePath) => void;
+    onNodeExpand?: (args: selectValue) => void;
+    onNodeCheck?: (args: selectValue) => void;
     onNodeSelect?: (args: selectValue) => void;
     selectedNode?: string;
     id?: string;

diff --git a/src/components/Tree/pageObject/node.js b/src/components/Tree/pageObject/node.js
@@ -18,7 +18,7 @@ class PageNodeItem {
      */
     click() {
         $(this.rootElement)
-            .$('[data-id="node-element"] > button')
+            .$('[data-id="node-element"] button')
             .click();
     }
 
@@ -29,7 +29,7 @@ class PageNodeItem {
      */
     hasFocus() {
         return $(this.rootElement)
-            .$('[data-id="node-element"] > button')
+            .$('[data-id="node-element"] button')
             .isFocused();
     }
 
@@ -43,18 +43,6 @@ class PageNodeItem {
             .$('[data-id="node-element-li"]')
             .isDisplayed();
     }
-
-    /**
-     * Returns the label of the node.
-     * @method
-     * @returns {string}
-     */
-    getLabel() {
-        return $(this.rootElement)
-            .$('[data-id="node-element"]')
-            .$('h1')
-            .getText();
-    }
 }
 
 module.exports = PageNodeItem;
diff --git a/src/components/Tree/styled/innerContainer.js b/src/components/Tree/styled/innerContainer.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const InnerContainer = styled.span`
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+`;
+
+export default InnerContainer;
diff --git a/src/components/Tree/styled/itemContainerLi.js b/src/components/Tree/styled/itemContainerLi.js
@@ -9,7 +9,6 @@ const ItemContainerLi = attachThemeAttrs(styled.li)`
     }
 
     &:focus > div {
-        background-color: ${props => props.palette.brand.light};
         box-shadow: ${props => props.shadows.brand};
     }
 `;