Skip to content

test(Tasks): Add comprehensive test suite for Tasks component #434

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

Open
ShivaGupta-14 wants to merge 1 commit into
base: main
Choose a base branch
from
+182 −7
Open

test(Tasks): Add comprehensive test suite for Tasks component #434

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
189 changes: 182 additions & 7 deletions frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,20 @@ jest.mock('../tasks-utils', () => {
});

jest.mock('@/components/ui/multi-select', () => ({
MultiSelectFilter: jest.fn(({ title, completionStats }) => (
<div data-testid={`multi-select-${title.toLowerCase()}`}>
Copy link
Collaborator

@its-me-abhishek its-me-abhishek Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hardcoded ids are better, for the time being

Copy link
Contributor Author

@ShivaGupta-14 ShivaGupta-14 Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@its-me-abhishek, I see this comment is on the pre-existing
data-testid line L48 left, not my new changes.

also, both id={id} and data-testid={title.toLowerCase()}
result in hardcoded values ("projects", "status", "tags")-
they're derived the same way

<MultiSelectFilter
  id="projects"
  title="Projects"
  options={uniqueProjects}
  selectedValues={selectedProjects}
  onSelectionChange={setSelectedProjects}
  className="hidden lg:flex min-w-[140px]"
  icon={<Key label="p" />}
  completionStats={projectStats}
/>

Could you clarify what change you'd like me to make?

MultiSelectFilter: jest.fn(({ id, title, completionStats }) => (
<button
id={id}
data-testid={`multi-select-${title.toLowerCase()}`}
aria-expanded="false"
onClick={(e) => e.currentTarget.setAttribute('aria-expanded', 'true')}
>
Mocked MultiSelect: {title}
{completionStats && (
<span data-testid={`stats-${title.toLowerCase()}`}>
{JSON.stringify(completionStats)}
</span>
)}
</div>
</button>
)),
}));

Expand Down Expand Up @@ -863,10 +868,6 @@ describe('Tasks Component', () => {
const MultiSelectFilter =
require('@/components/ui/multi-select').MultiSelectFilter;

MultiSelectFilter.mockImplementation(({ title }: { title: string }) => {
return <div data-testid={`ms-${title}`}>Mocked MultiSelect: {title}</div>;
});

render(<Tasks {...mockProps} />);

await waitFor(async () => {
Expand Down Expand Up @@ -1737,4 +1738,178 @@ describe('Tasks Component', () => {
expect(task1Row).toBeInTheDocument();
});
});

describe('Keyboard Navigation', () => {
describe('Arrow Key Navigation', () => {
test('ArrowDown key moves selection to next task', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'ArrowDown' });
fireEvent.keyDown(window, { key: 'Enter' });

const dialog = await screen.findByRole('dialog');
expect(within(dialog).getByText('Deleted Task 1')).toBeInTheDocument();
});

test('ArrowUp moves selection back to previous task', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'ArrowDown' });
fireEvent.keyDown(window, { key: 'ArrowDown' });
fireEvent.keyDown(window, { key: 'ArrowUp' });
fireEvent.keyDown(window, { key: 'Enter' });

const dialog = await screen.findByRole('dialog');
expect(within(dialog).getByText('Deleted Task 1')).toBeInTheDocument();
});

test('ArrowDown stops at last task on page', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

for (let i = 0; i < 20; i++) {
Copy link
Collaborator

@its-me-abhishek its-me-abhishek Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't really understand why'd one assume 20 as a magic number? is there some logic related to this?

Copy link
Collaborator

@its-me-abhishek its-me-abhishek Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

were the mocked number of tasks set to 20?

Copy link
Contributor Author

@ShivaGupta-14 ShivaGupta-14 Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing this out! i am thinking of using a dynamic row count now, is this good?

const taskRows = screen.getAllByTestId(/task-row-/);
// navigate past the last task to verify boundary
for (let i = 0; i < taskRows.length + 2; i++) {
  fireEvent.keyDown(window, { key: 'ArrowDown' });
}
const lastTask = taskRows[taskRows.length - 1];
const lastTaskId = lastTask.getAttribute('data-testid')?.replace('task-row-', '');
expect(within(dialog).getByText(`Task ${lastTaskId}`)).toBeInTheDocument();

this adapts any tasksPerPage value and verifies navigation actually stops at the boundary

fireEvent.keyDown(window, { key: 'ArrowDown' });
}

fireEvent.keyDown(window, { key: 'Enter' });

const dialog = await screen.findByRole('dialog');
expect(within(dialog).getByText('Task 9')).toBeInTheDocument();
});

test('ArrowUp stops at index zero task', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

for (let i = 0; i < 5; i++) {
fireEvent.keyDown(window, { key: 'ArrowUp' });
}

fireEvent.keyDown(window, { key: 'Enter' });

const dialog = await screen.findByRole('dialog');
expect(within(dialog).getByText('tag1')).toBeInTheDocument();
expect(within(dialog).getByText('Overdue')).toBeInTheDocument();
});
});

