test: add comprehensive tests for HeaderBackButton component

Author: lposen

.eslintrc.js

@@ -48,4 +48,5 @@ module.exports = {
       },
     },
   ],
+  ignorePatterns: ['coverage/**/*', 'lib/**/*', 'docs/**/*'],
 };

src/inbox/components/HeaderBackButton.test.tsx

@@ -0,0 +1,243 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, render } from '@testing-library/react-native';
+import { PixelRatio } from 'react-native';
+import { HeaderBackButton, ICON_MARGIN, ICON_SIZE } from './HeaderBackButton';
+
+describe('HeaderBackButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { getByTestId } = render(<HeaderBackButton testID="back-button" />);
+      expect(getByTestId('back-button')).toBeTruthy();
+    });
+
+    it('should render with default back arrow image', () => {
+      const { UNSAFE_getByType } = render(<HeaderBackButton />);
+      const image = UNSAFE_getByType('Image' as any);
+      expect(image).toBeTruthy();
+      expect(image.props.source).toMatchObject({
+        uri: expect.stringContaining('data:image/png;base64'),
+        width: PixelRatio.getPixelSizeForLayoutSize(ICON_SIZE),
+        height: PixelRatio.getPixelSizeForLayoutSize(ICON_SIZE),
+      });
+    });
+
+    it('should render without label by default', () => {
+      const { queryByText } = render(<HeaderBackButton />);
+      expect(queryByText(/./)).toBeNull();
+    });
+
+    it('should render with label when provided', () => {
+      const label = 'Back';
+      const { getByText } = render(<HeaderBackButton label={label} />);
+      expect(getByText(label)).toBeTruthy();
+    });
+
+    it('should render with custom label text', () => {
+      const customLabel = 'Go Back to Home';
+      const { getByText } = render(<HeaderBackButton label={customLabel} />);
+      expect(getByText(customLabel)).toBeTruthy();
+    });
+  });
+
+  describe('Custom Image Props', () => {
+    it('should render with custom imageUri', () => {
+      const customUri = 'https://example.com/custom-back-icon.png';
+      const { UNSAFE_getByType } = render(
+        <HeaderBackButton imageUri={customUri} />
+      );
+      const image = UNSAFE_getByType('Image' as any);
+      expect(image.props.source).toMatchObject({
+        uri: customUri,
+      });
+    });
+
+    it('should render with custom imageSource', () => {
+      const customSource = { uri: 'https://example.com/icon.png' };
+      const { UNSAFE_getByType } = render(
+        <HeaderBackButton imageSource={customSource} />
+      );
+      const image = UNSAFE_getByType('Image' as any);
+      expect(image.props.source).toEqual(customSource);
+    });
+
+    it('should prioritize imageSource over imageUri when both are provided', () => {
+      const customUri = 'https://example.com/custom-back-icon.png';
+      const customSource = { uri: 'https://example.com/icon.png' };
+      const { UNSAFE_getByType } = render(
+        <HeaderBackButton imageUri={customUri} imageSource={customSource} />
+      );
+      const image = UNSAFE_getByType('Image' as any);
+      expect(image.props.source).toEqual(customSource);
+    });
+  });
+
+  describe('Image Properties', () => {
+    it('should render image with correct properties', () => {
+      const { UNSAFE_getByType } = render(<HeaderBackButton />);
+      const image = UNSAFE_getByType('Image' as any);
+
+      expect(image.props.resizeMode).toBe('contain');
+      expect(image.props.fadeDuration).toBe(0);
+      expect(image.props.height).toBe(ICON_SIZE);
+      expect(image.props.width).toBe(ICON_SIZE);
+      expect(image.props.resizeMethod).toBe('scale');
+      expect(image.props.tintColor).toBeTruthy();
+    });
+
+    it('should apply correct style to image', () => {
+      const { UNSAFE_getByType } = render(<HeaderBackButton />);
+      const image = UNSAFE_getByType('Image' as any);
+
+      expect(image.props.style).toMatchObject({
+        height: ICON_SIZE,
+        margin: ICON_MARGIN,
+        width: ICON_SIZE,
+      });
+    });
+  });
+
+  describe('Touch Interaction', () => {
+    it('should call onPress when button is pressed', () => {
+      const onPressMock = jest.fn();
+      const { getByTestId } = render(
+        <HeaderBackButton testID="back-button" onPress={onPressMock} />
+      );
+
+      fireEvent.press(getByTestId('back-button'));
+      expect(onPressMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onPressIn when touch starts', () => {
+      const onPressInMock = jest.fn();
+      const { getByTestId } = render(
+        <HeaderBackButton testID="back-button" onPressIn={onPressInMock} />
+      );
+
+      fireEvent(getByTestId('back-button'), 'pressIn');
+      expect(onPressInMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onPressOut when touch ends', () => {
+      const onPressOutMock = jest.fn();
+      const { getByTestId } = render(
+        <HeaderBackButton testID="back-button" onPressOut={onPressOutMock} />
+      );
+
+      fireEvent(getByTestId('back-button'), 'pressOut');
+      expect(onPressOutMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not trigger onPress when disabled', () => {
+      const onPressMock = jest.fn();
+      const { getByTestId } = render(
+        <HeaderBackButton
+          testID="back-button"
+          onPress={onPressMock}
+          disabled={true}
+        />
+      );
+
+      fireEvent.press(getByTestId('back-button'));
+      expect(onPressMock).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Platform-specific behavior', () => {
+    it('should export correct icon size constant', () => {
+      // ICON_SIZE is evaluated at module load time based on Platform.OS
+      expect(ICON_SIZE).toBeDefined();
+      expect([21, 24]).toContain(ICON_SIZE);
+    });
+
+    it('should export correct icon margin constant', () => {
+      // ICON_MARGIN is evaluated at module load time based on Platform.OS
+      expect(ICON_MARGIN).toBeDefined();
+      expect([3, 8]).toContain(ICON_MARGIN);
+    });
+
+    it('should use consistent icon size in image props', () => {
+      const { UNSAFE_getByType } = render(<HeaderBackButton />);
+      const image = UNSAFE_getByType('Image' as any);
+
+      expect(image.props.height).toBe(ICON_SIZE);
+      expect(image.props.width).toBe(ICON_SIZE);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should accept accessibility props', () => {
+      const { getByTestId } = render(
+        <HeaderBackButton
+          testID="back-button"
+          accessible={true}
+          accessibilityLabel="Navigate back"
+          accessibilityHint="Returns to previous screen"
+        />
+      );
+
+      const button = getByTestId('back-button');
+      expect(button.props.accessible).toBe(true);
+      expect(button.props.accessibilityLabel).toBe('Navigate back');
+      expect(button.props.accessibilityHint).toBe('Returns to previous screen');
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should render View with correct flex direction', () => {
+      const { UNSAFE_getAllByType } = render(<HeaderBackButton label="Back" />);
+      const views = UNSAFE_getAllByType('View' as any);
+
+      // Find the view with returnButton style
+      const returnButtonView = views.find(
+        (view) =>
+          view.props.style?.flexDirection === 'row' &&
+          view.props.style?.alignItems === 'center'
+      );
+      expect(returnButtonView).toBeTruthy();
+    });
+
+    it('should render label text with correct style when provided', () => {
+      const { getByText } = render(<HeaderBackButton label="Back" />);
+      const labelElement = getByText('Back');
+
+      expect(labelElement.props.style).toMatchObject({
+        fontSize: 20,
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty string label', () => {
+      const { queryByText } = render(<HeaderBackButton label="" />);
+      // Empty string should not render text
+      expect(queryByText('')).toBeNull();
+    });
+
+    it('should handle multiple props correctly', () => {
+      const onPressMock = jest.fn();
+      const label = 'Custom Back';
+      const customUri = 'https://example.com/icon.png';
+
+      const { getByText, getByTestId } = render(
+        <HeaderBackButton
+          testID="back-button"
+          label={label}
+          imageUri={customUri}
+          onPress={onPressMock}
+          accessible={true}
+          accessibilityLabel="Go back"
+        />
+      );
+
+      expect(getByText(label)).toBeTruthy();
+      expect(getByTestId('back-button').props.accessible).toBe(true);
+
+      fireEvent.press(getByTestId('back-button'));
+      expect(onPressMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});