test(annotation): add tests for new annotation components

packages/visx-annotation/package.json

@@ -42,6 +42,9 @@
     "prop-types": "^15.5.10",
     "react-use-measure": "2.0.1"
   },
+  "devDependencies": {
+    "resize-observer-polyfill": "^1.5.1"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/visx-annotation/src/components/Label.tsx

@@ -150,6 +150,7 @@ export default function AnnotationLabel({
     >
       {showBackground && (
         <rect
+          className="visx-annotationlabel-background"
           fill={backgroundFill}
           x={0}
           y={0}

packages/visx-annotation/test/CircleSubject.test.tsx

@@ -1,7 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
 import { CircleSubject } from '../src';
 
 describe('<CircleSubject />', () => {
   it('should be defined', () => {
     expect(CircleSubject).toBeDefined();
   });
+  it('should render a cirlce', () => {
+    expect(shallow(<CircleSubject />).find('circle')).toHaveLength(1);
+  });
 });

packages/visx-annotation/test/Connector.test.tsx

@@ -1,7 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
 import { Connector } from '../src';
 
 describe('<Connector />', () => {
   it('should be defined', () => {
     expect(Connector).toBeDefined();
   });
+  it('should render a path', () => {
+    expect(shallow(<Connector />).find('path')).toHaveLength(1);
+  });
 });

packages/visx-annotation/test/EditableAnnotation.test.tsx

@@ -1,7 +1,22 @@
-import { EditableAnnotation } from '../src';
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Annotation, EditableAnnotation } from '../src';
 
 describe('<EditableAnnotation />', () => {
+  function setup() {
+    return shallow(
+      <EditableAnnotation width={100} height={100}>
+        <div />
+      </EditableAnnotation>,
+    );
+  }
   it('should be defined', () => {
     expect(EditableAnnotation).toBeDefined();
   });
+  it('should render two resize handles', () => {
+    expect(setup().find('circle')).toHaveLength(2);
+  });
+  it('should render an Annotation', () => {
+    expect(setup().find(Annotation)).toHaveLength(1);
+  });
 });

packages/visx-annotation/test/Label.test.tsx

@@ -1,7 +1,48 @@
+import React from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import Text from '@visx/text/lib/Text';
+import { shallow } from 'enzyme';
 import { Label } from '../src';
 
 describe('<Label />', () => {
   it('should be defined', () => {
     expect(Label).toBeDefined();
   });
+  it('should render title Text', () => {
+    expect(
+      shallow(<Label title="title test" resizeObserverPolyfill={ResizeObserver} />)
+        .find(Text)
+        .dive()
+        .text(),
+    ).toBe('title test');
+  });
+  it('should render subtitle Text', () => {
+    expect(
+      shallow(
+        <Label
+          title="title test"
+          subtitle="subtitle test"
+          resizeObserverPolyfill={ResizeObserver}
+        />,
+      )
+        .find(Text)
+        .at(1)
+        .dive()
+        .text(),
+    ).toBe('subtitle test');
+  });
+  it('should render a background', () => {
+    expect(
+      shallow(
+        <Label title="title test" showBackground resizeObserverPolyfill={ResizeObserver} />,
+      ).find('rect'),
+    ).toHaveLength(1);
+  });
+  it('should render an anchor line', () => {
+    expect(
+      shallow(
+        <Label title="title test" showAnchorLine resizeObserverPolyfill={ResizeObserver} />,
+      ).find('line'),
+    ).toHaveLength(1);
+  });
 });

packages/visx-annotation/test/LineSubject.test.tsx

@@ -1,7 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
 import { LineSubject } from '../src';
 
 describe('<LineSubject />', () => {
   it('should be defined', () => {
     expect(LineSubject).toBeDefined();
   });
+  it('should a line', () => {
+    expect(shallow(<LineSubject min={0} max={100} />).find('line')).toHaveLength(1);
+  });
 });