TypeScript ComponentTester.bootstrap方法代码示例

 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);
 });

  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('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);
  });

function configure(component: ComponentTester, defaultRoute: RouteConfig, extraRouteConfig: Partial<RouteConfig>) {
  component.bootstrap((aurelia: Aurelia) => {
    aurelia.use.standardConfiguration();

    const routeConfigs: RouteConfig[] = [defaultRoute];
    if (extraRouteConfig) {
      extraRouteConfig.activationStrategy = 'replace';
      extraRouteConfig.route = 'route';
      routeConfigs.push(extraRouteConfig as RouteConfig);
    }

    aurelia.container.viewModel = {
      configureRouter: (config: RouterConfiguration, router: Router) => {
        config.map(routeConfigs);
      }
    };

    return aurelia.use;
  });
}

function configure(component: ComponentTester) {
  component.bootstrap((aurelia: Aurelia) => {
    aurelia.use
      .defaultBindingLanguage()
      .defaultResources()
      .history();

    aurelia.use
      .singleton(RouteLoader, TemplatingRouteLoader)
      .singleton(Router, AppRouter);

    aurelia.use.container.viewModel = {
      configureRouter: (config: RouterConfiguration, router: Router) => {
        config.map([
          { route: 'a', name: 'a' },
          { route: 'b', name: 'b' }
        ]);
      }
    };
    return aurelia.use;
  });
}

  it('basic scenarios', (done: () => void) => {
    const component: ComponentTester = StageComponent
      .withResources()
      .inView('<registration-form></registration-form>')
      .boundTo({});
    component.bootstrap(configure);

    let firstName: HTMLInputElement;
    let lastName: HTMLInputElement;
    let number1: HTMLInputElement;
    let number2: HTMLInputElement;
    let password: HTMLInputElement;
    let confirmPassword: HTMLInputElement;

    let viewModel: RegistrationForm;

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

    component.create(bootstrap as any)
      // grab some references.
      .then(() => {
        viewModel = component.viewModel;
        viewModel.controller.addRenderer(renderer);
        firstName = component.element.querySelector('#firstName') as HTMLInputElement;
        lastName = component.element.querySelector('#lastName') as HTMLInputElement;
        number1 = component.element.querySelector('#number1') as HTMLInputElement;
        number2 = component.element.querySelector('#number2') as HTMLInputElement;
        password = component.element.querySelector('#password') as HTMLInputElement;
        confirmPassword = component.element.querySelector('#confirmPassword') as HTMLInputElement;
      })
      // initially there should not be any errors
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      // blur the firstName field- this should trigger validation.
      .then(() => blur(firstName))
      // confirm there's an error.
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      // make a model change to the firstName field.
      // this should reset the errors for the firstName field.
      .then(() => viewModel.firstName = 'test')
      // confirm the errors were reset.
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      // blur the lastName field- this should trigger validation.
      .then(() => blur(lastName))
      // confirm there's an error.
      .then(() => {
        expect(viewModel.controller.errors.length).toBe(1);
        const calls = renderer.render.calls;
        const renderInstruction = calls.argsFor(calls.count() - 1)[0];
        expect(renderInstruction.render[0].elements[0]).toBe(lastName);
      })
      // blur the number1 field- this should trigger validation.
      .then(() => blur(number1))
      // confirm there's an error.
      .then(() => {
        expect(viewModel.controller.errors.length).toBe(2);
        const calls = renderer.render.calls;
        const renderInstruction = calls.argsFor(calls.count() - 1)[0];
        expect(renderInstruction.render[0].elements[0]).toBe(number1);
      })
      // blur the number2 field- this should trigger validation.
      .then(() => blur(number2))
      // confirm there's an error.
      .then(() => {
        expect(viewModel.controller.errors.length).toBe(3);
        const calls = renderer.render.calls;
        const renderInstruction = calls.argsFor(calls.count() - 1)[0];
        expect(renderInstruction.render[0].elements[0]).toBe(number2);
      })
      // make a model change to the number1 field.
      // this should reset the errors for the number1 field.
      .then(() => viewModel.number1 = 1)
      // confirm the error was reset.
      .then(() => expect(viewModel.controller.errors.length).toBe(2))
      // make a model change to the number2 field.
      // this should reset the errors for the number2 field.
      .then(() => viewModel.number2 = 2)
      // confirm the error was reset.
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      // change the numbers back to invalid values.
      .then(() => {
        viewModel.number1 = 0;
        viewModel.number2 = 0;
      })

      // hide the form and change the validateTrigger.
      .then(() => {
        viewModel.showForm = false;
        viewModel.controller.validateTrigger = validateTrigger.change;
      })
      // show the form
      .then(() => viewModel.showForm = true)
      // confirm hiding and showing the form reset the errors.
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      // change the firstName field- this should trigger validation.
      .then(() => change(firstName, 'test'))
      // confirm there's no error.
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      // change the firstName field- this should trigger validation.
      .then(() => change(firstName, ''))
      // confirm there's an error.
//.........这里部分代码省略.........

  it('sets validateTrigger', (done: () => void) => {
    const component: ComponentTester = StageComponent
      .withResources()
      .inView('<trigger-form></trigger-form>')
      .boundTo({});
    component.bootstrap(configure);

    let viewModel: TriggerForm;

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

    component.create(bootstrap as any)
      // grab some references.
      .then(() => {
        viewModel = component.viewModel;
        viewModel.controller.addRenderer(renderer);
      })
      // standard validate binding behavior
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => blur(viewModel.standardInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.standardInput, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => blur(viewModel.standardInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

      // validateOnBlur binding behavior
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => blur(viewModel.blurInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.blurInput, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => blur(viewModel.blurInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

      // validateOnChange binding behavior
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => blur(viewModel.changeInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => change(viewModel.changeInput, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => change(viewModel.changeInput, ''))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.changeInput, 'test2'))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

      // validateOnChangeOrBlur binding behavior
      .then(() => change(viewModel.changeInput, '')) // make one error
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => blur(viewModel.changeOrBlurInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(2))
      .then(() => change(viewModel.changeOrBlurInput, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.changeOrBlurInput, ''))
      .then(() => expect(viewModel.controller.errors.length).toBe(2))
      .then(() => change(viewModel.changeOrBlurInput, 'test2'))
      .then(() => expect(viewModel.controller.errors.length).toBe(1))
      .then(() => change(viewModel.changeInput, 'adsf')) // clear the one error
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

      // validateManually binding behavior
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => blur(viewModel.manualInput))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => change(viewModel.manualInput, 'test'))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))
      .then(() => change(viewModel.manualInput, ''))
      .then(() => expect(viewModel.controller.errors.length).toBe(0))

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