ReactJS onAnimationEndはテスト中に実行されません

Question

アニメーションの開始と終了を知りたいコントロールがあります。私は以下のようなものをコーディングしてしまったが、私のテスト（Mocha + Phantom + Karma）では、onAnimationEndイベントは起動しないようだ。

開始はクリックで発生するので簡単ですが、最後は現在の問題です。私は以下の例を追加しました。誰が問題が何であるかを知ることができたら、私は知りたい！

P.S. - コードをスニペットに入れないと申し訳ありませんが、テストケースを処理したスニペットジェネレータはわかりませんでした。

CSS

@keyframes exampleAnimation { 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

.testObject { 
    &.animate { 
     animation-name: exampleAnimation; 
     animation-duration: 1s; 
     animation-timing-function: ease-out; 
    } 
} 

活字体

import React = require("react"); 

export interface ITestControlProps { 
    /** 
    * Called when the element is clicked 
    */ 
    onClick?:() => void; 

    /** 
    * Called when the animation is complete 
    */ 
    onAnimationComplete?:() => void; 
} 
export interface ITestControlState { 
    /** 
    * if the element has been clicked 
    */ 
    isClicked: boolean; 
} 

export class TestControl extends React.Component<ITestControlProps, ITestControlState> { 

    constructor() { 
    super(); 
    this.state = { 
     isClicked: false 
    }; 
    } 

    public render(): JSX.Element { 
     let buttonClassName = "testObject "; 

     if (this.state.isClicked) { 
      buttonClassName += " animate"; 
     } 

     return (
      <button 
       className = {buttonClassName} 
       onClick = {this.onClick.bind(this)} 
       onAnimationEnd = {this.onAnimationComplete.bind(this)} 
       > 
       Click me! 
      </button> 
     ); 
    } 

    /** 
    * When the button is clicked 
    * @param evt: The event that caused this method to be called. Can be a click or a button press. 
    */ 
    private onClick(evt: UIEvent) { 
     this.setState((prevState: ITestControlState) => { 
      prevState.isClicked = !prevState.isClicked; 
      return prevState; 
     }); 

     if (this.props.onClick != null) { 
      this.props.onClick(); 
     } 

     console.log("On click fired"); 
    } 

    /** 
    * When the pulse animation is complete 
    */ 
    private onAnimationComplete(): void { 
     if (this.props.onAnimationComplete != null) { 
      this.props.onAnimationComplete(); 
     } 
     console.log("onAnimationComplete fired"); 
    } 
} 

活字体 - テスト

import chai = require("chai"); 
import React = require("react"); 

// Control 
import {TestControl} from "planner/controls/PresentationalControls"; 

const expect = chai.expect; 
const TestUtils = React["addons"].TestUtils; 

describe("TestControl Control Unit Test",() => { 

    let renderedComponent: TestControl; 

    describe("TestControl default render",() => { 

     it ("Animation Complete Success", (done: MochaDone) => { 
      let animationCompleteFunc =() => { 
       done(); 
      }; 

      renderedComponent = TestUtils.renderIntoDocument(
       <TestControl 
        onAnimationComplete = {animationCompleteFunc}> 
       </TestControl> 
      ); 

      expect(renderedComponent).to.not.be.undefined; 

      var button = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "button")[0]; 

      TestUtils.Simulate.click(button); 
     }); 
    }); 
}); 

Answer 1

これは、2つの変更を必要とします。最初にコントロールファイルの先頭に追加する必要があります。

///<amd-dependency path="./PulseButton.css" /> 

2番目のTestUtilsは実際にDOMからイベントを起動しません。つまり、コードはブラウザで動作しますが、TestUtilsを使用してこれらのテストを記述することはできません。

実際にイベントを正しく発するには、コンポーネントを実際にドキュメントにマウントしなければなりません。