File size: 3,992 Bytes
900a32d
 
 
 
d0b1ea0
900a32d
e4daa3b
900a32d
 
e4daa3b
 
900a32d
d0b1ea0
900a32d
e4daa3b
900a32d
e4daa3b
900a32d
 
e4daa3b
900a32d
 
e4daa3b
900a32d
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
 
e4daa3b
900a32d
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
e4daa3b
900a32d
 
 
 
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
e4daa3b
 
900a32d
 
e4daa3b
900a32d
e4daa3b
900a32d
 
e4daa3b
900a32d
e4daa3b
 
 
 
900a32d
 
e4daa3b
 
900a32d
 
 
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
e4daa3b
 
900a32d
 
 
e4daa3b
900a32d
e4daa3b
900a32d
 
e4daa3b
 
900a32d
 
e4daa3b
900a32d
 
 
d0b1ea0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
900a32d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { server } from "../../mocks/server";
import { errorHandlers, resetCasesAttempts } from "../../mocks/handlers";
import { CaseSelector } from "../CaseSelector";

describe("CaseSelector", () => {
  const mockOnSelectCase = vi.fn();

  beforeEach(() => {
    mockOnSelectCase.mockClear();
    resetCasesAttempts();
  });

  it("shows loading state initially", () => {
    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  it("renders select after loading", async () => {
    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toBeInTheDocument();
    });
  });

  it("displays all cases as options", async () => {
    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toBeInTheDocument();
    });

    expect(
      screen.getByRole("option", { name: /sub-stroke0001/i }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("option", { name: /sub-stroke0002/i }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("option", { name: /sub-stroke0003/i }),
    ).toBeInTheDocument();
  });

  it("has placeholder option", async () => {
    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toBeInTheDocument();
    });

    expect(
      screen.getByRole("option", { name: /choose a case/i }),
    ).toBeInTheDocument();
  });

  it("calls onSelectCase when case selected", async () => {
    const user = userEvent.setup();

    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toBeInTheDocument();
    });

    await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");

    expect(mockOnSelectCase).toHaveBeenCalledWith("sub-stroke0001");
  });

  it("shows selected case value", async () => {
    render(
      <CaseSelector
        selectedCase="sub-stroke0002"
        onSelectCase={mockOnSelectCase}
      />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toHaveValue("sub-stroke0002");
    });
  });

  it("shows error state on API failure", async () => {
    server.use(errorHandlers.casesServerError);

    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByText(/failed to load/i)).toBeInTheDocument();
    });
  });

  it("applies correct styling", async () => {
    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    await waitFor(() => {
      expect(screen.getByRole("combobox")).toBeInTheDocument();
    });

    const container = screen.getByRole("combobox").closest("div");
    expect(container).toHaveClass("bg-gray-800");
  });

  it("retries on 503 cold-start and succeeds", async () => {
    server.use(errorHandlers.casesColdStart);

    render(
      <CaseSelector selectedCase={null} onSelectCase={mockOnSelectCase} />,
    );

    // Should show waking up message during retry
    await waitFor(
      () => {
        expect(screen.getByText(/waking up/i)).toBeInTheDocument();
      },
      { timeout: 3000 },
    );

    // Should eventually succeed and show cases
    await waitFor(
      () => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      },
      { timeout: 5000 },
    );

    expect(
      screen.getByRole("option", { name: /sub-stroke0001/i }),
    ).toBeInTheDocument();
  });
});