A high-performance on-demand Mock data testing device and method

Abstract

The present invention belongs to the field of testing technology, and discloses a high-performance on-demand Mock data testing device and method. The method includes: registering a Service Worker, listening to Fetch events; intercepting all network requests through the callback function of the Fetch event; obtaining interface-related information according to the request event, including interface address and method information; matching the local Mock interface, parsing the Mock data; and returning to the browser according to the matched interface data. The present invention proposes to implement interface request interception based on Service Worker, and based on the interception mechanism of Service Worker itself, it runs in the background of the browser, will not block the main thread, and therefore will not affect the rendering of the page and user interaction. Compared with other methods of implementing data interception by modifying http requests, this solution has higher performance.

Description

Technical Field

[0001] The invention belongs to the field of testing technology, and in particular relates to a high-performance on-demand Mock data testing device and method. Background Art

[0002] In the field of Web development, most of the development is done separately between the front-end and the back-end. When front-end developers are developing new functional units, they need Mock interface data to write and debug functions. The most common Mock solution is to intercept requests based on mockjs. This method has several disadvantages: requests intercepted by Mock cannot be displayed in the network panel of the browser developer tool, which will cause developers to be unable to quickly locate the interface requests involved in the problem when debugging, which has a certain obstruction to problem troubleshooting.

[0003] The system does not support the coexistence of Mock data and real data. Once the Mock switch is turned on, all system interfaces will be intercepted and replaced with Mock data. For undefined interfaces, an error will be reported directly. This method will increase the Mock cost and make it impossible to perform real data flow testing. Summary of the invention

[0004] In order to overcome the problems existing in the related art, the disclosed embodiments of the present invention provide a high-performance on-demand Mock data testing device and method. Specifically, it relates to a method, device, server and equipment for processing interface requests. The purpose of the present invention is to solve the problem that Mock data and real data cannot coexist, and at the same time, based on Service Woker, high-performance data interception is achieved, which greatly improves the response speed of the Mock interface, simplifies the Mock data configuration process, and makes Mock data simpler and more efficient.

[0005] The technical solution is as follows: a high-performance on-demand Mock data testing method, which implements interface interception based on Service Worker and sets the Mock interface on demand. The method includes:

[0006] S1, register Service Worker;

[0007] S2, intercepts all network requests through the callback function of the Fetch event;

[0008] S3, according to the request event, obtain the interface related information through the callback parameter Event.request object of the Fetch event, including: interface address and method information;

[0009] S4 defines the configuration file MockType as some, MockApiList configures the interface list that needs to be mocked, binds the Mock interface and the corresponding JSON data in the KeyValue way, and stores it in the browser memory. When the browser initiates a network request, it is intercepted by S2 and the cached data is read through the Url;

[0010] S5, returning the interface data matched in step S4 to the browser.

[0011] The method further includes:

[0012] For the getUserList interface, define a Mock file in the project configuration file and set the interface address, method, and data;

[0013] Configure the Mock switch and type, all interfaces are intercepted by Mock and return Mock data;

[0014] Start the front-end project, configure and compile related codes, use Vite to compile and build, and call the getUserList interface in the web system in the browser to query all users;

[0015] Initialization is performed when the front-end page is loaded. When the page initiates an interface request, it is intercepted and the data file corresponding to the Mock interface is searched from the local file. The data is returned to the browser in the form of JSON, and the user list data displayed on the page is replaced with Mock data.

[0016] The method further comprises:

[0017] For getUserList and getCompanyList interfaces, getUserList uses Mock data, while getCompanyList interface requests real data;

[0018] First, configure the Mock switch to some, which represents a partial Mock. In addition, configure the MockApiList array and add the getCompanyList interface to the MockApiList array. At the same time, add the Mock file of the getCompanyList interface in the mock directory. The file includes the interface address, method, and key data information.

[0019] The web system accessed in the browser requests the getUserList interface and the getCompanyList interface in sequence. When the getUserList interface is requested, it is intercepted, the corresponding Mock file is read, and the Mock data is returned.

