Skip to content

style(web): fix onboarding arrows #1160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tyler-dane merged 4 commits into from
Oct 24, 2025
Merged

style(web): fix onboarding arrows #1160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b16f329
test(web): update SomedaySandbox tests to use act for user events
tyler-dane Oct 24, 2025
97366d9
refactor(web): remove console log for preventing multiple submissions…
tyler-dane Oct 24, 2025
275eea7
refactor(web): enhance IconButton styling for better alignment and di…
tyler-dane Oct 24, 2025
5c41c3e
refactor(web): uncomment createAndSubmitEvents mockClear for clarity …
tyler-dane Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/web/src/views/Onboarding/components/IconButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ const IconButton = styled(OnboardingButton)<{ $shouldPulse?: boolean }>`
min-width: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
svg {
display: block;
}

${({ $shouldPulse }) =>
$shouldPulse &&
Expand Down
95 changes: 71 additions & 24 deletions packages/web/src/views/Onboarding/steps/events/SomedaySandbox/SomedaySandbox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { act } from "react";
import "@testing-library/jest-dom";
import { act, screen, waitFor } from "@testing-library/react";
import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { render } from "@web/__tests__/__mocks__/mock.render";
import { withProvider } from "../../../components/OnboardingContext";
Expand Down Expand Up @@ -46,20 +47,26 @@ describe("SomedaySandbox", () => {

it("should add a week task when Enter is pressed", async () => {
const { weekTaskInput } = setup();
await userEvent.type(weekTaskInput, "Test week task{enter}");
await act(async () => {
await userEvent.type(weekTaskInput, "Test week task{enter}");
});
expect(screen.getByText("Test week task")).toBeInTheDocument();
});

it("should add a month task when Enter is pressed", async () => {
const { monthTaskInput } = setup();
await userEvent.type(monthTaskInput, "Test month task{enter}");
await act(async () => {
await userEvent.type(monthTaskInput, "Test month task{enter}");
});
expect(screen.getByText("Test month task")).toBeInTheDocument();
});

it("should focus the month input after adding a week task with Enter", async () => {
const { weekTaskInput, monthTaskInput } = setup();
weekTaskInput.focus();
await userEvent.type(weekTaskInput, "Focus test{enter}");
await act(async () => {
await userEvent.type(weekTaskInput, "Focus test{enter}");
});
expect(document.activeElement).toBe(monthTaskInput);
});

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

it("should add week task on blur if input is not empty", async () => {
const { weekTaskInput } = setup();
await userEvent.type(weekTaskInput, "Blur week task");
await userEvent.tab(); // move focus away to trigger blur
await act(async () => {
await userEvent.type(weekTaskInput, "Blur week task");
});
await act(async () => {
await userEvent.tab(); // move focus away to trigger blur
});
expect(screen.getByText("Blur week task")).toBeInTheDocument();
});

it("should add month task on blur if input is not empty", async () => {
const { monthTaskInput } = setup();
await userEvent.type(monthTaskInput, "Blur month task");
await userEvent.tab(); // move focus away to trigger blur
await act(async () => {
await userEvent.type(monthTaskInput, "Blur month task");
});
await act(async () => {
await userEvent.tab(); // move focus away to trigger blur
});
expect(screen.getByText("Blur month task")).toBeInTheDocument();
});

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

// Add week task
await userEvent.type(weekInput, "Week task{enter}");
await act(async () => {
await userEvent.type(weekInput, "Week task{enter}");
});

// Add month task
await userEvent.type(monthInput, "Month task{enter}");
await act(async () => {
await userEvent.type(monthInput, "Month task{enter}");
});

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

// Click the next button to trigger handleNext (the right arrow button)
const nextButton = screen.getByLabelText("Next");
await userEvent.click(nextButton);
await act(async () => {
await userEvent.click(nextButton);
});

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

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

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

// Add week task
await userEvent.type(weekInput, "Week task{enter}");
await act(async () => {
await userEvent.type(weekInput, "Week task{enter}");
});

// Add month task
await userEvent.type(monthInput, "Month task{enter}");
await act(async () => {
await userEvent.type(monthInput, "Month task{enter}");
});

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

// Click the next button to trigger handleNext (the right arrow button)
const nextButton = screen.getByLabelText("Next");
await userEvent.click(nextButton);
await act(async () => {
await userEvent.click(nextButton);
});

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

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

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

await userEvent.type(weekInput, "Week task{enter}");
await userEvent.type(monthInput, "Month task{enter}");
await act(async () => {
await userEvent.type(weekInput, "Week task{enter}");
});
await act(async () => {
await userEvent.type(monthInput, "Month task{enter}");
});

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

await userEvent.type(weekInput, "Week task{enter}");
await userEvent.type(monthInput, "Month task{enter}");
await act(async () => {
await userEvent.type(weekInput, "Week task{enter}");
});
await act(async () => {
await userEvent.type(monthInput, "Month task{enter}");
});

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

await userEvent.type(weekInput, "Week task{enter}");
await userEvent.type(monthInput, "Month task{enter}");
await act(async () => {
await userEvent.type(weekInput, "Week task{enter}");
});
await act(async () => {
await userEvent.type(monthInput, "Month task{enter}");
});

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

// Click the next button to trigger handleNext (the right arrow button)
const nextButton = screen.getByLabelText("Next");
await userEvent.click(nextButton);
await act(async () => {
await userEvent.click(nextButton);
});

// The button should be disabled while submitting
expect(nextButton).toBeDisabled();
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/views/Onboarding/steps/events/SomedaySandbox/useSomedaySandbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ export const useSomedaySandbox = ({
const handleNext = useCallback(async () => {
// Prevent multiple submissions using ref for immediate check
if (isSubmittingRef.current) {
console.log("preventing multiple submissions");
return;
}

Expand Down