@iterable/react-native-sdk
Version:
Iterable SDK for React Native.
263 lines (261 loc) • 9.11 kB
JavaScript
"use strict";
/* 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.js";
import { jsx as _jsx } from "react/jsx-runtime";
describe('HeaderBackButton', () => {
beforeEach(() => {
jest.clearAllMocks();
});
describe('Rendering', () => {
it('should render without crashing', () => {
const {
getByTestId
} = render(/*#__PURE__*/_jsx(HeaderBackButton, {
testID: "back-button"
}));
expect(getByTestId('back-button')).toBeTruthy();
});
it('should render with default back arrow image', () => {
const {
UNSAFE_getByType
} = render(/*#__PURE__*/_jsx(HeaderBackButton, {}));
const image = UNSAFE_getByType('Image');
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(/*#__PURE__*/_jsx(HeaderBackButton, {}));
expect(queryByText(/./)).toBeNull();
});
it('should render with label when provided', () => {
const label = 'Back';
const {
getByText
} = render(/*#__PURE__*/_jsx(HeaderBackButton, {
label: label
}));
expect(getByText(label)).toBeTruthy();
});
it('should render with custom label text', () => {
const customLabel = 'Go Back to Home';
const {
getByText
} = render(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(HeaderBackButton, {
imageUri: customUri
}));
const image = UNSAFE_getByType('Image');
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(/*#__PURE__*/_jsx(HeaderBackButton, {
imageSource: customSource
}));
const image = UNSAFE_getByType('Image');
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(/*#__PURE__*/_jsx(HeaderBackButton, {
imageUri: customUri,
imageSource: customSource
}));
const image = UNSAFE_getByType('Image');
expect(image.props.source).toEqual(customSource);
});
});
describe('Image Properties', () => {
it('should render image with correct properties', () => {
const {
UNSAFE_getByType
} = render(/*#__PURE__*/_jsx(HeaderBackButton, {}));
const image = UNSAFE_getByType('Image');
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(/*#__PURE__*/_jsx(HeaderBackButton, {}));
const image = UNSAFE_getByType('Image');
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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(HeaderBackButton, {}));
const image = UNSAFE_getByType('Image');
expect(image.props.height).toBe(ICON_SIZE);
expect(image.props.width).toBe(ICON_SIZE);
});
});
describe('Accessibility', () => {
it('should accept accessibility props', () => {
const {
getByTestId
} = render(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(HeaderBackButton, {
label: "Back"
}));
const views = UNSAFE_getAllByType('View');
// 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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(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(/*#__PURE__*/_jsx(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);
});
});
});
//# sourceMappingURL=HeaderBackButton.test.js.map