react-native-timer-picker
Version:
A simple, flexible, performant duration picker for React Native apps 🔥 Great for timers, alarms and duration inputs ⏰🕰️⏳ Includes iOS-style haptic and audio feedback 🍏
273 lines • 10.6 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from "react";
import { render, fireEvent, cleanup } from "@testing-library/react-native";
import { TouchableOpacity, Text } from "react-native";
import TimerPickerModal from "../components/TimerPickerModal";
describe("TimerPickerModal", () => {
const mockOnConfirm = jest.fn();
const mockOnCancel = jest.fn();
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
cleanup();
});
const defaultProps = {
visible: true,
setIsVisible: jest.fn(),
onConfirm: mockOnConfirm,
onCancel: mockOnCancel
};
it("renders without crashing", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, defaultProps));
const component = getByTestId("timer-picker-modal");
expect(component).toBeDefined();
});
it("calls onConfirm when Confirm button is pressed", () => {
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, defaultProps));
const confirmButton = getByText("Confirm");
fireEvent.press(confirmButton);
expect(mockOnConfirm).toHaveBeenCalled();
});
it("calls onCancel when Cancel button is pressed", () => {
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, defaultProps));
const cancelButton = getByText("Cancel");
fireEvent.press(cancelButton);
expect(mockOnCancel).toHaveBeenCalled();
});
it("hides the modal when Cancel button is pressed", () => {
const setIsVisibleMock = jest.fn();
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
setIsVisible: setIsVisibleMock
})));
const cancelButton = getByText("Cancel");
fireEvent.press(cancelButton);
expect(setIsVisibleMock).toHaveBeenCalledWith(false);
});
it("hides the modal when overlay is pressed", () => {
const setIsVisibleMock = jest.fn();
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
closeOnOverlayPress: true,
setIsVisible: setIsVisibleMock
})));
const overlay = getByTestId("modal-backdrop");
fireEvent.press(overlay);
expect(setIsVisibleMock).toHaveBeenCalledWith(false);
});
it("calls onConfirm with selected duration when Confirm button is pressed", () => {
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, defaultProps));
// Select duration in TimerPicker, assuming its interaction is tested separately
const confirmButton = getByText("Confirm");
fireEvent.press(confirmButton);
expect(mockOnConfirm).toHaveBeenCalledWith(expect.objectContaining({}));
});
it("renders but is not visible when visible prop is false", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
visible: false
})));
const modal = getByTestId("timer-picker-modal");
expect(modal).toBeDefined();
// Modal component still renders but with visible={false}
expect(modal.props.visible).toBe(false);
});
it("renders with custom button labels", () => {
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
cancelButtonText: "Dismiss",
confirmButtonText: "OK"
})));
expect(getByText("OK")).toBeDefined();
expect(getByText("Dismiss")).toBeDefined();
});
it("renders with custom modal title", () => {
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
modalTitle: "Select Time"
})));
expect(getByText("Select Time")).toBeDefined();
});
it("does not close on overlay press when closeOnOverlayPress is false", () => {
const setIsVisibleMock = jest.fn();
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
closeOnOverlayPress: false,
setIsVisible: setIsVisibleMock
})));
const overlay = getByTestId("modal-backdrop");
fireEvent.press(overlay);
expect(setIsVisibleMock).not.toHaveBeenCalled();
});
it("hides Cancel button when hideCancelButton is true", () => {
const {
queryByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
hideCancelButton: true
})));
expect(queryByText("Cancel")).toBeNull();
});
it("renders with initial value", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
initialValue: {
hours: 2,
minutes: 30,
seconds: 0
}
})));
expect(getByTestId("timer-picker-modal")).toBeDefined();
});
it("renders with custom intervals", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
hourInterval: 2,
minuteInterval: 15,
secondInterval: 5
})));
expect(getByTestId("timer-picker-modal")).toBeDefined();
});
it("calls both onCancel and setIsVisible when Cancel is pressed", () => {
const setIsVisibleMock = jest.fn();
const onCancelMock = jest.fn();
const {
getByText
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
onCancel: onCancelMock,
setIsVisible: setIsVisibleMock
})));
const cancelButton = getByText("Cancel");
fireEvent.press(cancelButton);
expect(onCancelMock).toHaveBeenCalled();
expect(setIsVisibleMock).toHaveBeenCalledWith(false);
});
it("hides specific time units when respective hide props are provided", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
hideHours: true,
hideSeconds: true
})));
expect(getByTestId("timer-picker-modal")).toBeDefined();
// Note: The specific duration scroll test IDs would be in the TimerPicker component
});
it("renders without crashing with all optional props", () => {
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
cancelButtonText: "Close",
confirmButtonText: "Done",
hideDays: false,
hideHours: false,
hideMinutes: false,
hideSeconds: false,
hourLabel: "h",
minuteLabel: "m",
modalTitle: "Pick Duration",
secondLabel: "s"
})));
expect(getByTestId("timer-picker-modal")).toBeDefined();
});
it("renders custom cancel button when provided", () => {
const CustomButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-cancel-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Cancel"));
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
cancelButton: /*#__PURE__*/React.createElement(CustomButton, null)
})));
expect(getByTestId("custom-cancel-button")).toBeDefined();
});
it("renders custom confirm button when provided", () => {
const CustomButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-confirm-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Confirm"));
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
confirmButton: /*#__PURE__*/React.createElement(CustomButton, null)
})));
expect(getByTestId("custom-confirm-button")).toBeDefined();
});
it("calls onCancel when custom cancel button is pressed", () => {
const CustomButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-cancel-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Cancel"));
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
cancelButton: /*#__PURE__*/React.createElement(CustomButton, null)
})));
const customCancelButton = getByTestId("custom-cancel-button");
fireEvent.press(customCancelButton);
expect(mockOnCancel).toHaveBeenCalled();
});
it("calls onConfirm when custom confirm button is pressed", () => {
const CustomButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-confirm-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Confirm"));
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
confirmButton: /*#__PURE__*/React.createElement(CustomButton, null)
})));
const customConfirmButton = getByTestId("custom-confirm-button");
fireEvent.press(customConfirmButton);
expect(mockOnConfirm).toHaveBeenCalled();
});
it("renders both custom cancel and confirm buttons when provided", () => {
const CustomCancelButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-cancel-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Cancel"));
const CustomConfirmButton = ({
onPress
}) => /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPress,
testID: "custom-confirm-button"
}, /*#__PURE__*/React.createElement(Text, null, "Custom Confirm"));
const {
getByTestId
} = render(/*#__PURE__*/React.createElement(TimerPickerModal, _extends({}, defaultProps, {
cancelButton: /*#__PURE__*/React.createElement(CustomCancelButton, null),
confirmButton: /*#__PURE__*/React.createElement(CustomConfirmButton, null)
})));
expect(getByTestId("custom-cancel-button")).toBeDefined();
expect(getByTestId("custom-confirm-button")).toBeDefined();
});
});
//# sourceMappingURL=TimerPickerModal.test.js.map