Merge pull request #4013 from StoDevX/more-testing

e2e/basic-smoke.spec.ts

@@ -24,6 +24,6 @@ test('should show the settings screen after tap', async () => {
 test('should show home screen after tap to exit settings screen', async () => {
 	await element(by.id('button-open-settings')).tap()
 	await expect(element(by.id('screen-homescreen'))).not.toBeVisible()
-	await element(by.id('button-close-screen')).tap()
+	await element(by.text('Done')).tap()
 	await expect(element(by.id('screen-homescreen'))).toBeVisible()
 })

e2e/streaming.spec.ts

@@ -0,0 +1,71 @@
+import {beforeAll, beforeEach, describe, it} from '@jest/globals'
+import {by, device, element, expect} from 'detox'
+
+// launch the app once - do this per-test-file to grant only the permissions
+// needed for a given test
+beforeAll(async () => {
+	await device.launchApp()
+})
+
+// in this file, only reload the rn stuff between tests
+beforeEach(async () => {
+	await device.reloadReactNative()
+})
+
+describe('Streaming Media View', () => {
+	it('is reachable from the homescreen', async () => {
+		// Start at the home screen
+		await expect(element(by.id('screen-homescreen'))).toBeVisible()
+
+		// Expect the Streaming Media button to be present, and tap on it
+		await expect(element(by.text('Streaming Media'))).toBeVisible()
+		await element(by.text('Streaming Media')).tap()
+
+		// Verify that the navigation took us away from the homescreen
+		await expect(element(by.id('screen-homescreen'))).not.toBeVisible()
+	})
+
+	it('has the Stream List visible by default', async () => {
+		// Navigate into Streaming Media
+		await element(by.text('Streaming Media')).tap()
+
+		// The stream-list should be visible now
+		await expect(element(by.id('stream-list'))).toBeVisible()
+	})
+
+	describe('Webcams', () => {
+		it('is reachable under the home screen', async () => {
+			// Navigate into Streaming Media
+			await element(by.text('Streaming Media')).tap()
+
+			// Enter the ksto view
+			await expect(element(by.text('Webcams'))).toBeVisible()
+			await element(by.text('Webcams')).tap()
+			await expect(element(by.text('East Quad'))).toBeVisible()
+		})
+	})
+
+	describe('KSTO Radio', () => {
+		it('is reachable under the home screen', async () => {
+			// Navigate into Streaming Media
+			await element(by.text('Streaming Media')).tap()
+
+			// Enter the ksto view
+			await expect(element(by.text('KSTO'))).toBeVisible()
+			await element(by.text('KSTO')).tap()
+			await expect(element(by.text('KSTO 93.1 FM'))).toBeVisible()
+		})
+	})
+
+	describe('KRLX Radio', () => {
+		it('is reachable under the home screen', async () => {
+			// Navigate into Streaming Media
+			await element(by.text('Streaming Media')).tap()
+
+			// Enter the ksto view
+			await expect(element(by.text('KRLX'))).toBeVisible()
+			await element(by.text('KRLX')).tap()
+			await expect(element(by.text('88.1 KRLX-FM'))).toBeVisible()
+		})
+	})
+})

modules/touchable/index.tsx

@@ -32,12 +32,12 @@ const CustomPressable = forwardRef<View, Props>((props, ref): JSX.Element => {
 		...passthrough
 	} = props
 
-	let containerAdjustmentStyle: (
-		state: PressableStateCallbackType,
-	) => Array<StyleProp<ViewStyle>>
+	let containerAdjustmentStyle:
+		| StyleProp<ViewStyle>
+		| ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
 
 	if (Platform.OS === 'android') {
-		containerAdjustmentStyle = (_state) => [containerStyle]
+		containerAdjustmentStyle = [containerStyle]
 	} else if (Platform.OS === 'ios') {
 		if (highlight) {
 			containerAdjustmentStyle = (state) =>
@@ -57,7 +57,7 @@ const CustomPressable = forwardRef<View, Props>((props, ref): JSX.Element => {
 	return (
 		<Pressable
 			ref={ref}
-			android_ripple={{borderless: borderless}}
+			android_ripple={{borderless}}
 			style={containerAdjustmentStyle}
 			{...passthrough}
 		>

source/views/home/button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {View, Text, StyleSheet, Platform} from 'react-native'
+import {Text, StyleSheet, Platform} from 'react-native'
 import Icon from 'react-native-vector-icons/Entypo'
 import type {ViewType} from '../views'
 import {Touchable} from '@frogpond/touchable'
@@ -23,12 +23,12 @@ export function HomeScreenButton({view, onPress}: Props): JSX.Element {
 			accessible={true}
 			highlight={false}
 			onPress={onPress}
-			style={[styles.button, {backgroundColor: view.tint}]}
+			style={[styles.button, styles.contents, {backgroundColor: view.tint}]}
 		>
-			<View style={styles.contents}>
+			<>
 				<Icon name={view.icon} size={32} style={[foreground, styles.icon]} />
 				<Text style={[foreground, styles.text]}>{view.title}</Text>
-			</View>
+			</>
 		</Touchable>
 	)
 }

source/views/streaming/streams/list.tsx

@@ -153,6 +153,7 @@ export const StreamListView = (): JSX.Element => {
 			)}
 			sections={groupStreams(filterStreams(entries, filters))}
 			style={styles.listContainer}
+			testID="stream-list"
 		/>
 	)
 }

source/views/streaming/webcams/list.tsx

@@ -40,6 +40,7 @@ export let WebcamsView = (): JSX.Element => {
 			refreshControl={
 				<RefreshControl onRefresh={refetch} refreshing={isRefetching} />
 			}
+			testID="screen-streaming-webcams"
 		>
 			{columns.map((contents, i) => (
 				<Column key={i} style={styles.column}>

source/views/streaming/webcams/thumbnail.tsx

@@ -37,25 +37,24 @@ export const StreamThumbnail = (props: Props): JSX.Element => {
 
 	return (
 		// do not remove this View; it is needed to prevent extra highlighting
-		<View style={styles.cell}>
-			<Touchable
-				highlight={true}
-				onPress={handlePress}
-				style={{width, height}}
-				underlayColor={baseColor}
-			>
-				<Image
-					accessibilityIgnoresInvertColors={true}
-					resizeMode="cover"
-					source={img}
-					style={[StyleSheet.absoluteFill, {width, height}]}
-				/>
+		<Touchable
+			containerStyle={styles.cell}
+			highlight={true}
+			onPress={handlePress}
+			style={{width, height}}
+			underlayColor={baseColor}
+		>
+			<Image
+				accessibilityIgnoresInvertColors={true}
+				resizeMode="cover"
+				source={img}
+				style={[StyleSheet.absoluteFill, {width, height}]}
+			/>
 
-				<View style={styles.titleWrapper}>
-					<Text style={[styles.titleText, {color: textColor}]}>{name}</Text>
-				</View>
-			</Touchable>
-		</View>
+			<View style={styles.titleWrapper}>
+				<Text style={[styles.titleText, {color: textColor}]}>{name}</Text>
+			</View>
+		</Touchable>
 	)
 }