CN103729287B - 一种前端javascript组件的测试方法和装置 - Google Patents

Abstract

本发明提供了一种前端javascript组件的测试方法和装置，其中方法包括：S1、分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量；S2、根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口；S3、调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。该方法还可以进一步包括对成员函数和成员变量进行针对性测试的步骤。本发明能够在对javascript组件进行测试时，自动化渲染javascript组件，同时展现出该组件内的成员函数以及成员变量，使得测试更加深入。

Description

一种前端javascript组件的测试方法和装置

【技术领域】

本发明涉及代码测试技术，尤其涉及一种前端javascript组件的测试方法和装置。

【背景技术】

前端javascript组件通常用于实现web页面上独立的、能够被渲染以显示出特定页面效果的模块。由于这样的模块相对独立，不依赖于外部的页面元素，所以在对前端进行测试时，通常会单独对这样的模块所对应的javascript组件进行测试。

现有的前端javascript组件的测试方法，通常是由开发人员直接编写代码调用被测javascript组件的渲染接口来渲染该组件，并观察该组件的实际显示效果来判断测试结果。这样的方法存在明显的不足：对于不同的javascript组件都需要去单独编写代码，效率低，耗费大量人工成本；在测试时，无法直接观察到被测javascript组件的成员函数的运行结果以及成员变量值，容易遗漏潜在的问题。

【发明内容】

有鉴于此，本发明提供了一种前端javascript组件的测试方法和装置，能够自动化渲染javascript组件，同时展现出该组件内的成员函数以及成员变量，使得测试更加深入。

具体技术方案如下：

一种前端javascript组件的测试方法，该方法包括：

S1、分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量；

S2、根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口；

S3、调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

根据本发明一优选实施例，在S3之后进一步包括：

S4、根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值；

或者，根据测试人员设定的成员变量值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员变量，输出该选择的成员变量的值。

根据本发明一优选实施例，所述步骤S2具体包括：

将所述被测javascript组件命名空间中的成员函数与所述渲染接口模板集合中的渲染接口进行匹配，若某成员函数的格式与所述渲染接口模板集合中的某一渲染接口的格式相匹配，则认为所述某成员函数为渲染接口。

根据本发明一优选实施例，所述根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件，具体包括：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，并调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值，具体包括：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，获取并展示该选择的成员函数运行后得到的返回值。

根据本发明一优选实施例，所述根据测试人员设定的成员变量值，重新渲染所述被测javascript组件，具体包括：

根据测试人员选择的成员变量以及设定的该选择的成员变量的值，在所述被测javascript组件命名空间中为该选择的成员变量赋值，调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员变量，展示该选择的成员变量的值，具体包括：

根据测试人员选择的成员变量，在所述被测javascript组件命名空间中获取并展示该选择的成员变量的值。

一种前端javascript组件的测试装置，该装置包括：

分析单元，用于分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量；

识别单元，用于根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口；

渲染单元，用于调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

根据本发明一优选实施例，该装置进一步包括：

调试单元，用于根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值；

或者，根据测试人员设定的成员变量值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员变量，输出该选择的成员变量的值。

根据本发明一优选实施例，所述识别单元具体执行：

将所述被测javascript组件命名空间中的成员函数与所述渲染接口模板集合中的渲染接口进行匹配，若某成员函数的格式与所述渲染接口模板集合中的某一渲染接口的格式相匹配，则认为所述某成员函数为渲染接口。

根据本发明一优选实施例，所述调试单元根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件，具体执行：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，并调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值，具体执行：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，获取并展示该选择的成员函数运行后得到的返回值。

根据本发明一优选实施例，所述调试单元根据测试人员设定的成员变量值，重新渲染所述被测javascript组件，具体执行：

根据测试人员选择的成员变量以及设定的该成员变量的值，在所述被测javascript组件命名空间中为该选择的成员变量赋值，调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员变量，展示该选择的成员变量的值，具体执行：

根据测试人员选择的成员变量，在所述被测javascript组件命名空间中获取并展示该选择的成员变量的值。

由以上技术方案可以看出，本发明通过静态被测javascript组件分析代码，得到该组件的渲染接口来自动化渲染被测javascript组件，同时能够展现出该组件的所有成员函数和成员变量，使得测试人员能够直观地观察组件的内部结构，同时进行有针对性的测试。

【附图说明】

图1为本发明实施例一提供的前端javascript组件的测试方法流程图；

图2为本发明实施例二提供的前端javascript组件的测试装置示意图。

