test(xychart): add more Tooltip tests

airbnb · Oct 7, 2020 · f34cdd1 · f34cdd1
1 parent 2f0b2c5
commit f34cdd1
Showing 1 changed file with 106 additions and 17 deletions.
diff --git a/packages/visx-xychart/test/components/Tooltip.test.tsx b/packages/visx-xychart/test/components/Tooltip.test.tsx
@@ -2,29 +2,42 @@ import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import { mount } from 'enzyme';
 import { Tooltip as BaseTooltip } from '@visx/tooltip';
-import { Tooltip, TooltipContext, TooltipContextType } from '../../src';
+import { DataContext, Tooltip, TooltipContext, TooltipContextType } from '../../src';
 import { TooltipProps } from '../../src/components/Tooltip';
+import getDataContext from '../mocks/getDataContext';
 
 describe('<Tooltip />', () => {
   type SetupProps =
     | {
-        props?: Partial<TooltipProps>;
-        context?: Partial<TooltipContextType>;
+        props?: Partial<TooltipProps<object>>;
+        context?: Partial<TooltipContextType<object>>;
+        Parent?: ({ children }: { children: React.ReactElement }) => React.ReactElement;
       }
     | undefined;
-  function setup({ props, context }: SetupProps = {}) {
+
+  function setup({
+    props,
+    context,
+    Parent = ({ children }: { children: React.ReactElement }) => children,
+  }: SetupProps = {}) {
     const wrapper = mount(
-      <TooltipContext.Provider
-        value={{
-          tooltipOpen: false,
-          showTooltip: jest.fn(),
-          updateTooltip: jest.fn(),
-          hideTooltip: jest.fn(),
-          ...context,
-        }}
-      >
-        <Tooltip resizeObserverPolyfill={ResizeObserver} renderTooltip={() => null} {...props} />
-      </TooltipContext.Provider>,
+      <Parent>
+        <TooltipContext.Provider
+          value={{
+            tooltipOpen: false,
+            showTooltip: jest.fn(),
+            updateTooltip: jest.fn(),
+            hideTooltip: jest.fn(),
+            ...context,
+          }}
+        >
+          <Tooltip
+            resizeObserverPolyfill={ResizeObserver}
+            renderTooltip={() => <div />}
+            {...props}
+          />
+        </TooltipContext.Provider>
+      </Parent>,
     );
     return wrapper;
   }
@@ -38,13 +51,13 @@ describe('<Tooltip />', () => {
   });
 
   it('should not render a BaseTooltip when TooltipContext.tooltipOpen=true and renderTooltip returns false', () => {
-    const wrapper = setup({ context: { tooltipOpen: true } });
+    const wrapper = setup({ context: { tooltipOpen: true }, props: { renderTooltip: () => null } });
     expect(wrapper.find(BaseTooltip)).toHaveLength(0);
   });
 
   it('should render a BaseTooltip when TooltipContext.tooltipOpen=true and renderTooltip returns non-null', () => {
     const wrapper = setup({
-      props: { renderTooltip: () => <div /> },
+      props: { renderTooltip: () => <div />, snapTooltipToDatumX: true },
       context: { tooltipOpen: true },
     });
     expect(wrapper.find(BaseTooltip)).toHaveLength(1);
@@ -66,4 +79,80 @@ describe('<Tooltip />', () => {
     });
     expect(renderTooltip).toHaveBeenCalledTimes(1);
   });
+
+  it('should render a vertical crosshair if showVerticalCrossHair=true', () => {
+    const wrapper = setup({
+      props: { showVerticalCrosshair: true },
+      context: { tooltipOpen: true },
+    });
+    expect(wrapper.find('div.visx-crosshair-vertical')).toHaveLength(1);
+  });
+
+  it('should render a horizontal crosshair if showVerticalCrossHair=true', () => {
+    const wrapper = setup({
+      props: { showHorizontalCrosshair: true },
+      context: { tooltipOpen: true },
+    });
+    expect(wrapper.find('div.visx-crosshair-horizontal')).toHaveLength(1);
+  });
+
+  it('should not render a circle if showDatumCircle=true and there is no nearestDatum', () => {
+    const wrapper = setup({
+      props: { showDatumCircle: true },
+      context: { tooltipOpen: true },
+    });
+    expect(wrapper.find('div.visx-tooltip-circle')).toHaveLength(0);
+  });
+  it('should render a circle if showDatumCircle=true if there is a nearestDatum', () => {
+    const wrapper = setup({
+      props: { showDatumCircle: true },
+      context: {
+        tooltipOpen: true,
+        tooltipData: {
+          nearestDatum: { distance: 1, key: '', index: 0, datum: {} },
+          datumByKey: {},
+        },
+      },
+    });
+    expect(wrapper.find('div.visx-tooltip-circle')).toHaveLength(1);
+  });
+  it('should render a circle for each series if showSeriesCircles=true', () => {
+    const wrapper = setup({
+      props: { showSeriesCircles: true },
+      context: {
+        tooltipOpen: true,
+        tooltipData: {
+          datumByKey: {
+            d1: { key: 'd1', index: 0, datum: {} },
+            d2: { key: 'd2', index: 1, datum: {} },
+          },
+        },
+      },
+      Parent: (
+        { children }, // circles snap to data points, so scales/accessors must exist
+      ) => (
+        <DataContext.Provider
+          value={{
+            ...getDataContext([
+              {
+                key: 'd1',
+                xAccessor: () => 3,
+                yAccessor: () => 7,
+                data: [{}],
+              },
+              {
+                key: 'd2',
+                xAccessor: () => 3,
+                yAccessor: () => 7,
+                data: [{}],
+              },
+            ]),
+          }}
+        >
+          {children}
+        </DataContext.Provider>
+      ),
+    });
+    expect(wrapper.find('div.visx-tooltip-circle')).toHaveLength(2);
+  });
 });