fix(core): correct opacity spelling of style properties

Refs #14.

README.md

@@ -440,7 +440,7 @@ can also have any of the following optional style properties.
 
 - `fill` is a *string* that defines the shape's `fill`
   attribute
-- `fillOpactity` is a *number* that defines the shape's
+- `fillOpacity` is a *number* that defines the shape's
   `fill-opacity` attribute
 - `fillRule` is a *string* that defines the shape's
   `fill-rule` attribute
@@ -454,7 +454,7 @@ can also have any of the following optional style properties.
   `stroke-linecap` attribute
 - `strokeLinejoin` is a *string* that defines the shape's
   `stroke-linejoin` attribute
-- `strokeOpactity` is a *number* that defines the shape's
+- `strokeOpacity` is a *number* that defines the shape's
   `stroke-opacity` attribute
 - `strokeWidth` is a *number* that defines the shape's
   `stroke-width` attribute

src/core/shape/props.js

@@ -44,14 +44,14 @@ const shapeProps = [
 
 const stylePropAttrMap = {
   fill: 'fill',
-  fillOpactity: 'fill-opacity',
+  fillOpacity: 'fill-opacity',
   fillRule: 'fill-rule',
   stroke: 'stroke',
   strokeDasharray: 'stroke-dasharray',
   strokeDashoffset: 'stroke-dashoffset',
   strokeLinecap: 'stroke-linecap',
   strokeLinejoin: 'stroke-linejoin',
-  strokeOpactity: 'stroke-opacity',
+  strokeOpacity: 'stroke-opacity',
   strokeWidth: 'stroke-width',
   vectorEffect: 'vector-effect'
 }

tests/core/shape/state.js

@@ -0,0 +1,62 @@
+/* globals describe it expect */
+
+import { styleAttributes }  from '../../../src/core/shape/state'
+
+const stylePropAttrMap = {
+  fill: 'fill',
+  fillOpacity: 'fill-opacity',
+  fillRule: 'fill-rule',
+  stroke: 'stroke',
+  strokeDasharray: 'stroke-dasharray',
+  strokeDashoffset: 'stroke-dashoffset',
+  strokeLinecap: 'stroke-linecap',
+  strokeLinejoin: 'stroke-linejoin',
+  strokeOpacity: 'stroke-opacity',
+  strokeWidth: 'stroke-width',
+  vectorEffect: 'vector-effect'
+}
+
+describe('styleAttributes', () => {
+  it('converts style props to correct style attributes', () => {
+    const props = {
+      fill: '#FFF',
+      fillOpacity: 0.5,
+      fillRule: 'evenodd',
+      stroke: '#000',
+      strokeDasharray: '5, 5',
+      strokeDashoffset: 100,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      strokeOpacity: 1,
+      strokeWidth: 2,
+      vectorEffect: 'non-scaling-shape'
+    }
+
+    const attributes = {
+      'fill': '#FFF',
+      'fill-opacity': 0.5,
+      'fill-rule': 'evenodd',
+      'stroke': '#000',
+      'stroke-dasharray': '5, 5',
+      'stroke-dashoffset': 100,
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'stroke-opacity': 1,
+      'stroke-width': 2,
+      'vector-effect': 'non-scaling-shape'
+    }
+
+    expect(styleAttributes(props)).toEqual(attributes)
+  })
+
+  it('filters out unrecognised keys', () => {
+    const props = {
+      fill: '#FFF',
+      foo: 'bar'
+    }
+
+    const attributes = { fill: '#FFF' }
+
+    expect(styleAttributes(props)).toEqual(attributes)
+  })
+})