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

TypeScript - 测试

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

这需要两处更改。首先在控制文件的顶部，您需要添加

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

第二个TestUtils实际上并没有从DOM中激活事件。这意味着虽然您的代码可以在浏览器中运行，但您无法使用TestUtils来编写这些测试。

相反，您必须以幻像实际将组件装载到文档中才能正确触发事件。

ReactJS onAnimationEnd在测试期间不执行

1 个答案: