lundi 19 novembre 2018

Pressing onOk button clicked after Modal is opened

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