✅ (package) 100% cover new API

Author: tpucci

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
   },
   settings: {
     react: {

src/FullScreenPortal.tsx

@@ -1,15 +1,22 @@
 import React, { Component, Fragment } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { from } from 'rxjs';
+
+/**
+ * import order is important between recompose and rxjs
+ * @see https://stackoverflow.com/questions/53878650/you-provided-an-invalid-object-where-a-stream-was-expected-when-using-rxjs6-an.
+ */
 import { componentFromStreamWithConfig } from 'recompose';
+import { from } from 'rxjs';
 
 import { Navigation } from './Navigation';
 import { map, publish, withLatestFrom } from 'rxjs/operators';
 import { withBackContext, WithBackContext } from './withBackContext';
 import { BackContext } from './Navigation/BackContext';
 import { last } from './utils/Array.last';
 
-class FullScreenPortalComponent extends Component<WithBackContext<{}>> {
+interface Props {}
+
+class FullScreenPortalComponent extends Component<WithBackContext<Props>> {
   static FullScreenStack = componentFromStreamWithConfig({
     fromESObservable: from,
     toESObservable: stream => stream,

src/__tests__/Canal.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
 import { Canal } from '../Canal';
 import { Screen } from '../Screen';
 import { Subject } from 'rxjs';
 import { BackEvent } from '../Navigation/BackHandlerDelegate';
 import { BackContext } from '../Navigation/BackContext';
+import { Navigation } from '../Navigation';
 
 describe('Canal', () => {
   it('renders its children', () => {
@@ -34,6 +35,47 @@ describe('Canal', () => {
     );
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
+  it('notifies the fullScreenDelegate of the full-screen screens after any render', () => {
+    const spy = jest.spyOn(
+      Navigation.instance.fullScreenDelegate.canalsFullScreenStackProperties$,
+      'next'
+    );
+    const ScreenB = <Screen Component={() => <Text>b</Text>} name="b" visible isFullScreen />;
+    const testRenderer = TestRenderer.create(
+      <Canal>
+        <Screen Component={() => <Text>a</Text>} name="a" visible />
+        {ScreenB}
+      </Canal>
+    );
+    expect(spy).toHaveBeenCalledWith({ canalId: '0', fullScreenStack: [ScreenB] });
+    const ScreenC = (
+      <Screen Component={() => <Text>c</Text>} name="c" visible={false} isFullScreen />
+    );
+    testRenderer.update(
+      <Canal>
+        <Screen Component={() => <Text>a</Text>} name="a" visible />
+        {ScreenC}
+      </Canal>
+    );
+    expect(spy).toHaveBeenCalledWith({ canalId: '0', fullScreenStack: [ScreenC] });
+  });
+  it('notifies the fullScreenDelegate on unmount', () => {
+    const spy = jest.spyOn(
+      Navigation.instance.fullScreenDelegate.canalsFullScreenStackProperties$,
+      'next'
+    );
+    const ScreenB = <Screen Component={() => <Text>b</Text>} name="b" visible isFullScreen />;
+    const testRenderer = TestRenderer.create(
+      <Canal>
+        <Screen Component={() => <Text>a</Text>} name="a" visible />
+        {ScreenB}
+      </Canal>
+    );
+    expect(spy).not.toHaveBeenCalledWith({ canalId: '0', fullScreenStack: [] });
+    expect(spy).toHaveBeenCalledWith({ canalId: '0', fullScreenStack: [ScreenB] });
+    testRenderer.update(<View></View>);
+    expect(spy).toHaveBeenCalledWith({ canalId: '0', fullScreenStack: [] });
+  });
   it('passes back events on', () => {
     const back$ = new Subject<BackEvent>();
     const spy = jest.fn();

src/__tests__/FullScreenPortal.test.tsx

@@ -1,11 +1,80 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
 
+/**
+ * import order is important between recompose and rxjs
+ * @see https://stackoverflow.com/questions/53878650/you-provided-an-invalid-object-where-a-stream-was-expected-when-using-rxjs6-an.
+ */
+import 'recompose';
+import { Subject } from 'rxjs';
+import { View, Text } from 'react-native';
+
 import { FullScreenPortal } from '../FullScreenPortal';
+import { Navigation } from '../Navigation';
+import { BackEvent } from '../Navigation/BackHandlerDelegate';
+import { BackContext } from '../Navigation/BackContext';
+import { Canal } from '../Canal';
+import { Screen } from '../Screen';
 
 describe('FullScreenPortal', () => {
   it('renders the full screen portal', () => {
-    const testRenderer = TestRenderer.create(<FullScreenPortal />);
+    const testRenderer = TestRenderer.create(
+      <FullScreenPortal>
+        <View></View>
+      </FullScreenPortal>
+    );
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders the full screen screens', () => {
+    const testRenderer = TestRenderer.create(
+      <FullScreenPortal>
+        <View></View>
+      </FullScreenPortal>
+    );
+    Navigation.instance.fullScreenDelegate.canalsFullScreenStackProperties$.next({
+      canalId: '1',
+      fullScreenStack: [
+        <View key="a">
+          <Text>I should be rendered</Text>
+        </View>,
+      ],
+    });
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
+
+  it('passes on back events', () => {
+    const back$ = new Subject<BackEvent>();
+    const spy = jest.fn();
+    const testRenderer = TestRenderer.create(
+      <BackContext.Provider value={{ back$ }}>
+        <FullScreenPortal>
+          <Canal>
+            <Screen Component={() => <Text>a</Text>} name="a" visible isFullScreen />
+          </Canal>
+        </FullScreenPortal>
+      </BackContext.Provider>
+    );
+    // @ts-ignore
+    testRenderer.root.children[0].instance.back$.subscribe(spy);
+    back$.next({ target: null });
+    expect(spy).toHaveBeenCalledWith({
+      target: 'a',
+    });
+    testRenderer.update(
+      <BackContext.Provider value={{ back$ }}>
+        <FullScreenPortal>
+          <Canal>
+            <Screen Component={() => <Text>a</Text>} name="a" visible />
+          </Canal>
+        </FullScreenPortal>
+      </BackContext.Provider>
+    );
+    // @ts-ignore
+    testRenderer.root.children[0].instance.back$.subscribe(spy);
+    back$.next({ target: null });
+    expect(spy).toHaveBeenCalledWith({
+      target: null,
+    });
+  });
 });

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

@@ -11,5 +11,28 @@ exports[`FullScreenPortal renders the full screen portal 1`] = `
       "top": 0,
     }
   }
-/>
+>
+  <View />
+</View>
+`;
+
+exports[`FullScreenPortal renders the full screen screens 1`] = `
+<View
+  style={
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <View />
+  <View>
+    <Text>
+      I should be rendered
+    </Text>
+  </View>
+</View>
 `;