0
我有一个控制,我想知道它的动画开始和结束。我最终编写了类似于下面的代码的东西,但是在我的测试中(Mocha + Phantom + Karma),onAnimationEnd事件似乎并没有触发。ReactJS 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);
});
});
});
请注意,我认为这可能与虚拟dom(谁知道这一点)有关,所以我还使用ReactDom将其呈现在文档的正文中,但我仍然没有得到该事件。 – k2snowman69