From fe5370c76d608dbf37eb04badcc2a329b6681ba6 Mon Sep 17 00:00:00 2001
From: Kevin Qi <kqi@amino.com>
Date: Sun, 28 Apr 2019 09:46:04 -0700
Subject: [PATCH] fix tests by using mount instead of shallow, and by using
 wrapper.find.hostNodes (https://github.com/airbnb/enzyme/issues/1253)

---
 test/CircularProgressbar.test.tsx | 101 ++++++++++++++++++++++++------
 1 file changed, 82 insertions(+), 19 deletions(-)

diff --git a/test/CircularProgressbar.test.tsx b/test/CircularProgressbar.test.tsx
index dd2aee3..a025a73 100644
--- a/test/CircularProgressbar.test.tsx
+++ b/test/CircularProgressbar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import CircularProgressbar from '../src/index';
 
@@ -36,29 +36,47 @@ describe('<CircularProgressbar />', () => {
   describe('props.percentage', () => {
     test('Renders correct path', () => {
       const percentage = 30;
-      const wrapper = shallow(
+      const wrapper = mount(
         <CircularProgressbar percentage={percentage} strokeWidth={0} className="my-custom-class" />,
       );
 
-      const dashoffset = wrapper.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset;
+      const dashoffset = wrapper
+        .find('.CircularProgressbar-path')
+        .hostNodes()
+        .prop('style')!.strokeDashoffset;
       const expectedRadius = 50;
       const expectedDiameter = 2 * expectedRadius * Math.PI;
       const expectedOffset = ((100 - percentage) / 100) * expectedDiameter;
       expect(dashoffset).toEqual(`${expectedOffset}px`);
 
       const expectedArcto = `a ${expectedRadius},${expectedRadius}`;
-      expect(wrapper.find('.CircularProgressbar-path').prop('d')).toContain(expectedArcto);
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('d'),
+      ).toContain(expectedArcto);
     });
   });
   describe('props.counterClockwise', () => {
     test('Reverses dashoffset', () => {
-      const clockwise = shallow(<CircularProgressbar percentage={50} />);
-      const counterClockwise = shallow(<CircularProgressbar percentage={50} counterClockwise />);
+      const clockwise = mount(<CircularProgressbar percentage={50} />);
+      const counterClockwise = mount(<CircularProgressbar percentage={50} counterClockwise />);
 
       // Counterclockwise should have the negative dashoffset of clockwise
       expect(
-        `-${clockwise.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset}`,
-      ).toEqual(counterClockwise.find('.CircularProgressbar-path').prop('style')!.strokeDashoffset);
+        `-${
+          clockwise
+            .find('.CircularProgressbar-path')
+            .hostNodes()
+            .prop('style')!.strokeDashoffset
+        }`,
+      ).toEqual(
+        counterClockwise
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .prop('style')!.strokeDashoffset,
+      );
     });
   });
   describe('props.styles', () => {
@@ -101,14 +119,34 @@ describe('<CircularProgressbar />', () => {
   });
   describe('props.classes', () => {
     test('Has default values', () => {
-      const wrapper = shallow(<CircularProgressbar percentage={50} text="50" />);
-      expect(wrapper.find('.CircularProgressbar').type()).toEqual('svg');
-      expect(wrapper.find('.CircularProgressbar-path').type()).toEqual('path');
-      expect(wrapper.find('.CircularProgressbar-trail').type()).toEqual('path');
-      expect(wrapper.find('.CircularProgressbar-text').type()).toEqual('text');
+      const wrapper = mount(<CircularProgressbar percentage={50} text="50" />);
+      expect(
+        wrapper
+          .find('.CircularProgressbar')
+          .hostNodes()
+          .type(),
+      ).toEqual('svg');
+      expect(
+        wrapper
+          .find('.CircularProgressbar-path')
+          .hostNodes()
+          .type(),
+      ).toEqual('path');
+      expect(
+        wrapper
+          .find('.CircularProgressbar-trail')
+          .hostNodes()
+          .type(),
+      ).toEqual('path');
+      expect(
+        wrapper
+          .find('.CircularProgressbar-text')
+          .hostNodes()
+          .type(),
+      ).toEqual('text');
     });
     test('Prop overrides work', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <CircularProgressbar
           percentage={50}
           text="50"
@@ -131,11 +169,36 @@ describe('<CircularProgressbar />', () => {
       expect(wrapper.find('.CircularProgressbar-background').exists()).toBe(false);
 
       // Assert override classes do exist
-      expect(wrapper.find('.someRootClass').type()).toEqual('svg');
-      expect(wrapper.find('.somePathClass').type()).toEqual('path');
-      expect(wrapper.find('.someTrailClass').type()).toEqual('path');
-      expect(wrapper.find('.someTextClass').type()).toEqual('text');
-      expect(wrapper.find('.someBackgroundClass').type()).toEqual('circle');
+      expect(
+        wrapper
+          .find('.someRootClass')
+          .hostNodes()
+          .type(),
+      ).toEqual('svg');
+      expect(
+        wrapper
+          .find('.somePathClass')
+          .hostNodes()
+          .type(),
+      ).toEqual('path');
+      expect(
+        wrapper
+          .find('.someTrailClass')
+          .hostNodes()
+          .type(),
+      ).toEqual('path');
+      expect(
+        wrapper
+          .find('.someTextClass')
+          .hostNodes()
+          .type(),
+      ).toEqual('text');
+      expect(
+        wrapper
+          .find('.someBackgroundClass')
+          .hostNodes()
+          .type(),
+      ).toEqual('circle');
     });
   });
 });