Id 2652 (#2731)

* generate id only when not already provided

* allows passing id

* fixes #2652

e2e/ScreenStyle.test.js

@@ -118,4 +118,9 @@ describe('screen style', () => {
     await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
+
+  it('supports user-provided id', async () => {
+    await elementById(testIDs.PROVIDED_ID).tap();
+    await expect(elementByLabel('User provided id')).toBeVisible();
+  });
 });

lib/src/commands/LayoutTreeCrawler.test.ts

@@ -19,6 +19,12 @@ describe('LayoutTreeCrawler', () => {
     expect(node.children[0].id).toEqual('BottomTabs+UNIQUE_ID');
   });
 
+  it('does not generate unique id when already provided', () => {
+    const node = { id: 'user defined id', type: LayoutType.Stack };
+    uut.crawl(node);
+    expect(node.id).toEqual('user defined id');
+  });
+
   it('crawls a layout tree and ensures data exists', () => {
     const node: any = { type: LayoutType.Stack, children: [{ type: LayoutType.BottomTabs }] };
     uut.crawl(node);

lib/src/commands/LayoutTreeCrawler.ts

@@ -23,7 +23,7 @@ export class LayoutTreeCrawler {
 
   crawl(node: LayoutNode): void {
     this._assertKnownLayoutType(node.type);
-    node.id = this.uniqueIdProvider.generate(node.type);
+    node.id = node.id || this.uniqueIdProvider.generate(node.type);
     node.data = node.data || {};
     node.children = node.children || [];
     if (node.type === LayoutType.Component) {

lib/src/commands/LayoutTreeParser.test.ts

@@ -61,7 +61,8 @@ describe('LayoutTreeParser', () => {
 
     it('bottom tabs', () => {
       const result = uut.parse(LayoutExamples.bottomTabs);
-      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(result.id).toEqual(undefined);
       expect(result.type).toEqual(LayoutType.BottomTabs);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
@@ -72,7 +73,8 @@ describe('LayoutTreeParser', () => {
 
     it('side menus', () => {
       const result = uut.parse(LayoutExamples.sideMenu);
-      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(result.id).toEqual(undefined);
       expect(result.type).toEqual(LayoutType.SideMenuRoot);
       expect(result.data).toEqual({});
       expect(result.children.length).toEqual(3);
@@ -93,7 +95,8 @@ describe('LayoutTreeParser', () => {
 
     it('top tabs', () => {
       const result = uut.parse(LayoutExamples.topTabs);
-      expect(_.keys(result)).toEqual(['type', 'data', 'children']);
+      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(result.id).toEqual(undefined);
       expect(result.type).toEqual(LayoutType.TopTabs);
       expect(result.data).toEqual({ options: LayoutExamples.options });
       expect(result.children.length).toEqual(5);
@@ -124,6 +127,21 @@ describe('LayoutTreeParser', () => {
     expect(uut.parse({ topTabs: { options } }).data.options).toBe(options);
     expect(uut.parse({ sideMenu: { options, center: { component: {} } } }).data.options).toBe(options);
   });
+
+  it('pass user provided id as is', () => {
+    const component = { id: 'compId' };
+    expect(uut.parse({ component }).id).toEqual('compId');
+    expect(uut.parse({ stack: { id: 'stackId' } }).id).toEqual('stackId');
+    expect(uut.parse({ stack: { children: [{ component }] } }).children[0].id).toEqual('compId');
+    expect(uut.parse({ bottomTabs: { id: 'myId' } }).id).toEqual('myId');
+    expect(uut.parse({ bottomTabs: { children: [{ component }] } }).children[0].id).toEqual('compId');
+    expect(uut.parse({ topTabs: { id: 'myId' } }).id).toEqual('myId');
+    expect(uut.parse({ topTabs: { children: [{ component }] } }).children[0].id).toEqual('compId');
+    expect(uut.parse({ sideMenu: { id: 'myId', center: { component } } }).id).toEqual('myId');
+    expect(uut.parse({ sideMenu: { center: { id: 'myId', component } } }).children[0].id).toEqual('myId');
+    expect(uut.parse({ sideMenu: { center: { component }, left: { id: 'theId', component } } }).children[0].id).toEqual('theId');
+    expect(uut.parse({ sideMenu: { center: { component }, right: { id: 'theId', component } } }).children[1].id).toEqual('theId');
+  });
 });
 
 /* Layout Examples: */

lib/src/commands/LayoutTreeParser.ts

@@ -24,6 +24,7 @@ export class LayoutTreeParser {
 
   _topTabs(api): LayoutNode {
     return {
+      id: api.id,
       type: LayoutType.TopTabs,
       data: { options: api.options },
       children: _.map(api.children, this.parse)
@@ -32,6 +33,7 @@ export class LayoutTreeParser {
 
   _sideMenu(api): LayoutNode {
     return {
+      id: api.id,
       type: LayoutType.SideMenuRoot,
       data: { options: api.options },
       children: this._sideMenuChildren(api)
@@ -45,18 +47,21 @@ export class LayoutTreeParser {
     const children: LayoutNode[] = [];
     if (api.left) {
       children.push({
+        id: api.left.id,
         type: LayoutType.SideMenuLeft,
         data: {},
         children: [this.parse(api.left)]
       });
     }
     children.push({
+      id: api.center.id,
       type: LayoutType.SideMenuCenter,
       data: {},
       children: [this.parse(api.center)]
     });
     if (api.right) {
       children.push({
+        id: api.right.id,
         type: LayoutType.SideMenuRight,
         data: {},
         children: [this.parse(api.right)]
@@ -67,6 +72,7 @@ export class LayoutTreeParser {
 
   _bottomTabs(api): LayoutNode {
     return {
+      id: api.id,
       type: LayoutType.BottomTabs,
       data: { options: api.options },
       children: _.map(api.children, this.parse)
@@ -75,6 +81,7 @@ export class LayoutTreeParser {
 
   _stack(api): LayoutNode {
     return {
+      id: api.id,
       type: LayoutType.Stack,
       data: { name: api.name, options: api.options },
       children: _.map(api.children, this.parse)
@@ -83,6 +90,7 @@ export class LayoutTreeParser {
 
   _component(api): LayoutNode {
     return {
+      id: api.id,
       type: LayoutType.Component,
       data: { name: api.name, options: api.options, passProps: api.passProps },
       children: []

playground/src/screens/WelcomeScreen.js

@@ -24,6 +24,7 @@ class WelcomeScreen extends Component {
     this.onClickBackHandler = this.onClickBackHandler.bind(this);
     this.onClickPushTopTabsScreen = this.onClickPushTopTabsScreen.bind(this);
     this.onClickShowStaticLifecycleOverlay = this.onClickShowStaticLifecycleOverlay.bind(this);
+    this.onClickProvidedId = this.onClickProvidedId.bind(this);
   }
 
   render() {
@@ -41,6 +42,7 @@ class WelcomeScreen extends Component {
         <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
         <Button title='Show Redbox' testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
         <Button title='Orientation' testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
+        <Button title='Provided Id' testID={testIDs.PROVIDED_ID} onPress={this.onClickProvidedId} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
@@ -348,6 +350,26 @@ class WelcomeScreen extends Component {
       }
     });
   }
+
+  onClickProvidedId() {
+    Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.TextScreen',
+              id: 'my unique id'
+            }
+          }
+        ]
+      }
+    });
+    Navigation.setOptions('my unique id', {
+      topBar: {
+        title: 'User provided id'
+      }
+    });
+  }
 }
 
 module.exports = WelcomeScreen;

playground/src/testIDs.js

@@ -13,6 +13,7 @@ module.exports = {
   SHOW_MODAL_BUTTON: `SHOW_MODAL_BUTTON`,
   SHOW_REDBOX_BUTTON: `SHOW_REDBOX_BUTTON`,
   ORIENTATION_BUTTON: `ORIENTATION_BUTTON`,
+  PROVIDED_ID: `PROVIDED_ID`,
   DISMISS_MODAL_BUTTON: `DISMISS_MODAL_BUTTON`,
   DISMISS_UNKNOWN_MODAL_BUTTON: `DISMISS_UNKNOWN_MODAL_BUTTON`,
   DISMISS_ALL_MODALS_BUTTON: `DISMISS_ALL_MODALS_BUTTON`,