chore: add initial tests feature styling tests for circle, freehand a…

…nd polygon
JamesLMilner · Dec 11, 2022 · 066967c · 066967c
1 parent 6ffde55
commit 066967c
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 70 deletions.
diff --git a/src/modes/circle/circle.spec.ts b/src/modes/circle/circle.spec.ts
@@ -385,4 +385,30 @@ describe("TerraDrawCircleMode", () => {
             }).not.toThrowError();
         });
     });
-});
+
+    describe('styleFeature', () => {
+        it("returns the correct styles for polygon", () => {
+            const circleMode = new TerraDrawCircleMode({
+                styles: {
+                    fillColor: '#ffffff',
+                    outlineColor: '#ffffff',
+                    outlineWidth: 2,
+                    fillOpacity: 0.5
+                }
+            });
+
+            expect(
+                circleMode.styleFeature({
+                    type: "Feature",
+                    geometry: { type: "Polygon", coordinates: [] },
+                    properties: { mode: "circle" }
+                })
+            ).toMatchObject({
+                polygonFillColor: '#ffffff',
+                polygonOutlineColor: '#ffffff',
+                polygonOutlineWidth: 2,
+                polygonFillOpacity: 0.5
+            });
+        });
+    });
+});
diff --git a/src/modes/freehand/freehand.spec.ts b/src/modes/freehand/freehand.spec.ts
@@ -396,4 +396,54 @@ describe("TerraDrawFreehandMode", () => {
             }).not.toThrowError();
         });
     });
+
+    describe('styleFeature', () => {
+        it("returns the correct styles for polygon", () => {
+            const freehandMode = new TerraDrawFreehandMode({
+                styles: {
+                    fillColor: '#ffffff',
+                    outlineColor: '#ffffff',
+                    outlineWidth: 2,
+                    fillOpacity: 0.5
+                }
+            });
+
+            expect(
+                freehandMode.styleFeature({
+                    type: "Feature",
+                    geometry: { type: "Polygon", coordinates: [] },
+                    properties: { mode: "freehand" }
+                })
+            ).toMatchObject({
+                polygonFillColor: '#ffffff',
+                polygonOutlineColor: '#ffffff',
+                polygonOutlineWidth: 2,
+                polygonFillOpacity: 0.5
+            });
+        });
+
+        it("returns the correct styles for point", () => {
+            const freehandMode = new TerraDrawFreehandMode({
+                styles: {
+                    closingPointColor: '#ffffff',
+                    closingPointOutlineWidth: 2,
+                    closingPointWidth: 1,
+                    closingPointOutlineColor: '#111111'
+                }
+            });
+
+            expect(
+                freehandMode.styleFeature({
+                    type: "Feature",
+                    geometry: { type: "Point", coordinates: [] },
+                    properties: { mode: "freehand" }
+                })
+            ).toMatchObject({
+                pointColor: '#ffffff',
+                pointOutlineWidth: 2,
+                pointWidth: 1,
+                pointOutlineColor: '#111111'
+            });
+        });
+    });
 });
diff --git a/src/modes/polygon/polygon.mode.ts b/src/modes/polygon/polygon.mode.ts
@@ -427,6 +427,7 @@ export class TerraDrawPolygonMode extends TerraDrawBaseDrawMode<PolygonStyling>
                 styles.polygonOutlineColor = this.styles.outlineColor || styles.polygonOutlineColor;
                 styles.polygonOutlineWidth = this.styles.outlineWidth || styles.polygonOutlineWidth;
                 styles.polygonFillColor = this.styles.fillColor || styles.polygonFillColor;
+                styles.polygonFillOpacity = this.styles.fillOpacity || styles.polygonFillOpacity;
                 styles.zIndex = 10;
                 return styles;
             }

diff --git a/src/modes/polygon/polygon.spec.ts b/src/modes/polygon/polygon.spec.ts
@@ -1192,4 +1192,63 @@ describe("TerraDrawPolygonMode", () => {
             });
         });
     });
+
+
+    describe('styleFeature', () => {
+        it("returns the correct styles for polygon", () => {
+            const polygonMode = new TerraDrawPolygonMode({
+                styles: {
+                    fillColor: '#ffffff',
+                    outlineColor: '#111111',
+                    outlineWidth: 2,
+                    fillOpacity: 0.5,
+                    closingPointWidth: 2,
+                    closingPointColor: '#dddddd',
+                    closingPointOutlineWidth: 1,
+                    closingPointOutlineColor: '#222222'
+                }
+            });
+
+            expect(
+                polygonMode.styleFeature({
+                    type: "Feature",
+                    geometry: { type: "Polygon", coordinates: [] },
+                    properties: { mode: "polygon" }
+                })
+            ).toMatchObject({
+                polygonFillColor: '#ffffff',
+                polygonOutlineColor: '#111111',
+                polygonOutlineWidth: 2,
+                polygonFillOpacity: 0.5
+            });
+        });
+
+        it("returns the correct styles for poiny", () => {
+            const polygonMode = new TerraDrawPolygonMode({
+                styles: {
+                    fillColor: '#ffffff',
+                    outlineColor: '#111111',
+                    outlineWidth: 2,
+                    fillOpacity: 0.5,
+                    closingPointWidth: 2,
+                    closingPointColor: '#dddddd',
+                    closingPointOutlineWidth: 1,
+                    closingPointOutlineColor: '#222222'
+                }
+            });
+
+            expect(
+                polygonMode.styleFeature({
+                    type: "Feature",
+                    geometry: { type: "Point", coordinates: [] },
+                    properties: { mode: "polygon" }
+                })
+            ).toMatchObject({
+                pointWidth: 2,
+                pointColor: '#dddddd',
+                pointOutlineColor: "#222222",
+                pointOutlineWidth: 1
+            });
+        });
+    });
 });