使用酶浅渲染与Sinon进行存根

Question

I have a React component that I've migrated over from a JS Component. I'm migrating over and checking the tests and I've got lots of failures because stubbing doesn't seem to be working anymore. Here's my component...

import DeleteButton from "./delete-button.jsx"
import Dialogs from "../../dialogs";
import React from "react";
import UrlHelper from "../../helpers/url-helper";

export default class ActiveDeleteButton extends React.Component {

    /**
     * Creates an instance of ActiveDeleteButton.
     * 
     * @param {object} props The react props collection.
     * 
     * @memberOf ActiveDeleteButton
     */
    constructor(props) {
        super (props);

        this.handleConfirmDelete = this.handleConfirmDelete.bind(this);
    }

    handleConfirmDelete() {
        $.ajax({
            url: this.props.deleteUri,
            type: `DELETE`,
            contentType: `application/json; charset=utf-8`,
            cache: false,
            success: (xhr) => {
                let successUri = this.props.successUri;
                if (!successUri && xhr && xhr.uri) { successUri = xhr.uri; }
                if (successUri) { UrlHelper.redirect(successUri); }
            },
            error: (xhr, status) => {
                this.showFailed();
            }
        });
    }

    /**
     * Shows failure of deletion.
     * 
     * @memberOf ActiveDeleteButton
     */
    showFailed() {
        Dialogs.alert(this.props.errorMessage);
    }

    /**
     * Renders the component to the DOM.
     * 
     * @returns the HTML to render.
     * 
     * @memberOf ActiveDeleteButton
     */
    render() {
        return (
            <DeleteButton text = {this.props.text}
                          title = {this.props.title}
                          cancelText = {this.props.cancelText}
                          confirmText = {this.props.confirmText}
                          message = {this.props.message}
                          onConfirmDelete = {this.handleConfirmDelete} />
        );
    }
}

And here's the test (condensed)...

describe("performs a DELETE AJAX request", () => {

    it ("for specified URLs", sinon.test(function() {
        let wrapper = shallow(<ActiveDeleteButton text = "Click Me"  />);
        let instance = wrapper.instance(); 
        let ajaxStub = this.stub($, 'ajax');
        instance.forceUpdate()
        wrapper.update()
        instance.handleConfirmDelete();
        console.log(ajaxStub.getCall(0));
        let options = ajaxStub.getCall(0).args[0];
        assert.equal(options.url, objUt.deleteUri);
        assert.equal(options.type, "DELETE");
    }));
}));

The issue I have is that 'ajaxStub.getCall(0)' returns null. This should return the Ajax call so I can check the args (and it used to before in my old JS component). The stub is never called although it (to my mind) clearly should be.

Am I missing something here?

Answer 1

This is more a workaround than anything else so a better answer would be great. In the end I built a workaround for this as follows...

Firstly I created a new class to handle Ajax Requests.

/**
 * An AJAX request wrapper.
 * Usage of this enables testing AJAX calls.
 * 
 * @export AjaxRequest
 * @class AjaxRequest
 * @extends {AjaxRequest}
 */
export default class AjaxRequest {

    /**
     * Creates an instance of AjaxRequest.
     * @param {any} { url, type, contentType, cache, data, successCallback, errorCallback } 
     * 
     * @memberOf AjaxRequest
     */
    constructor({ url, type, contentType, cache, data, successCallback, errorCallback }) {
        Guard.throwIf(url, "url");
        let emptyFunc = () => {};

        this.url = url;
        this.type = type.toUpperCase() || "GET";
        this.contentType = contentType || "application/json; charset=utf-8";
        this.dataType = "json";
        this.cache = cache || false;
        this.data = data ? JSON.stringify(data) : undefined;
        this.successCallback = successCallback || emptyFunc;
        this.errorCallback = errorCallback || emptyFunc;
    }

    /**
     * Executes the AJAX request.
     * 
     * 
     * @memberOf AjaxRequest
     */
    execute() {
        $.ajax({
            url: this.url,
            type: this.type,
            contentType: this.contentType,
            dataType: this.dataType,
            cache: this.cache,
            data: this.data,
            success: this.successCallback,
            error: this.errorCallback
        });
    }

