Machine Coding Round: Edge Cases to Handle

Machine Coding Round: Edge Cases to Handle

Handling edge cases shows attention to detail and scores higher. Here are the edge cases to always check.

General Edge Cases

1. Empty input: what happens when the user has not typed anything?
2. No results: what happens when there are no matches?
3. Very long input: does the UI handle long strings gracefully?
4. Special characters: does it handle , !, @, #, $ correctly?
5. Rapid input: does it handle fast typing (debounce)?
6. Empty state: what does the user see when there is nothing?
7. Loading state: what does the user see while waiting?
8. Error state: what does the user see when something fails?

Component-Specific Edge Cases

Autocomplete Search Bar

• Empty input (show all or show nothing?).
• No results (show "no results found").
• Case sensitivity (should "Apple" match "apple"?).
• Very long query.
• Special characters.
• Rapid typing (debounce).
• Keyboard navigation (arrow up/down, enter, escape).
• Click outside to close.

Pagination

• Only one page (hide pagination?).
• Current page is the first or last.
• Very many pages (show ellipsis).
• Empty data.
• Page size changes.

OTP Input

• Pasting a full OTP.
• Backspace to go to the previous input.
• Only numeric input.
• Auto-focus to the next input.
• Submit when all inputs are filled.

Food Ordering App

• Empty cart.
• Quantity 0 (should not be possible).
• Search with no results.
• Filters with no results.
• Total price calculation with decimals.

Modal/Dialog

• Click outside to close.
• Escape key to close.
• Focus trap (tab should stay inside the modal).
• Scroll lock on the body.

How to Handle Edge Cases

1. List them before coding: write down edge cases during the planning phase.
2. Handle them after core: build the core first, then add edge case handling.
3. Test them: manually test each edge case.
4. Show appropriate UI: empty state, loading state, error state.

Empty State Pattern

if (results.length === 0) {
  renderEmptyState("No results found");
  return;
}
renderResults(results);

The Takeaway

Always handle edge cases: empty input, no results, long input, special characters, rapid input, empty/loading/error states. List them before coding, handle them after the core, and test each one. Edge case handling shows attention to detail and scores higher.