Skip to content

Commit ee80f50

Browse files
tyler-danetyler-dane
authored
style(web): fix onboarding arrows (#1160)
* test(web): update SomedaySandbox tests to use act for user events * refactor(web): remove console log for preventing multiple submissions in useSomedaySandbox * refactor(web): enhance IconButton styling for better alignment and display * refactor(web): uncomment createAndSubmitEvents mockClear for clarity in SomedaySandbox tests
1 parent e43ec66 commit ee80f50

File tree

3 files changed

+77
-25
lines changed

3 files changed

+77
-25
lines changed

‎packages/web/src/views/Onboarding/components/IconButtons.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,13 @@ const IconButton = styled(OnboardingButton)<{ $shouldPulse?: boolean }>`
2323
min-width: 0;
2424
width: 24px;
2525
height: 24px;
26+
display: inline-flex;
27+
align-items: center;
28+
justify-content: center;
2629
transition: all 0.2s ease-in-out;
30+
svg {
31+
display: block;
32+
}
2733
2834
${({ $shouldPulse }) =>
2935
$shouldPulse &&

‎packages/web/src/views/Onboarding/steps/events/SomedaySandbox/SomedaySandbox.test.tsx‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { act } from "react";
12
import "@testing-library/jest-dom";
2-
import { act, screen, waitFor } from "@testing-library/react";
3+
import { screen, waitFor } from "@testing-library/react";
34
import userEvent from "@testing-library/user-event";
45
import { render } from "@web/__tests__/__mocks__/mock.render";
56
import { withProvider } from "../../../components/OnboardingContext";
@@ -46,20 +47,26 @@ describe("SomedaySandbox", () => {
4647

4748
it("should add a week task when Enter is pressed", async () => {
4849
const { weekTaskInput } = setup();
49-
await userEvent.type(weekTaskInput, "Test week task{enter}");
50+
await act(async () => {
51+
await userEvent.type(weekTaskInput, "Test week task{enter}");
52+
});
5053
expect(screen.getByText("Test week task")).toBeInTheDocument();
5154
});
5255

5356
it("should add a month task when Enter is pressed", async () => {
5457
const { monthTaskInput } = setup();
55-
await userEvent.type(monthTaskInput, "Test month task{enter}");
58+
await act(async () => {
59+
await userEvent.type(monthTaskInput, "Test month task{enter}");
60+
});
5661
expect(screen.getByText("Test month task")).toBeInTheDocument();
5762
});
5863

5964
it("should focus the month input after adding a week task with Enter", async () => {
6065
const { weekTaskInput, monthTaskInput } = setup();
6166
weekTaskInput.focus();
62-
await userEvent.type(weekTaskInput, "Focus test{enter}");
67+
await act(async () => {
68+
await userEvent.type(weekTaskInput, "Focus test{enter}");
69+
});
6370
expect(document.activeElement).toBe(monthTaskInput);
6471
});
6572

@@ -76,15 +83,23 @@ describe("SomedaySandbox", () => {
7683

7784
it("should add week task on blur if input is not empty", async () => {
7885
const { weekTaskInput } = setup();
79-
await userEvent.type(weekTaskInput, "Blur week task");
80-
await userEvent.tab(); // move focus away to trigger blur
86+
await act(async () => {
87+
await userEvent.type(weekTaskInput, "Blur week task");
88+
});
89+
await act(async () => {
90+
await userEvent.tab(); // move focus away to trigger blur
91+
});
8192
expect(screen.getByText("Blur week task")).toBeInTheDocument();
8293
});
8394

8495
it("should add month task on blur if input is not empty", async () => {
8596
const { monthTaskInput } = setup();
86-
await userEvent.type(monthTaskInput, "Blur month task");
87-
await userEvent.tab(); // move focus away to trigger blur
97+
await act(async () => {
98+
await userEvent.type(monthTaskInput, "Blur month task");
99+
});
100+
await act(async () => {
101+
await userEvent.tab(); // move focus away to trigger blur
102+
});
88103
expect(screen.getByText("Blur month task")).toBeInTheDocument();
89104
});
90105

@@ -138,10 +153,14 @@ describe("SomedaySandbox", () => {
138153
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
139154

140155
// Add week task
141-
await userEvent.type(weekInput, "Week task{enter}");
156+
await act(async () => {
157+
await userEvent.type(weekInput, "Week task{enter}");
158+
});
142159

143160
// Add month task
144-
await userEvent.type(monthInput, "Month task{enter}");
161+
await act(async () => {
162+
await userEvent.type(monthInput, "Month task{enter}");
163+
});
145164

146165
// Wait for checkboxes to be checked
147166
await waitFor(() => {
@@ -151,7 +170,9 @@ describe("SomedaySandbox", () => {
151170

152171
// Click the next button to trigger handleNext (the right arrow button)
153172
const nextButton = screen.getByLabelText("Next");
154-
await userEvent.click(nextButton);
173+
await act(async () => {
174+
await userEvent.click(nextButton);
175+
});
155176

156177
// createAndSubmitEvents should be called first
157178
await waitFor(() => {
@@ -178,7 +199,9 @@ describe("SomedaySandbox", () => {
178199
// Focus on the week input and press Enter
179200
const weekInput = screen.getAllByPlaceholderText("Create new task...")[0];
180201
weekInput.focus();
181-
await userEvent.type(weekInput, "Test task{enter}");
202+
await act(async () => {
203+
await userEvent.type(weekInput, "Test task{enter}");
204+
});
182205

183206
// Should not call createAndSubmitEvents or onNext because Enter was pressed while focused on input
184207
expect(createAndSubmitEvents).not.toHaveBeenCalled();
@@ -202,7 +225,9 @@ describe("SomedaySandbox", () => {
202225
// Focus on the month input and press Enter
203226
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
204227
monthInput.focus();
205-
await userEvent.type(monthInput, "Test month task{enter}");
228+
await act(async () => {
229+
await userEvent.type(monthInput, "Test month task{enter}");
230+
});
206231

207232
// Should not call createAndSubmitEvents or onNext because Enter was pressed while focused on input
208233
expect(createAndSubmitEvents).not.toHaveBeenCalled();
@@ -224,10 +249,14 @@ describe("SomedaySandbox", () => {
224249
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
225250

226251
// Add week task
227-
await userEvent.type(weekInput, "Week task{enter}");
252+
await act(async () => {
253+
await userEvent.type(weekInput, "Week task{enter}");
254+
});
228255

229256
// Add month task
230-
await userEvent.type(monthInput, "Month task{enter}");
257+
await act(async () => {
258+
await userEvent.type(monthInput, "Month task{enter}");
259+
});
231260

232261
// Wait for checkboxes to be checked
233262
await waitFor(() => {
@@ -241,7 +270,9 @@ describe("SomedaySandbox", () => {
241270

242271
// Click the next button to trigger handleNext (the right arrow button)
243272
const nextButton = screen.getByLabelText("Next");
244-
await userEvent.click(nextButton);
273+
await act(async () => {
274+
await userEvent.click(nextButton);
275+
});
245276

246277
// createAndSubmitEvents should be called first
247278
await waitFor(() => {
@@ -288,7 +319,9 @@ describe("SomedaySandbox", () => {
288319

289320
// Type in an input but don't submit (unsaved changes)
290321
const weekInput = screen.getAllByPlaceholderText("Create new task...")[0];
291-
await userEvent.type(weekInput, "Unsaved task");
322+
await act(async () => {
323+
await userEvent.type(weekInput, "Unsaved task");
324+
});
292325

293326
// The button should be disabled due to unsaved changes
294327
const nextButton = screen.getByLabelText("Next");
@@ -310,8 +343,12 @@ describe("SomedaySandbox", () => {
310343
const weekInput = screen.getAllByPlaceholderText("Create new task...")[0];
311344
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
312345

313-
await userEvent.type(weekInput, "Week task{enter}");
314-
await userEvent.type(monthInput, "Month task{enter}");
346+
await act(async () => {
347+
await userEvent.type(weekInput, "Week task{enter}");
348+
});
349+
await act(async () => {
350+
await userEvent.type(monthInput, "Month task{enter}");
351+
});
315352

316353
// Wait for checkboxes to be checked
317354
await waitFor(() => {
@@ -352,8 +389,12 @@ describe("SomedaySandbox", () => {
352389
const weekInput = screen.getAllByPlaceholderText("Create new task...")[0];
353390
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
354391

355-
await userEvent.type(weekInput, "Week task{enter}");
356-
await userEvent.type(monthInput, "Month task{enter}");
392+
await act(async () => {
393+
await userEvent.type(weekInput, "Week task{enter}");
394+
});
395+
await act(async () => {
396+
await userEvent.type(monthInput, "Month task{enter}");
397+
});
357398

358399
// Wait for checkboxes to be checked
359400
await waitFor(() => {
@@ -439,8 +480,12 @@ describe("SomedaySandbox", () => {
439480
const weekInput = screen.getAllByPlaceholderText("Create new task...")[0];
440481
const monthInput = screen.getAllByPlaceholderText("Create new task...")[1];
441482

442-
await userEvent.type(weekInput, "Week task{enter}");
443-
await userEvent.type(monthInput, "Month task{enter}");
483+
await act(async () => {
484+
await userEvent.type(weekInput, "Week task{enter}");
485+
});
486+
await act(async () => {
487+
await userEvent.type(monthInput, "Month task{enter}");
488+
});
444489

445490
// Wait for checkboxes to be checked
446491
await waitFor(() => {
@@ -455,7 +500,9 @@ describe("SomedaySandbox", () => {
455500

456501
// Click the next button to trigger handleNext (the right arrow button)
457502
const nextButton = screen.getByLabelText("Next");
458-
await userEvent.click(nextButton);
503+
await act(async () => {
504+
await userEvent.click(nextButton);
505+
});
459506

460507
// The button should be disabled while submitting
461508
expect(nextButton).toBeDisabled();

‎packages/web/src/views/Onboarding/steps/events/SomedaySandbox/useSomedaySandbox.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@ export const useSomedaySandbox = ({
115115
const handleNext = useCallback(async () => {
116116
// Prevent multiple submissions using ref for immediate check
117117
if (isSubmittingRef.current) {
118-
console.log("preventing multiple submissions");
119118
return;
120119
}
121120

0 commit comments

Comments
 (0)