Added v3 tests

clementallen · Jan 30, 2021 · 8045509 · 8045509
1 parent a924148
commit 8045509
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -116,21 +116,21 @@ this.semiCircleRef = React.createRef();
 Use `setDirection(direction, size)` to display a semicircle of `size` degrees at `direction`.
 
 ```javascript
-this.semiCircleRef.current.leafletElement.setDirection(90, 90);
+this.semiCircleRef.current.setDirection(90, 90);
 ```
 
 #### setStartAngle(angle)
 
 Use `setStartAngle(angle)` to set the start angle of the semicircle to `angle`
 
 ```javascript
-this.semiCircleRef.current.leafletElement.setStartAngle(90);
+this.semiCircleRef.current.setStartAngle(90);
 ```
 
 #### setStopAngle(angle)
 
 Use `setStopAngle(angle)` to set the stop angle of the semicircle to `angle`
 
 ```javascript
-this.semiCircleRef.current.leafletElement.setStopAngle(90);
+this.semiCircleRef.current.setStopAngle(90);
 ```
diff --git a/__tests__/AbstractComponent.test.js → __tests__/AbstractMethods.test.js b/__tests__/AbstractComponent.test.js → __tests__/AbstractMethods.test.js
@@ -1,6 +1,12 @@
 import React, { cloneElement, createRef } from 'react';
