CN114610633A - Automated testing tool and its implementation method, device, terminal and storage medium - Google Patents

Abstract

The invention discloses an automatic testing tool and its realization method, device, terminal and storage medium. The method includes: checking and installing files required for automatic testing of a hook component of a front-end react framework; there are N hook files in the hook component; For each hook file, an automated test case code is generated; according to all hook files, the automated test case code of all hook files is generated; the dynamic value of each test case is determined; the dynamic value associated with all test cases is displayed on the page visually. In this solution, by setting up an automated testing tool for the hook component of the front-end react framework, after the developer completes the code, the tool can be used to generate the automated test code of the hook component, which can reduce labor costs and maintenance costs.

Description

Automated test tool and its implementation method, device, terminal and storage medium

technical field

The invention belongs to the field of computer technology, in particular to an automated testing tool and its implementation method, device, terminal and storage medium, and in particular to an automated testing tool for a front-end react framework hook component and its implementation method, device, terminal and storage medium.

Background technique

For a front-end project, with the continuous iteration of product requirements, the amount of front-end code becomes larger and larger. In order to reduce the amount of code and reuse the code with the same or similar functions as much as possible, in the current mainstream framework react, it is made into a hook component, which is provided to different scenarios and different developers to call.

However, if a hook component is a complex hook component, the hook component will be stretched when it needs to be transformed for new requirements, because during the transformation process, it is necessary to ensure that the original user's usage scenario is Normally, the function of the B usage scenario cannot be affected by the transformation of the A usage scenario. In this case, the introduction of automated tests becomes very important.

In this way, automatic tests are introduced and added. After the code transformation is completed, by executing the automatic test cases of all the original scenarios, according to the obtained results, you can know whether the transformed code is perfectly compatible with the original functional logic.

However, when the project introduces and adds automated testing, there will be a problem of high cost.

For example, the writing of automated test code requires a considerable knowledge base of grammar, and if the automated test case needs to be adjusted, only the developer can modify the code to adjust, and there is a problem of high labor cost.

Another example is that the automated test code needs long-term maintenance. When new requirements are added, or the original components need to be modified in some scenarios, the automated test code needs to be added with test case code, which still has high labor costs. The problem, the maintenance cost is also getting higher and higher.

The above content is only used to assist the understanding of the technical solutions of the present invention, and does not mean that the above content is the prior art.

SUMMARY OF THE INVENTION

The purpose of the present invention is to provide an automated testing tool and its implementation method, device, terminal and storage medium, so as to solve the front-end react framework hook component, after the code transformation is completed, test whether the transformed code can be perfectly compatible with the original When introducing and adding automated testing to functional logic, there are problems of high labor cost and maintenance cost. By setting up an automated testing tool for hook components of the front-end react framework, developers can use this tool to generate automation of hook components after completing the code. Testing code can reduce labor costs and maintenance costs.

The present invention provides an implementation method of an automated testing tool, wherein the automated testing tool includes: an automated testing tool for a front-end react framework hook component; an implementation method for the automated testing tool for the front-end react framework hook component includes: checking and installing the front-end The files required for the automated test of the react framework hook component, and the test files in the storage directory of the automated test code of the front-end react framework hook component are executed when the automated test of the front-end react framework hook component is executed; the front-end react framework hook component has N Hook files, N is a positive integer; according to each hook file in the front-end react framework hook component, an automated test case code is generated; according to all hook files in the front-end react framework hook component, the automated test case code for all hook files is generated; for The dynamic value of each test case is determined for each test case corresponding to all the automated test case codes; the dynamic value associated with all test cases is visually displayed on the page; the displayed visual page is capable of displaying all hook files. Any test case in the automated test case code directly edits the modified page.

In some embodiments, files required for automated testing of the hook component of the front-end react framework are checked and installed, and when the automated testing of the hook component of the front-end react framework is executed, the test files in the storage directory of the automated test code of the hook component of the front-end react framework are executed, including : Check and install the dependency files required for automated testing of the hook component of the front-end react framework; set the storage directory of the automated test code of the hook component of the front-end react framework to store the generated automated test code of the hook component of the front-end react framework; When the front-end react framework hook component is automatically tested, index the test file in the storage directory of the front-end react framework hook component automated test code in this configuration item, and execute the test file.

In some embodiments, generating an automated test case code according to each hook file in the hook component of the front-end react framework, including: traversing the array of addresses of hook components configured in preset configuration items that need to perform automated testing, and traversing the array For each element of the array, find each hook file corresponding to each element in the array as each hook file that needs to be automated testing; for each hook file that needs to be automated testing, perform the operation of generating automated test case code , generate the basic code of each hook file that needs to be tested automatically; the basic code of each hook file that needs to be tested automatically, identify the syntax of different scenarios, intelligently reverse the expected results, and generate each hook file that needs to be tested automatically. The code of the hook file is used as the test case code corresponding to each hook file that needs to be tested automatically.

In some embodiments, the operation of generating automated test case code is performed for each hook file that needs to be tested automatically, and the basic code of each hook file that needs to be tested automatically is generated, including: creating a front-end react framework hook component for automated testing The code storage directory, in the folder where the storage directory is located, generate a blank file corresponding to each hook file that needs to be automated testing; through the first setting syntax, the unsimulated hook components and simulated hook components are rendered. The method renderHook, the act method that simulates the external exposure function of the trigger hook component, is introduced into each hook file that needs to be tested automatically; through the second setting syntax, the corresponding hook file that needs to be tested automatically will be generated. The test cases are wrapped to get the base code for each hook file that needs to be automated.

In some embodiments, the basic code of each hook file that needs to perform automated testing, identify different scene syntaxes, intelligently reverse deduce the expected result, and generate the code of each hook file that needs to be automated testing, as required The test case code corresponding to each hook file for automated testing, including: for the unsimulated hook component, in the variable output through the return keyword at the end of the function, by judging the variable by typeof, if the result is obtained The result is 'function', then reverse lookup in the hook code of the unsimulated hook component, the complete code block about the function name of the function is in the code block of the hook code of the unsimulated hook component for the variable The operation to reversely deduce the case and result of variable execution; if the useEffect function appears in the unsimulated hook component, it is determined that there is a dependency update event in the hook file of the unsimulated hook component. The update event is simulated to obtain automated test code; and when the automated test code has been modified, the execution of the update event is simulated and triggered by the value of the modified dependent variable of the automated test code.

In some embodiments, the dynamic values associated with all test cases are displayed on the page visually, including: after all test cases are generated, a page display file is generated for the dynamic values associated with all test cases; by executing the setting command , the browser accesses the page address and opens the page; on the page, the content including the names of all hook components and the description list of all test cases for each component is displayed.

Matching with the above method, another aspect of the present invention provides an implementation device for an automated testing tool, wherein the automated testing tool includes: an automated testing tool for a front-end react framework hook component; The implementation device includes: a setting unit, which is configured to check and install the files required for the automated test of the hook component of the front-end react framework, and execute the automated test code of the hook component of the front-end react framework when the automated test of the hook component of the front-end react framework is executed. The test file; the front-end react framework hook component has N hook files, where N is a positive integer; the generation unit is configured to generate an automated test case code according to each hook file in the front-end react framework hook component; according to All hook files in the hook component of the front-end react framework generate automated test case codes for all hook files; the display unit is configured to determine the dynamic value of each test case for each test case corresponding to all the automated test case codes ; Visually display the dynamic values associated with all test cases on the page; the displayed visual page is a page that can directly edit and modify any test case in the automated test case code of all hook files.