[0020] Furthermore, when the getCompanyList interface is requested, no processing is done, the getCompanyList interface request is sent to the server, and the real data is returned.

[0021] Another object of the present invention is to provide a high-performance on-demand Mock data testing device, which implements the high-performance on-demand Mock data testing method, and the device includes:

[0022] Event module, used to monitor interface requests initiated by web pages;

[0023] A data storage module, used for storing interface data;

[0024] The filtering module is used to match whether the interface needs to be intercepted;

[0025] The on-demand Mock configuration generation module is used to store Mock data and real interface data together, and start the program that needs to be mocked on demand according to the configuration.

[0026] The event module includes an install event, which is triggered when the Service Worker is first installed and is used to install the program; a fetch event, which is triggered when a page sends a network request, allowing the Service Worker to intercept the request and process it.

[0027] Furthermore, the data storage module includes a Mock data configuration file for storing and defining Mock data.

[0028] Furthermore, the filtering module is used to obtain information related to the interface request when the Fetch event is triggered, including the request header and the interface URL information, and to search for data defined by the data response module according to the interface request address to obtain matching data.

[0029] Furthermore, the on-demand Mock configuration generation module includes:

[0030] On-demand Mock local configuration module, used to configure the Mock type and the on-demand Mock interface list;

[0031] File reading module, used to read all Mock files;

[0032] The Mock data generator module is used to produce and define specific interface data and write formats.

[0033] Further, the on-demand Mock local configuration module defines the on-demand Mock configuration and sets the Mock type to all, some, and none, where all means intercepting all interfaces and replacing them with Mock data, some means Mock some interfaces, and none means not starting the Mock data device and using all real data; when Mock sets some, sets the on-demand Mock interface list and adds the configuration file to the Mock directory; sets the on-demand Mock interface address and stores the interface path that needs to be Mocked;

[0034] The file reading module reads all mock files in the mock folder, uses Vite to package and build the project, uses the import.meta.glob method to read files, matches all files in the mock directory through the wildcard **, and traverses and reads all Mock files, and reads the Mock interface type method, and reads the interface address url, and the interface return content body, and stores all the read data in the browser in a key-value manner, where the key represents the interface address url and the interface type method, and the value represents the interface content body;

[0035] The Mock data generator module first defines the structure of a single interface, where url represents the interface address, corresponding to the interface request address in the system; method represents the interface type, including post, get, delete, patch, and put methods, corresponding to the interface type of the corresponding interface in the system; body represents specific Mock data, where body supports two types: json object and function. json is generally used for static data, while function defines dynamic data.

[0036] In combination with all the above-mentioned technical solutions, the beneficial effects possessed by the present invention are as follows: In order to solve the technical problems existing in the background technology, the present invention provides a test method and a test device thereof that can customize the configuration of the interface that needs to be simulated Mock, and realize on-demand Mock. The present invention proposes to implement interface request interception based on Service Worker, and based on the interception mechanism of ServiceWorker itself, it runs in the background of the browser and will not block the main thread, so it will not affect the rendering of the page and user interaction. Compared with other methods of data interception by modifying http requests, this solution has higher performance. Secondly, on-demand Mock has more advantages in complex usage scenarios, and is more flexible than the overall Mock method.

[0037] The invention is mainly reflected in the improvement of development efficiency. The Mock solution of the invention can improve the efficiency of project development and debugging, and developers can form a closed loop. Currently, none of the Mock frameworks on the market support custom settings that require configurations such as Mock interfaces. The invention can implement on-demand Mock. The invention defines the interfaces that require Mock by means of configuration files. This method is original to the invention and solves the problem that the Mock framework must use all Mocks. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] The accompanying drawings herein are incorporated in and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description, serve to explain the principles of the present disclosure;

[0039] Figure 1 Schematic diagram of a high-performance on-demand Mock data testing device provided by an embodiment of the present invention;