【具体实施方式】

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

javascript组件通常都会向外公开一个api接口，该接口即是使用接口，通过该接口能够进入到该javascript组件的命名空间，在该命名空间中挂载有该javascript组件能够让外部调用的成员函数和成员变量，该些成员函数和成员变量属于javascript组件的属性成员，即调用该些成员函数和成员变量能够使用该组件的某些功能或者改变该javascript组件的属性，因此，查看该些成员函数的运行结果和成员变量的值，就能实质地判断出该javascript组件运行是否正常。本发明正是利用静态分析被测javascript组件命名空间中的代码，识别出其中的渲染接口来自动化渲染该被测javascript组件，同时展现出该被测javascript组件的所有成员函数和成员变量使得测试人员能够直观地观察到成员函数的运行结果和成员变量的值。

实施例一

图1为本发明实施例一提供的一种javascript组件测试方法流程图

S101、分析被测javascript组件代码，遍历所述被测javascript组件命名空间代码中的成员函数和成员变量，并根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口，调用该渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

被测javascript组件的命名空间内挂载着该被测javascript组件能够让外部调用的成员函数和成员变量，在该些成员函数中包括渲染接口，调用该接口便能在页面上渲染出被测javascript组件。通过该被测javascript组件向外公开的使用接口，静态分析该被测javascript组件命名空间的代码，能够识别出该命名空间的代码中的成员函数和成员变量，同时能够确定该些成员函数和成员变量的位置。静态分析代码可以使用第三方工具Lex和Yacc来完成。

为了能够将被测javascript组件渲染出来，需要从所识别出的成员函数中确定该被测javascript组件的渲染接口。渲染接口通常都具有一些固定的格式，在测试前，可以预先建立一个渲染接口模板集合，在这个集合中保存所有可能的渲染接口模板，之后，将静态分析代码得到被测javascript组件命名空间中的成员函数与该渲染接口模板集合中的渲染接口进行匹配，识别出其中的渲染接口，即如果发现某一成员函数与渲染接口模板集合中的某一渲染接口模板相匹配，那么就认为该成员函数为渲染接口，直接调用该成员函数将该被测javascript组件自动在页面上渲染出来。例如，常用的渲染接口有“exports.render”、“exports.init”、“exports.initialize”等，将这些渲染接口保存到渲染接口模板集合中，之后，将被测javascript组件命名空间中的成员函数与渲染接口模板集合中的渲染接口进行匹配，若发现某一成员函数为“exports.init”，则认为该成员函数为渲染接口。

同时，在静态分析代码之后，确定被测javascript组件命名空间挂载的成员函数和成员变量的位置，将成员函数和成员变量以列表的形式直接在页面中展示出来，使得可以进行更进一步的后续测试。

S102、根据测试人员选择的成员函数以及设定的参数，动态渲染所述被测javascript组件；或者，根据测试人员选择的成员函数以及设定的参数，输出该成员函数的返回值；或者，根据测试人员设定的成员变量值，动态渲染所述被测javascript组件；或者，根据测试人员选择的成员变量，输出该成员变量的值。

在步骤S101中展现出被测javascript组件可以供外部调用的成员函数和成员变量后，测试人员可以根据测试需要选择某一个成员函数，之后根据步骤S 101中所确定命名空间代码中的该成员函数的位置，获取调用该成员函数所需要的参数信息（包括参数类型，数量），将该参数信息展现给测试人员，测试人员可以根据测试需要，设定调用该成员函数所需要的各个参数值。在获取测试人员设定的调用该成员函数所需的参数值后，根据该些参数值调用该成员函数。若调用该成员函数会改变被测javascript组件的渲染效果，例如，该成员函数的运行会改变被测javascript组件的长、高或标题名称等，则再次调用渲染接口来重新渲染出调用该成员函数后的被测javascript组件，当然也可以无条件的重新渲染调用该成员函数后的被测javascript组件；若该成员函数运行结束后会返回一个值，则获取这个返回值，展示给测试人员。需要说明的是，上述两个过程可以同时进行，即，在调用某一成员函数之后，可以重新渲染被测javascript组件，并同时获取并展示该成员函数运行之后的返回值。其中重新渲染被测javascript组件和展示该成员函数运行之后的返回值也可以仅执行其中之一。