In some embodiments, the setting unit checks and installs the files required for the automated test of the front-end react framework hook component, and executes the front-end react framework hook component automated test code storage directory when executing the automated test of the front-end react framework hook component The test files, including: check and install the dependency files required for the automated testing of the hook component of the front-end react framework; set the storage directory of the automated test code of the hook component of the front-end react framework to store the generated automated test code of the hook component of the front-end react framework; set the configuration Item, to index the test file in the storage directory of the automated test code of the front-end react framework hook component in the configuration item, and execute the test file when the automated test of the hook component of the front-end react framework is executed.

In some embodiments, the generating unit generates an automated test case code according to each hook file in the hook component of the front-end react framework, including: the address of the hook component that needs to perform automated testing according to the configuration in the preset configuration item Array, traverse each element in the array, find each hook file corresponding to each element in the array, as each hook file that needs to be tested automatically; for each hook file that needs to be tested automatically, execute the generation automation The operation of the test case code generates the basic code of each hook file that needs to be tested automatically; the basic code of each hook file that needs to be tested automatically, recognizes the syntax of different scenarios, intelligently reverses the expected results, and generates the required results. The code of each hook file of automated testing is used as the test case code corresponding to each hook file that needs to be automated tested.

In some embodiments, the generating unit performs an operation of generating automated test case codes for each hook file that needs to be automated testing, and generates basic code for each hook file that needs to be automated testing, including: creating a front-end react The storage directory of the automated test code of the framework hook component. In the folder where the storage directory is located, a blank file corresponding to each hook file that needs to be automatically tested is generated; through the first setting syntax, the unsimulated hook components, The renderHook device that simulates the rendering of the hook component, and the act device that simulates the external exposure function of the hook component are introduced into each hook file that needs to be automated. The test case corresponding to a hook file is wrapped to get the basic code of each hook file that needs to be automated.

In some embodiments, the generating unit, the basic code of each hook file for automated testing as required, identifies different scene syntaxes, intelligently deduces expected results in reverse, and generates each hook file that requires automated testing The code, as the test case code corresponding to each hook file that needs to be automated, includes: For unsimulated hook components, in the variables that are output externally through the return keyword at the end of the function, the variables are judged by typeof , if the result is 'function', then reverse the lookup in the hook code of the unsimulated hook component, the complete code block of the function name of the function in the code block of the hook code of the unsimulated hook component For the operation of the variable, the case and result of the variable execution are deduced in reverse; if the useEffect function appears in the unsimulated hook component, it is determined that there is a dependency update event in the hook file of the unsimulated hook component, Simulate the dependency update event in the hook component to obtain the automated test code; and when the automated test code has been modified, simulate the triggering of the update event by the value of the modified dependency variable of the automated test code. implement.

In some embodiments, the display unit displays the dynamic values associated with all test cases on a page, including: after all test cases are generated, generating a page display file with the dynamic values associated with all test cases; By executing the setting command, the browser accesses the page address and opens the page; on the page, the content including the names of all hook components and the description list of all test cases for each component is displayed.

Matching with the above-mentioned device, another aspect of the present invention provides a terminal, including: the above-mentioned implementation device of the automatic test tool.

Matching with the above method, another aspect of the present invention provides an automated test tool, the automated test tool is obtained by the above-mentioned implementation method of the automated test tool.

Matching with the above method, another aspect of the present invention provides a storage medium, the storage medium includes a stored program, wherein when the program runs, the device where the storage medium is located is controlled to execute the automatic test tool described above. Implementation.

Therefore, the solution of the present invention, by setting up a front-end react framework hook component automated testing tool, the implementation method of the front-end react framework hook component automated testing tool mainly includes: checking and installing the front-end react framework hook component automated testing. file, and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component; according to each hook file in the front-end react framework hook component, generate the automated test case code; The dynamic value associated with the test case can be displayed visually on the page, and it supports direct editing and modification on the page, so as to realize the purpose of modifying the test case on the visual interface; thus, by setting the front-end react framework hook component automation test tool, after the developer completes the code , Using this tool, you can generate automated test code for hook components, which can reduce labor costs and maintenance costs.

Other features and advantages of the present invention will be set forth in the description which follows, and in part will be apparent from the description, or may be learned by practice of the invention.

The technical solutions of the present invention will be further described in detail below through the accompanying drawings and embodiments.

Description of drawings

1 is a schematic flowchart of an embodiment of an implementation method of an automated testing tool of the present invention;

2 is a schematic flowchart of an embodiment of setting files required for automated testing of front-end react framework hook components in the method of the present invention;

3 is a schematic flowchart of an embodiment of generating an automated test case code for each hook file in the method of the present invention;

4 is a schematic flowchart of an embodiment of generating the basic code of each hook file in the method of the present invention;

5 is a schematic flowchart of an embodiment of generating a test case code corresponding to each hook file in the method of the present invention;

6 is a schematic flowchart of an embodiment of visually displaying all test cases on a page in the method of the present invention;

FIG. 7 is a schematic structural diagram of an embodiment of an apparatus for implementing an automated testing tool of the present invention.

With reference to the accompanying drawings, the reference numerals in the embodiments of the present invention are as follows:

102-setting unit; 104-generating unit; 106-displaying unit.

Detailed ways

In order to make the objectives, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below with reference to the specific embodiments of the present invention and the corresponding drawings. Obviously, the described embodiments are only some, but not all, embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

Considering that the hook component of the front-end react framework, after the code transformation is completed, when testing whether the transformed code can be perfectly compatible with the original functional logic, the project introduces and adds automated testing, there will be some thresholds:

(1) The writing of automated test code requires a considerable knowledge reserve of grammar. For developers, it is equivalent to additionally learning languages other than business logic. At present, most of the automated tests are still used in large-scale projects of large companies, and this part of the talent on the market is not easy to recruit.

(2) The automated test code requires long-term maintenance. When new requirements are added, or the original components need to be modified in some scenarios, the automated test code needs to be added with test case code. As the components become more and more abundant, and the coding styles of different automation code developers are different, the maintenance cost is also getting higher and higher.

(3) Automated test cases, if adjustments are needed, only developers can modify the code to make adjustments. Other team members such as testers, product managers, etc. want to adjust test cases for different scenarios by themselves, they can only ask development colleagues to help add additional Test Case.

At present, there is no tool in the industry that can solve this problem well.

At least for the hook component of the front-end react framework, after the code transformation is completed, when testing whether the transformed code can be perfectly compatible with the original functional logic, an automated test is introduced and added, which has the problem of high labor cost and maintenance cost. The solution of the present invention , which provides an automated testing tool, specifically a front-end react framework hook component automated testing tool. The implementation and usage of the tool will be exemplarily described below with reference to the accompanying drawings.

According to an embodiment of the present invention, an implementation method of an automated testing tool is provided, as shown in FIG. 1 , a schematic flowchart of an embodiment of the method of the present invention. The automated testing tool includes: a front-end react framework hook component automated testing tool. The implementation method of the front-end react framework hook component automated testing tool includes steps S110 to S130.

At step S110, check and install the files required for the automated testing of the front-end react framework hook component, and execute the test files in the storage directory of the automated testing code of the front-end react framework hook component when executing the automated testing of the front-end react framework hook component. The front-end react framework hook component has N hook files, where N is a positive integer.

