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

describe('save button', () => {

    it('is enabled when the form is in a valid state', async(() => {

      expect(component.addMonsterForm.valid).toBeFalsy();

      const button = fixture.nativeElement.querySelector('#addMonsterButton');
      expect(button.disabled).toBeTruthy();

      // fill out form correctly
      enterValidInputs();

      // trigger changes
      fixture.detectChanges();

      fixture.whenStable().then(() => {

        expect(component.addMonsterForm.valid).toBeTruthy();

        // expect 'save' button to be enabled
        const button = fixture.nativeElement.querySelector('#addMonsterButton');
        expect(button.disabled).toBeFalsy();
      });

    }));
  });