Skip to content

Instantly share code, notes, and snippets.

@aryo
Last active May 31, 2018 04:57
Show Gist options
  • Save aryo/9fd47c42e15412e131047aa4b4639685 to your computer and use it in GitHub Desktop.
Save aryo/9fd47c42e15412e131047aa4b4639685 to your computer and use it in GitHub Desktop.
MUI Dialog test with enzyme
/* some component w/ Dialog */
class SomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = { tapped: false }
}
render() {
return (
<Dialog
open={true}
actions={[
<FlatButton id="confirmButton" onTouchTap={() => this.setState({ tapped: true })} label="Confirm" />
]}
/>
);
}
}
/* end component */
/* test file */
import React from "react";
import ReactDOM from "react-dom";
import TestUtils from "react-addons-test-utils";
import { mount } from "enzyme";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import injectTapEventPlugin from "react-tap-event-plugin";
import SomeComponent from "./somefile.js"
injectTapEventPlugin();
// helper function to simulate touchTap event on DOM node
// (also works on enzyme ReactWrappers, in case rendered with enzyme's mount)
const touchTap = el => {
const node = ReactDOM.findDOMNode(el.node || el); //eslint-disable-line react/no-find-dom-node
TestUtils.Simulate.touchTap(node);
}
const muiTheme = getMuiTheme();
it("should set component's tapped state to true", () => {
const root = document.createElement("div");
document.body.appendChild(root);
const wrapper = mount(
<SomeComponent />,
{
context: { muiTheme },
childContextTypes: { muiTheme: PropTypes.object },
attachTo: root
}
);
expect(wrapper.state().tapped).toEqual(false);
const confirm = document.body.querySelector("#confirmButton");
touchTap(confirm);
expect(wrapper.state().tapped).toEqual(true);
// cleanup
wrapper.detach();
document.body.removeChild(root);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment