From f3e01f27c8e412cfc74fd0750241b26b8e9bfb0c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 21:26:04 +0200
Subject: [PATCH 1/8] Add basic tests

---
 .../components/src/navigator/test/index.js    | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/components/src/navigator/test/index.js

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
new file mode 100644
index 00000000000000..0f590ad59ceb6b
--- /dev/null
+++ b/packages/components/src/navigator/test/index.js
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Navigator, NavigatorScreen, useNavigator } from '../';
+
+const PATHS = {
+	HOME: '/',
+	CHILD: '/child',
+	NOT_FOUND: '/not-found',
+};
+
+function NavigatorButton( { path, isBack = false, ...props } ) {
+	const navigator = useNavigator();
+	return (
+		<button
+			onClick={ () => navigator.push( path, { isBack } ) }
+			{ ...props }
+		/>
+	);
+}
+
+const MyNavigation = ( { initialPath = PATHS.HOME } ) => (
+	<Navigator initialPath={ initialPath }>
+		<NavigatorScreen path={ PATHS.HOME }>
+			<p>This is the home screen.</p>
+			<NavigatorButton path={ PATHS.CHILD }>
+				Navigate to child screen.
+			</NavigatorButton>
+		</NavigatorScreen>
+
+		<NavigatorScreen path={ PATHS.CHILD }>
+			<p>This is the child screen.</p>
+			<NavigatorButton path={ PATHS.HOME } isBack>
+				Go back
+			</NavigatorButton>
+		</NavigatorScreen>
+
+		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included */ }
+	</Navigator>
+);
+
+const getNavigationScreenByText = ( text, { throwIfNotFound = true } = {} ) => {
+	const fnName = throwIfNotFound ? 'getByText' : 'queryByText';
+	return screen[ fnName ]( text );
+};
+const getHomeScreen = ( { throwIfNotFound } = {} ) =>
+	getNavigationScreenByText( 'This is the home screen.', {
+		throwIfNotFound,
+	} );
+const getChildScreen = ( { throwIfNotFound } = {} ) =>
+	getNavigationScreenByText( 'This is the child screen.', {
+		throwIfNotFound,
+	} );
+
+describe( 'Navigator', () => {
+	it( 'should render', () => {
+		render( <MyNavigation /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+	} );
+} );

From c93f0bd96e90277de2987c3f5710d8e64cfd7a1e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 21:26:29 +0200
Subject: [PATCH 2/8] Mock framer motion

---
 packages/components/src/navigator/test/index.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index 0f590ad59ceb6b..510a4056e3de49 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -8,6 +8,21 @@ import { render, screen } from '@testing-library/react';
  */
 import { Navigator, NavigatorScreen, useNavigator } from '../';
 
+jest.mock( 'framer-motion', () => {
+	const actual = jest.requireActual( 'framer-motion' );
+	return {
+		__esModule: true,
+		...actual,
+		AnimatePresence: ( { children } ) => <div>{ children }</div>,
+		motion: {
+			...actual.motion,
+			div: require( 'react' ).forwardRef( ( { children }, ref ) => (
+				<div ref={ ref }>{ children }</div>
+			) ),
+		},
+	};
+} );
+
 const PATHS = {
 	HOME: '/',
 	CHILD: '/child',

From 6b0d16f94eea354aaeb0716c6928bd89ba424d49 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 21:27:28 +0200
Subject: [PATCH 3/8] Add more initialPath tests

---
 .../components/src/navigator/test/index.js    | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index 510a4056e3de49..fbb2ba56fb3995 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -81,4 +81,31 @@ describe( 'Navigator', () => {
 			getChildScreen( { throwIfNotFound: false } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should show a different screen on the first render depending on the value of `initialPath`', () => {
+		render( <MyNavigation initialPath={ PATHS.CHILD } /> );
+
+		expect(
+			getHomeScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+		expect( getChildScreen() ).toBeInTheDocument();
+	} );
+
+	it( 'should ignore changes to `initialPath` after the first render', () => {
+		const { rerender } = render( <MyNavigation /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+
+		rerender( <MyNavigation initialPath={ PATHS.CHILD } /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+	} );
+
+	// todo: initialPath = not found?
 } );

From c32a280907d73826d96891679b144ff96f588978 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 21:29:11 +0200
Subject: [PATCH 4/8] Add screen navigation tests

---
 .../components/src/navigator/test/index.js    | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index fbb2ba56fb3995..5408336c5bdb94 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -72,6 +72,19 @@ const getChildScreen = ( { throwIfNotFound } = {} ) =>
 		throwIfNotFound,
 	} );
 
+const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
+	const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
+	return screen[ fnName ]( 'button', { name: text } );
+};
+const getToChildScreenButton = ( { throwIfNotFound } = {} ) =>
+	getNavigationButtonByText( 'Navigate to child screen.', {
+		throwIfNotFound,
+	} );
+const getToHomeScreenButton = ( { throwIfNotFound } = {} ) =>
+	getNavigationButtonByText( 'Go back', {
+		throwIfNotFound,
+	} );
+
 describe( 'Navigator', () => {
 	it( 'should render', () => {
 		render( <MyNavigation /> );
@@ -108,4 +121,35 @@ describe( 'Navigator', () => {
 	} );
 
 	// todo: initialPath = not found?
+
+	it( 'should navigate across screens', () => {
+		render( <MyNavigation /> );
+
+		expect( getToChildScreenButton() ).toBeInTheDocument();
+
+		// Navigate to child screen
+		fireEvent.click( getToChildScreenButton() );
+
+		expect(
+			getHomeScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+		expect( getChildScreen() ).toBeInTheDocument();
+		expect( getToHomeScreenButton() ).toBeInTheDocument();
+
+		// Navigate back to home screen
+		fireEvent.click( getToHomeScreenButton() );
+
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+		expect( getHomeScreen() ).toBeInTheDocument();
+
+		// TODO: spy on useNavigator to see if `isBack` is being passed?
+	} );
 } );
+
+// add link to not found, navigate there to not found
+
+// RTL
+
+// reduced motion

From cc0ef1d7d0728fc7aea444f06bc5f193ad8ccb00 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 23:17:25 +0200
Subject: [PATCH 5/8] Add way to spy on `navigator.push()`

---
 .../components/src/navigator/test/index.js    | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index 5408336c5bdb94..281e5707e0d48d 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -29,28 +29,48 @@ const PATHS = {
 	NOT_FOUND: '/not-found',
 };
 
-function NavigatorButton( { path, isBack = false, ...props } ) {
+function NavigatorButton( { path, isBack = false, onClick, ...props } ) {
 	const navigator = useNavigator();
 	return (
 		<button
-			onClick={ () => navigator.push( path, { isBack } ) }
+			onClick={ () => {
+				navigator.push( path, { isBack } );
+				// Used to spy on the values passed to `navigator.push`
+				onClick?.( { path, isBack } );
+			} }
 			{ ...props }
 		/>
 	);
 }
 
-const MyNavigation = ( { initialPath = PATHS.HOME } ) => (
+const MyNavigation = ( {
+	initialPath = PATHS.HOME,
+	onNavigatorButtonClick,
+} ) => (
 	<Navigator initialPath={ initialPath }>
 		<NavigatorScreen path={ PATHS.HOME }>
 			<p>This is the home screen.</p>
-			<NavigatorButton path={ PATHS.CHILD }>
+			<NavigatorButton
+				path={ PATHS.CHILD }
+				onClick={ onNavigatorButtonClick }
+			>
 				Navigate to child screen.
 			</NavigatorButton>
+			<NavigatorButton
+				path={ PATHS.NOT_FOUND }
+				onClick={ onNavigatorButtonClick }
+			>
+				Navigate to non-existing screen.
+			</NavigatorButton>
 		</NavigatorScreen>
 
 		<NavigatorScreen path={ PATHS.CHILD }>
 			<p>This is the child screen.</p>
-			<NavigatorButton path={ PATHS.HOME } isBack>
+			<NavigatorButton
+				path={ PATHS.HOME }
+				isBack
+				onClick={ onNavigatorButtonClick }
+			>
 				Go back
 			</NavigatorButton>
 		</NavigatorScreen>

From dca0283dadb68975a872393b048df292cb66df27 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 23:19:11 +0200
Subject: [PATCH 6/8] Spy on `navigator.push()`

---
 .../components/src/navigator/test/index.js    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index 281e5707e0d48d..dc109430f27fcf 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -96,6 +96,10 @@ const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
 	const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
 	return screen[ fnName ]( 'button', { name: text } );
 };
+const getToNonExistingScreenButton = ( { throwIfNotFound } = {} ) =>
+	getNavigationButtonByText( 'Navigate to non-existing screen.', {
+		throwIfNotFound,
+	} );
 const getToChildScreenButton = ( { throwIfNotFound } = {} ) =>
 	getNavigationButtonByText( 'Navigate to child screen.', {
 		throwIfNotFound,
@@ -143,7 +147,9 @@ describe( 'Navigator', () => {
 	// todo: initialPath = not found?
 
 	it( 'should navigate across screens', () => {
-		render( <MyNavigation /> );
+		const spy = jest.fn();
+
+		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
 
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
@@ -164,7 +170,16 @@ describe( 'Navigator', () => {
 		).not.toBeInTheDocument();
 		expect( getHomeScreen() ).toBeInTheDocument();
 
-		// TODO: spy on useNavigator to see if `isBack` is being passed?
+		// Check the values passed to `navigator.push()`
+		expect( spy ).toHaveBeenCalledTimes( 2 );
+		expect( spy ).toHaveBeenNthCalledWith( 1, {
+			path: PATHS.CHILD,
+			isBack: false,
+		} );
+		expect( spy ).toHaveBeenNthCalledWith( 2, {
+			path: PATHS.HOME,
+			isBack: true,
+		} );
 	} );
 } );
 

From 1c66c6ed6113231cf900b0e219e3c842b5bd7338 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 27 Sep 2021 23:21:04 +0200
Subject: [PATCH 7/8] Add tests for paths not matching any screens

---
 .../components/src/navigator/test/index.js    | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index dc109430f27fcf..68a072799c5ee2 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -144,7 +144,16 @@ describe( 'Navigator', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	// todo: initialPath = not found?
+	it( 'should not rended anything if the `initialPath` does not match any available screen', () => {
+		render( <MyNavigation initialPath={ PATHS.NOT_FOUND } /> );
+
+		expect(
+			getHomeScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+	} );
 
 	it( 'should navigate across screens', () => {
 		const spy = jest.fn();
@@ -181,9 +190,32 @@ describe( 'Navigator', () => {
 			isBack: true,
 		} );
 	} );
-} );
 
-// add link to not found, navigate there to not found
+	it( 'should not rended anything if the path does not match any available screen', () => {
+		const spy = jest.fn();
+
+		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
+
+		expect( getToChildScreenButton() ).toBeInTheDocument();
+
+		// Attempt to navigate to non-existing screen. No screens get rendered.
+		fireEvent.click( getToNonExistingScreenButton() );
+
+		expect(
+			getHomeScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+		expect(
+			getChildScreen( { throwIfNotFound: false } )
+		).not.toBeInTheDocument();
+
+		// Check the values passed to `navigator.push()`
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+		expect( spy ).toHaveBeenNthCalledWith( 1, {
+			path: PATHS.NOT_FOUND,
+			isBack: false,
+		} );
+	} );
+} );
 
 // RTL
 

From 866b9c2cbf56f2d4ebf2d361da81d8fbe958cad8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 28 Sep 2021 09:40:58 +0200
Subject: [PATCH 8/8] Remove comments

---
 packages/components/src/navigator/test/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/navigator/test/index.js b/packages/components/src/navigator/test/index.js
index 68a072799c5ee2..3aa2840d0972fc 100644
--- a/packages/components/src/navigator/test/index.js
+++ b/packages/components/src/navigator/test/index.js
@@ -216,7 +216,3 @@ describe( 'Navigator', () => {
 		} );
 	} );
 } );
-
-// RTL
-
-// reduced motion