unittests: deep styles merge.

lib/animation-timeline.js

@@ -845,7 +845,7 @@ var defaultTimelineOptions = {
   /**
    * additional left margin in pixels to start the line gauge from.
    */
-  leftMarginPx: 25,
+  leftMargin: 25,
   headerFillColor: '#101011',
   fillColor: '#101011',
   labelsColor: '#D5D5D5',

tests/js/settingsTests.js

@@ -5,9 +5,10 @@ var animation_timeline_1 = require("../lib/animation-timeline");
 var asserts_1 = require("./asserts");
 describe('_mergeOptions', function () {
     it('Top level options are merged', function () {
+        var timeline = new animation_timeline_1.Timeline();
         var defOptions = animation_timeline_1.defaultTimelineOptions;
         var options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true };
-        var merged = new animation_timeline_1.Timeline()._mergeOptions(options);
+        var merged = timeline._mergeOptions(options);
         asserts_1.assert.equal(merged.id, options.id);
         asserts_1.assert.equal(merged.snapEnabled, options.snapEnabled);
         asserts_1.assert.equal(merged.snapsPerSeconds, options.snapsPerSeconds);
@@ -17,12 +18,34 @@ describe('_mergeOptions', function () {
         asserts_1.assert.equal(defOptions.selectionColor === undefined, 'initial options should not be affected');
     });
     it('Default styles are merged', function () {
-        var defOptions = animation_timeline_1.defaultTimelineOptions;
+        var timeline = new animation_timeline_1.Timeline();
         var options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true };
-        var merged = new animation_timeline_1.Timeline()._mergeOptions(options);
+        var merged = timeline._mergeOptions(options);
         asserts_1.assert.equal(merged.id, options.id);
         asserts_1.assert.equal(!!merged.rowsStyle, true, 'Row style cannot be null');
         asserts_1.assert.equal(!!merged.rowsStyle.keyframesStyle, true, 'Keyframes style cannot be null');
     });
+    it('Deep styles are merged', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var options = {
+            id: 'new id',
+            snapsPerSeconds: 10,
+            snapEnabled: true,
+            rowsStyle: {
+                height: 100,
+                keyframesStyle: {
+                    hidden: true,
+                    draggable: false,
+                },
+            },
+        };
+        var merged = timeline._mergeOptions(options);
+        asserts_1.assert.equal(merged.id, options.id);
+        asserts_1.assert.equal(merged.rowsStyle.height, options.rowsStyle.height);
+        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.hidden, options.rowsStyle.hidden);
+        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.draggable, options.rowsStyle.keyframesStyle.draggable);
+        var defOptions = animation_timeline_1.defaultTimelineOptions;
+        asserts_1.assert.equal(merged.rowsStyle.keyframesStyle.shape, defOptions.rowsStyle.keyframesStyle.shape);
+    });
 });
 //# sourceMappingURL=settingsTests.js.map

tests/settingsTests.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Timeline, TimelineElementType, TimelineClickableElement, TimelineOptions, defaultTimelineOptions } from '../lib/animation-timeline';
+import { Timeline, TimelineElementType, TimelineRowStyle, TimelineClickableElement, TimelineOptions, defaultTimelineOptions, TimelineKeyframeStyle } from '../lib/animation-timeline';
 import { assert } from './asserts';
 describe('_mergeOptions', function () {
   it('Top level options are merged', function () {
+    const timeline = new Timeline();
     const defOptions = defaultTimelineOptions as TimelineOptions;
     const options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true } as TimelineOptions;
-    const merged = new Timeline()._mergeOptions(options);
+    const merged = timeline._mergeOptions(options);
     assert.equal(merged.id, options.id);
     assert.equal(merged.snapEnabled, options.snapEnabled);
     assert.equal(merged.snapsPerSeconds, options.snapsPerSeconds);
@@ -17,10 +18,34 @@ describe('_mergeOptions', function () {
   });
 
   it('Default styles are merged', function () {
+    const timeline = new Timeline();
     const options = { id: 'new id', snapsPerSeconds: 10, snapEnabled: true } as TimelineOptions;
-    const merged = new Timeline()._mergeOptions(options);
+    const merged = timeline._mergeOptions(options);
     assert.equal(merged.id, options.id);
     assert.equal(!!merged.rowsStyle, true, 'Row style cannot be null');
     assert.equal(!!merged.rowsStyle.keyframesStyle, true, 'Keyframes style cannot be null');
   });
+
+  it('Deep styles are merged', function () {
+    const timeline = new Timeline();
+    const options = {
+      id: 'new id',
+      snapsPerSeconds: 10,
+      snapEnabled: true,
+      rowsStyle: {
+        height: 100,
+        keyframesStyle: {
+          hidden: true,
+          draggable: false,
+        } as TimelineKeyframeStyle,
+      } as TimelineRowStyle,
+    } as TimelineOptions;
+    const merged = timeline._mergeOptions(options);
+    assert.equal(merged.id, options.id);
+    assert.equal(merged.rowsStyle.height, options.rowsStyle.height);
+    assert.equal(merged.rowsStyle.keyframesStyle.hidden, options.rowsStyle.hidden);
+    assert.equal(merged.rowsStyle.keyframesStyle.draggable, options.rowsStyle.keyframesStyle.draggable);
+    const defOptions = defaultTimelineOptions as TimelineOptions;
+    assert.equal(merged.rowsStyle.keyframesStyle.shape, defOptions.rowsStyle.keyframesStyle.shape);
+  });
 });