beforeEach(() => {
   model = { a: true, b: true, clicked() { } };
   component = new ComponentTester();
   component.bootstrap(aurelia => {
     aurelia.use.standardConfiguration();
     taskQueue = aurelia.container.get(TaskQueue);
   });
   component
     .withResources('test/if-test')
     .inView(`<div ift.bind="a" id="a">
               <div ift.bind="b" id="b" click.delegate="clicked()">
               </div>
             </div>`)
     .boundTo(model);
 });

  it('handles bindings with null objects', (done: () => void) => {
    const component: ComponentTester = StageComponent
      .withResources()
      .inView('<nullable-object-form></nullable-object-form>')
      .boundTo({});
    component.bootstrap(configure);

    let viewModel: NullableObjectForm;

    const renderer = { render: jasmine.createSpy() };

    component.create(bootstrap as any)
      // grab some references.
      .then(() => {
        viewModel = component.viewModel;
        viewModel.controller.addRenderer(renderer);
      })
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => blur(viewModel.input))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.input, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => blur(viewModel.input))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => viewModel._obj = null)
      .then(() => blur(viewModel.input))
      .then(() => expect(viewModel.obj).toBe(null))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => viewModel._obj = { prop: '' })
      .then(() => blur(viewModel.input))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => {
        viewModel._obj = null;
        // wait for dirty-checking...
        return new Promise(resolve => setTimeout(resolve, 500));
      })
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

      // cleanup and finish.
      .then(() => component.dispose())
      .then(done);
  });

  const stageTest = (validationErrors: string, supplyControllerToViewModel?: boolean) => {
    const form: string = `
      <template>
        <form novalidate autocomplete='off' ${validationErrors}>
          <input ref='standardInput' type='text' value.bind='standardProp & validateOnBlur'>
        </form>
      </template>`;

    parentViewModel.form = form;

    component = StageComponent
      .withResources()
      // tslint:disable-next-line:max-line-length
      .inView(`<compose containerless view-model="./dist/test/test/resources/validation-errors-form-one" model.bind="{ form: form, controller: controller }"></compose>`)
      // tslint:enable-next-line:max-line-length
      .boundTo(parentViewModel);

    const myConfigure = (aurelia: Aurelia) => {
      const config = configure(aurelia);
      container = aurelia.container;
      return config;
    };

    component.bootstrap(myConfigure);

    /*
      at this point validation plugin has not yet been initialized, not until in component.create()
    */
    if (supplyControllerToViewModel) {
      /*
        the viewmodel is going to call this in created().
        at that point the validation plugin will have been initialized and bind() will
        not yet have been executed.
      */
      parentViewModel.controller = () => {
        const factory = container.get(ValidationControllerFactory);
        const controller = factory.createForCurrentScope();
        parentViewModel.theController = controller;
        return controller;
      };
    }

    return component.create(bootstrap as any)
      .then(() => {
        // we get here after the viewmodel's bind().
        viewModel = component.viewModel.currentViewModel;
      });
  };

    it('loads layouts for a named viewport', done => {
      component = withNamedViewport({
        viewPorts: {
          viewport1: {
            moduleId: 'test/routes/route-2',
            layoutViewModel: 'test/routes/layout-1'
          }
        }
      });

      component.create(bootstrap)
        .then(() => {
          expect(component.element.querySelectorAll('.route-1').length).toBe(1);
          expect(component.element.querySelectorAll('.route-2').length).toBe(0);
          expect(component.element.querySelectorAll('.layout-1').length).toBe(0);
          return component.viewModel.router.navigate('route');
        })
        .then(wait)
        .then(() => {
          expect(component.element.querySelectorAll('.route-1').length).toBe(0);
          expect(component.element.querySelectorAll('.route-2:not(.view-only)').length).toBe(1);
          expect(component.element.querySelectorAll('.layout-1:not(.view-only)').length).toBe(1);
          done();
        })
        .catch(done.fail);
    });

 it(`throws when binding "route" to invalid route name: "${routeName}"`, async () => {
   component = createComponent(`<a route-href.bind="name"></a><router-view></router-view>`, undefined, { name: routeName });
   const errors: Set<any> = new Set();
   const spy = spyOn(Logger.prototype, 'error').and.callFake((err: any) => errors.add(err));
   await component.create(bootstrap);
   expect(spy.calls.count()).toBeGreaterThan(0);
   expect(Array.from(errors).some(err => ('' + err).includes(`A route with name '${routeName}' could not be found.`)));
 });

 afterEach(() => {
   if (component) {
     const appRouter = component.viewModel.router as AppRouter;
     appRouter.reset();
     appRouter.deactivate();
     component.dispose();
     component = undefined;
   }
   location.hash = '';
   removeDebugLogging();
 });

  it('should use route as primary property', done => {
    component = StageComponent
      .withResources(PLATFORM.moduleName('src/route-href'))
      .inView('<a route-href.bind="name"></a>')
      .boundTo({ name: 'b' });

    configure(component);

    component.create(bootstrap)
      .then(() => {
        expect(component.viewModel.route).toBe('b');
        done();
      });
  });