In some embodiments, in step S110, the files required for the automated test of the hook component of the front-end react framework are checked and installed, and the test in the storage directory of the automated test code of the hook component of the front-end react framework is executed when the automated test of the hook component of the front-end react framework is executed. For the specific process of the file, please refer to the following exemplary description.

Below in conjunction with the method of the present invention shown in Figure 2, an embodiment flow diagram of setting the files required for the automated testing of the front-end react framework hook component will further illustrate the specific process of setting the files required for the automated testing of the front-end react framework hook component, including: Steps S210 to S230.

Step S210, check and install the dependency files required for the automated testing of the hook component of the front-end react framework.

For example: when the build command is started, it will search the package.json file in the project, the devDependencies object, whether the automated testing framework library jest and @testing-library/react-hooks used for the simulation trigger hook component are included. . If not included, it will be launched with the following syntax: npm install jest@testing-library/react-hook-D.

Step S220, setting a storage directory for the automated test code of the hook component of the front-end react framework, so as to store the generated automated test code of the hook component of the front-end react framework.

For example: in the root directory of the project, generate a folder named autotest. The purpose is: During the execution of the following step 2, the generated automated test code will be created in this folder according to the following rules for the automated test code of the hook component. The rule is: original component name + .test.js.

Step S230, setting a configuration item to index the test file in the configuration item in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the hook component of the front-end react framework, and execute the test file.

For example: set the basic configuration of jest in the package.json file, the core configuration item is "testRegex", and set its value to the configuration file (/autotest/)$.

At step S120, an automated test case code is generated according to each hook file in the hook component of the front-end react framework. According to all the hook files in the hook component of the front-end react framework, the automated test case code of all the hook files is generated.

In some embodiments, in step S120, for the specific process of generating an automated test case code according to each hook file in the hook component of the front-end react framework, see the following exemplary description.

Below in conjunction with the method of the present invention shown in FIG. 3, a schematic flow chart of an embodiment of generating an automated test case code for each hook file will further illustrate the specific process of generating an automated test case code for each hook file, including: Step S310 Go to step S330.

Step S310, traverse each element in the array according to the array of hook component addresses configured in the preset configuration item and need to perform automated testing, and find each hook file corresponding to each element in the array, as the need to automate Every hook file tested.

For example, in the configuration file config.js, configure an array of hook component addresses that need to be automated testing, find each corresponding hook file by traversing each element in the array, and perform subsequent operations to generate automated test case code.

Step S320, for each hook file that needs to be automated testing, perform the operation of generating automated test case code, and generate the basic code of each hook file that needs to be automated testing.

In some embodiments, in step S320, for each hook file that needs to be automated testing, the operation of generating the automated test case code is performed, and the specific process of generating the basic code of each hook file that needs to be automated testing, see the following exemplary illustrate.

The specific process of generating the basic code of each hook file is further described below with reference to the schematic flowchart of an embodiment of generating the basic code of each hook file in the method of the present invention shown in FIG. 4 , including steps S410 to S430.

Step S410, creating a storage directory for the automated test code of the hook component of the front-end react framework, and generating a blank file corresponding to each hook file that needs to be automated testing in the folder where the storage directory is located.

For example: Assuming that the current hook component is named A, in the autotest folder created in the previous preparations, a blank file named A.test.js corresponding to the hook file is generated.

Step S420, through the first setting syntax, introduce the unsimulated hook component, the renderHook method that simulates the rendering of the hook component, and the act method that simulates triggering the external exposure function of the hook component into each hook file that needs to be automated. .

For example, through the import syntax, the unsimulated hook component, the renderHook method that simulates the rendering of the hook component, and the act method that simulates the external exposure function of the hook component are introduced into the test file.

Step S430, through the second setting syntax, wrap the test case corresponding to each hook file that needs to be automated testing to be generated to obtain the basic code of each hook file that needs to be automated The test case corresponding to each hook file of the automated test is grouped and defined according to the set file level range, so as to distinguish according to the content of the group definition when the later test result is output.

For example: through the syntax, describe('A hook autotest',()=>{test case code}), wrap the test case to be generated, and use it to carry out a scope of the test case of the file according to the scope of the file level When the test results are output later, they will be distinguished according to the content defined by the group (ie A hookautotest).

Step S330, according to the basic code of each hook file for automated testing, identify different scene grammars, intelligently reverse the expected result, and generate the code of each hook file that needs to be automated testing, as each hook file that needs to be automated testing. The test case code corresponding to a hook file.

In some embodiments, in step S330, according to the basic code of each hook file for automated testing, different scene syntaxes are identified, the expected result is intelligently reversed, and the code of each hook file that needs to be automated tested is generated as For the specific process of the test case code corresponding to each hook file that needs to be automated, see the following exemplary description.

The specific process of generating the test case code corresponding to each hook file is further described below in conjunction with the schematic flow chart of an embodiment of generating the test case code corresponding to each hook file in the method of the present invention shown in FIG. 5, including: Step S510 and step S520.

Step S510, for the unsimulated hook component, in the variable that is output to the outside through the return keyword at the end of the function, the variable is judged by typeof. If the result obtained is 'function', it means that the hook component has an external output function. For external calls, and further, in the hook code of the unsimulated hook component, the complete code block about the function name of the function is in the code block of the hook code of the unsimulated hook component for the variable Actions to reverse the case and result of the variable execution.

Specifically, it recognizes the syntax of different scenarios, intelligently reverses the expected results, and generates test case code. The step may further include: testing the external output function.

When the unsimulated hook component has variables that are output to the outside through the return keyword at the end of the function, by judging the variable by typeof, if the result is 'function', it means that the hook component has an external output function to the outside. transfer. In the reverse lookup hook code, the complete code block of the function name of the function is the operation of the variable within the code block of the hook code of the unsimulated hook component, so as to reversely deduce the case and result of the variable execution . The specific rules are as follows:

(11) The initialization code of the variable is found through the useState keyword. When the useState method is executed, the incoming parameter is the initialization value of the variable. Perform typeof judgment on its value, and the result obtained is the data type of the initialized value.

(12) Through the code block, operations involving the variable, such as +, -, *, / operations. A distinction needs to be made here for the + sign. If the data type of the variable's initial value is number, the + sign indicates a mathematical operation. If the data type of the initial value is a string, the + sign indicates the concatenation operation of the string. Other operators such as -, *, / all represent mathematical operations. For the simplest example, the initial value of the variable is the number 10. In the code, the operation of *Math.randon() is performed on the variable. Because of Math.randon(), it will randomly output between 0-1 is a random number, the output result can be predicted as 0-10. Similarly, if the initial value of the variable is the string hello, and the operation on the variable + 'world' is performed, the output result can be predicted as helloworld.

