# 10. TestBed and Fixtures

The TestBed is the first and largest of the Angular testing utilities. It creates an Angular testing module — a @NgModule class — that you configure with the configureTestingModule method to produce the module environment for the class you want to test.

* Remove the newed up AppComponent and replace it with a TestBed module

{% code title="src/app/app.component.spec.ts" %}

```typescript
import { of } from 'rxjs';
import { AppComponent } from './app.component';
import { TestBed, ComponentFixture } from '@angular/core/testing';

import { AppService } from './app.service';
import { Name } from './app.models';

describe(`Component: App Component`, () => {
  let appService: AppService;
  let fixture: ComponentFixture<AppComponent>
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      providers: [
        {
          provide: AppService,
          useValue: { getNames: () => (of([])) }
        }
      ]
    });
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    appService = TestBed.get(AppService);
  });

  it('add 1+1 - PASS', () => {
    expect(1 + 1).toEqual(2);
  });

  it(`title equals 'testing'`, () => {
    expect(component.title).toEqual('testing');
  });

  it(`Expect service to return a single name`, () => {
    component.ngOnInit();
    component.names$.subscribe((names: Name[]) => {
      expect(names).toEqual([]);
    });
  });

  it(`Expect service to return a single name`, () => {
    const fakeNames = [{ name: 'FAKE_NAME' }];
    spyOn(appService, 'getNames').and.returnValue(of(fakeNames));
    component.ngOnInit();

    component.names$.subscribe((names: Name[]) => {
      expect(names).toEqual(fakeNames);
    });
  });
});

```

{% endcode %}

Now we have a test that runs against a completely mocked up AppComponent bundled with its dependencies. The fixture creates the component just like it the browser would in real life. Using DebugElement, you can even query the DOM for further tests.

* Update the component DOM to add an ID
* Create a new test to query the DOM

{% code title="src/app/app.component.html" %}

```markup
<ul>
  <li *ngFor="let item of names$ | async">{{item.name}}</li>
</ul>
```

{% endcode %}

{% code title="src/app/app.component.spec.ts" %}

```typescript
  ...
  it(`HTML should have FAKE_NAME in li`, () => {
    const fakeNames = [{ name: 'FAKE_NAME' }];
    spyOn(appService, 'getNames').and.returnValue(of(fakeNames));
    component.ngOnInit();
    fixture.detectChanges();
    const el = fixture.debugElement.query(By.css('li')).nativeElement;
    expect(el.textContent).toEqual('FAKE_NAME');
  });
  ...
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://duncanhunter.gitbook.io/testing-angular/testbed-and-fixtures.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.