Add ErrorView tests

components/ErrorView.js

@@ -31,20 +31,39 @@ const ErrorView = ({
 		}}>
 			<View style={styles.body}>
 				<Icon
+					testID='error-view-icon'
 					name={icon.name}
 					type={icon.type}
 					size={isCompact(window) ? 60 : 100}
 				/>
-				<Text h2 style={{ ...styles.heading, marginVertical }}>{heading}</Text>
-				<Text style={{ ...styles.message, marginBottom: marginVertical }}>{message}</Text>
+				<Text
+					testID='error-view-heading'
+					h2
+					style={{ ...styles.heading, marginVertical }}
+				>
+					{heading}
+				</Text>
+				<Text
+					testID='error-view-message'
+					style={{ ...styles.message, marginBottom: marginVertical }}
+				>
+					{message}
+				</Text>
 			</View>
-			<View>
+			<View testID='error-view-details'>
 				{details.map((detailText, index) => (
-					<Text key={`errorview-details-${index}`} style={styles.details}>{detailText}</Text>
+					<Text
+						testID='error-view-detail'
+						key={`errorview-details-${index}`}
+						style={styles.details}
+					>
+						{detailText}
+					</Text>
 				))}
 			</View>
 			{buttonTitle && (
 				<Button
+					testID='error-view-button'
 					containerStyle={styles.footer}
 					icon={buttonIcon}
 					title={buttonTitle}

components/__tests__/ErrorView.test.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+
+import ErrorView from '../ErrorView';
+
+describe('ErrorView', () => {
+	it('should render correctly', () => {
+		const { getByTestId, queryByTestId } = render(
+			<ErrorView
+				heading='Error Heading'
+				message='Error Message'
+			/>
+		);
+
+		expect(getByTestId('error-view-heading')).toHaveTextContent('Error Heading');
+		expect(getByTestId('error-view-message')).toHaveTextContent('Error Message');
+		expect(getByTestId('error-view-details')).toBeEmpty();
+		expect(queryByTestId('error-view-icon')).not.toBeNull();
+		expect(queryByTestId('error-view-button')).toBeNull();
+	});
+
+	it('should render button and handle presses', () => {
+		const onPress = jest.fn();
+
+		const { getByTestId } = render(
+			<ErrorView
+				heading='Error Heading'
+				message='Error Message'
+				buttonTitle='Test Button'
+				onPress={onPress}
+			/>
+		);
+
+		const button = getByTestId('error-view-button');
+		expect(button).toHaveTextContent('Test Button');
+		expect(onPress).not.toHaveBeenCalled();
+		fireEvent.press(button);
+		expect(onPress).toHaveBeenCalled();
+	});
+
+	it('should render details', () => {
+		const { getAllByTestId, getByTestId } = render(
+			<ErrorView
+				heading='Error Heading'
+				message='Error Message'
+				details={[
+					'Detail 0',
+					'Detail 1',
+					'Detail 2'
+				]}
+			/>
+		);
+
+		expect(getByTestId('error-view-details')).not.toBeEmpty();
+
+		const details = getAllByTestId('error-view-detail');
+		expect(details).toHaveLength(3);
+		expect(details[0]).toHaveTextContent('Detail 0');
+		expect(details[1]).toHaveTextContent('Detail 1');
+		expect(details[2]).toHaveTextContent('Detail 2');
+	});
+});