angular-docs-cn/packages/animations/browser/test/dsl/animation_trigger_spec.ts

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {animate, state, style, transition, trigger} from '@angular/animations';
import {buildTrigger} from '../../src/dsl/animation_trigger';

function makeTrigger(name: string, steps: any) {
  const triggerData = trigger(name, steps);
  const triggerInstance = buildTrigger(triggerData.name, triggerData.definitions);
  return triggerInstance;
}

export function main() {
  describe('AnimationTrigger', () => {
    describe('trigger validation', () => {
      it('should group errors together for an animation trigger', () => {
        expect(() => {
          makeTrigger('myTrigger', [transition('12345', animate(3333))]);
        }).toThrowError(/Animation parsing for the myTrigger trigger have failed/);
      });

      it('should throw an error when a transition within a trigger contains an invalid expression',
         () => {
           expect(
               () => { makeTrigger('name', [transition('somethingThatIsWrong', animate(3333))]); })
               .toThrowError(
                   /- The provided transition expression "somethingThatIsWrong" is not supported/);
         });

      it('should throw an error if an animation alias is used that is not yet supported', () => {
        expect(() => {
          makeTrigger('name', [transition(':angular', animate(3333))]);
        }).toThrowError(/- The transition alias value ":angular" is not supported/);
      });
    });

    describe('trigger usage', () => {
      it('should construct a trigger based on the states and transition data', () => {
        const result = makeTrigger('name', [
          state('on', style({width: 0})), state('off', style({width: 100})),
          transition('on => off', animate(1000)), transition('off => on', animate(1000))
        ]);

        expect(result.states).toEqual({'on': {width: 0}, 'off': {width: 100}});

        expect(result.transitionFactories.length).toEqual(2);
      });

      it('should allow multiple state values to use the same styles', () => {
        const result = makeTrigger('name', [
          state('on, off', style({width: 50})), transition('on => off', animate(1000)),
          transition('off => on', animate(1000))
        ]);

        expect(result.states).toEqual({'on': {width: 50}, 'off': {width: 50}});
      });

      it('should find the first transition that matches', () => {
        const result = makeTrigger(
            'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);

        const trans = result.matchTransition('b', 'c');
        expect(trans.timelines.length).toEqual(1);
        const timeline = trans.timelines[0];
        expect(timeline.duration).toEqual(5678);
      });

      it('should find a transition with a `*` value', () => {
        const result = makeTrigger('name', [
          transition('* => b', animate(1234)), transition('b => *', animate(5678)),
          transition('* => *', animate(9999))
        ]);

        let trans = result.matchTransition('b', 'c');
        expect(trans.timelines[0].duration).toEqual(5678);

        trans = result.matchTransition('a', 'b');
        expect(trans.timelines[0].duration).toEqual(1234);

        trans = result.matchTransition('c', 'c');
        expect(trans.timelines[0].duration).toEqual(9999);
      });

      it('should null when no results are found', () => {
        const result = makeTrigger('name', [transition('a => b', animate(1111))]);

        const trans = result.matchTransition('b', 'a');
        expect(trans).toBeFalsy();
      });

      it('should allow a function to be used as a predicate for the transition', () => {
        let returnValue = false;

        const result = makeTrigger('name', [transition((from, to) => returnValue, animate(1111))]);

        expect(result.matchTransition('a', 'b')).toBeFalsy();
        expect(result.matchTransition('1', 2)).toBeFalsy();
        expect(result.matchTransition(false, true)).toBeFalsy();

        returnValue = true;

        expect(result.matchTransition('a', 'b')).toBeTruthy();
      });

      it('should call each transition predicate function until the first one that returns true',
         () => {
           let count = 0;

           function countAndReturn(value: boolean) {
             return (fromState: any, toState: any) => {
               count++;
               return value;
             };
           }

           const result = makeTrigger('name', [
             transition(countAndReturn(false), animate(1111)),
             transition(countAndReturn(false), animate(2222)),
             transition(countAndReturn(true), animate(3333)),
             transition(countAndReturn(true), animate(3333))
           ]);

           const trans = result.matchTransition('a', 'b');
           expect(trans.timelines[0].duration).toEqual(3333);

           expect(count).toEqual(3);
         });

      it('should support bi-directional transition expressions', () => {
        const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);

        const t1 = result.matchTransition('a', 'b');
        expect(t1.timelines[0].duration).toEqual(2222);

        const t2 = result.matchTransition('b', 'a');
        expect(t2.timelines[0].duration).toEqual(2222);
      });

      it('should support multiple transition statements in one string', () => {
        const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);

        const t1 = result.matchTransition('a', 'b');
        expect(t1.timelines[0].duration).toEqual(1234);

        const t2 = result.matchTransition('b', 'a');
        expect(t2.timelines[0].duration).toEqual(1234);

        const t3 = result.matchTransition('c', 'a');
        expect(t3.timelines[0].duration).toEqual(1234);
      });

      describe('aliases', () => {
        it('should alias the :enter transition as void => *', () => {
          const result = makeTrigger('name', [transition(':enter', animate(3333))]);

          const trans = result.matchTransition('void', 'something');
          expect(trans.timelines[0].duration).toEqual(3333);
        });

        it('should alias the :leave transition as * => void', () => {
          const result = makeTrigger('name', [transition(':leave', animate(3333))]);

          const trans = result.matchTransition('something', 'void');
          expect(trans.timelines[0].duration).toEqual(3333);
        });
      });
    });
  });
}