Содержимое в реактивном моде продолжает существовать после закрытия с использованием фермента / шутки - PullRequest
Новая
       9

Содержимое в реактивном моде продолжает существовать после закрытия с использованием фермента / шутки

0 голосов
/ 25 сентября 2019

Я пытаюсь провести некоторое тестирование с энзимом и шутом в реакции, и все работает нормально, когда я открываю модальное поле, например, нет полей ввода в модальном поле, и модальное состояние ложно (как и предполагалось), когда я пытаюсьчтобы найти их, используя

expect(wrapper.find("input")).toHaveLength(0);

и существовать после того, как я открыл модал, используя 

const edit = wrapper.find("Button.update-button");
edit.simulate("click");
expect(wrapper.find("input")).toHaveLength(2);

, что все работает (включая модальное состояние, изменяющееся на trueпосле того как он откроется) как задумано.Но когда я закрываю модальное состояние, состояние переключается правильно, но модальное содержимое (например, поля ввода и кнопки в модальном режиме) все еще существует, когда я пытаюсь: 

expect(wrapper.find("input")).toHaveLength(0);

У меня все еще как-то есть 2 вводаполя, которых не должно быть, поскольку модальное окно закрыто.

Вот мой код для компонента, который я пытаюсь проверить, помогает ли это: 

/*
    Artefact Component displays just UI for the Artefact itself and it's information.
*/

import React, { Component } from "react";

import DeleteArtefact from "../DeleteArtefact";
import UpdateArtefact from "../UpdateArtefact";

import {
    Card,
    CardImg,
    CardTitle,
    CardBody,
    ButtonGroup,
    Button,
    CardFooter
} from "reactstrap";

class Artefact extends Component {
    // Initialise State
    state = {
        updatemodal: false,
        deletemodal: false
    };

    // Toggle function for toggling modal open/close
    toggleUpdate = () => {
        this.setState({
            updatemodal: !this.state.updatemodal
        });
    };

    toggleDelete = () => {
        this.setState({
            deletemodal: !this.state.deletemodal
        });
    };

    prepareUpdateState = () => {
        this.props.editUpdate(this.props.artefact);
        this.toggleUpdate();
    };

    render() {
        const {
            artefact,
            onChange,
            onUpdateClick,
            editUpdate,
            onDeleteClick
        } = this.props;
        return (
            <Card>
                <CardImg
                    src={artefact.img}
                    alt={`Image for Artefact ${artefact.name}`}
                />
                <CardBody>
                    <CardTitle>
                        <h6>{artefact.name}</h6>
                    </CardTitle>
                </CardBody>
                <CardFooter>
                    <ButtonGroup>
                        <Button
                            className="update-button"
                            color="dark"
                            onClick={this.prepareUpdateState}
                        >
                            Edit
                        </Button>
                        <Button
                            className="delete-button"
                            color="dark"
                            onClick={this.toggleDelete}
                        >
                            Delete
                        </Button>
                    </ButtonGroup>
                    <UpdateArtefact
                        artefact={artefact}
                        onChange={onChange}
                        onUpdateClick={onUpdateClick}
                        editUpdate={editUpdate}
                        toggle={this.toggleUpdate}
                        modal={this.state.updatemodal}
                    />
                    <DeleteArtefact
                        _id={artefact._id}
                        onDeleteClick={onDeleteClick}
                        toggle={this.toggleDelete}
                        modal={this.state.deletemodal}
                    />
                </CardFooter>
            </Card>
        );
    }
}

export default Artefact;

А вот компонент UpdateArtefactу меня есть модал, который я пытаюсь проверить: 

/*
    UpdateArtefact Component is a child Component of ArtefactGallery and
    creates a new Artefact by using functions onChange() and updateClick() 
    and editUpdate() which are passed as props from ArtefactGallery and 
    passes state back up and makes api calls using axios.
*/

import React, { Component } from "react";
import {
    Button,
    Modal,
    ModalHeader,
    ModalBody,
    Form,
    FormGroup,
    Label,
    Input
} from "reactstrap";

class UpdateArtefact extends Component {
    // Passes state up to ArtefactGallery component and updates the artefact.
    onSubmit = e => {
        e.preventDefault();
        this.props.onUpdateClick(this.props.artefact._id);
        this.props.toggle();
    };

    // Sets state in ArtefactGallery to the initial values of the artefact
    // to prepare for any edits to be made in the case that some fields have
    // no change, so that there are no null fields.
    prepareUpdateState = () => {
        this.props.editUpdate(this.props.artefact);
        this.props.toggle();
    };

    render() {
        const { artefact } = this.props;
        return (
            <div style={{ marginLeft: "1rem" }}>
                <Modal isOpen={this.props.modal} toggle={this.props.toggle}>
                    <ModalHeader toggle={this.props.toggle}>
                        Edit Artefact
                    </ModalHeader>
                    <ModalBody>
                        <Form onSubmit={this.onSubmit}>
                            <FormGroup>
                                <Label>Artefact</Label>
                                <Input
                                    type="text"
                                    name="name"
                                    id="artefactName"
                                    defaultValue={artefact.name}
                                    onChange={this.props.onChange}
                                />
                                <Label>Image</Label>
                                <Input
                                    type="text"
                                    name="img"
                                    id="artefactImg"
                                    defaultValue={artefact.img}
                                    onChange={this.props.onChange}
                                />
                                <Button
                                    className="modal-submit-button"
                                    color="dark"
                                    style={{ marginTop: "2rem" }}
                                    block
                                >
                                    Submit
                                </Button>
                            </FormGroup>
                        </Form>
                    </ModalBody>
                </Modal>
            </div>
        );
    }
}

export default UpdateArtefact;

Так что, в основном, я просто хочу знать, в чем причина того, почему модальное содержимое все еще собирается ферментом, и как это исправить.Я попытался найти все, но не смог найти ответ, так что, думаю, что-то очевидно, что мне не хватает.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Видите, ваши компоненты не используют условный рендеринг, как 

{someFlag && <SomeElement>}

, а просто передают isOpen prop: 

<Modal isOpen={this.props.modal} toggle={this.props.toggle}>

, так что, вероятно, Modal просто скрывает его props.children и input сохраняется.

В качестве обходного пути вы можете проверить по ModalComponentYouHaveRendered.props().isOpen вместо проверки суммы input s

0 голосов
/ 25 сентября 2019

Вы можете попробовать использовать:

wrapper.update()

после закрытия модального окна.

Таким образом, оболочка должна обновляться.

...