merge static and passed navigationOptions (#2336)

lib/src/commands/LayoutTreeCrawler.js

@@ -22,12 +22,22 @@ class LayoutTreeCrawler {
 
   _handleContainer(node) {
     this._assertContainerDataName(node);
-    this.store.setPropsForContainerId(node.id, node.data.passProps);
-    const clazz = this.store.getOriginalContainerClassForName(node.data.name);
-    node.data.navigationOptions = _.cloneDeep(_.get(clazz, 'navigationOptions', {}));
+    this._savePropsToStore(node);
+    this._applyStaticNavigationOptions(node);
     OptionsProcessor.processOptions(node.data.navigationOptions);
   }
 
+  _savePropsToStore(node) {
+    this.store.setPropsForContainerId(node.id, node.data.passProps);
+  }
+
+  _applyStaticNavigationOptions(node) {
+    const clazz = this.store.getOriginalContainerClassForName(node.data.name) || {};
+    const staticOptions = _.cloneDeep(clazz.navigationOptions) || {};
+    const passedOptions = _.cloneDeep(node.data.navigationOptions) || {};
+    node.data.navigationOptions = _.merge({}, staticOptions, passedOptions);
+  }
+
   _assertKnownLayoutType(type) {
     if (!_.includes(LayoutTypes, type)) {
       throw new Error(`Unknown layout type ${type}`);

lib/src/commands/LayoutTreeCrawler.test.js

@@ -61,6 +61,43 @@ describe('LayoutTreeCrawler', () => {
     expect(node.data.navigationOptions).toEqual(theStyle);
   });
 
+  it('Containers: merges navigationOptions from container class static property with passed options, favoring passed options', () => {
+    const theStyle = {
+      bazz: 123,
+      inner: {
+        foo: 'bar'
+      },
+      opt: 'exists only in static'
+    };
+    const MyContainer = class {
+      static get navigationOptions() {
+        return theStyle;
+      }
+    };
+
+    const passedOptions = {
+      aaa: 'exists only in passed',
+      bazz: 789,
+      inner: {
+        foo: 'this is overriden'
+      }
+    };
+
+    const node = { type: LayoutTypes.Container, data: { name: 'theContainerName', navigationOptions: passedOptions } };
+    store.setOriginalContainerClassForName('theContainerName', MyContainer);
+
+    uut.crawl(node);
+
+    expect(node.data.navigationOptions).toEqual({
+      aaa: 'exists only in passed',
+      bazz: 789,
+      inner: {
+        foo: 'this is overriden'
+      },
+      opt: 'exists only in static'
+    });
+  });
+
   it('Containers: deepClones navigationOptions', () => {
     const theStyle = {};
     const MyContainer = class {
@@ -91,25 +128,20 @@ describe('LayoutTreeCrawler', () => {
 
   describe('navigation options', () => {
     let navigationOptions;
-    let MyContainer;
     let node;
 
     beforeEach(() => {
       navigationOptions = {};
-      MyContainer = class {
-        static get navigationOptions() {
-          return navigationOptions;
-        }
-      };
-      node = { type: LayoutTypes.Container, data: { name: 'theContainerName' } };
-      store.setOriginalContainerClassForName('theContainerName', MyContainer);
+      node = { type: LayoutTypes.Container, data: { name: 'theContainerName', navigationOptions } };
     });
 
     it('processes colors into numeric AARRGGBB', () => {
       navigationOptions.someKeyColor = 'red';
       uut.crawl(node);
       expect(node.data.navigationOptions.someKeyColor).toEqual(0xffff0000);
+    });
 
+    it('processes colors into numeric AARRGGBB', () => {
       navigationOptions.someKeyColor = 'yellow';
       uut.crawl(node);
       expect(node.data.navigationOptions.someKeyColor).toEqual(0xffffff00);
@@ -119,7 +151,9 @@ describe('LayoutTreeCrawler', () => {
       navigationOptions.someKeyColor = '#123456';
       uut.crawl(node);
       expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);
+    });
 
+    it('processes numeric colors with rrggbbAA', () => {
       navigationOptions.someKeyColor = 0x123456ff; // wut
       uut.crawl(node);
       expect(node.data.navigationOptions.someKeyColor).toEqual(0xff123456);