# 6. Test AddAttendeeComponent

## 1. Fix broken tests for the EventComponent

Here we are using the TestBed API from Angular which helps configure and initialise our environment for unit testing and provides methods for creating components and services in unit tests. It is very similar to an `@ngModule` but has some extra logic to be able to run a test with just this logic and not all the app.

[NO\_ERRORS\_SCHEMA](https://angular.io/api/core/NO_ERRORS_SCHEMA) will stop your tests from failing due to unknown elements on your HTML templates. You will find you add it to many tests as you do not want to test custom elements or other child elements on your components.

* Add `NO_ERRORS_SCHEMA` to the broken  `EventComponent` test. 

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

```typescript
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EventComponent } from './event.component';
import { NO_ERRORS_SCHEMA } from '@angular/compiler/src/core';

describe('EventComponent', () => {
  let component: EventComponent;
  let fixture: ComponentFixture<EventComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EventComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EventComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

```

{% endcode %}

## 2. Add ReactiveFormsModule to AddAttendeeComponent spec file

We need to make sure all dependencies our tests need are added available including the ReactiveForms module.

* Add ReactiveFormsModule to your spec file.

{% code title="src/app/event/components/add-attendee/add-attendee.component.spec.ts" %}

```typescript
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';

import { AddAttendeeComponent } from './add-attendee.component';

describe('AddAttendeeComponent', () => {
  let component: AddAttendeeComponent;
  let fixture: ComponentFixture<AddAttendeeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule ],
      declarations: [ AddAttendeeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AddAttendeeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

```

{% endcode %}

## 3. Add test to check our form validation is working

* Add a tests for when form is loaded to check it is invalid by default.

{% code title="src/app/event/components/add-attendee/add-attendee.component.spec.ts" %}

```typescript
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';

import { AddAttendeeComponent } from './add-attendee.component';
import { Attendee } from '../../../models';

describe('AddAttendeeComponent', () => {
  let component: AddAttendeeComponent;
  let fixture: ComponentFixture<AddAttendeeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [AddAttendeeComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AddAttendeeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have an invalid form on load', () => {
    expect(component.addAttendeeForm.invalid).toEqual(false);
  });
});

```

{% endcode %}

* Add another test to check the form is valid when the name field is set.

{% code title="src/app/event/components/add-attendee/add-attendee.component.spec.ts" %}

```typescript
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';

import { AddAttendeeComponent } from './add-attendee.component';
import { Attendee } from '../../../models';

describe('AddAttendeeComponent', () => {
  let component: AddAttendeeComponent;
  let fixture: ComponentFixture<AddAttendeeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [AddAttendeeComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AddAttendeeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have an invalid form on load', () => {
    expect(component.addAttendeeForm.valid).toEqual(false);
  });
  
  it('should have a valid form', () => {
    component.addAttendeeForm.controls.name.setValue('Duncan');
    expect(component.addAttendeeForm.valid).toEqual(true);
  });
});

```

{% endcode %}

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/6-test-add-attendee-component>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}