core.animations.tests.js

describe('Chart.animations', function() {
  it('should override property collection with property', function() {
    const chart = {};
    const anims = new Chart.Animations(chart, {
      collection1: {
        properties: ['property1', 'property2'],
        duration: 1000
      },
      property2: {
        duration: 2000
      }
    });
    expect(anims._properties.get('property1')).toEqual(jasmine.objectContaining({duration: 1000}));
    expect(anims._properties.get('property2')).toEqual(jasmine.objectContaining({duration: 2000}));
  });

  it('should ignore duplicate definitions from collections', function() {
    const chart = {};
    const anims = new Chart.Animations(chart, {
      collection1: {
        properties: ['property1'],
        duration: 1000
      },
      collection2: {
        properties: ['property1', 'property2'],
        duration: 2000
      }
    });
    expect(anims._properties.get('property1')).toEqual(jasmine.objectContaining({duration: 1000}));
    expect(anims._properties.get('property2')).toEqual(jasmine.objectContaining({duration: 2000}));
  });

  it('should not animate undefined options key', function() {
    const chart = {};
    const anims = new Chart.Animations(chart, {value: {duration: 100}, option: {duration: 200}});
    const target = {
      value: 1,
      options: {
        option: 2
      }
    };
    expect(anims.update(target, {
      options: undefined
    })).toBeUndefined();
  });

  it('should assing options directly, if target does not have previous options', function() {
    const chart = {};
    const anims = new Chart.Animations(chart, {option: {duration: 200}});
    const target = {};
    expect(anims.update(target, {options: {option: 1}})).toBeUndefined();
  });

  it('should clone the target options, if those are shared and new options are not', function() {
    const chart = {options: {}};
    const anims = new Chart.Animations(chart, {option: {duration: 200}});
    const options = {option: 0, $shared: true};
    const target = {options};
    expect(anims.update(target, {options: {option: 1}})).toBeTrue();
    expect(target.options.$shared).not.toBeTrue();
    expect(target.options !== options).toBeTrue();
  });

  it('should assign shared options to target after animations complete', function(done) {
    const chart = {
      draw: function() {},
      options: {}
    };
    const anims = new Chart.Animations(chart, {value: {duration: 100}, option: {duration: 200}});

    const target = {
      value: 1,
      options: {
        option: 2
      }
    };
    const sharedOpts = {option: 10, $shared: true};

    expect(anims.update(target, {
      options: sharedOpts
    })).toBeTrue();

    expect(target.options !== sharedOpts).toBeTrue();

    Chart.animator.start(chart);

    setTimeout(function() {
      expect(Chart.animator.running(chart)).toBeFalse();
      expect(target.options === sharedOpts).toBeTrue();

      Chart.animator.remove(chart);
      done();
    }, 300);
  });

  it('should not assign shared options to target when animations are cancelled', function(done) {
    const chart = {
      draw: function() {},
      options: {}
    };
    const anims = new Chart.Animations(chart, {value: {duration: 100}, option: {duration: 200}});

    const target = {
      value: 1,
      options: {
        option: 2
      }
    };
    const sharedOpts = {option: 10, $shared: true};

    expect(anims.update(target, {
      options: sharedOpts
    })).toBeTrue();

    expect(target.options !== sharedOpts).toBeTrue();

    Chart.animator.start(chart);

    setTimeout(function() {
      expect(Chart.animator.running(chart)).toBeTrue();
      Chart.animator.stop(chart);
      expect(Chart.animator.running(chart)).toBeFalse();

      setTimeout(function() {
        expect(target.options === sharedOpts).toBeFalse();

        Chart.animator.remove(chart);
        done();
      }, 250);
    }, 50);
  });

  it('should assign final shared options to target after animations complete', function(done) {
    const chart = {
      draw: function() {},
      options: {}
    };
    const anims = new Chart.Animations(chart, {value: {duration: 100}, option: {duration: 200}});

    const origOpts = {option: 2};
    const target = {
      value: 1,
      options: origOpts
    };
    const sharedOpts = {option: 10, $shared: true};
    const sharedOpts2 = {option: 20, $shared: true};

    expect(anims.update(target, {
      options: sharedOpts
    })).toBeTrue();

    expect(target.options !== sharedOpts).toBeTrue();

    Chart.animator.start(chart);

    setTimeout(function() {
      expect(Chart.animator.running(chart)).toBeTrue();

      expect(target.options === origOpts).toBeTrue();

      expect(anims.update(target, {
        options: sharedOpts2
      })).toBeUndefined();

      expect(target.options === origOpts).toBeTrue();

      setTimeout(function() {
        expect(target.options === sharedOpts2).toBeTrue();

        Chart.animator.remove(chart);
        done();
      }, 250);
    }, 50);
  });

  describe('default transitions', function() {
    describe('hide', function() {
      it('should keep dataset visible through the animation', function(done) {
        let count = 0;
        window.acquireChart({
          type: 'line',
          data: {
            labels: [0],
            datasets: [
              {data: [1]},
            ]
          },
          options: {
            animation: {
              duration: 0,
              onProgress: (args) => {
                if (!args.chart.isDatasetVisible(0) && args.currentStep / args.numSteps < 0.9) {
                  // while animating, visible should be truthly
                  // sometimes its not, thats why we check only up to 90% of the animation
                  expect(args.chart.getDatasetMeta(0).visible).toBeTruthy();
                  count++;
                }
              },
              onComplete: (args) => {
                if (args.chart.isDatasetVisible(0)) {
                  args.chart.hide(0);
                } else {
                  // and when finished, it should be false
                  expect(args.chart.getDatasetMeta(0).visible).toBeFalsy();
                  expect(count).toBeGreaterThan(0);
                  done();
                }
              }
            },
            transitions: {
              hide: {
                animation: {
                  duration: 100
                }
              }
            }
          }
        });
      });
    });
  });
});