Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.

Level 4 of 6 · Chapter 089 of 145

Testing with TestBed

Let’s learn this together, starting with what the words mean. We’ll read a little, change actual code or a design, and see the result. You can also narrate the lesson on YouTube.

Beginner-friendly wordingVisible output20 answered questionsVertical code layout

1. Understand the idea
2. Read and edit the code
3. See the output
4. Practice and explain

Chapter opening: what we are doing

Imagine you want to build a small piece of a real website. Today the useful skill is Testing with TestBed. You do not need to memorize the entire language before trying it. Start with a working example, watch the result, and then make one small change that you can explain.

Keep the source (the instructions you write) separate from the output (what the browser actually displays). When a feature depends on a real framework application or a design tool, use the original project instructions to run the actual technology. This page also includes an isolated visual demonstration for learning and recording.

Technical words, explained simply

component (a class and template that describe part of a page)

template (the markup Angular renders)

signal (a reactive value Angular tracks)

service (shared logic that components can use)

dependency injection (giving a class the dependencies it needs)

See the code and its output

First read a short piece. Then use Run / Refresh Output. The display below is a real browser frame, not a sentence describing the result.

Step 1 · Angular TypeScript source

Editable lesson source · each line stacked vertically

// app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  it('renders the counter', async () => {
    await TestBed.configureTestingModule({imports:[AppComponent]}).compileComponents();
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Count');
  });
});

Step 2 · Interactive browser prototype