-import { Map, withLeaflet } from 'react-leaflet';
-import AbstractComponent from '../src/AbstractComponent';
+import { MapContainer } from 'react-leaflet';
+import { createLayerComponent } from '@react-leaflet/core';
+
+import {
+    createLeafletElement,
+    updateLeafletElement,
+} from '../src/AbstractMethods';
+
 import MockLeafletPlugin, {
     setStartAngleSpy,
     setStopAngleSpy,
@@ -9,12 +15,9 @@ import MockLeafletPlugin, {
     setDirectionSpy,
 } from '../__mocks__/MockLeafletPlugin';
 
-const MockComponent = withLeaflet(
-    class MockComponent extends AbstractComponent {
-        get leafletComponent() {
-            return MockLeafletPlugin;
-        }
-    }
+const MockComponent = createLayerComponent(
+    createLeafletElement(MockLeafletPlugin),
+    updateLeafletElement,
 );
 
 function updateProps(wrapper, props) {
@@ -30,6 +33,7 @@ const mockOptions = {
     stopAngle: 180,
     color: 'white',
 };
+
 let wrapper;
 let testRef;
 
@@ -43,22 +47,11 @@ describe('<AbstractComponent />', () => {
         setLatLngSpy.mockClear();
         testRef = createRef();
         wrapper = mount(
-            <Map>
+            <MapContainer>
                 <MockComponent {...mockOptions} ref={testRef} />
-            </Map>
+            </MapContainer>,
         );
     });
-    describe('constructor', () => {
-        it('should throw an error when leafletComponent is not implemented', () => {
-            expect(() => {
-                shallow(<AbstractComponent />);
-            }).toThrowError('leafletComponent getter not implemented');
-        });
-        it('should call the leaflet plugin constructor with the expected arguments', () => {
-            const { position, ...options } = mockOptions;
-            expect(MockLeafletPlugin).toHaveBeenCalledWith(position, options);
-        });
-    });
 
     describe('prop changes', () => {
         it('should call the setStartAngle method if props change', () => {
@@ -97,15 +90,15 @@ describe('<AbstractComponent />', () => {
 
     describe('ref methods', () => {
         it('should expose the setStartAngle ref method', () => {
-            testRef.current.leafletElement.setStartAngle(30);
+            testRef.current.setStartAngle(30);
             expect(setStartAngleSpy).toHaveBeenCalledWith(30);
         });
         it('should expose the setStopAngle ref method', () => {
-            testRef.current.leafletElement.setStopAngle(30);
+            testRef.current.setStopAngle(30);
             expect(setStopAngleSpy).toHaveBeenCalledWith(30);
         });
         it('should expose the setDirection ref method', () => {
-            testRef.current.leafletElement.setDirection(30, 60);
+            testRef.current.setDirection(30, 60);
             expect(setDirectionSpy).toHaveBeenCalledWith(30, 60);
         });
     });

diff --git a/__tests__/SemiCircle.test.js b/__tests__/SemiCircle.test.js
@@ -1,34 +1,16 @@
-import React from 'react';
-import { Map } from 'react-leaflet';
+import React, { createRef } from 'react';
+import { MapContainer } from 'react-leaflet';
 import L from 'leaflet';
-import { SemiCircle } from '../src/index';
-import AbstractComponent from '../src/AbstractComponent';
-
-jest.spyOn(L, 'SemiCircle').mockImplementation(() => {
-    return {
-        _layerAdd: () => {},
-    };
-});
+import { SemiCircle } from '../src';
 
 describe('<SemiCircle />', () => {
-    it('should extend the AbstractComponent', () => {
-        const wrapper = mount(
-            <Map>
-                <SemiCircle />
-            </Map>
-        );
-        expect(wrapper.find(SemiCircle).children().instance()).toBeInstanceOf(
-            AbstractComponent
-        );
-    });
-    it('should extend L.SemiCircleMarker', () => {
-        const wrapper = mount(
-            <Map>
-                <SemiCircle />
-            </Map>
+    it('should extend L.SemiCircle', () => {
+        const testRef = createRef();
+        mount(
+            <MapContainer>
+                <SemiCircle ref={testRef} />
+            </MapContainer>,
         );
-        expect(
-            wrapper.find(SemiCircle).children().instance().leafletComponent
-        ).toEqual(L.SemiCircle);
+        expect(testRef.current).toBeInstanceOf(L.SemiCircle);
     });
 });
diff --git a/__tests__/SemiCircleMarker.test.js b/__tests__/SemiCircleMarker.test.js
@@ -1,35 +1,16 @@
-import React from 'react';
-import { Map } from 'react-leaflet';
+import React, { createRef } from 'react';
+import { MapContainer } from 'react-leaflet';
 import L from 'leaflet';
-import { SemiCircleMarker } from '../src/index';
-import AbstractComponent from '../src/AbstractComponent';
-
-jest.spyOn(L, 'SemiCircleMarker').mockImplementation(() => {
-    return {
-        _layerAdd: () => {},
-    };
-});
+import { SemiCircleMarker } from '../src';
 
 describe('<SemiCircleMarker />', () => {
-    it('should extend the AbstractComponent', () => {
-        const wrapper = mount(
-            <Map>
-                <SemiCircleMarker />
-            </Map>
-        );
-        expect(
-            wrapper.find(SemiCircleMarker).children().instance()
-        ).toBeInstanceOf(AbstractComponent);
-    });
     it('should extend L.SemiCircleMarker', () => {
-        const wrapper = mount(
-            <Map>
-                <SemiCircleMarker />
-            </Map>
+        const testRef = createRef();
+        mount(
+            <MapContainer>
+                <SemiCircleMarker ref={testRef} />
+            </MapContainer>,
         );
-        expect(
-            wrapper.find(SemiCircleMarker).children().instance()
-                .leafletComponent
-        ).toEqual(L.SemiCircleMarker);
+        expect(testRef.current).toBeInstanceOf(L.SemiCircleMarker);
     });
 });
diff --git a/test.config.js b/test.config.js
@@ -1,7 +1,20 @@
-import { configure, shallow, mount } from 'enzyme';
+import { configure, mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 configure({ adapter: new Adapter() });
 
-global.shallow = shallow;
 global.mount = mount;
+
+// Fix SVG issues in tests.  Found here: https://stackoverflow.com/questions/54382414/fixing-react-leaflet-testing-error-cannot-read-property-layeradd-of-null/54384719#54384719
+const createElementNSOrig = global.document.createElementNS;
+global.document.createElementNS = function (namespaceURI, qualifiedName) {
+    if (
+        namespaceURI === 'http://www.w3.org/2000/svg' &&
+        qualifiedName === 'svg'
+    ) {
+        const element = createElementNSOrig.apply(this, arguments);
+        element.createSVGRect = function () {};
+        return element;
+    }
+    return createElementNSOrig.apply(this, arguments);
+};