Exercise: Diagnose Realistic Broken Components
By the end of this lesson, you'll be able to:
- Apply this module's tools and methodology to realistic broken code
- Diagnose a wire that never re-fires due to a missing reactive parameter
- Diagnose a component that fails to deploy due to missing test coverage
Prerequisites: "Systematic Troubleshooting Methodology"
Scenario 1: A Wire That Never Re-Fires
@wire(getRecord, { recordId: recordId, fields: [NAME_FIELD] })
account;The component never updates when recordId changes. Applying Lesson 4's method: reproduce (confirm changing recordId truly does nothing) → isolate (this is a wire/reactivity issue, not a rendering one) → read precisely (no error appears at all — the wire just never re-fires) → hypothesize (Module 6's $ prefix gotcha — recordId should be '$recordId') → test minimally (fix just the prefix) → verify (the wire now re-fires correctly on change).
The bug: recordId should be '$recordId' — without the $ prefix, it's treated as a one-time, non-reactive value (Module 6).
Scenario 2: A Deployment That Fails
A new AccountSearchController Apex class is added, but deployment fails with a coverage error. Applying the method: reproduce (the deployment fails consistently) → isolate (this is a deployment/coverage issue, not a runtime bug — Lesson 3) → read precisely (the error names the specific class lacking coverage) → hypothesize (Module 14's Apex test class was never written for this new controller) → test minimally (add the missing @isTest class) → verify (redeploy and confirm it passes).
The bug: the Apex controller genuinely has no accompanying test class — Module 14's own lesson on why Apex needs its own separate tests, now showing up as a real deployment blocker.
Scenario 3: An Event Listener That Misses Its Event
row.click();
element.addEventListener('select', handler);A Jest test (Module 14) asserting a select event was dispatched fails, even though the component's code looks correct. Applying the method: reproduce (the test consistently fails) → isolate (a Jest/test-code issue, not a component bug) → read precisely (the mock handler was never called) → hypothesize (Module 14's listener-timing lesson — the listener was attached after the click, missing the already-fired event) → test minimally (reorder the two lines) → verify (the test now passes).
The bug: the listener is attached after row.click() already fired the event — reversing the order (listener first, then the triggering interaction) fixes it.
Exercise
A component wires Apex data with @wire(search, { searchTerm: searchTerm }) and it never updates as the user types. Diagnose and fix the bug, explaining your reasoning as a comment.
Show hint
This matches Scenario 1's bug class.
Exercise
Challenge: a Jest test for a modal component fails with "Cannot read property 'close' of undefined." Using this module's method, describe as a comment the specific next step to take (not the final answer — just the next diagnostic step).
Show hint
Recall the method's step ordering — read precisely before hypothesizing.
Exercise: Diagnose Realistic Broken Components Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A hands-on capstone applying this module's tools and method to three realistic, broken scenarios drawn from mistakes covered across the whole course.