Also addressed here, I have a footer component which I'm trying to write tests for. The footer consists of several buttons. All of these buttons use the Message const, which is an antd modal :
Message.jsx
import { Modal } from 'antd';
const { confirm } = Modal;
export const Message = (text, okayHandler, cancelHandler) => {
confirm({
title: text,
okText: 'Yes',
cancelText: 'No',
onOk: okayHandler,
onCancel: cancelHandler,
});
};
export default Message;
Footer.jsx
class Footer extends Component {
state = {
from: null,
redirectToReferrer: false,
};
cancelClicked = () => {
Message('Return to the previous screen?', () => {
this.setState({ redirectToReferrer: true, from: '/home' });
});
};
render() {
const { redirectToReferrer, from } = this.state;
if (redirectToReferrer) {
return <Redirect to= />;
}
return (
<Card style={footerSyles}>
<MyButton
bounds={`${(3 * width) / 7 + (7 * width) / 84},5,${width / 7},30`}
text="CANCEL"
type="primary"
icon="close"
actionPerformed={this.cancelClicked}
/>
</Card>
actionPerformed is actually onClick, it's taken as a prop from my component. Card is an antd component.
I can test if the cancelClicked is called when the button is clicked very finely. I want to test, after calling cancelClicked and the modal/message has opened, when I click 'Yes' (onOk), that the state is changed.
Footer.test
//This test works
test('Footer should open a popup when cancel button is clicked, and redirect to home page', () => {
const instance = defaultFooter.instance();
const spy = jest.spyOn(instance, 'cancelClicked');
instance.forceUpdate();
const p = defaultFooter.find('MyButton[text="CANCEL"]');
p.props().actionPerformed();
expect(spy).toHaveBeenCalled();
});
//This doesn't, where I'm trying to make 'yes' clicked everytime modal opens
test('Footer should open a popup when cancel button is clicked, and redirect to home page', () => {
Modal.confirm({ onOk: jest.fn(() => true) });
const component = defaultFooterMount.find('MyButton[text="CANCEL"]');
component.props().actionPerformed();
expect(defaultFooterMount.state().redirectToReferrer).toBeTruthy();
});
Any help will be appreciated, I'm stuck in how to solve this for a day or two.
Aucun commentaire:
Enregistrer un commentaire