[0040] Figure 2 This is a flow chart of a high-performance on-demand Mock data testing method provided by an embodiment of the present invention;

[0041] In the figure: 1. Event module; 2. Data storage module; 3. Filter module; 4. On-demand Mock configuration generation module; 401. On-demand Mock local configuration module; 402. File reading module; 403. Mock data generator module. DETAILED DESCRIPTION

[0042] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention, so the present invention is not limited by the specific implementation disclosed below.

[0043] The present invention supports users to customize interfaces that require Mock.

[0044] Embodiment 1, as Figure 1 The high-performance on-demand Mock data testing device provided by the embodiment of the present invention includes:

[0045] Event module 1, used to monitor the interface request initiated by the web page;

[0046] The event module 1 includes the install event, which is triggered when the Service Worker is installed for the first time and is used to install the program; the fetch event, which is triggered when the page sends a network request, allowing the Service Worker to intercept the request and process it. Specifically, the event callback is added through addEventListener. The browser will execute the callback function we defined when the fetch request is triggered, such as returning the cached resources.

[0047] The data storage module 2 is used to store interface data; the data storage module 2 includes a Mock data configuration file, which is used to store and define Mock data;

[0048] Filter module 3 is used to match whether the interface needs to be intercepted; when the Fetch event is triggered, the filter module 3 obtains the information returned by the browser through the callback parameter Event.request object of the Fetch event, including the request header, interface URL and other information. The filter module 3 will search for the data defined by the data response module according to the interface request address, and specifically use the URL as the Key to obtain matching data from the Mock data in the KeyValue form cached by the browser.

[0049] The on-demand Mock configuration generation module 4 is used to store the Mock data and the real interface data together, and start the program that needs to be Mocked on demand according to the configuration.

[0050] It includes an on-demand mock local configuration module 401, which is used to configure the type of mock and the interface list of the on-demand mock, specifically including defining a .mock.local.ts file, which includes two variables, mockType and mockApiList, where mockType refers to a specific mock type, and mockApiList refers to an interface that needs to be intercepted;

[0051] The system also includes a file reading module 402, which is used to read all Mock files, specifically importing all Mock files into the memory at once by recursive directory traversal;

[0052] It also includes a Mock data generator module 403 for producing and defining specific interface data and writing formats.

[0053] The on-demand Mock local configuration module 401 defines the on-demand Mock configuration and sets the Mock type to all, some, and none, where all means intercepting all interfaces and replacing them with Mock data, some means Mock some interfaces, and none means not starting the Mock data device and using all real data. When Mock is set to some, it is necessary to set the on-demand Mock interface list and add the configuration file to the Mock directory, specifically add the mock file in the handlers directory, define the interface and Mock data; set the on-demand Mock interface address and store the interface path that needs to be mocked, specifically by adding the interface address to the mockApiList array.

[0054] The file reading module 402 reads all mock files in the mock folder. The present invention uses Vite to package and build the project. The specific construction process includes configuring the Vite.config.ts configuration file, defining the packaged entry file and output path, etc.; the file reading uses the import.meta.glob method to match all files in the mock directory through the wildcard **, so as to traverse and read all the Mock files, and read the Mock interface type method, and at the same time read the interface address url, and the interface return content body, and store all the read data in the browser memory in a key-value manner, wherein the key represents the interface address url and the interface type method, and the value represents the interface content body.

[0055] The Mock data generator module 403 first defines the structure of a single interface, including url, method, and body, wherein url represents the interface address, corresponding to the interface request address in the system; method represents the interface type, such as post, get, delete, patch, put and other methods, corresponding to the interface type of the corresponding interface in the system; body represents specific Mock data, wherein body supports two types: json object and function. json is generally used for static data, while function can define dynamic data, and users can write specific content by themselves without restriction.

[0056] Embodiment 2, as Figure 2 As shown, the high-performance on-demand Mock data testing method provided by the embodiment of the present invention includes:

[0057] S1, register Service Worker;

[0058] S2, intercepts all network requests through the callback function of the Fetch event;

