Api-hook, a more lightweight interface testing tool

preface

In the process of website development, interface debugging and testing is a crucial link, which directly affects the core value of the product, and there are many technical solutions and tools to support, so that our development and testing work is more convenient. Interface as an important carrier of data transmission, data format and content are diverse. From a macro perspective, it can be divided into success and failure, and these two states can be subdivided. For example, the status code corresponding to failure has 5**/4**, and different status codes represent different problems, which need to be considered one by one. All of the fields and permutation and combination form, so the question becomes, whether can in the case of conditions allow rapid cover all scenarios, from a technical perspective, the problem is not big, but sometimes cost a little high, that how to quickly implement a low-cost way, this article will revolve around the question discussion, and try to provide a solution.

The status quo

As mentioned above, there are also many tools that can help us to implement interface testing. For example, postman and Fiddler are widely used, which are powerful and can install plug-ins or custom scripts to solve the problem of data testing. For example, we want mock service. Reference learning.postman.com/docs/design… There are plenty of tutorials on the Internet that can improve your productivity if you’re willing to take the time — well, if you do.

API – hook advantage

1. Out of the box

Sometimes I just want to modify the interface data simply, but I need to install software and find tutorials for a long time, which costs time and reduces efficiency. Api-hook is introduced into the project, and it can be used through simple configuration (really simple). What you see is what you get in all operations, without learning cost.

2. Lightweight and convenient

The tool is lightweight enough that it doesn’t need to be serviced or maintained separately. It’s just part of your page and you can control it like a div.

Tool is introduced

1.) Tool demo

Functional specifications [1] is the switching area of interface interception /mock. [2] Can close the API-hook tool panel. [3] is the tool panel show/hide switch.The interface interceptor When the tool panel of visible and in the interface mode, all launched an ajax request interface will be coming back to page interception, currently in edit interface in the interface request list for the first position, and background have a zebra crossing rolling animation, if you have any other subsequent interface response were captured, so new intercept interface is in a state of editing waiting, background rendering light blue, The bottom part moves the drawing to hint. When the interface is edited, click “OK”, and the interface in edit waiting state will automatically switch to edit mode. Of course, you can also switch by yourself.Interface mock The Mock interface integrates mockJS functionality, so template configuration can be referenced in the MockJS official website. Note that the Template field must conform to the JSON format specification.

2.) Environmental requirements

This tool is developed using React, and applicable projects also require the React technical framework. In addition, the tool intercepts all Ajax requests, so make sure the interface requests you use are made over Ajax.

3.) Usage

Install NPM install api-hook

Component imports import components in the project entry file

import ApiHook from 'api-hook'; function App() { return ( <div className="App"> <Main /> <ApiHook autoFilter defaultVisiable allowOrigins={['http://localhost:3000']} /> </div> ); }... ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode> document.getElementById('root') );Copy the code

4.) Other instructions

Support response types Currently, the interface supports only text/ JSON response types. Therefore, if the interface type is Document, BLOb, or ArrayBuffer, the tool does not process it.

Component parameters

Research and development is introduced

1.) Process design

The tool provides two modes: interface mock and interface intercept. The internal flow of different modes is slightly different as follows:In interface interception mode, all interface responses that need to be intercepted are hijacked by apI-hook without doing anything to the request flow. In the interface provided by the tool, you can modify the response status code and the specific content of the interface. In the mock interface mode, mockJS is used to simulate the data, and MockJS implements the response of the data by customizing the MockXMLRequest proxy for all matching requests.

2.) XMLHttpRequest proxy

Because the default behavior of XMLHttpRequest needs to be modified, the project code actually accesses its proxy object. In the case of interface interception /mock, the project code overwrites the XMLHttpRequest object. The implementation is done using Ajax-hook and MockJS. Ajax-hook provides the interface proxy XMLHttpRequest native object through Ajax-hook in interface interception mode. It listens to all native XHR object attributes to ensure that ajax-hook callback is executed first, followed by ajax request callback.

XMLHttpRequest = function () { var xhr = new window[realXhr]; for (var attr in xhr) { var type = ""; try { type = typeof xhr[attr] } catch (e) { } if (type === "function") { // hookAjax methods of xhr, Such as' open ', 'send'... this[attr] = hookFunction(attr); } else { Object.defineProperty(this, attr, { get: getterFactory(attr), set: setterFactory(attr), enumerable: true }) } } ...... }Copy the code

Mockjs Saves the native XMLHttpRequest on the window._XMLHttprequest property, declares a MockXMLHttpRequest object that emulates the behavior and methods of the XMLHttpRequest, When we use mock.mock (…) API, execute window.XMLHttpRequest = XHR; Here XHR is MockXMLHttpRequest;

The proxy object switching tool uses different proxy objects in different modes. When switching intercepts and mocks, you need to reset the native XMLHttpRequest and initialize the proxy object.

// mock registerMock() {unProxy(); // Remove ajax-hook proxy const {mockList} = this.state; mockList.forEach(({ url, template }) => { Mock.mock(url, template); // mock}); } unRegisterMock() {if (window._xmlhttprequest) {// Mock proxy, Reset the native Ajax object window.xmlHttprequest = window._xmlhttprequest; } ajaxProxy(); // Enable ajax-hook proxy}Copy the code

The last

The tool can be used by front-end developers and testers to provide a more convenient way to achieve personalized data modification. This time only launched the basic functions, more new features will be added later, the warehouse address: github.com/lanpangzi-z… If you feel ok, please click star. If you have any questions, welcome to exchange.