Question

我有一个用Material-ui库用ReactJS编写的Modal窗口，并且正在创建一个酶（带有Jest）单元测试以确保

用户可以单击按钮以打开“模态”窗口
模态中的内容应为“某物”
用户应能够通过单击背景或按ESC键来关闭“模态”窗口。

我可以测试上面的1和2，但是我不确定如何进行背景点击事件或发送ESC击键。

我的模态窗口代码

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";

function getModalStyle() {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`
  };
}

const useStyles = makeStyles(theme => ({
  paper: {
    position: "absolute",
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 4),
    outline: "none"
  }
}));

export default function Modalwindow() {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <p>Click to get the full Modal experience!</p>
      <button
        type="button"
        id={"tacButton"}
        name={"tacButton"}
        onClick={handleOpen}
      >
        Open Modal
      </button>
      <Modal
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        id={"tacModalWindow"}
        name={"tacModalWindow"}
        open={open}
        onClose={handleClose}
      >
        <div style={modalStyle} className={classes.paper}>
          <h2 id="modal-title">Text in a modal</h2>
          <p id="simple-modal-description">
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </p>
        </div>
      </Modal>
    </div>
  );
}

我的单元测试代码

import { configure } from "enzyme/build";
import Adapter from "enzyme-adapter-react-16/build";
import { createMount } from "@material-ui/core/test-utils";
import { act } from "react-dom/test-utils";
import { Backdrop } from "@material-ui/core";
import { Modalwindow } from "./Modalwindow";

import React from "react";

configure({ adapter: new Adapter() });

describe("<Modalwindow />", () => {
  let componentMount = createMount();
  let component;
  act(() => {
    component = componentMount(<Modalwindow />);
  });

  it("should render modal window with TAC content", done => {
    act(() => {
      component.update();
    });
    // check the Modal is closed
    expect(component.find('#tacModalWindow').at(0).props().open).toBe(false);

    // check modal is open when user press a button
    act(() => {
      component.find('#tacButton').at(0).simulate('click', {
        currentTarget: {
          name: 'tacButton'
        }
      });
    });
    component.update();
    expect(component.find('#tacModalWindow').at(0).props().open).toBe(true);

    // Now how do I close here? *******************************
    // DO SOMETHING

    // check the modal is closed.
    expect(component.find('#tacModalWindow').at(0).props().open).toBe(false);


    done();
  });
});

我也将代码上传到了https://codesandbox.io/embed/stupefied-butterfly-t5bv5

（但是由于某种原因，codesandbox对我来说不适用于酶。）

Answer 1

我修复了以下问题

^/section\/\?page=(.*)$

和测试

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import {Backdrop} from "@material-ui/core";


function getModalStyle() {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`
  };
}

const useStyles = makeStyles(theme => ({
  paper: {
    position: "absolute",
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 4),
    outline: "none"
  }
}));

export default function Modalwindow() {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <p>Click to get the full Modal experience!</p>
      <button
        type="button"
        id={"tacButton"}
        name={"tacButton"}
        onClick={handleOpen}
      >
        Open Modal
      </button>
      <Modal
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        id={"tacModalWindow"}
        name={"tacModalWindow"}
        open={open}
        onClose={handleClose}
        BackdropComponent={Backdrop}
      >
        <div style={modalStyle} className={classes.paper}>
          <h2 id="modal-title">Text in a modal</h2>
          <p id="simple-modal-description">
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </p>
        </div>
      </Modal>
    </div>
  );
}

摘要：

我必须在Modal中添加BackdropComponent属性。

我希望这会有所帮助。

我如何使用Enzyme模拟Material-ui的Modal窗口上的backgroundClick？

1 个答案: