Fixed typescript errors

This commit is contained in:
vutukuri15 2025-03-05 12:47:51 -08:00
parent b7238d11d4
commit 868d9aec54
3 changed files with 72 additions and 42 deletions

View File

@ -78,7 +78,7 @@ const IndexScreen: React.FC = () => {
const loadedState = await loadState(slot);
if (loadedState) {
setPlayerCount(loadedState.playerCount);
setBuyInAmount(loadedState.buyInAmount);
setBuyInAmount(loadedState.buyInAmount ?? 20);
setNumberOfChips(loadedState.numberOfChips);
setTotalChipsCount(loadedState.totalChipsCount);
setSelectedCurrency(loadedState.selectedCurrency || "$");

View File

@ -2,6 +2,7 @@ import React from "react";
import { fireEvent, render } from "@testing-library/react-native";
import BuyInSelector from "@/components/BuyInSelector";
// Mocking vector icons to prevent errors
jest.mock("@expo/vector-icons", () => {
const { Text } = require("react-native");
return {
@ -10,63 +11,73 @@ jest.mock("@expo/vector-icons", () => {
});
describe("BuyInSelector Component", () => {
let setBuyInAmount;
let getByText;
let getByPlaceholderText;
let queryByText;
let setBuyInAmount: jest.Mock;
// Render the component with the necessary props
// Render the component and return query methods
const renderComponent = (selectedCurrency = "$") => {
const result = render(
const utils = render(
<BuyInSelector
setBuyInAmount={setBuyInAmount}
selectedCurrency={selectedCurrency}
/>
);
getByText = result.getByText;
getByPlaceholderText = result.getByPlaceholderText;
queryByText = result.queryByText;
return {
...utils,
getByText: utils.getByText,
getByPlaceholderText: utils.getByPlaceholderText,
queryByText: utils.queryByText,
};
};
beforeEach(() => {
setBuyInAmount = jest.fn();
renderComponent();
});
it("renders the buy-in options and input correctly", () => {
const { getByText, getByPlaceholderText, queryByText } = renderComponent();
expect(getByText("$ 10")).toBeTruthy();
expect(getByText("$ 25")).toBeTruthy();
expect(getByText("$ 50")).toBeTruthy();
expect(getByPlaceholderText("Enter custom buy-in")).toBeTruthy();
// Check default selection with a more flexible approach
expect(queryByText(/Selected Buy-in.*None/)).toBeTruthy();
expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
});
it("sets a predefined buy-in amount correctly", () => {
const { getByText } = renderComponent();
fireEvent.press(getByText("$ 25"));
expect(setBuyInAmount).toHaveBeenCalledWith(25);
});
it("sets a custom buy-in amount correctly", () => {
const { getByPlaceholderText } = renderComponent();
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
expect(setBuyInAmount).toHaveBeenCalledWith(100);
});
it("resets custom amount if invalid input is entered", () => {
const { getByPlaceholderText } = renderComponent();
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-10");
expect(setBuyInAmount).toHaveBeenCalledWith(25);
expect(setBuyInAmount).toHaveBeenCalledWith(25); // Default reset
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
expect(setBuyInAmount).toHaveBeenCalledWith(25);
});
it("clears the custom amount when selecting a predefined option", () => {
const { getByPlaceholderText, getByText } = renderComponent();
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
fireEvent.press(getByText("$ 50"));
expect(setBuyInAmount).toHaveBeenCalledWith(50);
});
it("handles valid and invalid input for custom amount correctly", () => {
const { getByPlaceholderText } = renderComponent();
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "75");
expect(setBuyInAmount).toHaveBeenCalledWith(75);
@ -78,33 +89,40 @@ describe("BuyInSelector Component", () => {
});
it("triggers state update every time a buy-in option is clicked, even if it's the same", () => {
const { getByText } = renderComponent();
fireEvent.press(getByText("$ 25"));
fireEvent.press(getByText("$ 25"));
expect(setBuyInAmount).toHaveBeenCalledTimes(2);
});
it("resets to default buy-in when custom input is cleared", () => {
const { getByPlaceholderText } = renderComponent();
const input = getByPlaceholderText("Enter custom buy-in");
fireEvent.changeText(input, "75");
expect(setBuyInAmount).toHaveBeenCalledWith(75);
fireEvent.changeText(input, "");
expect(setBuyInAmount).toHaveBeenCalledWith(25);
});
it("updates state correctly when selecting predefined buy-in after entering a custom amount", () => {
const { getByPlaceholderText, getByText } = renderComponent();
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "200");
expect(setBuyInAmount).toHaveBeenCalledWith(200);
fireEvent.press(getByText("$ 10"));
expect(setBuyInAmount).toHaveBeenCalledWith(10);
});
it("displays selected currency correctly", () => {
renderComponent("€");
const { getByText, queryByText } = renderComponent("€");
expect(getByText("€ 10")).toBeTruthy();
expect(getByText("€ 25")).toBeTruthy();
expect(getByText("€ 50")).toBeTruthy();
// Check default selection text with a flexible regex
expect(queryByText(/Selected Buy-in.*None/)).toBeTruthy();
expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
});
});

View File

@ -17,11 +17,10 @@ jest.mock("expo-image-picker", () => ({
describe("ChipDetection", () => {
beforeEach(() => {
jest.clearAllMocks();
global.fetch = jest.fn(() =>
Promise.resolve({
ok: true,
json: () =>
Promise.resolve({
jest.spyOn(global, "fetch").mockImplementation(() =>
Promise.resolve(
new Response(
JSON.stringify({
choices: [
{
message: {
@ -34,10 +33,16 @@ describe("ChipDetection", () => {
},
],
}),
})
{ status: 200, headers: { "Content-Type": "application/json" } }
)
)
);
});
afterEach(() => {
jest.restoreAllMocks(); // Reset all mocks to prevent test contamination
});
it("renders correctly", () => {
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
@ -48,7 +53,7 @@ describe("ChipDetection", () => {
});
it("picks an image from the library", async () => {
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
canceled: false,
assets: [{ uri: "test-uri", base64: "test-base64" }],
});
@ -62,10 +67,12 @@ describe("ChipDetection", () => {
});
it("takes a photo with the camera", async () => {
ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
(
ImagePicker.requestCameraPermissionsAsync as jest.Mock
).mockResolvedValueOnce({
granted: true,
});
ImagePicker.launchCameraAsync.mockResolvedValueOnce({
(ImagePicker.launchCameraAsync as jest.Mock).mockResolvedValueOnce({
canceled: false,
assets: [{ uri: "test-camera-uri", base64: "test-camera-base64" }],
});
@ -81,7 +88,9 @@ describe("ChipDetection", () => {
});
it("handles camera permission denied", async () => {
ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
(
ImagePicker.requestCameraPermissionsAsync as jest.Mock
).mockResolvedValueOnce({
granted: false,
});
@ -98,16 +107,18 @@ describe("ChipDetection", () => {
});
it("displays error message on image processing failure", async () => {
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
canceled: false,
assets: [{ uri: "test-uri", base64: "test-base64" }],
});
global.fetch.mockImplementationOnce(() =>
Promise.resolve({
ok: false,
json: () => Promise.resolve({ choices: [] }),
})
jest.spyOn(global, "fetch").mockImplementationOnce(() =>
Promise.resolve(
new Response(JSON.stringify({ choices: [] }), {
status: 400,
headers: { "Content-Type": "application/json" },
})
)
);
const { getByText } = render(
@ -121,16 +132,15 @@ describe("ChipDetection", () => {
});
it("handles valid API response correctly", async () => {
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
canceled: false,
assets: [{ uri: "test-uri", base64: "test-base64" }],
});
global.fetch.mockImplementationOnce(() =>
Promise.resolve({
ok: true,
json: () =>
Promise.resolve({
jest.spyOn(global, "fetch").mockImplementationOnce(() =>
Promise.resolve(
new Response(
JSON.stringify({
choices: [
{
message: {
@ -139,7 +149,9 @@ describe("ChipDetection", () => {
},
],
}),
})
{ status: 200, headers: { "Content-Type": "application/json" } }
)
)
);
const { getByText } = render(