describe('Hotkey Shortcuts', () => {
test('pressing "a" opens the Add Task dialog', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'a' });

expect(
await screen.findByText(
/fill in the details below to add a new task/i
)
).toBeInTheDocument();
});

test.each([
['c', 'complete'],
['d', 'delete'],
])(
'pressing %s attempts to open task dialog and trigger %s action',
async (key, _action) => {
jest.useFakeTimers();

render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key });

expect(await screen.findByText('Tags:')).toBeInTheDocument();

act(() => {
jest.advanceTimersByTime(200);
});

expect(await screen.findByText('Are you')).toBeInTheDocument();
Copy link
Collaborator

@its-me-abhishek its-me-abhishek Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is very flaky and vague

Copy link
Collaborator

@its-me-abhishek its-me-abhishek Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs to be fixed, probably use regex or something similar

Copy link
Contributor Author

@ShivaGupta-14 ShivaGupta-14 Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thinking of using role-based query, the original 'Are you' was
used since the text is split across elements

<span>Are you</span>sure?

but after reviewing, checking for the Yes button is more good:

expect(await screen.findByRole('button', { name: /^yes$/i })).toBeInTheDocument();

this verifies the confirmation dialog appeared. does this work? or do you have another suggestion? also, should i add action verification by checking backend call?


jest.useRealTimers();
}
);

test('pressing "Enter" key opens the selected task dialog', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'Enter' });

expect(await screen.findByText('Description:')).toBeInTheDocument();
});

test('pressing "f" focuses the search input', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'f' });

const searchInput = screen.getByPlaceholderText('Search tasks...');
expect(document.activeElement).toBe(searchInput);
});

test('pressing "r" triggers sync', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.keyDown(window, { key: 'r' });

expect(mockProps.setIsLoading).toHaveBeenCalledWith(true);
});

test.each([
['p', 'projects'],
['s', 'status'],
['t', 'tags'],
])('pressing "%s" opens the %s filter', async (key, filterName) => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

const filterButton = screen.getByTestId(`multi-select-${filterName}`);
expect(filterButton).toHaveAttribute('aria-expanded', 'false');

fireEvent.keyDown(window, { key });

expect(filterButton).toHaveAttribute('aria-expanded', 'true');
});

test('hotkeys are disabled when input is focused', async () => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

const searchInput = screen.getByPlaceholderText('Search tasks...');
searchInput.focus();

fireEvent.keyDown(searchInput, { key: 'r' });

expect(mockProps.setIsLoading).not.toHaveBeenCalledWith(true);
});
});

describe('Complete Hotkey When Dialog Open', () => {
test.each([
['c', 'complete'],
['d', 'delete'],
])(
'pressing "%s" when dialog is already open triggers %s confirmation',
async (key, _action) => {
render(<Tasks {...mockProps} />);
await screen.findByText('Task 1');

fireEvent.click(screen.getByText('Task 1'));

expect(await screen.findByRole('dialog')).toBeInTheDocument();

fireEvent.keyDown(window, { key });

expect(await screen.findByText('Are you')).toBeInTheDocument();
}
);
});
});
});
Loading