[0059] S3, according to the request event, obtains interface related information, including interface address and method information, through the callback parameter Event.request object of the Fetch event;

[0060] S4 defines the configuration file MockType as some, and MockApiList configures the interface list that needs to be mocked. The Mock interface and the corresponding JSON data are bound in the KeyValue method and cached in the browser memory. When the browser initiates a network request, it is intercepted by S2 and the cached data is read through the Url.

[0061] S5, returning the interface data matched in step S4 to the browser.

[0062] Example 3, as another implementation of the present invention, for the getUserList interface, the developer defines a Mock file in the project configuration file, and sets the interface address, method, and data;

[0063] Configure the Mock switch and type. For example, if MockType is all, all interfaces in the system will be intercepted by Mock and return Mock data.

[0064] Start the front-end project and configure the compilation-related code. Here, Vite is used for compilation and construction. Open the Web system in the browser. The page will call the getUserList interface to query all users.

[0065] The Mock device will be initialized when the front-end page is loaded. When the page initiates an interface request, it will be intercepted and the data file corresponding to the Mock interface will be found from the local file. The data will be returned to the browser in the form of JSON, and the user list data displayed on the page will be replaced with Mock data.

[0066] Example 4, as another implementation of the present invention, for the two interfaces getUserList and getCompanyList, where getUserList needs to use Mock data, and getCompanyList interface needs to request real data;

[0067] To implement this scenario, you first need to configure the Mock switch to some, which represents a partial Mock. In addition, you need to configure the MockApiList array and add the getCompanyList interface to the MockApiList array. At the same time, add the Mock file of the getCompanyList interface in the mock directory. The file includes key information such as the interface address, method, and data.

[0068] When accessing the web system in a browser, the page will request the getUserList interface and the getCompanyList interface in turn. When requesting the getUserList interface, the Mock device will intercept, read the corresponding Mock file, and return the Mock data. When requesting the getCompanyList interface, the Mock device will not do any processing, the interface will request the server and return the real data.

[0069] It can be seen from the above embodiments that the present invention can realize the coexistence of Mock data and real data, support developers to define interfaces that require Mock, and help developers debug in some complex function development. At the same time, data interception is realized based on Service Worker. Compared with the main JavaScript thread of the browser application, it runs in other threads, so it will not cause blocking, so the interface response speed is greatly improved.

[0070] Based on the Service Worker mode for Mock, there are some open source frameworks in the community, such as msw.js, but it does not support on-demand Mock. Although the present invention also implements data interception based on Service Worker, it redefines the Mock configuration specification on this basis and implements the coexistence of real data and Mock data.

[0071] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0072] In the development of a new requirement, the back-end development defines the interface document, and the front-end development uses the present invention to perform Mock. When the interface has not been developed, the front-end does not need to wait for the back-end interface to be completely written. The interface is Mocked by the present invention to achieve a closed loop of the development link. At the same time, for existing functions, the server is directly requested to keep the functions complete, the data is real-time and effective, and the efficiency of the front-end in the joint debugging development link is improved. This experiment can effectively prove that the use of the present invention for Mock can speed up the development process.

[0073] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any modifications, equivalent substitutions and improvements made by any technician familiar with the technical field within the technical scope disclosed by the present invention and within the spirit and principles of the present invention should be covered within the protection scope of the present invention.

Claims