Interactive browser prototype below; Angular component above is NOT compiled in this static page. Run it in an Angular project for actual Angular output.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>
body{font:15px/1.55 system-ui;margin:0;padding:18px;color:#20324c;background:#fff}main{max-width:520px;margin:auto}h2{font-size:18px;line-height:1.3}button{margin:5px 5px 5px 0;background:#176bd8;color:#fff;border:0;border-radius:7px;padding:9px 14px;cursor:pointer}input,select{padding:8px;border:1px solid #a6bdd3;border-radius:6px;max-width:100%}.panel{border:1px solid #dce5f0;border-radius:12px;background:#f3f7fc;padding:14px}li{padding:3px}output{display:block;font-weight:bold;margin-top:9px}
</style></head><body><main><h2>Testing with TestBed</h2><div class="panel"><p>Practice value: <strong id="count">0</strong></p><button id="add">Increase</button><button id="reset">Reset</button><output id="double">Double: 0</output></div><script>
let count=0;function render(){document.querySelector('#count').textContent=count;document.querySelector('#double').textContent='Double: '+count*2}document.querySelector('#add').onclick=()=>{count++;render()};document.querySelector('#reset').onclick=()=>{count=0;render()};
</script></main></body></html>

Learn it like a book: practical subchapters

Read the ideas in order, then return to the example above. Use your own words: a new learner should understand what each line changes and why the output is different.

089.01 · What you are building: Testing with TestBed

Build a small, observable interface that teaches testing with testbed . Begin with the source code as written; do not change multiple values at once.

Try it yourself: Find the part of the sample related to what you are building: testing with testbed. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

089.02 · Identify the inputs and state

Inspect the example for the source of data. Find the hard-coded initial values, the user-facing input, and any state that changes after an action. A test needs an observable assertion: input, action, and expected output. Verify both a successful case and an edge case without depending on incidental implementation details.

Try it yourself: Find the part of the sample related to identify the inputs and state. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

089.03 · Read the code from top to bottom

Find the imports or declarations, then the state and derived values, then the event handlers, and finally the returned markup or printed output. The order helps you locate where behavior originates.

Try it yourself: Find the part of the sample related to read the code from top to bottom. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

089.04 · Run the code and inspect the output

Choose Run browser demo , interact with its controls, and compare the result to the source. Make one test fail intentionally; read its failure, then repair the assertion.

Try it yourself: Find the part of the sample related to run the code and inspect the output. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

089.05 · Introduce and fix a bug

Change one input name, event handler, or value intentionally. Observe the wrong behavior or error; restore the correct code and run it again. The goal is to learn how to diagnose failures.

Try it yourself: Find the part of the sample related to introduce and fix a bug. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

089.06 · Apply this skill in a small feature

Use this chapter topic in a realistic interface—such as a course browser, order form, dashboard, or admin tool—and make sure the visible output confirms each action.

Try it yourself: Find the part of the sample related to apply this skill in a small feature. Change one label, value, or setting that makes sense for this topic. Run the code again, compare the visible result, and explain the difference as though you were helping a friend start from zero.

Ready-to-narrate YouTube lesson

Scene 1 · Welcome: “Today we’ll work through Testing with TestBed. We’re going to start simply, so you can follow even if this is new.”

Scene 2 · Explain: Introduce a technical word from the glossary, and explain what it means with one familiar comparison.

Scene 3 · Show the source: Point out the relevant code line, the file it belongs in, and what you predict it will do.

Scene 4 · Show the result: Run the example, keep the output visible, and describe precisely what changed on the page.

Scene 5 · Improve it: Change one value or style, rerun, then show a common error and how to correct it.

Scene 6 · Finish: Give the viewer a one-minute challenge and direct them to the answered questions.

Use the YouTube Recording View button in the toolbar for a simplified reading screen. This is a narration outline, not a recorded audio/video file.

Practice: make it yours

Run the starting example and confirm the output.
Explain Testing with TestBed in simple language without reading the page word for word.
Change one meaningful input, style, label, event, or component detail.
Show the before and after output; do not substitute a description for the result.
Make a tiny usable feature using the same idea. Check on a narrow phone screen and using a keyboard.
Write down one mistake, the error message you saw, and the fix that worked.

Final challenge: Teach this chapter to someone who has never used Angular. Start with what the code is for, then demonstrate the code and output in order.

20 practice questions and answered explanations

Say the answer aloud first, then open the explanation. Every answer is included so you can check your understanding independently.

Q01. In your own words, what should you know about what you are building: testing with testbed?

Answer: Build a small, observable interface that teaches testing with testbed . Begin with the source code as written; do not change multiple values at once.

Q02. In your own words, what should you know about identify the inputs and state?

Answer: Inspect the example for the source of data. Find the hard-coded initial values, the user-facing input, and any state that changes after an action. A test needs an observable assertion: input, action, and expected output. Verify both a successful case and an edge case without depending on incidental implementation details.

Q03. In your own words, what should you know about read the code from top to bottom?

Answer: Find the imports or declarations, then the state and derived values, then the event handlers, and finally the returned markup or printed output. The order helps you locate where behavior originates.

Q04. In your own words, what should you know about run the code and inspect the output?

Answer: Choose Run browser demo , interact with its controls, and compare the result to the source. Make one test fail intentionally; read its failure, then repair the assertion.

Q05. In your own words, what should you know about introduce and fix a bug?

Answer: Change one input name, event handler, or value intentionally. Observe the wrong behavior or error; restore the correct code and run it again. The goal is to learn how to diagnose failures.

Q06. In your own words, what should you know about apply this skill in a small feature?

Answer: Use this chapter topic in a realistic interface—such as a course browser, order form, dashboard, or admin tool—and make sure the visible output confirms each action.

Q07. What is the goal of “Testing with TestBed”?

Answer: Use the chapter example to understand testing with testbed and prove the result with visible browser output.

Q08. Which course introduces this skill?

Answer: Angular. This is chapter 89 of 145, in level 4.

Q09. What should I do before changing the example?

Answer: Run the original example first. Notice its visible result and any console messages so you have a baseline for comparison.

Q10. Where is the example source?

Answer: Look in the editable source panel, copy it, and place it in the appropriate project file. The exact file depends on the lesson; for common starter exercises it may be the chapter source file.

Q11. What proves the example really worked?

Answer: The Output panel must show a rendered result or actual console text. Text describing an expected result is not proof by itself.

Q12. Why should I change one thing at a time?

Answer: One edit at a time lets you connect the code change with the output difference. If you change many things, finding the cause becomes much harder.

Q13. How should I investigate an error in this chapter?

Answer: Read the first useful error in the browser console or build tool; check spelling, file paths, imports, tags, braces and brackets before guessing.

Q14. How can I explain “Testing with TestBed” in a video?

Answer: Show the working starting point, point at the exact relevant line, change it, rerun, and describe what the viewer can see. Avoid reading all code aloud.

Q15. What is the smallest practice project for this chapter?

Answer: Rebuild the demonstration without copying every line. Keep the original open only for checking specific syntax or debugging.

Q16. What needs checking on a narrow phone screen?

Answer: Check that there is no page-wide sideways scroll, text wraps, controls remain reachable, and the preview works at a small width.

Q17. How can I test keyboard accessibility?

Answer: Use Tab, Shift+Tab, Enter and Space to reach and activate interactive elements. Keep focus visible and labels meaningful.

Q18. When is a framework development server necessary?

Answer: When the original sample depends on compilation, bundling, modules, JSX, templates, framework runtime or server features. The isolated browser preview is not that runtime.

Q19. What should I save after finishing?

Answer: Keep the source files, the observed result, one error you corrected, and a brief note about the skill you demonstrated.

Q20. What does successful independent practice look like?

Answer: You can explain the purpose, write a basic working version, show the output, and fix a small mistake without being led through every step.