(13) After judging and obtaining the prediction result, it is necessary to generate automated test code. First, through the syntax, it('case description', ()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the method name in the original hook file + case.

Then inside the curly braces, the renderHook method is used to simulate the completion of the rendering of the hook component, and then the act method is used to simulate and trigger the corresponding method in the original hook file. Through the syntax expect(variable used in the method).toBe(the predicted result), the result obtained may be true or false, and only true indicates that the case passed.

Step S520, if the useEffect function appears in the unsimulated hook component, then determine that there is a dependency update event in the hook file of the unsimulated hook component, simulate the dependency update event in the hook component, and obtain an automated test code; When the automated test code has been modified, the execution of the update event is simulated and triggered by the value of the modified dependency variable of the automated test code.

Specifically, for the simulation of the dependency update event in the hook component, the specific implementation is as follows:

(21) Since hooks are used to update dependencies, they are implemented through the useEffect method provided by react. Therefore, if the useEffect function appears in the original hook component (ie, the unsimulated hook component). The first input parameter of this function is an anonymous arrow function, and the content of the function is to perform operations on dependent variables. The second input parameter of the function can be nothing, an empty array, or an array with elements. When the second input parameter of the function has a value and is a non-empty array, and the array contains the variables in the hook component, it means that there are dependent update events in the hook file.

(22) Through the useState keyword, find the variable initialization definition code involved in the array of the second parameter in the useEffect method. When the useState method is executed, the incoming parameters get the initialized value of the variable (assumed value for a). In the anonymous arrow function in the useEffect method, the modified value of the variable is obtained as the value of the variable that needs to be changed after the dependency update (assuming the value is b). The predicted result is that when the dependency changes, the value of the variable should be changed from a to b.

(23) After judging and obtaining the prediction result, it is necessary to generate automated test code. First, through the syntax, it('case description', ()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the method name in the original hook file + case.

Then inside the curly braces, simulate the rendering completion event of the hook component through the renderHook method. And when the automated test code has been modified, the execution of the update event is simulated and triggered by the value of the modified dependency variable of the automated test code.

After that, through the syntax expect(a).toBe(b), the result may be true or false, only true means the case passed.

At step S130, for each test case corresponding to all the automated test case codes, a dynamic value of each test case is determined. Visually display the dynamic values associated with all test cases on the page; the displayed visual page is a page that can directly edit and modify any test case in the automated test case code of all hook files. That is to say, the displayed visual page supports editing and modification directly on the page, so as to realize the modification of any test case among all the test cases described in the visual interface.

The solution of the present invention provides an automated testing tool for hook components of a front-end react framework. For large-scale front-end projects, by using this tool, developers can generate automated testing codes for hook components after completing the code, without mastering the automation of react hooks The syntax related to the test code can also make the project have the function of automated testing, which can detect and modify problems in time, and avoid problems from being brought into production. Therefore, by setting up the front-end react framework hook component automated testing tools, developers can After completing the code, using this tool, the automated test code of the hook component can be generated, which can reduce labor costs and maintenance costs.

In some embodiments, for the specific process of visually displaying the dynamic values associated with all test cases in step S130, please refer to the following exemplary description.

The specific process of visually displaying all test cases on the page is further described below with reference to the schematic flowchart of an embodiment of the method of the present invention shown in FIG. 6 , including steps S610 to S630.

Step S610, after all test cases are generated, generate a page display file with dynamic values associated with all test cases.

Step S620, by executing the setting command, the browser accesses the page address and opens the page.

Step S630, on the page, display the content including the names of all hook components and the description list of all test cases for each component.

Specifically, when all test cases are generated, an html page display file will be generated. Furthermore, by executing the command npm run show-test-case, locally in the project, a locally enabled server will be started through nodejs, and the address of http://192.168.3.2:8080/case.html can be opened through a browser. this page.

Furthermore, on the page, the contents of the list including all hook component names and all test case descriptions for each component are displayed. For a and b in expect(a).toBe(b) in the test code, two input boxes are provided, which can give the user the right to edit. When the editing is completed, click Save, and the interface provided by the locally enabled server to modify the local file will be called, and the interface will modify the local automated test code file. This realizes the visual interface modification test case.

When using the front-end react framework hook component automated testing tool, you can import the tool, that is, introduce the tool first. Specifically, you can locate the root directory of the current project on the command line (the mac system is the terminal), execute the command, npm ireact-hook-autotest-tool-D, and you can add the tool to the current framework project.

Then, set the configuration file config.js. The configuration file configuration content is: the address of the hook component that needs to be tested automatically, which is written in the form of an array, such as [./component/A component, ./component/B component, ./component/ C component].

Further, the project is built. On the command line (the mac system is the terminal), locate the root directory of the current project, execute the command build command, npm run create-hook-autotest, during the execution process, the following core principles will be involved in the calling sequence execution. After the execution is completed, the corresponding automated test code will be generated, as well as the html file for visual editing of test case input parameters and results.

The solution of the present invention provides an automated testing tool for the hook component of the front-end react framework. For large-scale front-end projects, by using this tool, the automated testing code of the hook component can be generated, and the labor cost and maintenance cost are low.

For example, after completing the code, the developer can realize the automated test code for generating the hook component without mastering the syntax related to the react hook automated test code, and can also make the project have the function of automated testing, so that problems can be found and corrected in time. , to prevent problems from being brought into production.

Another example: the personnel structure of the company has also been optimized. First of all, for testers, automated test cases can already cover 50% of manual test scenarios, which reduces the testing workload of testers and saves the investment of company testers. Furthermore, in the process of recruiting developers, the requirements for writing automated test codes can be relaxed, reducing the pressure on recruitment.

Another example: automated test codes are generated by tools according to established rules and have a unified coding style. If manual reading and maintenance are required later, the corresponding labor input costs can also be reduced.

Another example: Provides a visual editing and modification interface for test cases. When developers need to actively modify test cases, they can adjust test cases without finding the corresponding source code, and also provide non-developers when they need to modify test cases. Modified channel.

Using the technical solution of this embodiment, by setting up a front-end react framework hook component automated testing tool, the implementation method of the front-end react framework hook component automated testing tool mainly includes: checking and installing the front-end react framework hook components required for automated testing file, and execute the test file in the storage directory of the automated test code of the hook component of the front-end react framework when executing the automated test of the hook component of the front-end react framework. Generate automated test case code according to each hook file in the hook component of the front-end react framework. Visually display the dynamic values associated with all test cases on the page, and support direct editing and modification on the page to achieve the purpose of modifying test cases on the visual interface. Therefore, by setting up an automated testing tool for the hook component of the front-end react framework, after the developer completes the code, the tool can be used to generate the automated test code of the hook component, which can reduce labor costs and maintenance costs.

According to an embodiment of the present invention, an implementation device of an automated test tool corresponding to the implementation method of an automated test tool is also provided. Referring to FIG. 7, a schematic structural diagram of an embodiment of the device of the present invention is shown. The automated testing tool includes: a front-end react framework hook component automated testing tool. The implementation device of the front-end react framework hook component automated testing tool includes: a setting unit 102 , a generating unit 104 and a display unit 106 .

Wherein, the setting unit 102 is configured to check and install the files required for the automatic test of the front-end react framework hook component, and execute the test under the storage directory of the automatic test code of the front-end react framework hook component when executing the automatic test of the front-end react framework hook component document. The front-end react framework hook component has N hook files, where N is a positive integer. For the specific function and processing of the setting unit 102, refer to step S110.

In some embodiments, the setting unit 102 checks and installs the files required for the automated test of the hook component of the front-end react framework, and executes the storage directory of the automated test code of the hook component of the front-end react framework when executing the automated test of the hook component of the front-end react framework The test files below include:

The setting unit 102 is further configured to check and install the dependency files required for automated testing of the hook component of the front-end react framework. For specific functions and processing of the setting unit 102, refer to step S210.

For example: when the build command is started, it will search the package.json file in the project, the devDependencies object, whether the automated testing framework library jest and @testing-library/react-hooks used for the simulation trigger hook component are included. . If not included, it will be launched with the following syntax: npm install jest@testing-library/react-hook-D.

The setting unit 102 is further configured to set a storage directory for the automated test code of the hook component of the front-end react framework, so as to store the generated automated test code of the hook component of the front-end react framework. For specific functions and processing of the setting unit 102, refer to step S220.

For example: in the root directory of the project, generate a folder named autotest. The purpose is: During the execution of the following step 2, the generated automated test code will be created in this folder according to the following rules for the automated test code of the hook component. The rule is: original component name + .test.js.

The setting unit 102 is also specifically configured to set a configuration item to index the test file in the storage directory of the automated test code of the front-end react framework hook component in the configuration item when performing the automated test of the hook component of the front-end react framework, and execute the test file. the test file. For specific functions and processing of the setting unit 102, refer to step S230.

For example: set the basic configuration of jest in the package.json file, the core configuration item is "testRegex", and set its value to the configuration file (/autotest/)$.

The generating unit 104 is configured to generate an automated test case code according to each hook file in the hook component of the front-end react framework. According to all the hook files in the hook component of the front-end react framework, the automated test case code of all the hook files is generated. Refer to step S120 for the specific function and processing of the generating unit 104 .

In some embodiments, the generating unit 104 generates an automated test case code according to each hook file in the hook component of the front-end react framework, including:

The generating unit 104 is also specifically configured to traverse each element in the array according to the array of hook component addresses configured in the preset configuration items and need to perform automated testing, and find each element corresponding to each element in the array. A hook file for each hook file that needs to be automated. For the specific function and processing of the generating unit 104, refer to step S310.

For example, in the configuration file config.js, configure an array of hook component addresses that need to be automated testing, find each corresponding hook file by traversing each element in the array, and perform subsequent operations to generate automated test case code.

The generating unit 104 is further configured to perform an operation of generating automated test case codes for each hook file that needs to be automated testing, and generate basic code for each hook file that needs to be automated testing. For the specific function and processing of the generating unit 104, refer to step S320.

In some embodiments, the generating unit 104 performs an operation of generating automated test case codes for each hook file that needs to be automated testing, and generates the basic code of each hook file that needs to be automated testing, including:

The generating unit 104 is further configured to create a storage directory for the automated test code of the hook component of the front-end react framework, and in the folder where the storage directory is located, generate a blank file corresponding to each hook file that needs to be automated tested. For the specific function and processing of the generating unit 104, refer to step S410.

For example: Assuming that the current hook component is named A, in the autotest folder created in the previous preparation, a blank file named A.test.js corresponding to the hook file is generated.

The generating unit 104 is also specifically configured to introduce the unsimulated hook component, the renderHook device that simulates the rendering of the hook component, and the act device that simulates triggering the external exposure function of the hook component into the need to perform the first setting syntax. in each hook file of automated tests. For the specific function and processing of the generating unit 104, refer to step S420.

For example, through the import syntax, the unsimulated hook component, the renderHook device that simulates the rendering of the hook component, and the act device that simulates the external exposure function of the hook component are introduced into the test file.

The generating unit 104 is also specifically configured to wrap the test case corresponding to each hook file that needs to be automatically tested to be generated to obtain each hook file that needs to be automatically tested through the second setting syntax. The basic code of , to group and define the test cases corresponding to each hook file that needs to be automated testing according to the set file level range, so as to distinguish according to the content of the group definition when the later test results are output. For the specific function and processing of the generating unit 104, refer to step S430.

For example: through the syntax, describe('A hook autotest',()=>{test case code}), wrap the test case to be generated, and use it to carry out a scope of the test case of the file according to the scope of the file level When the test results are output later, they will be distinguished according to the content defined by the group (ie A hookautotest).

The generating unit 104 is specifically configured to perform the basic code of each hook file for automated testing as required, identify different scene syntaxes, intelligently reverse deduce the expected result, and generate the code for each hook file that needs to perform automated testing. , as the test case code corresponding to each hook file that needs to be automated. For the specific function and processing of the generating unit 104, refer to step S330.

In some embodiments, the generating unit 104, the basic code of each hook file for automated testing according to needs, identifies different scene syntaxes, intelligently reverses the expected results, and generates each hook that needs to be automated testing. The code of the file, as the test case code corresponding to each hook file that needs to be automated, includes:

The generating unit 104 is also specifically configured to, for the unsimulated hook component, at the end of the function, there is a variable that is output externally through the return keyword, by judging the variable by typeof, if the result obtained is 'function', Then, in the hook code of the unsimulated hook component, the complete code block of the function name of the function is reversed. The operation of the variable in the code block of the hook code of the unsimulated hook component is reversed. Derive cases and outcomes of variable execution. For the specific function and processing of the generating unit 104, refer to step S510.

Specifically, it recognizes the syntax of different scenarios, intelligently reverses the expected results, and generates test case code. The step may further include: testing the external output function.

When the unsimulated hook component has variables that are output to the outside through the return keyword at the end of the function, by judging the variable by typeof, if the result is 'function', it means that the hook component has an external output function to the outside. transfer. In the reverse lookup hook code, the complete code block of the function name of the function is the operation of the variable within the code block of the hook code of the unsimulated hook component, so as to reversely deduce the case and result of the variable execution . The specific rules are as follows:

(11) Through the useState keyword, the initialization code of the variable is found. When executing through the useState device, the incoming parameter is the initialization value of the variable. Perform typeof judgment on its value, and the result obtained is the data type of the initialized value.

(12) Through the code block, operations involving the variable, such as +, -, *, / operations. A distinction needs to be made here for the + sign. If the data type of the variable's initial value is number, the + sign indicates a mathematical operation. If the data type of the initial value is a string, the + sign indicates the concatenation operation of the string. Other operators such as -, *, / all represent mathematical operations. For the simplest example, the initial value of the variable is the number 10. In the code, the operation of *Math.randon() is performed on the variable. Because of Math.randon(), it will randomly output between 0-1 is a random number, the output result can be predicted as 0-10. Similarly, if the initial value of the variable is the string hello, and the operation on the variable + 'world' is performed, the output result can be predicted as helloworld.

(13) After judging and obtaining the prediction result, it is necessary to generate automated test code. First, through the syntax, it('case description',()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the device name in the original hook file + case.

Then, within the curly brackets, the rendering completion event of the hook component is simulated by the renderHook device, and then the corresponding device in the original hook file is simulated and triggered by the act device. Through the syntax expect(variable used in the device).toBe(predicted result), the result may be true or false, only true means the case passed.

The generating unit 104 is also specifically configured to, if the useEffect function appears in the unsimulated hook component, determine that there is a dependency update event in the hook file of the unsimulated hook component, and simulate the dependency update event in the hook component , to obtain the automated test code; and when the automated test code has been modified, the execution of an update event is simulated and triggered by the value of the modified dependent variable of the automated test code. For the specific function and processing of the generating unit 104, refer to step S520.

Specifically, for the simulation of the dependency update event in the hook component, the specific implementation is as follows:

(21) Since hooks are used to update dependencies, they are implemented through the useEffect device provided by react. Therefore, if the useEffect function appears in the original hook component (ie, the unsimulated hook component). The first input parameter of this function is an anonymous arrow function, and the content of the function is to perform operations on dependent variables. The second input parameter of the function can be nothing, an empty array, or an array with elements. When the second input parameter of the function has a value and is a non-empty array, and the array contains the variables in the hook component, it means that there are dependent update events in the hook file.

(22) Through the useState keyword, find the variable initialization definition code involved in the array of the second parameter in the useEffect device, and when the useState device is executed, the incoming parameters get the initialized value of the variable (assumed value for a). In the anonymous arrow function in the useEffect device, the modified value of the variable is obtained as the value of the variable that needs to be changed after the dependency update (assuming the value is b). The predicted result is that when the dependency changes, the value of the variable should be changed from a to b.

(23) After judging and obtaining the prediction result, it is necessary to generate automated test code. First, through the syntax, it('case description',()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the device name in the original hook file + case.

Then inside the curly braces, the rendering completion event of the hook component is simulated by the renderHook device. And when the automated test code has been modified, the execution of the update event is simulated and triggered by the value of the modified dependency variable of the automated test code.

After that, through the syntax expect(a).toBe(b), the result may be true or false, only true means the case passed.

The presentation unit 106 is configured to, for each test case corresponding to all the automated test case codes, determine the dynamic value of each test case. Visually display the dynamic values associated with all test cases on the page; the displayed visual page is a page that can directly edit and modify any test case in the automated test case code of all hook files. That is to say, the displayed visual page supports editing and modification directly on the page, so as to realize the modification of any test case among all the test cases described in the visual interface. Refer to step S130 for specific functions and processing of the display unit 106 .

The solution of the present invention provides an automated testing tool for hook components of a front-end react framework. For large-scale front-end projects, by using this tool, developers can generate automated testing codes for hook components after completing the code, without mastering the automation of react hooks The syntax related to the test code can also make the project have the function of automated testing, which can detect and modify problems in time, and avoid problems from being brought into production. Therefore, by setting up the front-end react framework hook component automated testing tools, developers can After completing the code, using this tool, the automated test code of the hook component can be generated, which can reduce labor costs and maintenance costs.

In some embodiments, the display unit 106 visually displays the dynamic values associated with all test cases on a page, including:

The display unit 106 is specifically configured to generate a page display file with dynamic values associated with all test cases after all test cases are generated. For specific functions and processing of the display unit 106, refer to step S610.

The display unit 106 is further configured to, by executing the setting command, access the address of the page by the browser, and open the page. For specific functions and processing of the display unit 106, refer to step S620.

The display unit 106 is specifically configured to display, on the page, the content including the names of all hook components and the description list of all test cases of each component. For the specific function and processing of the display unit 106, refer to step S630.

Specifically, when all test cases are generated, an html page display file will be generated. Furthermore, by executing the command npm run show-test-case, locally in the project, a locally enabled server will be started through nodejs, and the address of http://192.168.3.2:8080/case.html can be opened through a browser. this page.

Furthermore, on the page, the contents of the list including all hook component names and all test case descriptions for each component are displayed. For a and b in expect(a).toBe(b) in the test code, two input boxes are provided, which can give the user the right to edit. When the editing is completed, click Save, and the interface provided by the locally enabled server to modify the local file will be called, and the interface will modify the local automated test code file. This realizes the visual interface modification test case.

When using the front-end react framework hook component automated testing tool, you can import the tool, that is, introduce the tool first. Specifically, you can locate the root directory of the current project on the command line (the mac system is the terminal), execute the command, npm ireact-hook-autotest-tool-D, and you can add the tool to the current framework project.

Then, set the configuration file config.js. The configuration file configuration content is: the address of the hook component that needs to be tested automatically, which is written in the form of an array, such as [./component/A component, ./component/B component, ./component/ C component].

Further, the project is built. On the command line (the mac system is the terminal), locate the root directory of the current project, execute the command build command, npm run create-hook-autotest, during the execution process, the following core principles will be involved in the calling sequence execution. After the execution is completed, the corresponding automated test code will be generated, as well as the html file for visual editing of test case input parameters and results.

The solution of the present invention provides an automated testing tool for the hook component of the front-end react framework. For large-scale front-end projects, by using this tool, the automated testing code of the hook component can be generated, and the labor cost and maintenance cost are low.

For example, after completing the code, the developer can realize the automated test code for generating the hook component without mastering the syntax related to the react hook automated test code, and can also make the project have the function of automated testing, so that problems can be found and corrected in time. , to prevent problems from being brought into production.

Another example: the personnel structure of the company has also been optimized. First of all, for testers, automated test cases can already cover 50% of manual test scenarios, which reduces the testing workload of testers and saves the investment of company testers. Furthermore, in the process of recruiting developers, the requirements for writing automated test codes can be relaxed, reducing the pressure on recruitment.

Another example: automated test codes are generated by tools according to established rules and have a unified coding style. If manual reading and maintenance are required later, the corresponding labor input costs can also be reduced.

Another example: Provides a visual editing and modification interface for test cases. When developers need to actively modify test cases, they can adjust test cases without finding the corresponding source code, and also provide non-developers when they need to modify test cases. Modified channel.

Since the processing and functions implemented by the device in this embodiment basically correspond to the embodiments, principles, and examples of the foregoing methods, the description of this embodiment is not detailed, and reference may be made to the relevant descriptions in the foregoing embodiments. Do repeat.

By adopting the technical scheme of the present invention, by setting up a front-end react framework hook component automated testing tool, the implementation of the front-end react framework hook component automated testing tool mainly includes: checking and installing the files required for the front-end react framework hook component automated testing , and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component; according to each hook file in the front-end react framework hook component, generate the automated test case code; The dynamic value associated with the case can be displayed visually on the page, and it supports direct editing and modification on the page, so as to realize the purpose of modifying the test case in the visual interface; for large-scale front-end projects, by using this tool, the developer can generate the code after completing the code. The automated test code of the hook component does not need to master the syntax related to the react hook automated test code, but also enables the project to have the function of automated testing, which can detect problems in time, modify them, and prevent problems from being brought into production.

According to an embodiment of the present invention, a terminal corresponding to an implementation device of an automated test tool is also provided. The terminal may include: an implementation device of the above-mentioned automated testing tool.

Since the processing and functions implemented by the terminal in this embodiment basically correspond to the embodiments, principles, and examples of the foregoing apparatus, the description of this embodiment is not detailed, and reference may be made to the relevant descriptions in the foregoing embodiments, which are not described here. Do repeat.

By adopting the technical scheme of the present invention, by setting up a front-end react framework hook component automated testing tool, the implementation of the front-end react framework hook component automated testing tool mainly includes: checking and installing the files required for the front-end react framework hook component automated testing , and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component; according to each hook file in the front-end react framework hook component, generate the automated test case code; The dynamic value associated with the case can be displayed visually on the page, and it supports direct editing and modification on the page, so as to realize the purpose of modifying the test case on the visual interface; for large-scale front-end projects, by using this tool, the company's personnel structure has also been obtained. Optimization: First of all, for testers, automated test cases can already cover 50% of manual test scenarios, which reduces the testing workload of testers and saves the investment of company testers; Requirements for automated test code writing can be relaxed, reducing recruitment pressure.

According to an embodiment of the present invention, an automated test tool corresponding to the implementation method of the automated test tool is also provided, and the automated test tool is obtained by the above-described implementation method of the automated test tool.

The implementation method of a front-end react framework hook component automated testing tool proposed by the solution of the present invention mainly includes the following steps:

Step 1. Check and install the files required for the automated test of the front-end react framework hook component, and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component.

This step is the preparatory work, which can specifically include:

Step 1-1. Check and install the dependency files required for automated testing.

For example: when the build command is started, it will search the package.json file in the project, the devDependencies object, whether the automated testing framework library jest and @testing-library/react-hooks used for the simulation trigger hook component are included. . If not included, it will be launched with the following syntax: npm install jest@testing-library/react-hook-D.

Step 1-2, generate an automated test code storage directory to store the generated automated test code.

For example: in the root directory of the project, generate a folder named autotest. The purpose is: During the execution of the following step 2, the generated automated test code will be created in this folder according to the following rules for the automated test code of the hook component. The rule is: original component name + .test.js.

Steps 1-3, set configuration items to index the test files in this directory and execute them when executing automated tests.

For example: set the basic configuration of jest in the package.json file, the core configuration item is "testRegex", and set its value to the configuration file (/autotest/)$.

Step 2. Generate automated test case code according to each hook file in the hook component of the front-end react framework.

This step can specifically include:

Step 2-1. Find the hook file to be automated test.

For example, in the configuration file config.js, configure the array of hook component addresses that need to be automated testing, and find each corresponding hook file by traversing each element in the array. And perform subsequent operations to generate automated test case code.

Step 2-2. Generate the basic code of the test file. For example, it can be assumed that the name of the current hook component is A. This step may further include:

Step 2-2.1. In the autotest folder created in the preparatory work, generate a blank file named A.test.js corresponding to the hook file.

Step 2-2.2, through the import syntax, introduce the unsimulated hook component, the renderHook method that simulates the rendering of the hook component, and the act method that simulates triggering the external exposure function of the hook component into the test file.

Step 2-2.3, through the syntax, describe('A hook autotest',()=>{test case code}), wrap the test case to be generated, and use it to make the test case of the file according to the scope of the file level, A range of grouping is defined, and when the later test results are output, they will be distinguished according to the content of the grouping definition (ie A hookautotest).

Steps 2-3, identify the syntax of different scenarios, intelligently reverse the expected results, and generate test case codes. This step may further include:

Step 2-3.1. Test the external output function.

When the unsimulated hook component has variables that are output to the outside through the return keyword at the end of the function, by judging the variable by typeof, if the result is 'function', it means that the hook component has an external output function to the outside. transfer. In the reverse lookup hook code, the complete code block of the function name of the function is the operation of the variable within the code block of the hook code of the unsimulated hook component, so as to reversely deduce the case and result of the variable execution . The specific rules are as follows:

Step 2-3.1.1. Use the useState keyword to find the initialization code of the variable. When the useState method is executed, the parameter passed in is the initialization value of the variable. Perform typeof judgment on its value, and the result obtained is the data type of the initialized value.

Step 2-3.1.2. Through the code block, operations involving the variable, such as +, -, *, / operations. A distinction needs to be made here for the + sign. If the data type of the variable's initial value is number, the + sign indicates a mathematical operation. If the data type of the initial value is a string, the + sign indicates the concatenation operation of the string. Other operators such as -, *, / all represent mathematical operations. For the simplest example, the initial value of the variable is the number 10. In the code, the operation of *Math.randon() is performed on the variable. Because of Math.randon(), it will randomly output between 0-1 is a random number, the output result can be predicted as 0-10. Similarly, if the initial value of the variable is the string hello, and the operation on the variable + 'world' is performed, the output result can be predicted as helloworld.

Step 2-3.1.3. After judging and obtaining the prediction result, you need to generate automated test code. First, through the syntax, it('case description', ()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the method name in the original hook file + case.

Then inside the curly braces, the renderHook method is used to simulate the completion of the rendering of the hook component, and then the act method is used to simulate and trigger the corresponding method in the original hook file. Through the syntax expect(variable used in the method).toBe(the predicted result), the result obtained may be true or false, and only true indicates that the case passed.

Step 2-3.2, for the simulation of the dependency update event in the hook component, the specific implementation method is as follows:

Step 2-3.2.1. Because hooks are used to update dependencies, they are implemented through the useEffect method provided by react. Therefore, if the useEffect function appears in the original hook component (ie, the unsimulated hook component). The first input parameter of this function is an anonymous arrow function, and the content of the function is to perform operations on dependent variables. The second input parameter of the function can be nothing, an empty array, or an array with elements. When the second input parameter of the function has a value and is a non-empty array, and the array contains the variables in the hook component, it means that there are dependent update events in the hook file.

Step 2-3.2.2. Through the useState keyword, find the variable initialization definition code involved in the array of the second parameter in the useEffect method. When the useState method is executed, the incoming parameters get the initialization of the variable. value (assuming the value is a). In the anonymous arrow function in the useEffect method, the modified value of the variable is obtained as the value of the variable that needs to be changed after the dependency update (assuming the value is b). The predicted result is that when the dependency changes, the value of the variable should be changed from a to b.

Step 2-3.2.3. After judging and obtaining the prediction result, you need to generate automated test code. First, through the syntax, it('case description', ()=>{test code}), wrap the test case in curly brackets, where the case description is generated according to the following rules: the method name in the original hook file + case.

Then inside the curly braces, simulate the rendering completion event of the hook component through the renderHook method. And when the automated test code has been modified, the execution of the update event is simulated and triggered by the value of the modified dependency variable of the automated test code. Through the syntax expect(a).toBe(b), the result may be true or false, and only true means the case passes.

Step 3. Visually display the dynamic values associated with all test cases on the page; the displayed visual page is a page that can directly edit and modify any test case in the automated test case code of all hook files, so as to realize the modification test of the visual interface case.

This step can specifically include:

Step 3-1. When all test cases are generated, an html page display file will be generated.

Step 3-2. By executing the command npm run show-test-case, in the project local, a locally enabled server will be started through nodejs, and the address http://192.168.3.2:8080/case.html will be accessed through the browser , you can open this page.

Step 3-3. On the page, display the contents of the list including the names of all hook components and all test case descriptions for each component.

For a and b in expect(a).toBe(b) in the test code, two input boxes are provided, which can give the user the right to edit. When the editing is completed, click Save, and the interface provided by the locally enabled server to modify the local file will be called, and the interface will modify the local automated test code file. This realizes the visual interface modification test case.

How to use the automated testing tool for hook components of the front-end react framework, including:

Step 4-1. Tool introduction. On the command line (the mac system is the terminal), locate the root directory of the current project, execute the command, npm i react-hook-autotest-tool-D, you can add the tool to the current framework project.

Step 4-2, set the configuration file config.js, the configuration content of the configuration file is:

(1) The address of the hook component that needs to be automatically tested, written in the form of an array, such as [./component/A component, ./component/B component, ./component/C component].

Step 4-3, project construction. On the command line (the mac system is the terminal), locate the root directory of the current project, execute the command build command, npm run create-hook-autotest, during the execution process, the following core principles will be involved in the calling sequence execution. After the execution is completed, the corresponding automated test code will be generated, as well as the html file for visual editing of test case input parameters and results.

Since the processing and functions implemented by the storage medium in this embodiment basically correspond to the embodiments, principles, and examples of the foregoing methods, the descriptions of this embodiment are not detailed, and reference may be made to the relevant descriptions in the foregoing embodiments. I won't go into details.

By adopting the technical scheme of the present invention, by setting up a front-end react framework hook component automated testing tool, the implementation of the front-end react framework hook component automated testing tool mainly includes: checking and installing the files required for the front-end react framework hook component automated testing , and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component; according to each hook file in the front-end react framework hook component, generate the automated test case code; The dynamic value associated with the case is displayed on the page visually, so as to realize the purpose of modifying the test case on the visual interface; for large-scale front-end projects, by using this tool, the automated test code is generated by the tool according to the established rules, and has a unified coding style. It requires manual reading and maintenance, which can also reduce the corresponding human input cost.

According to an embodiment of the present invention, a storage medium corresponding to an implementation method of an automated testing tool is also provided, wherein the storage medium includes a stored program, wherein when the program runs, the device where the storage medium is located is controlled to execute the above The implementation method of the automatic test tool.

Since the processing and functions implemented by the storage medium in this embodiment basically correspond to the embodiments, principles, and examples of the foregoing methods, the descriptions of this embodiment are not detailed, and reference may be made to the relevant descriptions in the foregoing embodiments. I won't go into details.

By adopting the technical scheme of the present invention, by setting up a front-end react framework hook component automated testing tool, the implementation of the front-end react framework hook component automated testing tool mainly includes: checking and installing the files required for the front-end react framework hook component automated testing , and execute the test file in the storage directory of the automated test code of the front-end react framework hook component when executing the automated test of the front-end react framework hook component; according to each hook file in the front-end react framework hook component, generate the automated test case code; This tool provides a visual editing and modification interface for test cases. When developers need to actively modify test cases, they do not need to find the corresponding source code. The adjustment of the test case can be realized, and it also provides a modification channel for non-developers when they need to modify the test case.

To sum up, those skilled in the art can easily understand that, on the premise that there is no conflict, the above advantageous manners can be freely combined and superimposed.

The above description is only an embodiment of the present invention, and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included within the scope of the claims of the present invention.

Claims (10)

1. An implementation method of an automated testing tool, the automated testing tool comprising: the front-end act frame hook component automatic testing tool; the implementation method of the front-end exact frame hook component automatic testing tool comprises the following steps:

checking and installing files required by the front-end exact frame hook component automatic test, and executing test files under a storage directory of front-end exact frame hook component automatic test codes when the front-end exact frame hook component automatic test is executed; the front-end exact frame hook assembly is provided with N hook files, wherein N is a positive integer;

generating an automatic test case code according to each hook file in the front-end act frame hook assembly; generating automatic test case codes of all hook files according to all hook files in a front-end act framework hook assembly;

determining a dynamic value of each test case according to each test case corresponding to all the automatic test case codes; performing page visual display on the dynamic values associated with all the test cases; the displayed visual page is a page capable of directly editing and modifying any test case in the automatic test case codes of all hook files.

2. The method for implementing the automated testing tool according to claim 1, wherein the checking and installing of the files required for the automated testing of the front-end exact frame hook component and the executing of the test files under the storage directory of the automated testing code of the front-end exact frame hook component when the automated testing of the front-end exact frame hook component is executed comprise:

checking and installing a dependency file required by the front-end exact frame hook component automatic test;

setting a storage catalog of the front-end exact frame hook assembly automatic test codes to store the generated front-end exact frame hook assembly automatic test codes;

and setting a configuration item, so that when the front-end exact frame hook component automatic test is executed, a test file in a storage directory of the front-end exact frame hook component automatic test code in the configuration item is indexed, and the test file is executed.

3. The method of claim 2, wherein generating an automated test case code from each hook file in the front-end exact framework hook component comprises:

traversing each element in the array according to the array of hook component addresses which are configured in the preset configuration items and need to be automatically tested, and finding each hook file corresponding to each element in the array as each hook file which needs to be automatically tested;

aiming at each hook file needing to be automatically tested, executing the operation of generating an automatic test case code, and generating a basic code of each hook file needing to be automatically tested;

and identifying different scene grammars according to the basic codes of each hook file needing to be automatically tested, intelligently and reversely deducing expected results, and generating codes of each hook file needing to be automatically tested as test case codes corresponding to each hook file needing to be automatically tested.

4. The method for implementing the automated testing tool according to claim 3, wherein the executing the operation of generating the automated testing case code for each hook file to be automatically tested to generate the base code for each hook file to be automatically tested comprises:

creating a storage directory of automatic test codes of a front-end exact frame hook component, and generating blank files corresponding to each hook file needing to be subjected to automatic test in a folder where the storage directory is located;

introducing an unmarked hook component, a method renderHook for finishing the rendering of the simulated hook component and an act method for simulating and triggering the hook component to expose a function outwards into each hook file needing to be subjected to automatic testing through a first set grammar;

and packaging the test cases corresponding to each hook file to be generated and needing automatic testing through a second set grammar so as to obtain the basic code of each hook file to be automatically tested.

5. The method as claimed in claim 3, wherein the step of identifying different scenario grammars according to the basic code of each hook file requiring the automatic testing, intelligently and reversely deriving the expected result, and generating the code of each hook file requiring the automatic testing as the test case code corresponding to each hook file requiring the automatic testing comprises:

for the non-simulated hook component, in the variable which is output externally through the return keyword at the end of the function, by carrying out typeof judgment on the variable, if the obtained result is 'function', reversely searching the hook code of the non-simulated hook component, and reversely deducing the case and the result of the execution of the variable by operating the complete code block of the function name of the function on the variable in the code block of the hook code of the non-simulated hook component;

if a useEffect function appears in the hook assembly which is not simulated, determining that a dependent updating event exists in a hook file of the hook assembly which is not simulated, and simulating the dependent updating event in the hook assembly to obtain an automatic test code; and simulating execution of a trigger update event by the value of the modified dependent variable of the automated test code if the automated test code has been modified.

6. The method for implementing the automated testing tool according to any one of claims 1 to 5, wherein the page visualization presentation of the dynamic values associated with all the test cases comprises:

after all the test cases are generated, generating a page display file according to the dynamic values associated with all the test cases;

by executing a set command, the browser accesses a page address and opens the page;

on the page, the content is shown containing all hook component names, and a list of all test case descriptions for each component.

7. An apparatus for implementing an automated testing tool, the automated testing tool comprising: the front end act frame hook component automatic testing tool; the device for realizing the front end exact frame hook component automatic testing tool comprises:

the device comprises a setting unit, a storage unit and a processing unit, wherein the setting unit is configured to check and install files required by the front-end exact frame hook component automatic test, and execute test files under a storage catalog of front-end exact frame hook component automatic test codes when the front-end exact frame hook component automatic test is executed; the front-end exact frame hook assembly is provided with N hook files, wherein N is a positive integer;

the generating unit is configured to generate an automatic test case code according to each hook file in the front-end act framework hook assembly; generating automatic test case codes of all hook files according to all hook files in a front-end act framework hook assembly;

the display unit is configured to determine a dynamic value of each test case for each test case corresponding to all the automated test case codes; performing page visual display on the dynamic values associated with all the test cases; the displayed visual page is a page capable of directly editing and modifying any test case in the automatic test case codes of all hook files.

8. A terminal, comprising: the apparatus of claim 7.

9. An automated testing tool, characterized in that it is obtained by the implementation method of an automated testing tool according to any one of claims 1 to 6.

10. A storage medium comprising a stored program, wherein the program, when executed, controls a device on which the storage medium is located to perform a method of implementing an automated testing tool according to any one of claims 1 to 6.

Images