或者，测试人员可以选择某一成员变量，并根据测试需要，设定该成员变量的值。在获取测试人员所设定的该成员变量的值后，根据步骤S101中所确定的该成员变量在被测javascript组件命名空间代码中的位置找到该成员变量，并将该成员变量赋值为测试人员所设定的值，之后重新渲染出改变该成员变量后的被测javascript组件。

或者，测试人员可以选择某一成员变量，查看该成员变量当前值，此时，根据步骤S101中所确定的该成员变量在被测javascript组件命名空间代码中的位置，获取该成员变量的当前值并展示给测试人员。

从上述描述中可以看出，根据本发明实施例所提供的方法，在对前端javascript组件进行测试时，能够自动化将被测javascript组件渲染出来，而不再需要测试人员单独编写代码，同时，能够使得测试人员有针对性的对被测javascript组件的某些成员函数或成员变量进行直观的测试，测试人员可以设定参数值来调用某一成员函数，根据该成员函数运行后被测javascript组件的渲染效果，或者，直接根据某一成员函数的返回值来判断成员函数运行是否正常，同样地，测试人员可以设定某一成员变量的值，之后根据被测javascript组件的渲染效果，或者，直接根据某一成员变量的当前值来判断与该成员变量相关的代码运行是否正常。可见，这样的方法可以使对被测javascript组件的测试更加深入。

实施例二

图2为本发明实施例二提供的一种前端javascript组件的测试装置示意图，如图2所示，该装置包括：分析单元10、识别单元20、渲染单元30，还可以包括：调试单元40。

分析单元10，用于分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量。

被测javascript组件的命名空间内挂载着该被测javascript组件能够让外部调用的成员函数和成员变量，在该些成员函数中包括渲染接口，调用该接口便能在页面上渲染出被测javascript组件。分析单元10通过该被测javascript组件向外公开的使用接口，静态分析该被测javascript组件命名空间的代码，能够识别出该命名空间的代码中的成员函数和成员变量，同时能够确定该些成员函数和成员变量的位置。静态分析代码可以使用第三方工具Lex和Yacc来完成。

识别单元20，用于根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口。

为了能够将被测javascript组件渲染出来，需要从所识别出的成员函数中确定该被测javascript组件的渲染接口。渲染接口通常都具有一些固定的格式，在测试前，可以预先建立一个渲染接口模板集合，在这个集合中保存所有可能的渲染接口模板，之后，识别单元20将分析单元10静态分析代码得到被测javascript组件命名空间中的成员函数与该渲染接口模板集合中的渲染接口进行匹配，识别出其中的渲染接口，即如果发现某一成员函数与渲染接口模板集合中的某一渲染接口模板相匹配，那么就认为该成员函数为渲染接口。例如，常用的渲染接口有“exports.render”、“exports.init”、“exports.initialize”等，将这些渲染接口保存到渲染接口模板集合中，之后，将被测javascript组件命名空间中的成员函数与渲染接口模板集合中的渲染接口进行匹配，若发现某一成员函数为“exports.init”，则认为该成员函数为渲染接口。

渲染单元30，用于调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

渲染单元30调用识别单元20所识别出的被测javascript组件命名空间中为渲染接口的成员函数来将被测javascript组件在页面上渲染出来。同时，在静态分析代码之后，确定被测javascript组件命名空间挂载的成员函数和成员变量的位置，渲染单元30将成员函数和成员变量以列表的形式直接在页面中展示出来，使得更进一步的后续的测试中能够观察到成员函数的运行结果和成员变量的值，或者针对性地选择某些成员函数进行测试。

调试单元40，用于根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件；或者，根据测试人员选择的成员函数以及设定的参数值，输出该成员函数运行后的返回值；或者，根据测试人员设定的成员变量值，重新渲染所述被测javascript组件；或者，根据测试人员选择的成员变量，输出该成员变量的值。

在渲染单元30展现出被测javascript组件可以供外部调用的成员函数和成员变量后，测试人员可以根据测试需要选择某一个成员函数，之后根据所确定命名空间代码中的该成员函数的位置，获取调用该成员函数所需要的参数信息（包括参数类型，数量），将该参数信息展现给测试人员，测试人员可以根据测试需要，设定调用该成员函数所需要的各个参数值。在获取测试人员设定的调用该成员函数所需的参数值后，根据该些参数值调用该成员函数。若调用该成员函数会改变被测javascript组件的渲染效果，例如，该成员函数的运行会改变被测javascript组件的长、高或标题名称等，则再次调用渲染接口来重新渲染出调用该成员函数后的被测javascript组件，当然也可以无条件的重新渲染调用该成员函数后的被测javascript组件；若该成员函数运行结束后会返回一个值，则获取这个返回值，展示给测试人员。需要说明的是，上述两个过程可以同时进行，即，在调用某一成员函数之后，可以重新渲染被测javascript组件，并同时获取并展示该成员函数运行之后的返回值。其中重新渲染被测javascript组件和展示该成员函数运行之后的返回值也可以仅执行其中之一。

