fix(transition): fallback to initial transition & headless in testing

BREAKING CHANGE: headless mode will automatically be enabled in any testing environment

README.md

@@ -165,6 +165,17 @@ go('First', SuperSlow)
 back(SuperFastOpacity)
 ```
 
+## Headless Mode for Testing
+
+Headless mode will automatically be enabled in a testing environment `process.env.NODE === 'test'`. It's also possible to control this mode manually on the main component.
+
+```jsx
+import Reactigation from 'reactigation'
+
+const App = () => <Reactigation headless={false} />
+AppRegistry.registerComponent('NavigationApp', () => App)
+```
+
 ## Running the Example App
 
 The example app shown on top is found in the repository. Run it by cloning this repository and then executing the following commands inside the main directory.

animations.ts

@@ -10,7 +10,7 @@ const handlerLeft =
     value: Animated.Value,
     done: () => void,
     { duration }: { duration: number },
-    reverse?: boolean
+    reverse?: boolean,
   ) =>
   () => {
     Animated.timing(value, {
@@ -48,7 +48,7 @@ const handlerOpacity =
     value: Animated.Value,
     done: () => void,
     { duration }: { duration: number },
-    reverse?: boolean
+    reverse?: boolean,
   ) =>
   () => {
     Animated.timing(value, {
@@ -73,7 +73,7 @@ const opacity = (duration = 500) => ({
         done()
       },
       { duration },
-      reverse
+      reverse,
     )
   },
 })
@@ -83,7 +83,7 @@ const handlerTop =
     value: Animated.Value,
     done: () => void,
     { duration }: { duration: number },
-    reverse?: boolean
+    reverse?: boolean,
   ) =>
   () => {
     Animated.timing(value, {
@@ -109,7 +109,7 @@ const handlerTopHalf =
     value: Animated.Value,
     done: () => void,
     { height, duration }: { height: number; duration: number },
-    reverse?: boolean
+    reverse?: boolean,
   ) =>
   () => {
     Animated.timing(value, {

app/component/Modal.js

@@ -47,7 +47,7 @@ export const Modal = ({ title }) => (
     <Text style={styles.title}>{title}</Text>
     {title !== 'PeekModal' && (
       <>
-        <TouchableOpacity onPress={() => go('PeekModal', 'peek')}>
+        <TouchableOpacity onPress={() => go('PeekModal')}>
           <Text style={styles.description}>Peek Another Modal</Text>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => go('PeekModal', AlmostFullPeek)}>

index.tsx

@@ -91,18 +91,17 @@ export const initial = (name: string) => {
 }
 
 // Go to certain screen.
-export const go = (
-  name: string,
-  transition: TransitionInput = Transition.regular,
-  props?: object,
-) => {
+export const go = (name: string, transition?: TransitionInput, props?: object) => {
   if (isTransitioning()) {
     return console.warn('Reactigation: Transition already in progress.')
   }
   const currentScreen = screens[name]
   if (!currentScreen) {
     return console.warn(`Reactigation: Screen ${name} wasn't registered.`)
   }
+  if (!transition) {
+    transition = currentScreen.transition ?? Transition.regular
+  }
   if (!isTransitionValid(transition, 'go')) {
     return
   }
@@ -155,7 +154,7 @@ BackHandler.addEventListener('hardwareBackPress', () => {
   return true
 })
 
