🚧 (createCanal) Type canal creator

Author: tpucci

example/package.json

@@ -6,6 +6,7 @@
     "start": "node ../node_modules/react-native/local-cli/cli.js start",
     "test:lint": "cd .. && yarn tslint example/src/**/*.ts{,x} && cd example",
     "test:unit": "cd .. && yarn jest --config=example/jest.config.js && cd example",
+    "test:unit:u": "cd .. && yarn jest --config=example/jest.config.js -u && cd example",
     "test:unit:ci": "cd .. && yarn jest --config=example/jest.config.js --runInBand && cd example",
     "test:type": "tsc --noEmit",
     "test": "yarn test:lint && yarn test:unit && yarn test:type",

example/src/App.tsx

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
-import { StyleSheet } from 'react-native';
 import { SignIn } from './canals/SignIn';
 
 interface IProps {}
 export default class App extends Component<IProps> {
   render() {
-    return <SignIn style={StyleSheet.absoluteFill} />;
+    return <SignIn />;
   }
 }

example/src/canals/SignIn/FirstName.tsx

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
 
 interface IProps {}
 export class FirstName extends Component<IProps> {
   render() {
     return (
       <View style={styles.container}>
-        <Text>FirstName</Text>
+        <Text>Waht is your first name ?</Text>
+        <TextInput placeholder="Type here" />
+        <Button title="Next" onPress={() => true} />
       </View>
     );
   }
@@ -17,6 +19,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#FFAAAA',
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'space-around',
   },
 });

example/src/canals/SignIn/SignIn.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createCanal } from 'react-gondola';
+import { FirstName } from './FirstName';
+import { LastName } from './LastName';
+
+// @ts-ignore
+const SignInCanal = createCanal(
+  { name: 'firstName', Component: FirstName },
+  { name: 'lastName', Component: LastName }
+);
+
+export const SignIn = () => {
+  return <SignInCanal />;
+};

example/src/canals/SignIn/__tests__/__snapshots__/FirstName.test.tsx.snap

@@ -7,12 +7,58 @@ exports[`FirstName renders correctly 1`] = `
       "alignItems": "center",
       "backgroundColor": "#FFAAAA",
       "flex": 1,
-      "justifyContent": "center",
+      "justifyContent": "space-around",
     }
   }
 >
   <Text>
-    FirstName
+    Waht is your first name ?
   </Text>
+  <TextInput
+    allowFontScaling={true}
+    placeholder="Type here"
+    rejectResponderTermination={true}
+    underlineColorAndroid="transparent"
+  />
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Next
+      </Text>
+    </View>
+  </View>
 </View>
 `;

example/src/canals/SignIn/index.ts

@@ -1,6 +1 @@
-import { createCanal } from 'react-gondola';
-import { FirstName } from './FirstName';
-import { LastName } from './LastName';
-
-// @ts-ignore
-export const SignIn = createCanal(FirstName, LastName);
+export { SignIn } from './SignIn';

src/Navigation.store.tsx

@@ -1,6 +1,6 @@
 import { observable, computed, action } from 'mobx';
 import { Subject } from 'rxjs';
-import { Canal, IStop } from 'Canal';
+import { Canal, IStop } from './Canal';
 
 interface INavigationEvent {
   canalId: Canal['id'];

src/__tests__/__snapshots__/createCanal.test.tsx.snap

@@ -1,7 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createCanal renders the first page when mounted 1`] = `
-<View>
+<View
+  style={
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
   <View
     style={
       Object {

src/__tests__/createCanal.test.tsx

@@ -10,28 +10,28 @@ describe('createCanal', () => {
   it('throws an error if first arg is not a Component', () => {
     try {
       // @ts-ignore
-      createCanal('aaa');
+      createCanal({ name: 'a', Component: 'aaa' });
     } catch (error) {
       expect(error.message).toBe(
-        '`createCanal` expects its arguments to be React components. Received type for argument 1: string'
+        '`createCanal` could not find a valid `Component` key for argument 1. Received: {"name":"a","Component":"aaa"}'
       );
     }
     expect.assertions(1);
   });
 
   it('renders the first page when mounted', () => {
-    const Transitioner = createCanal(View);
+    const Transitioner = createCanal({ name: 'a', Component: View });
     const testRenderer = TestRenderer.create(<Transitioner />);
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
 
   it('throws an error if any arg is not a Component', () => {
     try {
       // @ts-ignore
-      createCanal(View, 'aaa');
+      createCanal({ name: 'a', Component: View }, { name: 'b', Component: 'aaa' });
     } catch (error) {
       expect(error.message).toBe(
-        '`createCanal` expects its arguments to be React components. Received type for argument 2: string'
+        '`createCanal` could not find a valid `Component` key for argument 2. Received: {"name":"b","Component":"aaa"}'
       );
     }
     expect.assertions(1);
@@ -40,8 +40,14 @@ describe('createCanal', () => {
   it('emits the new canal to the navigation store', () => {
     const PageOne = () => <View />;
     const PageTwo = () => <View />;
-    const Transitioner = createCanal(PageOne, PageTwo);
-    const expectedCanal = new Canal([PageOne, PageTwo]);
+    const Transitioner = createCanal(
+      { name: 'pageOne', Component: PageOne },
+      { name: 'pageTwo', Component: PageTwo }
+    );
+    const expectedCanal = new Canal([
+      { name: 'pageOne', Component: PageOne },
+      { name: 'pageTwo', Component: PageTwo },
+    ]);
     Navigation.getInstance().canalsSubject.subscribe({
       next: canal => {
         expect(canal).toEqual(expectedCanal);
@@ -50,4 +56,27 @@ describe('createCanal', () => {
     TestRenderer.create(<Transitioner />);
     expect.assertions(1);
   });
+
+  it('throws an error if name is missing', () => {
+    try {
+      // @ts-ignore
+      createCanal({ Component: View });
+    } catch (error) {
+      expect(error.message).toBe(
+        '`createCanal` could not find a valid `name` key for argument 1. Received: {}'
+      );
+    }
+    expect.assertions(1);
+  });
+
+  // @TODO 19-08-01 Pass this test
+  xit('throws an error some names are duplicated', () => {
+    try {
+      // @ts-ignore
+      createCanal({ name: 'a', Component: View }, { name: 'a', Component: View });
+    } catch (error) {
+      expect(error.message).toBe('`createCanal` found duplicated `name: a` key.');
+    }
+    expect.assertions(1);
+  });
 });

src/canal.tsx

@@ -8,10 +8,7 @@ export interface IStop {
 export class Canal {
   id: number = Date.now();
   stopsList: IStop[] = [];
-  constructor(PagesList: ComponentType[]) {
-    this.stopsList = PagesList.map(Page => ({
-      Component: Page,
-      name: Page.displayName || 'UntitledPage',
-    }));
+  constructor(StopsList: IStop[]) {
+    this.stopsList = StopsList;
   }
 }