或者，测试人员可以选择某一成员变量，并根据测试需要，设定该成员变量的值。在获取测试人员所设定的该成员变量的值后，根据所确定的该成员变量在被测javascript组件命名空间代码中的位置找到该成员变量，并将该成员变量赋值为测试人员所设定的值，之后重新渲染出改变该成员变量后的被测javascript组件。

或者，测试人员可以选择某一成员变量，查看该成员变量当前值，此时，根据所确定的该成员变量在被测javascript组件命名空间代码中的位置，获取该成员变量的当前值并展示给测试人员。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种前端javascript组件的测试方法，其特征在于，该方法包括：

S1、分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量；

S2、根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口；

S3、调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

2.根据权利要求1所述的方法，其特征在于，在S3之后进一步包括：

S4、根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值；

或者，根据测试人员设定的成员变量值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员变量，输出该选择的成员变量的值。

3.根据权利要求1所述的方法，其特征在于，所述步骤S2具体包括：

将所述被测javascript组件命名空间中的成员函数与所述渲染接口模板集合中的渲染接口进行匹配，若某成员函数的格式与所述渲染接口模板集合中的某一渲染接口的格式相匹配，则认为所述某成员函数为渲染接口。

4.根据权利要求2所述的方法，其特征在于，所述根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件，具体包括：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，并调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值，具体包括：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，获取并展示该选择的成员函数运行后得到的返回值。

5.根据权利要求2所述的方法，其特征在于，所述根据测试人员设定的成员变量值，重新渲染所述被测javascript组件，具体包括：

根据测试人员选择的成员变量以及设定的该选择的成员变量的值，在所述被测javascript组件命名空间中为该选择的成员变量赋值，调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员变量，展示该选择的成员变量的值，具体包括：

根据测试人员选择的成员变量，在所述被测javascript组件命名空间中获取并展示该选择的成员变量的值。

6.一种前端javascript组件的测试装置，其特征在于，该装置包括：

分析单元，用于分析被测javascript组件命名空间中的代码，确定所述被测javascript组件命名空间代码中的成员函数和成员变量；

识别单元，用于根据预先设立的渲染接口模板集合，识别出所述被测javascript组件命名空间代码中的渲染接口；

渲染单元，用于调用所述渲染接口渲染所述被测javascript组件，同时展现所述被测javascript组件命名空间代码中所有的成员函数和成员变量。

7.根据权利要求6所述的装置，其特征在于，该装置进一步包括：

调试单元，用于根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值；

或者，根据测试人员设定的成员变量值，重新渲染所述被测javascript组件；

或者，根据测试人员选择的成员变量，输出该选择的成员变量的值。

8.根据权利要求6所述的装置，其特征在于，所述识别单元具体执行：

将所述被测javascript组件命名空间中的成员函数与所述渲染接口模板集合中的渲染接口进行匹配，若某成员函数的格式与所述渲染接口模板集合中的某一渲染接口的格式相匹配，则认为所述某成员函数为渲染接口。

9.根据权利要求7所述的装置，其特征在于，所述调试单元根据测试人员选择的成员函数以及设定的参数值，重新渲染所述被测javascript组件，具体执行：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，并调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员函数以及设定的参数值，输出该选择的成员函数运行后的返回值，具体执行：

根据测试人员选择的成员函数，在所述被测javascript组件命名空间中获取并展示该选择的成员函数的参数信息，根据测试人员设定的参数值，调用该选择的成员函数，获取并展示该选择的成员函数运行后得到的返回值。

10.根据权利要求7所述的装置，其特征在于，所述调试单元根据测试人员设定的成员变量值，重新渲染所述被测javascript组件，具体执行：

根据测试人员选择的成员变量以及设定的该成员变量的值，在所述被测javascript组件命名空间中为该选择的成员变量赋值，调用所述渲染接口重新渲染所述被测javascript组件；

所述根据测试人员选择的成员变量，展示该选择的成员变量的值，具体执行：

根据测试人员选择的成员变量，在所述被测javascript组件命名空间中获取并展示该选择的成员变量的值。