1. A high-performance on-demand Mock data testing method, characterized in that: This method implements interface interception based on Service Worker and sets the Mock interface as needed. The method includes: S1, register Service Worker; S2, intercepts all network requests through the callback function of the Fetch event; S3, according to the request event, obtain the interface related information through the callback parameter Event.request object of the Fetch event, including: interface address and method information; S4 defines the configuration file MockType as some, and configures the interface list that needs to be mocked in MockApiList. The Mock interface and the corresponding JSON data are bound in the KeyValue way and stored in the browser memory. When the browser initiates a network request, it is intercepted by S2 and the cached data is read through the Url. S5, returning the interface data matched in step S4 to the browser; The method further includes: For the getUserList interface, define a Mock file in the project configuration file and set the interface address, method, and data; Configure the Mock switch and type, all interfaces are intercepted by Mock and return Mock data; Start the front-end project, configure and compile related codes, use Vite to compile and build, and call the getUserList interface in the web system in the browser to query all users; Initialize when loading the front-end page. When the page initiates an interface request, it is intercepted and the data file corresponding to the Mock interface is found from the local file. The data is returned to the browser in the form of JSON, and the user list data displayed on the page is replaced with Mock data. The method further comprises: For getUserList and getCompanyList interfaces, getUserList uses Mock data, while getCompanyList interface requests real data; First, configure the Mock switch to some, which represents a partial Mock. In addition, configure the MockApiList array and add the getCompanyList interface to the MockApiList array. At the same time, add the Mock file of the getCompanyList interface in the mock directory. The file includes the interface address, method, and key data information. The web system accessed in the browser requests the getUserList interface and the getCompanyList interface in turn. When the getUserList interface is requested, it is intercepted, the corresponding Mock file is read, and the Mock data is returned; When the getCompanyList interface is requested, no processing is done. The getCompanyList interface request is sent to the server and the real data is returned.

2. A high-performance on-demand Mock data testing device, characterized in that: The device implements the high-performance on-demand Mock data testing method described in claim 1, and the device includes: Event module (1), used to monitor interface requests initiated by web pages; A data storage module (2), used for storing interface data; The filtering module (3) is used to match whether the interface needs to be intercepted; The on-demand Mock configuration generation module (4) is used to store the Mock data and the real interface data together, and start the program that needs to be mocked on demand according to the configuration.

3. The high-performance on-demand Mock data testing device according to claim 2, characterized in that: The event module (1) includes an install event, which is triggered when the Service Worker is installed for the first time and is used to install the program; and a fetch event, which is triggered when a page sends a network request and allows the Service Worker to intercept the request and process it.

4. The high-performance on-demand Mock data testing device according to claim 2, characterized in that: The data storage module (2) comprises a Mock data configuration file, which is used to store and define Mock data.

5. The high-performance on-demand Mock data testing device according to claim 2, characterized in that: The filtering module (3) is used to obtain information related to the interface request when a Fetch event is triggered, including the request header and the interface URL information, and to search for data defined by the data response module according to the interface request address to obtain matching data.

6. The high-performance on-demand Mock data testing device according to claim 2, characterized in that: The on-demand Mock configuration generation module (4) includes: On-demand Mock local configuration module (401), used to configure the Mock type and the on-demand Mock interface list; File reading module (402), used to read all Mock files; The Mock data generator module (403) is used to produce and define specific interface data and write the format.

7. The high-performance on-demand Mock data testing device according to claim 6, characterized in that: The on-demand Mock local configuration module (401) defines the on-demand Mock configuration and sets the Mock type to all, some, and none, where all means intercepting all interfaces and replacing them with Mock data, some means Mock some interfaces, and none means not starting the Mock data device and using all real data; when Mock is set to some, the on-demand Mock interface list is set and the configuration file is added to the Mock directory; the on-demand Mock interface address is set and the interface path that needs to be mocked is stored; The file reading module (402) reads all mock files in the mock folder, uses Vite to package and build the project, uses the import.meta.glob method to read the files, matches all files in the mock directory through the wildcard **, and thus traverses and reads all the mock files, and reads the mock interface type method, and reads the interface address url, and the interface return content body, and stores all the read data in the browser in a key-value manner, wherein the key represents the concatenation of the interface address url and the interface type method, and the value represents the interface content body; The Mock data generator module (403) first defines the structure of a single interface, wherein url represents the interface address, corresponding to the interface request address in the system; method represents the interface type, including post, get, delete, patch, and put methods, corresponding to the interface type of the corresponding interface in the system; body represents specific Mock data, wherein body supports two types: json object and function, json is used for static data, and function defines dynamic data.

Images