void;
tpOrSl: TPOrSLOption;
+ side: "long" | "short";
}) {
return (
@@ -360,15 +427,29 @@ function OptionButtons({
key={option}
type="button"
onClick={() => onOptionChange(option)}
- className={`flex-1 flex items-center justify-center h-9 rounded-[10px] text-sm font-normal tracking-[-0.42px] transition-colors cursor-pointer ${
- selectedOption === option
- ? "bg-white text-black"
- : "bg-white/5 text-gray-2 hover:bg-white/10"
- }`}
+ className={`flex-1 flex items-center justify-center h-9 rounded-[10px] text-sm font-normal tracking-[-0.42px] transition-colors cursor-pointer ${Match.value(
+ selectedOption === option,
+ ).pipe(
+ Match.when(true, () => "bg-white text-black"),
+ Match.orElse(() => "bg-white/5 text-gray-2 hover:bg-white/10"),
+ )}`}
>
- {option === 0
- ? "Off"
- : `${tpOrSl === "takeProfit" ? "+" : "-"}${option}%`}
+ {Match.value(option === 0).pipe(
+ Match.when(true, () => "Off"),
+ Match.orElse(
+ () =>
+ `${Match.value({ side, tpOrSl }).pipe(
+ Match.when(
+ { side: "short", tpOrSl: "takeProfit" },
+ () => "-",
+ ),
+ Match.when({ side: "short", tpOrSl: "stopLoss" }, () => "+"),
+ Match.when({ side: "long", tpOrSl: "takeProfit" }, () => "+"),
+ Match.when({ side: "long", tpOrSl: "stopLoss" }, () => "-"),
+ Match.exhaustive,
+ )}${option}%`,
+ ),
+ )}
))}
@@ -394,7 +475,10 @@ function TPOrSLInputFields({
- Set Leverage
- ,
- { wrapper: TestWrapper },
- );
-
- await userEvent.click(screen.getByText("Set Leverage"));
-
- // leverageStops = [MIN_LEVERAGE, maxLeverage/2, maxLeverage] = [1, 20, 40]
- await expect.element(screen.getByTestId("leverage-stop-1")).toBeVisible();
- await expect.element(screen.getByTestId("leverage-stop-20")).toBeVisible();
- await expect.element(screen.getByTestId("leverage-stop-40")).toBeVisible();
+ await expect.element(screen.getByLabelText("2x")).toBeVisible();
+ await expect.element(screen.getByLabelText("5x")).toBeVisible();
+ await expect.element(screen.getByLabelText("10x")).toBeVisible();
+ await expect.element(screen.getByLabelText("20x")).toBeVisible();
+ await expect.element(screen.getByLabelText("40x")).toBeVisible();
});
test("displays confirm button with correct leverage", async () => {
@@ -182,7 +160,7 @@ describe("LeverageDialog", () => {
await userEvent.click(screen.getByText("Set Leverage"));
// Click the 20x button
- await userEvent.click(screen.getByTestId("leverage-button-20"));
+ await userEvent.click(screen.getByLabelText("20x"));
// Large display should update
await expect
@@ -192,22 +170,6 @@ describe("LeverageDialog", () => {
await expect.element(screen.getByText("Set 20x")).toBeVisible();
});
- test("clicking stop label updates leverage", async () => {
- const screen = await render(
-
- Set Leverage
- ,
- { wrapper: TestWrapper },
- );
-
- await userEvent.click(screen.getByText("Set Leverage"));
-
- // Click the 1x stop label (first stop)
- await userEvent.click(screen.getByTestId("leverage-stop-1"));
-
- await expect.element(screen.getByText("Set 1x")).toBeVisible();
- });
-
test("confirm button calls onLeverageChange with selected leverage", async () => {
const onLeverageChange = vi.fn();
const screen = await render(
@@ -222,7 +184,7 @@ describe("LeverageDialog", () => {
);
await userEvent.click(screen.getByText("Set Leverage"));
- await userEvent.click(screen.getByTestId("leverage-button-20"));
+ await userEvent.click(screen.getByLabelText("20x"));
await userEvent.click(screen.getByText("Set 20x"));
expect(onLeverageChange).toHaveBeenCalledWith(20);
@@ -276,10 +238,10 @@ describe("LeverageDialog", () => {
await userEvent.click(screen.getByText("Set Leverage"));
- // The 10x button should have the selected style (bg-white text-black)
- const selectedButton = screen.getByTestId("leverage-button-10");
- await expect.element(selectedButton).toHaveClass("bg-white");
- await expect.element(selectedButton).toHaveClass("text-black");
+ const selectedButton = screen.getByLabelText("10x");
+ await expect
+ .element(selectedButton)
+ .toHaveAttribute("aria-pressed", "true");
});
test("different max leverage generates correct buttons", async () => {
@@ -293,14 +255,10 @@ describe("LeverageDialog", () => {
await userEvent.click(screen.getByText("Set Leverage"));
// generateLeverageButtons(20) returns [2, 5, 10, 20]
- await expect.element(screen.getByTestId("leverage-button-2")).toBeVisible();
- await expect.element(screen.getByTestId("leverage-button-5")).toBeVisible();
- await expect
- .element(screen.getByTestId("leverage-button-10"))
- .toBeVisible();
- await expect
- .element(screen.getByTestId("leverage-button-20"))
- .toBeVisible();
+ await expect.element(screen.getByLabelText("2x")).toBeVisible();
+ await expect.element(screen.getByLabelText("5x")).toBeVisible();
+ await expect.element(screen.getByLabelText("10x")).toBeVisible();
+ await expect.element(screen.getByLabelText("20x")).toBeVisible();
});
test("low max leverage shows limited buttons", async () => {
@@ -314,8 +272,8 @@ describe("LeverageDialog", () => {
await userEvent.click(screen.getByText("Set Leverage"));
// generateLeverageButtons(5) returns [2, 5]
- await expect.element(screen.getByTestId("leverage-button-2")).toBeVisible();
- await expect.element(screen.getByTestId("leverage-button-5")).toBeVisible();
+ await expect.element(screen.getByLabelText("2x")).toBeVisible();
+ await expect.element(screen.getByLabelText("5x")).toBeVisible();
});
test("calculates correct liquidation price for long position", async () => {
@@ -379,7 +337,7 @@ describe("LeverageDialog", () => {
await expect.element(screen.getByText("45,000")).toBeVisible();
// Change to 20x leverage
- await userEvent.click(screen.getByTestId("leverage-button-20"));
+ await userEvent.click(screen.getByLabelText("20x"));
// New: 50000 * (1 - 1/20) = 50000 * 0.95 = 47500
await expect.element(screen.getByText("47,500")).toBeVisible();
@@ -401,9 +359,9 @@ describe("LeverageDialog", () => {
await userEvent.click(screen.getByText("Set Leverage"));
// Click multiple leverage buttons
- await userEvent.click(screen.getByTestId("leverage-button-5"));
- await userEvent.click(screen.getByTestId("leverage-button-20"));
- await userEvent.click(screen.getByTestId("leverage-button-2"));
+ await userEvent.click(screen.getByLabelText("5x"));
+ await userEvent.click(screen.getByLabelText("20x"));
+ await userEvent.click(screen.getByLabelText("2x"));
// Confirm
await userEvent.click(screen.getByText("Set 2x"));
@@ -477,15 +435,17 @@ describe("LeverageDialogContent", () => {
expect(onClose).toHaveBeenCalledTimes(1);
});
- test("leverage stop labels include min, mid, and max values", async () => {
+ test("renders leverage toggle options", async () => {
const screen = await render(
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+
+ await expect.element(screen.getByText("-10%")).toBeVisible();
+ await expect.element(screen.getByText("-25%")).toBeVisible();
+ await expect.element(screen.getByText("-50%")).toBeVisible();
+ await expect.element(screen.getByText("-100%")).toBeVisible();
+ await expect.element(screen.getByText("+10%")).toBeVisible();
+ await expect.element(screen.getByText("+25%")).toBeVisible();
+ await expect.element(screen.getByText("+50%")).toBeVisible();
+ await expect.element(screen.getByText("+100%")).toBeVisible();
+ });
+
test("selects take profit percentage option and calculates trigger price", async () => {
const onSettingsChange = vi.fn();
const screen = await render(
@@ -160,6 +180,34 @@ describe("TPOrSLDialog", () => {
);
});
+ test("selects short take profit percentage option and calculates trigger price", async () => {
+ const onSettingsChange = vi.fn();
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await userEvent.click(screen.getByText("-25%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onSettingsChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ takeProfit: {
+ option: 25,
+ triggerPrice: 75,
+ percentage: 25,
+ },
+ }),
+ );
+ });
+
test("selects stop loss percentage option and calculates trigger price", async () => {
const onSettingsChange = vi.fn();
const screen = await render(
@@ -184,6 +232,34 @@ describe("TPOrSLDialog", () => {
);
});
+ test("selects short stop loss percentage option and calculates trigger price", async () => {
+ const onSettingsChange = vi.fn();
+ const screen = await render(
+
+ Open Dialog
+ ,
+ { wrapper: TestWrapper },
+ );
+
+ await userEvent.click(screen.getByText("Open Dialog"));
+ await userEvent.click(screen.getByText("+25%"));
+ await userEvent.click(screen.getByText("Done"));
+
+ expect(onSettingsChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ stopLoss: {
+ option: 25,
+ triggerPrice: 125,
+ percentage: 25,
+ },
+ }),
+ );
+ });
+
test('selects "Off" option to clear configuration', async () => {
const onSettingsChange = vi.fn();
const settingsWithTakeProfit: TPOrSLSettings = {
@@ -362,6 +438,19 @@ describe("getTPOrSLConfigurationFromPosition", () => {
expect(result.option).toBe(25);
});
+ test("calculates short take profit configuration correctly", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 75,
+ tpOrSl: "takeProfit",
+ side: "short",
+ });
+
+ expect(result.triggerPrice).toBe(75);
+ expect(result.percentage).toBe(25);
+ expect(result.option).toBe(25);
+ });
+
test("calculates stop loss configuration correctly", () => {
const result = getTPOrSLConfigurationFromPosition({
entryPrice: 100,
@@ -374,6 +463,19 @@ describe("getTPOrSLConfigurationFromPosition", () => {
expect(result.option).toBe(25);
});
+ test("calculates short stop loss configuration correctly", () => {
+ const result = getTPOrSLConfigurationFromPosition({
+ entryPrice: 100,
+ amount: 125,
+ tpOrSl: "stopLoss",
+ side: "short",
+ });
+
+ expect(result.triggerPrice).toBe(125);
+ expect(result.percentage).toBe(25);
+ expect(result.option).toBe(25);
+ });
+
test("returns null option for non-matching percentage", () => {
const result = getTPOrSLConfigurationFromPosition({
entryPrice: 100,