test(defs): add tests on bindDefs()

derickwarshaw · Sep 20, 2017 · 3194631 · 3194631
1 parent 09ed8f1
commit 3194631
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 8 deletions.
diff --git a/src/lib/defs.js b/src/lib/defs.js
@@ -36,12 +36,12 @@ export const isMatchingDef = (predicate, node, dataKey) => {
 /**
  * Compute SVG defs.
  *
- * @param {Array}  defs
- * @param {Array}  nodes
- * @param {Array}  rules
- * @param {string} dataKey
- * @param {string} colorKey
- * @param {string} targetKey
+ * @param {Array.<Object>} defs               - Base SVG defs configs
+ * @param {Array.<Object>} nodes              - Data nodes to apply defs on
+ * @param {Array.<Object>} rules              - Rules used to conditionally apply defs on data nodes
+ * @param {string}         [dataKey]          - Path to node data, used for rule object query based predicate
+ * @param {string}         [colorKey='color'] - Node color path, required when inheritance is involved
+ * @param {string}         [targetKey='fill'] - Node target property to apply def ID on
  * @returns {Array}
  */
 export const bindDefs = (
@@ -52,7 +52,7 @@ export const bindDefs = (
 ) => {
     let boundDefs = []
 
-    // will hold gnerated variation ids,
+    // will hold generated variation ids,
     // to avoid generating multiple identical defs
     const generatedIds = {}
 

diff --git a/test/lib/defs.test.js b/test/lib/defs.test.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import partial from 'lodash/partial'
-import { isMatchingDef } from '../../src/lib/defs'
+import { isMatchingDef, bindDefs } from '../../src/lib/defs'
 
 describe('isMatchingDef()', () => {
     it('should support wildcard', () => {
@@ -50,3 +50,157 @@ describe('isMatchingDef()', () => {
         expect(isMatchingDef(2)).toBe(false)
     })
 })
+
+describe('bindDefs()', () => {
+    it('should return an empty array if def list is empty', () => {
+        expect(bindDefs([], [{}], [{}])).toEqual([])
+    })
+
+    it('should return an empty array if node list is empty', () => {
+        expect(bindDefs([{}], [], [{}])).toEqual([])
+    })
+
+    it('should return input defs if rule list is empty', () => {
+        const defs = [{ type: 'whatever' }]
+        expect(bindDefs(defs, [{}], [])).toEqual(defs)
+    })
+
+    it('should ignore subsequent rules if some already matched', () => {
+        const defs = [
+            { id: 'gradient', type: 'linearGradient', colors: [] },
+            { id: 'pattern', type: 'patternLines' },
+        ]
+        const nodes = [{ id: 'test' }]
+        expect(
+            bindDefs(defs, nodes, [
+                { match: { id: 'test' }, id: 'gradient' },
+                { match: '*', id: 'pattern' },
+            ])
+        ).toEqual(defs)
+        expect(nodes).toEqual([{ id: 'test', fill: 'url(#gradient)' }])
+    })
+
+    describe('using patterns', () => {
+        it('should apply def ID to all matching nodes and returns original defs if no inheritance involved', () => {
+            const defs = [{ id: 'lines', type: 'patternLines' }]
+            const nodes = [{}, {}]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'lines' }])
+
+            expect(boundDefs).toEqual(defs)
+            expect(nodes).toEqual([{ fill: 'url(#lines)' }, { fill: 'url(#lines)' }])
+        })
+
+        it('should allow targetKey to be customized', () => {
+            const defs = [{ id: 'lines', type: 'patternLines' }]
+            const nodes = [{}, {}]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'lines' }], {
+                targetKey: 'style.fill',
+            })
+
+            expect(boundDefs).toEqual(defs)
+            expect(nodes).toEqual([
+                { style: { fill: 'url(#lines)' } },
+                { style: { fill: 'url(#lines)' } },
+            ])
+        })
+
+        it('should support inheritance', () => {
+            const defs = [
+                { id: 'lines.inheritBackground', type: 'patternLines', background: 'inherit' },
+                { id: 'lines.inheritColor', type: 'patternLines', color: 'inherit' },
+            ]
+            const nodes = [
+                { id: 'inheritBackground', color: '#000' },
+                { id: 'inheritColor', color: '#F00' },
+            ]
+
+            const boundDefs = bindDefs(defs, nodes, [
+                { match: { id: 'inheritBackground' }, id: 'lines.inheritBackground' },
+                { match: { id: 'inheritColor' }, id: 'lines.inheritColor' },
+            ])
+
+            expect(boundDefs).toEqual([
+                ...defs,
+                { id: 'lines.inheritBackground.bg.#000', type: 'patternLines', background: '#000' },
+                { id: 'lines.inheritColor.fg.#F00', type: 'patternLines', color: '#F00' },
+            ])
+            expect(nodes).toEqual([
+                {
+                    id: 'inheritBackground',
+                    color: '#000',
+                    fill: 'url(#lines.inheritBackground.bg.#000)',
+                },
+                { id: 'inheritColor', color: '#F00', fill: 'url(#lines.inheritColor.fg.#F00)' },
+            ])
+        })
+    })
+
+    describe('using gradients', () => {
+        it('should apply def ID to all matching nodes and returns original defs if no inheritance involved', () => {
+            const defs = [{ id: 'gradient', type: 'linearGradient', colors: [] }]
+            const nodes = [{}, {}]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'gradient' }])
+
+            expect(boundDefs).toEqual(defs)
+            expect(nodes).toEqual([{ fill: 'url(#gradient)' }, { fill: 'url(#gradient)' }])
+        })
+
+        it('should allow targetKey to be customized', () => {
+            const defs = [{ id: 'gradient', type: 'linearGradient', colors: [] }]
+            const nodes = [{}, {}]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'gradient' }], {
+                targetKey: 'style.fill',
+            })
+
+            expect(boundDefs).toEqual(defs)
+            expect(nodes).toEqual([
+                { style: { fill: 'url(#gradient)' } },
+                { style: { fill: 'url(#gradient)' } },
+            ])
+        })
+
+        it('should support inheritance', () => {
+            const defs = [
+                {
+                    id: 'gradient',
+                    type: 'linearGradient',
+                    colors: [
+                        { offset: 0, color: 'inherit', opacity: 0 },
+                        { offset: 100, color: 'inherit' },
+                    ],
+                },
+            ]
+            const nodes = [{ color: '#000' }, { color: '#F00' }]
+
+            const boundDefs = bindDefs(defs, nodes, [{ match: '*', id: 'gradient' }])
+
+            expect(boundDefs).toEqual([
+                ...defs,
+                {
+                    id: 'gradient.0.#000.1.#000',
+                    type: 'linearGradient',
+                    colors: [
+                        { offset: 0, color: '#000', opacity: 0 },
+                        { offset: 100, color: '#000' },
+                    ],
+                },
+                {
+                    id: 'gradient.0.#F00.1.#F00',
+                    type: 'linearGradient',
+                    colors: [
+                        { offset: 0, color: '#F00', opacity: 0 },
+                        { offset: 100, color: '#F00' },
+                    ],
+                },
+            ])
+            expect(nodes).toEqual([
+                { color: '#000', fill: 'url(#gradient.0.#000.1.#000)' },
+                { color: '#F00', fill: 'url(#gradient.0.#F00.1.#F00)' },
+            ])
+        })
+    })
+})