    /**
     * Gets a GET request.
     * 
     * @static
     * @param {string} url 
     * @param {function} successCallback 
     * @param {function} errorCallback 
     * @returns an AjaxRequest
     * 
     * @memberOf AjaxRequest
     */
    static get(url, successCallback, errorCallback) {
        return new AjaxRequest({
            url: url,
            type: 'GET',
            successCallback: successCallback,
            errorCallback: errorCallback
        });
    }

    /**
     * Gets a POST request.
     * 
     * @static
     * @param {string} url 
     * @param {object} data
     * @param {function} successCallback 
     * @param {function} errorCallback 
     * @returns an AjaxRequest
     * 
     * @memberOf AjaxRequest
     */
    static post(url, data, successCallback, errorCallback) {
        return new AjaxRequest({
            url: url,
            data: data,
            type: 'POST',
            successCallback: successCallback,
            errorCallback: errorCallback
        });
    }

    /**
     * Gets a PUT request.
     * 
     * @static
     * @param {string} url 
     * @param {object} data
     * @param {function} successCallback 
     * @param {function} errorCallback 
     * @returns an AjaxRequest
     * 
     * @memberOf AjaxRequest
     */
    static put(url, data, successCallback, errorCallback) {
        return new AjaxRequest({
            url: url,
            data: data,
            type: 'PUT',
            successCallback: successCallback,
            errorCallback: errorCallback
        });
    }

    /**
     * Gets a DELETE request.
     * 
     * @static
     * @param {string} url
     * @param {function} successCallback 
     * @param {function} errorCallback 
     * @returns an AjaxRequest
     * 
     * @memberOf AjaxRequest
     */
    static delete(url, successCallback, errorCallback) {
        return new AjaxRequest({
            url: url,
            type: 'DELETE',
            successCallback: successCallback,
            errorCallback: errorCallback
        });
    }
}

(i feel there's a certain amount of wheel re-inventing here). I then updated my method call in my component as follows...

handleConfirmDelete() {
    AjaxRequest.delete(this.props.deleteUri,
        (xhr) => {
            let successUri = this.props.successUri;
            if (!successUri && xhr && xhr.uri) { successUri = xhr.uri; }
            if (successUri) { UrlHelper.redirect(successUri); }
        },
        (xhr, status) => {
            this.showFailed();
        }
    ).execute();
}

I can now test as follows...

describe("performs a DELETE AJAX request", () => {
    let wrapper = null;
    let instance = null;
    let ajaxStub = null;
    let urlHelperRedirectStub = null;

    beforeEach(() => {
        ajaxStub = sinon.stub(AjaxRequest.prototype, 'execute');
        urlHelperRedirectStub = sinon.stub(UrlHelper, 'redirect');
        wrapper = shallow(<ActiveDeleteButton text = "Click Me"  />);
        instance = wrapper.instance(); 
    });

    afterEach(() => {
        ajaxStub.restore();
        urlHelperRedirectStub.restore();
    });

    it ("for default URLs", sinon.test(function() {
        instance.handleConfirmDelete();
        sinon.assert.called(ajaxStub);
        let requestInfo = ajaxStub.getCall(0).thisValue;          

        assert.equal(UrlHelper.current.url().split('?')[0], requestInfo.url);
    }));

    it ("for specified URLs", sinon.test(function() {
        wrapper = shallow(<ActiveDeleteButton text = "Click Me" deleteUri="http://localhost/items/12" />);
        instance = wrapper.instance();

        instance.handleConfirmDelete();
        sinon.assert.called(ajaxStub);
        let requestInfo = ajaxStub.getCall(0).thisValue;          

        assert.equal("http://localhost/items/12", requestInfo.url);
    }));
}));

Using the thisValue property of the stub call I can get the callbacks and execute them manually to test them depending on different input. Not an ideal solution given the effort needed but it works and its reusable.

I feel there must be a better way however.