TypeScript aurelia-binding.createScopeForTest函数代码示例

  it('bind', () => {
    let bindingBehaviors = {
      oneTime: new OneTimeBindingBehavior(),
      oneWay: new OneWayBindingBehavior(),
      twoWay: new TwoWayBindingBehavior()
    };
    let lookupFunctions = { bindingBehaviors: name => bindingBehaviors[name] };
    let scope = createScopeForTest({ foo: 'bar' });
    let target = document.createElement('input');

    // one time
    let bindingExpression = bindingEngine.createBindingExpression('value', 'foo & oneTime', bindingMode.twoWay, lookupFunctions);
    let binding = bindingExpression.createBinding(target);
    binding.bind(scope);
    expect(binding.mode).toBe(bindingMode.oneTime);
    binding.unbind();

    // one way
    bindingExpression = bindingEngine.createBindingExpression('value', 'foo & oneWay', bindingMode.twoWay, lookupFunctions);
    binding = bindingExpression.createBinding(target);
    binding.bind(scope);
    expect(binding.mode).toBe(bindingMode.toView);
    binding.unbind();

    // two way
    bindingExpression = bindingEngine.createBindingExpression('value', 'foo & twoWay', bindingMode.oneTime, lookupFunctions);
    binding = bindingExpression.createBinding(target);
    binding.bind(scope);
    expect(binding.mode).toBe(bindingMode.twoWay);
    binding.unbind();
  });

    function exerciseBehavior(callback) {
      let sourceCalls = 0;
      let source = {
        handleClick: e => {
          // console.info('source called');
          sourceCalls++;
        }
      };
      let scope = createScopeForTest(source);

      // overrides updateSource
      binding.bind(scope);
      expect(binding.callSource === originalCallSource).not.toBe(true);

      for (let i = 0, ii = 50; i < ii; i++) {
        button.dispatchEvent(DOM.createCustomEvent('click', { bubbles: true }));
      }

      // How to ensure this happen after all events without timeout?
      let testDuration = 500;
      function endTest() {
        binding.unbind();
        expect(sourceCalls).toEqual(0);
        expect(binding.callSource === originalCallSource).toBe(true);
        callback();
      }
      setTimeout(endTest, testDuration);
    }

  it('should apply update trigger events', () => {
    let source = { foo: 'bar' };
    let scope = createScopeForTest(source);
    let target = document.createElement('input');
    let bindingExpression = bindingEngine.createBindingExpression('value', `foo & updateTrigger:'blur':'paste'`, bindingMode.twoWay, lookupFunctions);
    let binding = bindingExpression.createBinding(target);

    binding.bind(scope);
    let targetHandler = binding.targetObserver.handler;

    target.value = 'baz';
    target.dispatchEvent(DOM.createCustomEvent('change'));
    expect(source.foo).toBe('bar');
    target.dispatchEvent(DOM.createCustomEvent('blur'));
    expect(source.foo).toBe('baz');

    target.value = 'bang';
    target.dispatchEvent(DOM.createCustomEvent('change'));
    expect(source.foo).toBe('baz');
    target.dispatchEvent(DOM.createCustomEvent('paste'));
    expect(source.foo).toBe('bang');


    binding.unbind();

    target.value = 'target';
    target.dispatchEvent(DOM.createCustomEvent('blur'));
    expect(source.foo).toBe('bang');
    target.dispatchEvent(DOM.createCustomEvent('paste'));
    expect(source.foo).toBe('bang');

    // also makes sure we disposed the listeners
    expect(targetHandler.element).toBe(null);
  });

 it('should not throw in one-time binding', () => {
   let source = {};
   let scope = createScopeForTest(source);
   let target = document.createElement('input');
   let bindingExpression = bindingEngine.createBindingExpression('value', `'foo' & signal:'test'`, bindingMode.oneTime, lookupFunctions);
   let binding = bindingExpression.createBinding(target);
   expect(() => binding.bind(scope)).not.toThrow();
 });

    function exerciseBehavior(callback) {
      let source = {};
      let scope = createScopeForTest(source);
      let _foo = '0';
      let last = null;
      let sourceUpdates = 0;
      Object.defineProperty(source, 'foo', {
        get: () => _foo,
        set: newValue => {
          // console.info(`SET FOO:  newValue=${newValue}; oldValue=${_foo}`);
          _foo = newValue;
          if (last !== null) {
            sourceUpdates++;
            let elapsed = new Date().getTime() - last;
            expect(elapsed).toBeGreaterThan(delay - 30);
            expect(elapsed).toBeLessThan(delay + 30);
            expect(target.value).toBe(newValue);
          }
          last = new Date();
        }
      });

      // overrides updateSource
      binding.bind(scope);
      expect(binding.updateSource === originalMethod).not.toBe(true);

      // subscribes
      let observer = bindingEngine.observerLocator.getObserver(source, 'foo');
      expect(observer.hasSubscribers()).toBe(true);
      let targetObserver = bindingEngine.observerLocator.getObserver(target, 'value');
      expect(targetObserver.hasSubscribers()).toBe(true);
      expect(targetObserver instanceof ValueAttributeObserver).toBe(true);

      // throttles
      let updateSourceInterval = setInterval(() => {
        let newValue = (parseInt(target.value, 10) + 1).toString();
        // console.info(`NOTIFYING:  newValue=${newValue}; oldValue=${target.value}`);
        target.value = newValue;
        target.dispatchEvent(DOM.createCustomEvent('change'));
      }, 20);

      let testDuration = 500;
      function endTest() {
        clearInterval(updateSourceInterval);
        binding.unbind();
        expect(sourceUpdates).toBeGreaterThan(Math.floor(testDuration / delay) - 1);
        expect(sourceUpdates).toBeLessThan(Math.floor(testDuration / delay) + 1);
        expect(binding.updateSource === originalMethod).toBe(true);
        expect(observer.hasSubscribers()).toBe(false);
        expect(targetObserver.hasSubscribers()).toBe(false);
        callback();
      }
      setTimeout(endTest, testDuration);
    }

  it('should throttle target updates', done => {
    let source = { foo: 0 };
    let scope = createScopeForTest(source);
    let target = document.createElement('input');
    let delay = 150;
    let bindingExpression = bindingEngine.createBindingExpression('value', `foo & throttle:${delay}`, bindingMode.toView, lookupFunctions);
    let binding = bindingExpression.createBinding(target);
    let originalMethod = binding.updateTarget;

    function exerciseBehavior(callback) {
      // overrides updateTarget
      binding.bind(scope);
      expect(binding.updateTarget === originalMethod).not.toBe(true);

      // subscribes
      let observer = bindingEngine.observerLocator.getObserver(source, 'foo');
      expect(observer.hasSubscribers()).toBe(true);

      // throttles
      let lastTargetUpdate = new Date().getTime();
      let lastTargetValue = target.value;
      let targetUpdates = 0;
      let updateSourceInterval = setInterval(() => {
        source.foo++;
        if (target.value !== lastTargetValue) {
          // the target was updated... was it throttled?
          let elapsed = new Date().getTime() - lastTargetUpdate;
          expect(elapsed).toBeGreaterThan(delay - 30);
          expect(elapsed).toBeLessThan(delay + 30);
          // increment
          lastTargetUpdate = new Date().getTime();
          lastTargetValue = target.value;
          targetUpdates++;
        }
      }, 20);

      let testDuration = 500;
      function endTest() {
        clearInterval(updateSourceInterval);
        binding.unbind();
        expect(targetUpdates).toBeGreaterThan(Math.floor(testDuration / delay) - 1);
        expect(targetUpdates).toBeLessThan(Math.floor(testDuration / delay) + 1);
        expect(binding.updateTarget === originalMethod).toBe(true);
        expect(observer.hasSubscribers()).toBe(false);
        callback();
      }
      setTimeout(endTest, testDuration);
    }
    exerciseBehavior(() => exerciseBehavior(done));
  });

 it('should bind attribute value', done => {
   const source = { foo: 'bar' };
   const scope = createScopeForTest(source);
   const target = document.createElement('div') as HTMLDivElement & { foo: any };
   const bindingExpression = bindingEngine.createBindingExpression('foo', `foo & attr`, bindingMode.toView, lookupFunctions);
   const binding = bindingExpression.createBinding(target);
   binding.bind(scope);
   expect(target.getAttribute('foo')).toBe('bar');
   expect(target.foo).toBe(undefined);
   source.foo = 'baz';
   setTimeout(() => {
     expect(target.getAttribute('foo')).toBe('baz');
     expect(target.foo).toBe(undefined);
     done();
   });
 });

  it('should debounce target updates', () => {
    let source = { foo: -1 };
    let scope = createScopeForTest(source);
    let target = DOM.createElement('input') as HTMLInputElement;
    let delay = 150;
    let bindingExpression = bindingEngine.createBindingExpression(
      'value',
      `foo & debounce:${delay}`,
      bindingMode.toView,
      lookupFunctions
    );
    let binding = bindingExpression.createBinding(target);
    let originalCallMethod = binding.call;

    // overrides call
    binding.bind(scope);
    expect(binding.call === originalCallMethod).not.toBe(true);

    // subscribes
    let observer = bindingEngine.observerLocator.getObserver(source, 'foo');
    expect(observer.hasSubscribers()).toBe(true);

    let lastValue = target.value;
    let exerciseTimes = 10;
    while (exerciseTimes--) {
      let tick = Math.floor(Math.random() * delay + delay / 3);
      // Greater than only will fail in case the tick is close to delay. ex: delay: 150, tick: 149, 150
      let shouldUpdate = tick >= delay;
      source.foo++;

      // updating in toView mode is controlled by taskqueue
      // constantly flush the queue to avoid waiting for the real queue to be flushed.
      bindingEngine.observerLocator.taskQueue.flushMicroTaskQueue();
      // console.log({ tick, shouldUpdate, val: target.value, foo: source.foo });

      // pull the trigger
      jasmine.clock().tick(tick);

      expect(target.value).toBe(shouldUpdate ? source.foo.toString() : lastValue);
      lastValue = target.value;
    }

    binding.unbind();
    expect(binding.call === originalCallMethod).toBe(true);
    expect(observer.hasSubscribers()).toBe(false);
  });