feat: Parallel animation added (#25)

package.json

@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "@dazn/eslint-plugin-kopytko": "^2.1.0",
-    "@dazn/kopytko-packager": "^1.2.4",
-    "@dazn/kopytko-unit-testing-framework": "^2.0.1",
+    "@dazn/kopytko-packager": "^1.2.5",
+    "@dazn/kopytko-unit-testing-framework": "^2.3.1",
     "eslint": "8.21.0"
   },
   "license": "MIT",

src/components/animation/ParallelAnimationFactory.brs

@@ -0,0 +1,34 @@
+' @import /components/animator/AnimatorFactory.brs
+' @import /components/getProperty.brs
+' @import /components/rokuComponents/ParallelAnimation.brs
+
+' @class
+function ParallelAnimationFactory() as Object
+  prototype = {}
+
+  ' Creates ParallelAnimation component with one or more Animations.
+  ' @param {String} name
+  ' @param {Object} [options={}]
+  ' @param {Float} options.delay
+  ' @param {Boolean} options.repeat
+  ' @param {Object.<string, AnimatorFactory~Options>} options.animations
+  ' @param {Node} element
+  ' @returns {Object} - ParallelAnimation component
+  prototype.createAnimation = function(name as String, options = {} as Object) as Object
+    parallelAnimationNode = ParallelAnimation()
+    parallelAnimationNode.setFields({
+      id: name,
+      delay: getProperty(options, "delay", 0.001),
+      repeat: getProperty(options, "repeat", false),
+    })
+
+    factory = AnimatorFactory()
+    for each animationOption in options.animations.items()
+      parallelAnimationNode.appendChild(factory.createAnimation(animationOption.key, animationOption.value))
+    end for
+
+    return parallelAnimationNode
+  end function
+
+  return prototype
+end function

src/components/animation/_tests/ParallelAnimationFactory.test.brs

@@ -0,0 +1,135 @@
+' @import /components/KopytkoTestSuite.brs from @dazn/kopytko-unit-testing-framework
+' @import /components/rokuComponents/Animation.brs
+' @mock /components/animator/AnimatorFactory.brs
+function TestSuite__ParallelAnimationFactory() as Object
+  ts = KopytkoTestSuite()
+  ts.name = "ParallelAnimatorFactory"
+
+  beforeEach(sub (_ts as Object)
+    mockFunction("AnimatorFactory.createAnimation").returnValue(Animation())
+  end sub)
+
+  it("creates animation object with given config", function (_ts as Object) as String
+    ' Given
+    options = {
+      delay: Csng(0.2),
+      repeat: true,
+      animations: {
+        elementOne: {
+          delay: Csng(0.2),
+          duration: Csng(20),
+          easeFunction: "linear",
+          easeInPercent: 0.1,
+          easeOutPercent: 0.2,
+          optional: false,
+          repeat: false,
+        },
+      },
+    }
+
+    ' When
+    _animation = ParallelAnimationFactory().createAnimation("testElement", options)
+
+    ' Then
+    constructedConfig = {
+      id: _animation.id,
+      delay: Csng(_animation.delay),
+      repeat: _animation.repeat,
+      type: _animation.subType(),
+    }
+    expectedConfig = {
+      id: "testElement",
+      delay: options.delay,
+      repeat: options.repeat,
+      type: "ParallelAnimation",
+    }
+
+    return expect(constructedConfig).toEqual(expectedConfig)
+  end function)
+
+  it("creates child animation object", function (_ts as Object) as String
+    ' Given
+    options = {
+      delay: Csng(0.2),
+      repeat: true,
+      animations: {
+        elementOne: {
+          delay: Csng(0.2),
+          duration: Csng(20),
+          easeFunction: "linear",
+          easeInPercent: 0.1,
+          easeOutPercent: 0.2,
+          optional: false,
+          repeat: false,
+          fields: [
+            { field: "opacity", type: "float" }
+            { field: "translation", type: "vector2d" }
+          ],
+        },
+      },
+    }
+
+    ' When
+    ParallelAnimationFactory().createAnimation("testElement", options)
+
+    ' Then
+    expectedConfig = {
+      name: "elementone",
+      options: {
+        delay: options.animations.elementOne.delay,
+        duration: options.animations.elementOne.duration,
+        easeFunction: options.animations.elementOne.easeFunction,
+        easeInPercent: options.animations.elementOne.easeInPercent,
+        easeOutPercent: options.animations.elementOne.easeOutPercent,
+        optional: options.animations.elementOne.optional,
+        repeat: options.animations.elementOne.repeat,
+        fields: options.animations.elementOne.fields,
+        },
+      }
+
+    return expect("AnimatorFactory.createAnimation").toHaveBeenCalledWith(expectedConfig, { times: 1 })
+  end function)
+
+  it("creates 2 child animation objects", function (_ts as Object) as String
+    ' Given
+    options = {
+      delay: Csng(0.2),
+      repeat: true,
+      animations: {
+        elementOne: {
+          delay: Csng(0.2),
+          duration: Csng(20),
+          easeFunction: "linear",
+          easeInPercent: 0.1,
+          easeOutPercent: 0.2,
+          optional: false,
+          repeat: false,
+          fields: [
+            { field: "opacity", type: "float" }
+            { field: "translation", type: "vector2d" }
+          ],
+        },
+        elementTwo: {
+          delay: Csng(122),
+          duration: Csng(20),
+          easeFunction: "outExpo",
+          easeInPercent: 0.1,
+          easeOutPercent: 0.2,
+          optional: false,
+          repeat: false,
+          fields: [
+            { field: "color", type: "color" }
+          ],
+        },
+      },
+    }
+
+    ' When
+    ParallelAnimationFactory().createAnimation("testElement", options)
+
+    ' Then
+    return expect("AnimatorFactory.createAnimation").toHaveBeenCalledTimes(2)
+  end function)
+
+  return ts
+end function

src/components/animator/AnimatorFactory.brs

@@ -3,21 +3,26 @@
 ' @import /components/rokuComponents/FloatFieldInterpolator.brs
 ' @import /components/rokuComponents/Vector2DFieldInterpolator.brs
 
+' @typedef {Object} AnimatorFactory~Options
+' @property {Float} delay
+' @property {Float} duration
+' @property {String} easeFunction
+' @property {Float} easeInPercent
+' @property {Float} easeOutPercent
+' @property {Boolean} repeat
+' @property {Object[]} fields
+' @property {String} fields.field
+' @property {Integer[]} fields.key
+' @property {Dynamic[]} fields.keyValue
+' @property {Boolean} fields.reverse
+
 ' @class
 function AnimatorFactory() as Object
   prototype = {}
 
   ' Creates Animation component with one or more interpolators.
   ' @param {String} name
-  ' @param {Object} [options={}]
-  ' @param {Float} options.delay
-  ' @param {Float} options.duration
-  ' @param {String} options.easeFunction
-  ' @param {Object[]} options.fields
-  ' @param {String} options.fields.field
-  ' @param {Integer[]} options.fields.key
-  ' @param {Dynamic[]} options.fields.keyValue
-  ' @param {Boolean} options.fields.reverse
+  ' @param {AnimatorFactory~Options} [options={}]
   ' @param {Node} element
   ' @returns {Object} - Animation component
   prototype.createAnimation = function (name as String, options = {} as Object, element = Invalid as Object) as Object

src/components/rokuComponents/ParallelAnimation.brs

@@ -0,0 +1,5 @@
+' Wrapper function for creating native ParallelAnimation component.
+' @class
+function ParallelAnimation() as Object
+  return CreateObject("roSGNode", "ParallelAnimation")
+end function