feat #81 - Address PR comments, refac onCheck --> onChange

src/__snapshots__/storybook.test.ts.snap

@@ -222,7 +222,6 @@ exports[`Storyshots Form Default 1`] = `
         >
           <div
             className="ant-select-selector"
-            onClick={[Function]}
             onMouseDown={[Function]}
           >
             <span
@@ -523,7 +522,6 @@ exports[`Storyshots Select Default 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -615,7 +613,6 @@ exports[`Storyshots Select Full Width 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -712,7 +709,6 @@ exports[`Storyshots Select Icon 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -818,7 +814,6 @@ exports[`Storyshots Select Search 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -1062,6 +1057,7 @@ exports[`Storyshots Tree Default 1`] = `
 <ForwardRef
   blockNode={true}
   checkable={true}
+  className=""
   data-test="tree"
   defaultExpandAll={true}
   motion={

src/components/Tree/Tree.stories.tsx

@@ -6,7 +6,7 @@ import Tree, { TreeProps } from './index'
 
 export default {
 	argTypes: {
-		onCheck: { defaultValue: action('onCheck') },
+		onChange: { defaultValue: action('onCheck') },
 		treeData: {
 			table: {
 				type: {

src/components/Tree/TreeSkeleton.tsx

@@ -8,25 +8,25 @@ const useStyles = createUseStyles({
 	skeletonLabel: {
 		marginLeft: 5
 	},
-	skeletonTreeNode: {
+	treeNodeSkeleton: {
 		alignItems: 'center',
 		display: 'flex',
 		marginLeft: props => (props.nestLevel ? props.nestLevel * 20 : 0),
 		paddingBottom: 10
 	}
 })
 
-interface SkeletonTreeNodeProps {
+interface TreeNodeSkeletonProps {
 	nestLevel?: number
 }
 
-export const SkeletonTreeNode: FC<SkeletonTreeNodeProps> = (
-	props: SkeletonTreeNodeProps
+export const TreeNodeSkeleton: FC<TreeNodeSkeletonProps> = (
+	props: TreeNodeSkeletonProps
 ) => {
 	const classes = useStyles(props)
 
 	return (
-		<div className={classes.skeletonTreeNode}>
+		<div className={classes.treeNodeSkeleton}>
 			<Skeleton height={15} width={15} />
 			<Skeleton
 				classes={[classes.skeletonLabel]}
@@ -37,24 +37,38 @@ export const SkeletonTreeNode: FC<SkeletonTreeNodeProps> = (
 	)
 }
 
-const generateTreeBlock = (i: Key) => (
+const generateTreeNodeSkeletons = (count: number, treeNodeCount?: number) => (
+	<>
+		{times(count, (j: number) => {
+			return (
+				<TreeNodeSkeleton
+					key={j}
+					nestLevel={
+						treeNodeCount === undefined ? j : treeNodeCount - 1
+					}
+				/>
+			)
+		})}
+	</>
+)
+
+const generateTreeBlock = (i: Key, treeNodeCount: number) => (
 	<Fragment key={i}>
-		<SkeletonTreeNode />
-		<SkeletonTreeNode nestLevel={1} />
-		{times(random(1, 3), (j: number) => (
-			<SkeletonTreeNode key={j} nestLevel={2} />
-		))}
+		{generateTreeNodeSkeletons(treeNodeCount - 1)}
+		{generateTreeNodeSkeletons(random(1, 3), treeNodeCount)}
 	</Fragment>
 )
 
 interface TreeSkeletonProps {
 	blockCount: number
+	treeNodeCount: number
 }
 
 const TreeSkeleton: FC<TreeSkeletonProps> = ({
-	blockCount
+	blockCount,
+	treeNodeCount
 }: TreeSkeletonProps) => (
-	<div>{times(blockCount, i => generateTreeBlock(i))}</div>
+	<div>{times(blockCount, i => generateTreeBlock(i, treeNodeCount))}</div>
 )
 
 export default TreeSkeleton

src/components/Tree/__tests__/Tree.test.tsx

@@ -4,12 +4,12 @@ import treeData0 from '../fixtures/0_sample_data'
 import TreeSkeleton from '../TreeSkeleton'
 import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme'
 
-const mockOnCheck = jest.fn()
+const mockOnChange = jest.fn()
 
 let wrapper: ReactWrapper | ShallowWrapper
 
 beforeEach(() => {
-	wrapper = mount(<Tree onCheck={mockOnCheck} treeData={treeData0} />)
+	wrapper = mount(<Tree onChange={mockOnChange} treeData={treeData0} />)
 })
 
 describe('Tree', () => {
@@ -19,26 +19,49 @@ describe('Tree', () => {
 		expect(tree).toHaveLength(1)
 	})
 
-	it('correctly passes treeData props if the props exist', () => {
-		expect(wrapper.find(Tree).props().treeData).toMatchObject(treeData0)
+	it('correctly passes treeData and onChange props if the props exist', () => {
+		const treeProps = wrapper.find(Tree).props()
+
+		expect(treeProps.treeData).toMatchObject(treeData0)
+		expect(treeProps.onChange).toEqual(mockOnChange)
 	})
 
-	it('calls onCheck handler when an item is clicked', () => {
-		const treeItem = wrapper
-			.find('.ant-tree-treenode')
-			.first()
-			.find('.ant-tree-node-content-wrapper')
+	describe('onChange', () => {
+		it('calls onChange handler if it is passed as prop and when an item is clicked', () => {
+			const treeItem = wrapper
+				.find('.ant-tree-treenode')
+				.first()
+				.find('.ant-tree-node-content-wrapper')
+
+			expect(treeItem).toHaveLength(1)
+
+			treeItem.simulate('click')
+
+			expect(mockOnChange).toHaveBeenCalledTimes(1)
+		})
+
+		it('does not call onChange handler if one is not passed as prop', () => {
+			const mockOnChange = jest.fn()
+			wrapper = mount(<Tree treeData={treeData0} />)
 
-		expect(treeItem).toHaveLength(1)
+			const treeItem = wrapper
+				.find('.ant-tree-treenode')
+				.first()
+				.find('.ant-tree-node-content-wrapper')
 
-		treeItem.simulate('click')
+			expect(treeItem).toHaveLength(1)
 
-		expect(mockOnCheck).toHaveBeenCalledTimes(1)
+			treeItem.simulate('click')
+
+			expect(mockOnChange).toBeCalledTimes(0)
+		})
 	})
 
 	describe('loading', () => {
 		it('renders a TreeSkeleton if loading prop is passed as true', () => {
-			wrapper = shallow(<Tree loading />)
+			wrapper = shallow(
+				<Tree loading onChange={mockOnChange} treeData={[]} />
+			)
 
 			expect(wrapper.find(TreeSkeleton)).toHaveLength(1)
 		})

src/components/Tree/__tests__/TreeSkeleton.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount, ReactWrapper } from 'enzyme'
-import TreeSkeleton, { SkeletonTreeNode } from '../TreeSkeleton'
+import TreeSkeleton, { TreeNodeSkeleton } from '../TreeSkeleton'
 
 declare global {
 	// eslint-disable-next-line @typescript-eslint/no-namespace
@@ -33,15 +33,22 @@ expect.extend({
 let wrapper: ReactWrapper
 
 beforeEach(() => {
-	wrapper = mount(<TreeSkeleton blockCount={3} />)
+	wrapper = mount(<TreeSkeleton blockCount={3} treeNodeCount={3} />)
 })
 
 describe('TreeSkeleton', () => {
 	it('renders', () => {
 		expect(wrapper.find(TreeSkeleton)).toHaveLength(1)
 	})
 
+	it('correctly passes blockCount and treeNodeCount props', () => {
+		const skeletonProps = wrapper.find(TreeSkeleton).props()
+
+		expect(skeletonProps.blockCount).toEqual(3)
+		expect(skeletonProps.treeNodeCount).toEqual(3)
+	})
+
 	it('renders correct number of SkeletonTreeNodes within range', () => {
-		expect(wrapper.find(SkeletonTreeNode).length).toBeWithinRange(9, 15)
+		expect(wrapper.find(TreeNodeSkeleton).length).toBeWithinRange(9, 15)
 	})
 })

src/components/Tree/__tests__/utils.test.ts

@@ -1,9 +1,9 @@
+import { processTreeData } from '../utils'
 import treeData0 from '../fixtures/0_sample_data'
-import { mapOnCheckArgs, MapOnCheckArgsParams, processTreeData } from '../utils'
 
 describe('processTreeData', () => {
 	it('returns an object containing correctly formatted tree data and an object mapping keys to tree nodes', () => {
-		const mappedTreeData = [
+		const processedData = [
 			{
 				children: [
 					{
@@ -29,90 +29,10 @@ describe('processTreeData', () => {
 			}
 		]
 
-		const treeNodeHash = {
-			0: {
-				children: [
-					{
-						children: [
-							{ id: 3, name: 'Prod Account' },
-							{ id: 4, name: 'Dev Account' }
-						],
-						id: 1,
-						name: 'Security'
-					},
-					{
-						children: [
-							{ id: 5, name: 'Prod Account' },
-							{ id: 6, name: 'Dev Account' },
-							{ id: 7, name: 'Test Account' }
-						],
-						id: 2,
-						name: 'Infrastructure'
-					}
-				],
-				id: 0,
-				name: 'AWS'
-			},
-			1: {
-				children: [
-					{ id: 3, name: 'Prod Account' },
-					{ id: 4, name: 'Dev Account' }
-				],
-				id: 1,
-				name: 'Security'
-			},
-			2: {
-				children: [
-					{ id: 5, name: 'Prod Account' },
-					{ id: 6, name: 'Dev Account' },
-					{ id: 7, name: 'Test Account' }
-				],
-				id: 2,
-				name: 'Infrastructure'
-			},
-			3: { id: 3, name: 'Prod Account' },
-			4: { id: 4, name: 'Dev Account' },
-			5: { id: 5, name: 'Prod Account' },
-			6: { id: 6, name: 'Dev Account' },
-			7: { id: 7, name: 'Test Account' }
-		}
-
-		const processedData = {
-			mappedTreeData,
-			treeNodeHash
-		}
-
 		expect(processTreeData(treeData0)).toMatchObject(processedData)
 	})
 
 	it('returns an object containing an empty array and empty object for an empty array argument', () => {
-		const processedData = {
-			mappedTreeData: [],
-			treeNodeHash: {}
-		}
-
-		expect(processTreeData([])).toMatchObject(processedData)
-	})
-})
-
-describe('mapOnCheckArgs', () => {
-	const args: MapOnCheckArgsParams = {
-		checked: [0],
-		info: { checked: true, node: { key: 0, title: 'Lorem' } },
-		treeNodeHash: {
-			0: { id: 0, name: 'Lorem' },
-			1: { id: 1, name: 'Ipsum' }
-		}
-	}
-
-	const mappedArgs = {
-		checked: true,
-		checkedKeys: [0],
-		checkedNode: { id: 0, name: 'Lorem' },
-		checkedNodes: [{ id: 0, name: 'Lorem' }]
-	}
-
-	it('correctly maps onCheck args', () => {
-		expect(mapOnCheckArgs(args)).toMatchObject(mappedArgs)
+		expect(processTreeData([])).toMatchObject([])
 	})
 })