Add super secret settings screen

components/AppInfoFooter.js

@@ -3,15 +3,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+
+import { useNavigation } from '@react-navigation/native';
 import Constants from 'expo-constants';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, View } from 'react-native';
 import { Text, ThemeContext } from 'react-native-elements';
 
+import Screens from '../constants/Screens';
 import { getAppName } from '../utils/Device';
 
 const AppInfoFooter = () => {
+	const navigation = useNavigation();
 	const { t } = useTranslation();
 	const { theme } = useContext(ThemeContext);
 
@@ -22,8 +26,14 @@ const AppInfoFooter = () => {
 
 	return (
 		<View style={styles.container}>
-			<Text testID='app-name' style={textStyle}>
-				{`${getAppName()}`}
+			<Text
+				testID='app-name'
+				style={textStyle}
+				onLongPress={() => {
+					navigation.navigate(Screens.DevSettingsScreen);
+				}}
+			>
+				{getAppName()}
 			</Text>
 			<Text testID='app-version' style={textStyle}>
 				{`${Constants.nativeAppVersion} (${Constants.nativeBuildVersion})`}

components/__tests__/AppInfoFooter.test.js

@@ -3,17 +3,30 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { render } from '@testing-library/react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { fireEvent, render } from '@testing-library/react-native';
 import Constants from 'expo-constants';
 import * as Device from 'expo-device';
 import React from 'react';
 
-import AppInfoFooter from '../AppInfoFooter';
 import '../../i18n';
+import Screens from '../../constants/Screens';
+import AppInfoFooter from '../AppInfoFooter';
 
 jest.mock('expo-constants');
 jest.mock('expo-device');
 
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+	const actualNav = jest.requireActual('@react-navigation/native');
+	return {
+		...actualNav,
+		useNavigation: () => ({
+			navigate: mockNavigate
+		})
+	};
+});
+
 describe('AppInfoFooter', () => {
 	it('should render correctly', () => {
 		Constants.expoVersion = '39.0.0';
@@ -21,9 +34,16 @@ describe('AppInfoFooter', () => {
 		Constants.nativeBuildVersion = '1.0.0.0';
 		Device.osName = 'Test OS'; // eslint-disable-line no-import-assign, import/namespace
 
-		const { getByTestId } = render(<AppInfoFooter />);
+		const { getByTestId } = render(
+			<NavigationContainer>
+				<AppInfoFooter />
+			</NavigationContainer>
+		);
 
-		expect(getByTestId('app-name')).toHaveTextContent('Jellyfin Mobile (Test OS)');
+		const appName = getByTestId('app-name');
+		expect(appName).toHaveTextContent('Jellyfin Mobile (Test OS)');
+		fireEvent(appName, 'onLongPress');
+		expect(mockNavigate).toHaveBeenCalledWith(Screens.DevSettingsScreen);
 		expect(getByTestId('app-version')).toHaveTextContent('1.0.0 (1.0.0.0)');
 		expect(getByTestId('expo-version')).toHaveTextContent('Expo Version: 39.0.0');
 	});

constants/Screens.js

@@ -11,5 +11,7 @@ export default {
 	HomeTab: 'Home',
 	ServerHelpScreen: 'ServerHelpScreen',
 	SettingsTab: 'Settings',
+	SettingsScreen: 'SettingsScreen',
+	DevSettingsScreen: 'DevSettingsScreen',
 	ErrorScreen: 'ErrorScreen'
 };

navigation/SettingsNavigator.js

@@ -0,0 +1,34 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { createStackNavigator } from '@react-navigation/stack';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import Screens from '../constants/Screens';
+import DevSettingsScreen from '../screens/DevSettingsScreen';
+import SettingsScreen from '../screens/SettingsScreen';
+
+const SettingsStack = createStackNavigator();
+
+const SettingsNavigator = observer(() => (
+	<SettingsStack.Navigator
+		screenOptions={{
+			headerShown: false
+		}}
+	>
+		<SettingsStack.Screen
+			name={Screens.SettingsScreen}
+			component={SettingsScreen}
+		/>
+		<SettingsStack.Screen
+			name={Screens.DevSettingsScreen}
+			component={DevSettingsScreen}
+		/>
+	</SettingsStack.Navigator>
+));
+
+export default SettingsNavigator;

navigation/TabNavigator.js

@@ -13,10 +13,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Screens from '../constants/Screens';
 import { useStores } from '../hooks/useStores';
-import SettingsScreen from '../screens/SettingsScreen';
 import { getIconName } from '../utils/Icons';
 
 import HomeNavigator from './HomeNavigator';
+import SettingsNavigator from './SettingsNavigator';
 
 function TabIcon(routeName, color, size) {
 	let iconName = null;
@@ -68,7 +68,7 @@ const TabNavigator = observer(() => {
 			/>
 			<Tab.Screen
 				name={Screens.SettingsTab}
-				component={SettingsScreen}
+				component={SettingsNavigator}
 				options={{
 					title: t('headings.settings')
 				}}

screens/DevSettingsScreen.js

@@ -0,0 +1,37 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { observer } from 'mobx-react-lite';
+import React, { useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import { Text, ThemeContext } from 'react-native-elements';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const DevSettingsScreen = observer(() => {
+	const { theme } = useContext(ThemeContext);
+
+	return (
+		<SafeAreaView
+			style={{
+				...styles.container,
+				backgroundColor: theme.colors.background
+			}}
+			edges={[ 'right', 'left' ]}
+		>
+			<Text>
+				This is a place where development features can be enabled.
+			</Text>
+		</SafeAreaView>
+	);
+});
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1
+	}
+});
+
+export default DevSettingsScreen;

screens/__tests__/DevSettingsScreen.test.js

@@ -0,0 +1,21 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { render } from '@testing-library/react-native';
+import React from 'react';
+
+import DevSettingsScreen from '../DevSettingsScreen';
+
+describe('DevSettingsScreen', () => {
+	it('should render correctly', () => {
+		const { toJSON } = render(
+			<DevSettingsScreen />
+		);
+
+		console.log(toJSON());
+		expect(toJSON()).toMatchSnapshot();
+	});
+});

screens/__tests__/__snapshots__/DevSettingsScreen.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DevSettingsScreen should render correctly 1`] = `
+<RNCSafeAreaView
+  edges={
+    Array [
+      "right",
+      "left",
+    ]
+  }
+  style={
+    Object {
+      "backgroundColor": undefined,
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#242424",
+      }
+    }
+  >
+    This is a place where development features can be enabled.
+  </Text>
+</RNCSafeAreaView>
+`;