-const renderBottom = ({ Bottom }: { Bottom: Screen | null }) => {
+const renderBottom = ({ Bottom }: State) => {
   if (!Bottom) {
     return
   }
@@ -176,9 +175,9 @@ const renderBottom = ({ Bottom }: { Bottom: Screen | null }) => {
   )
 }
 
-const renderTop = ({ Top, reverse, left, top, opacity, backdrop }: State) => {
+const renderTop = ({ Top, Bottom, reverse, left, top, opacity, backdrop }: State) => {
   const TopWithProps = cloneElement(Top.Component, {
-    backPossible: history.length > 1 || !!reverse,
+    backPossible: history.length > 1 || (!!reverse && Bottom === history[0]),
     title: Top.name,
     ...Top.props,
   })
@@ -206,7 +205,8 @@ const renderTop = ({ Top, reverse, left, top, opacity, backdrop }: State) => {
   return screen
 }
 
-export default ({ headless = false }) => {
+// Disable transitions and render only top screen, useful for programmatic tests.
+export default ({ headless = process.env.NODE_ENV === 'test' }) => {
   const [state, setState] = useState<State>(initialPosition(history[0]))
   const afterRender = connect({ setState, state }, headless)
 

test/basic.test.tsx

@@ -18,7 +18,7 @@ test('Renders a single registered screen.', () => {
   const names = ['FirstScreen']
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -40,7 +40,7 @@ test('Can render several screens.', () => {
   const names = ['FirstScreen', 'SecondScreen', 'ThirdScreen']
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -58,7 +58,7 @@ test('Can navigate between screens.', () => {
   const names = ['FirstScreen', 'SecondScreen', 'ThirdScreen']
   const input = setupScreens(names)
 
-  render(<Navigation />)
+  render(<Navigation headless={false} />)
 
   expect(input[0].mock.calls.length).toEqual(1)
   expect(input[0].effectMock.calls.length).toEqual(1)
@@ -88,7 +88,7 @@ test("Back isn't possible for last screen.", () => {
   const names = ['FirstScreen', 'SecondScreen', 'ThirdScreen']
   const input = setupScreens(names)
 
-  render(<Navigation />)
+  render(<Navigation headless={false} />)
 
   // Visible screens have been rendered, back initially not possible.
   expect(input[0].mock.calls.length).toEqual(1)
@@ -144,7 +144,7 @@ test('Props can be passed to screen with go().', () => {
   const names = ['FirstScreen', 'SecondScreen', 'ThirdScreen']
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -205,7 +205,7 @@ test('Warning if unknown transition is used.', () => {
   const names = ['FirstScreen']
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -239,7 +239,7 @@ test('Can use enum or string as transition.', () => {
   const names = ['FirstScreen']
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -309,7 +309,7 @@ test('Initially shown screen can be configured.', () => {
 
   initial('SecondScreen')
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 
@@ -331,7 +331,7 @@ test('Initially shown screen can be configured though register.', () => {
   ]
   const input = setupScreens(names)
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 

test/docs.test.tsx

@@ -43,7 +43,7 @@ test('Two Screen Example with Interaction.', () => {
   register(<FirstScreen />, 'First')
   register(<SecondScreen />, 'Second')
 
-  const { screens } = render(<Navigation />)
+  const { screens } = render(<Navigation headless={false} />)
 
   expect(screens.length).toEqual(1)
 

test/hook.test.tsx

@@ -21,9 +21,9 @@ test('Hook is called with initial screen.', () => {
 
   const { tree, wrappers } = render(
     <>
-      <Navigation />
+      <Navigation headless={false} />
       <Hook currentScreenMock={hookMock} />
-    </>
+    </>,
   )
 
   expect(wrappers.length).toEqual(1)
@@ -43,9 +43,9 @@ test('Hook is called with first registered screen.', () => {
 
   render(
     <>
-      <Navigation />
+      <Navigation headless={false} />
       <Hook currentScreenMock={hookMock} />
-    </>
+    </>,
   )
 
   expect(hookMock.mock.calls[0][0]).toEqual('SecondScreen')
@@ -60,9 +60,9 @@ test('Hook is updated when screen changes.', () => {
 
   render(
     <>
-      <Navigation />
+      <Navigation headless={false} />
       <Hook currentScreenMock={hookMock} />
-    </>
+    </>,
   )
 
   expect(hookMock.mock.calls[0][0]).toEqual(names[0])
@@ -99,10 +99,10 @@ test('Hook updates all listeners.', () => {
 
   render(
     <>
-      <Navigation />
+      <Navigation headless={false} />
       <Hook currentScreenMock={hookMock} />
       <Hook currentScreenMock={secondHookMock} />
-    </>
+    </>,
   )
 
   expect(hookMock.mock.calls[0][0]).toEqual(names[0])

test/utils/setup-screens.ts

@@ -5,7 +5,7 @@ import createTestScreen from '../components/Screen'
 export default (screens: (string | { name: string; options?: { initial?: boolean } })[]) => {
   return screens.map((screen) => {
     let name
-    let options = {}
+    let options = {} as any
 
     if (typeof screen === 'string') {
       name = screen

transition.ts

@@ -21,7 +21,7 @@ export const connect = (
 // Sets initial screen and values.
 export const initialPosition: (Top: Screen) => State = (Top) => ({
   Top,
-  Bottom: null,
+  Bottom: undefined,
   left: new Animated.Value(0),
   top: new Animated.Value(0),
   opacity: new Animated.Value(1),
@@ -47,11 +47,12 @@ export const isTransitionValid = (transition: TransitionInput, method: string) =
 
 export default (
   Top: Screen,
-  Bottom: Screen,
+  Bottom: Screen | undefined,
   animation: TransitionInput = Transition.regular,
   reverse = false,
 ) => {
-  const transition = typeof animation === 'string' ? animations[animation] : animation
+  let transition = typeof animation === 'string' ? animations[animation] : animation
+
   running = true
   const done = () => {
     running = false
@@ -71,8 +72,9 @@ export default (
     state.top.setValue(0)
     running = false
 
-    if (reverse) {
+    if (reverse && Bottom) {
       Top = Bottom
+      Bottom = undefined
     }
   }
 

types.ts

@@ -3,7 +3,7 @@ import { Animated } from 'react-native'
 export type AnimationHandler = (
   state: State,
   done: () => void,
-  reverse?: boolean
+  reverse?: boolean,
 ) => (() => void) | null
 
 export type Animation = {
@@ -39,6 +39,6 @@ export type State = {
   opacity: Animated.Value
   backdrop?: boolean
   Top: Screen
-  Bottom: Screen | null
+  Bottom?: Screen
   reverse?: boolean
 }