feat #81 - Address PR Comments, rebase dev

package.json

@@ -49,7 +49,10 @@
 	},
 	"jest": {
 		"coveragePathIgnorePatterns": [
-			".stories.tsx"
+			".stories.tsx",
+			"fixtures/*",
+			"types.ts",
+			"components/index.ts"
 		]
 	},
 	"browserslist": {

src/__snapshots__/storybook.test.ts.snap

@@ -1080,6 +1080,7 @@ exports[`Storyshots Tree Default 1`] = `
       "onLeaveStart": [Function],
     }
   }
+  onCheck={[Function]}
   selectable={false}
   showIcon={false}
   treeData={

src/components/Tree/Tree.stories.tsx

@@ -1,10 +1,12 @@
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 import treeData0 from './fixtures/0_sample_data'
 import { Meta, Story } from '@storybook/react/types-6-0'
 import Tree, { TreeProps } from './index'
 
 export default {
 	argTypes: {
+		onCheck: { defaultValue: action('onCheck') },
 		treeData: {
 			table: {
 				type: {

src/components/Tree/TreeSkeleton.tsx

@@ -6,22 +6,21 @@ import React, { FC, Fragment, Key } from 'react'
 
 const useStyles = createUseStyles({
 	skeletonLabel: {
-		marginLeft: '5px'
+		marginLeft: 5
 	},
 	skeletonTreeNode: {
 		alignItems: 'center',
 		display: 'flex',
-		marginLeft: props =>
-			props.nestLevel ? `${props.nestLevel * 20}px` : 0,
-		paddingBottom: '10px'
+		marginLeft: props => (props.nestLevel ? props.nestLevel * 20 : 0),
+		paddingBottom: 10
 	}
 })
 
 interface SkeletonTreeNodeProps {
 	nestLevel?: number
 }
 
-const SkeletonTreeNode: FC<SkeletonTreeNodeProps> = (
+export const SkeletonTreeNode: FC<SkeletonTreeNodeProps> = (
 	props: SkeletonTreeNodeProps
 ) => {
 	const classes = useStyles(props)
@@ -38,26 +37,24 @@ const SkeletonTreeNode: FC<SkeletonTreeNodeProps> = (
 	)
 }
 
-const generateTreeBlock = (i: Key) => {
-	return (
-		<Fragment key={i}>
-			<SkeletonTreeNode />
-			<SkeletonTreeNode nestLevel={1} />
-			{times(random(1, 3), (j: number) => (
-				<SkeletonTreeNode key={j} nestLevel={2} />
-			))}
-		</Fragment>
-	)
-}
+const generateTreeBlock = (i: Key) => (
+	<Fragment key={i}>
+		<SkeletonTreeNode />
+		<SkeletonTreeNode nestLevel={1} />
+		{times(random(1, 3), (j: number) => (
+			<SkeletonTreeNode key={j} nestLevel={2} />
+		))}
+	</Fragment>
+)
 
 interface TreeSkeletonProps {
 	blockCount: number
 }
 
 const TreeSkeleton: FC<TreeSkeletonProps> = ({
 	blockCount
-}: TreeSkeletonProps) => {
-	return <div>{times(blockCount, i => generateTreeBlock(i))}</div>
-}
+}: TreeSkeletonProps) => (
+	<div>{times(blockCount, i => generateTreeBlock(i))}</div>
+)
 
 export default TreeSkeleton

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

@@ -1,14 +1,16 @@
-import { processTreeData } from './utils'
+import { processTreeData } from '../utils'
 import React from 'react'
-import Tree from './index'
-import treeData0 from './fixtures/0_sample_data'
-import TreeSkeleton from './TreeSkeleton'
+import Tree from '../index'
+import treeData0 from '../fixtures/0_sample_data'
+import TreeSkeleton from '../TreeSkeleton'
 import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme'
 
+const mockOnCheck = jest.fn()
+
 let wrapper: ReactWrapper | ShallowWrapper
 
 beforeEach(() => {
-	wrapper = mount(<Tree treeData={treeData0} />)
+	wrapper = mount(<Tree onCheck={mockOnCheck} treeData={treeData0} />)
 })
 
 describe('Tree', () => {
@@ -18,6 +20,16 @@ describe('Tree', () => {
 		expect(tree).toHaveLength(1)
 	})
 
+	it('correctly passes treeData props if the props exist', () => {
+		wrapper = mount(
+			<Tree onCheck={mockOnCheck} treeData={[{ id: 0, name: 'test' }]} />
+		)
+
+		expect(wrapper.find(Tree).props().treeData).toMatchObject([
+			{ id: 0, name: 'test' }
+		])
+	})
+
 	describe('loading', () => {
 		it('renders a TreeSkeleton if loading prop is passed as true', () => {
 			wrapper = shallow(<Tree loading />)
@@ -62,11 +74,3 @@ describe('utils - processTreeData', () => {
 		expect(processTreeData([])).toMatchObject([])
 	})
 })
-
-describe('TreeSkeleton', () => {
-	it('renders', () => {
-		wrapper = mount(<TreeSkeleton blockCount={3} />)
-
-		expect(wrapper.find(TreeSkeleton)).toHaveLength(1)
-	})
-})

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { mount, ReactWrapper } from 'enzyme'
+import TreeSkeleton, { SkeletonTreeNode } from '../TreeSkeleton'
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace jest {
+		interface Matchers<R> {
+			toBeWithinRange(a: number, b: number): R
+		}
+	}
+}
+
+expect.extend({
+	toBeWithinRange(received, floor, ceiling) {
+		const pass = received >= floor && received <= ceiling
+		if (pass) {
+			return {
+				message: () =>
+					`expected ${received} not to be within range ${floor} - ${ceiling}`,
+				pass: true
+			}
+		} else {
+			return {
+				message: () =>
+					`expected ${received} to be within range ${floor} - ${ceiling}`,
+				pass: false
+			}
+		}
+	}
+})
+
+let wrapper: ReactWrapper
+
+beforeEach(() => {
+	wrapper = mount(<TreeSkeleton blockCount={3} />)
+})
+
+describe('TreeSkeleton', () => {
+	it('renders', () => {
+		expect(wrapper.find(TreeSkeleton)).toHaveLength(1)
+	})
+
+	it('renders correct number of SkeletonTreeNodes within range', () => {
+		expect(wrapper.find(SkeletonTreeNode).length).toBeWithinRange(9, 15)
+	})
+})

src/components/Tree/index.tsx

@@ -13,11 +13,25 @@ export interface TreeNodeType {
 	children?: TreeNodeType[]
 }
 
+interface CheckedNodesType {
+	checked: (string | number)[]
+	halfChecked: (string | number)[]
+}
+
+type OnCheckHandler = (
+	checked: CheckedNodesType | (string | number)[],
+	info: Record<string, any>
+) => void
+
 interface PartialTreeProps extends CommonComponentProps {
 	/**
 	 * Array of nested objects of type - TreeNodeType to be passed to Tree
 	 */
 	treeData: TreeNodeType[]
+	/**
+	 * Callback that runs when element is checked
+	 */
+	onCheck: OnCheckHandler
 	/**
 	 * Number of blocks of skeleton loaders to show if loading is true. Each block will have between 3-5 nodes of variable width
 	 */
@@ -42,12 +56,22 @@ export type TreeProps = LoadingTreeProps | DataTreeProps
 
 const Tree: FC<TreeProps> = ({
 	dataTag,
+	onCheck,
 	treeData,
 	loading = false,
 	skeletonBlockCount = 3
 }: TreeProps) => {
 	const mappedTreeData = processTreeData(treeData)
 
+	let controlledCmpProps = {}
+
+	if (onCheck) {
+		controlledCmpProps = {
+			onCheck,
+			treeData: mappedTreeData
+		}
+	}
+
 	return loading ? (
 		<TreeSkeleton blockCount={skeletonBlockCount} />
 	) : (
@@ -56,7 +80,7 @@ const Tree: FC<TreeProps> = ({
 			checkable
 			defaultExpandAll
 			selectable={false}
-			treeData={mappedTreeData}
+			{...controlledCmpProps}
 			{...getDataTestAttributeProp('tree', dataTag)}
 		/>
 	)

src/storybook.test.ts

@@ -6,13 +6,8 @@ import initStoryshots, {
 const componentsToShallowRender = ['Tree']
 
 initStoryshots({
-	test: data => {
-		if (componentsToShallowRender.includes(data.context.kind)) {
-			return shallowSnapshot({
-				...data
-			})
-		}
-
-		return snapshot(data)
-	}
+	test: data =>
+		componentsToShallowRender.includes(data.context.kind)
+			? shallowSnapshot(data)
+			: snapshot(data)
 })