feat(heatmap): add tests for hoverTarget

plouc · Jan 12, 2022 · d92ecd9 · d92ecd9
1 parent 35111f7
commit d92ecd9
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 1 deletion.
diff --git a/packages/heatmap/tests/HeatMap.test.tsx b/packages/heatmap/tests/HeatMap.test.tsx
@@ -176,6 +176,104 @@ describe('interactivity', () => {
                     expect(onClick).not.toHaveBeenCalled()
                 })
             })
+
+            describe('active/inactive', () => {
+                it('should support single cell hover target', () => {
+                    const wrapper = mount(
+                        <HeatMap
+                            {...baseProps}
+                            activeOpacity={1}
+                            inactiveOpacity={0}
+                            hoverTarget="cell"
+                        />
+                    )
+
+                    const hoveredCell = wrapper.find(`g[data-testid='cell.B.Y']`)
+                    hoveredCell.simulate('mouseenter')
+
+                    const activeCellIds = ['B.Y']
+                    dataPoints.forEach(datum => {
+                        const cell = wrapper.find(`g[data-testid='cell.${datum.id}']`).parent()
+                        if (activeCellIds.includes(datum.id)) {
+                            expect(cell.prop('opacity').get()).toEqual(1)
+                        } else {
+                            expect(cell.prop('opacity').get()).toEqual(0)
+                        }
+                    })
+                })
+
+                it('should support row hover target', () => {
+                    const wrapper = mount(
+                        <HeatMap
+                            {...baseProps}
+                            activeOpacity={1}
+                            inactiveOpacity={0}
+                            hoverTarget="row"
+                        />
+                    )
+
+                    const hoveredCell = wrapper.find(`g[data-testid='cell.B.Y']`)
+                    hoveredCell.simulate('mouseenter')
+
+                    const activeCellIds = ['B.X', 'B.Y', 'B.Z']
+                    dataPoints.forEach(datum => {
+                        const cell = wrapper.find(`g[data-testid='cell.${datum.id}']`).parent()
+                        if (activeCellIds.includes(datum.id)) {
+                            expect(cell.prop('opacity').get()).toEqual(1)
+                        } else {
+                            expect(cell.prop('opacity').get()).toEqual(0)
+                        }
+                    })
+                })
+
+                it('should support column hover target', () => {
+                    const wrapper = mount(
+                        <HeatMap
+                            {...baseProps}
+                            activeOpacity={1}
+                            inactiveOpacity={0}
+                            hoverTarget="column"
+                        />
+                    )
+
+                    const hoveredCell = wrapper.find(`g[data-testid='cell.B.Y']`)
+                    hoveredCell.simulate('mouseenter')
+
+                    const activeCellIds = ['A.Y', 'B.Y', 'C.Y']
+                    dataPoints.forEach(datum => {
+                        const cell = wrapper.find(`g[data-testid='cell.${datum.id}']`).parent()
+                        if (activeCellIds.includes(datum.id)) {
+                            expect(cell.prop('opacity').get()).toEqual(1)
+                        } else {
+                            expect(cell.prop('opacity').get()).toEqual(0)
+                        }
+                    })
+                })
+
+                it('should support rowColumn hover target', () => {
+                    const wrapper = mount(
+                        <HeatMap
+                            {...baseProps}
+                            activeOpacity={1}
+                            inactiveOpacity={0}
+                            hoverTarget="rowColumn"
+                        />
+                    )
+
+                    const hoveredCell = wrapper.find(`g[data-testid='cell.B.Y']`)
+                    hoveredCell.simulate('mouseenter')
+
+                    const activeCellIds = ['B.X', 'B.Y', 'B.Z', 'A.Y', 'C.Y']
+                    dataPoints.forEach(datum => {
+                        const cell = wrapper.find(`g[data-testid='cell.${datum.id}']`).parent()
+                        if (activeCellIds.includes(datum.id)) {
+                            expect(cell.prop('opacity').get()).toEqual(1)
+                        } else {
+                            expect(cell.prop('opacity').get()).toEqual(0)
+                        }
+                    })
+                })
+            })
         })
     })
 })

diff --git a/packages/network/tests/Network.test.tsx b/packages/network/tests/Network.test.tsx
@@ -496,7 +496,7 @@ describe('annotations', () => {
 
         const annotatedNode = wrapper.find(`circle[data-testid='node.${annotatedNodeId}']`)
         const [nodeX, nodeY] = Array.from(
-            annotatedNode.prop('transform').match(/translate\(([0-9.]+),([0-9.]+)\)/)
+            annotatedNode.prop<string>('transform').match(/translate\(([0-9.]+),([0-9.]+)\)/)!
         )
             .slice(1)
             .map(Number)