网站开发 教学目标,秦皇岛网站制作 微商城建设,wordpress管理入口,专注邯郸建设手机网站精准测试在评估需求的测试范围时#xff0c;需要评估一下代码的影响范围#xff0c;这个范围有两部分#xff1a;一是需求直接修改的代码#xff1b;二是修改代码影响到的功能模块。代码影响到的功能一般是通过调用链路分析来实现的#xff0c;java和kotlin代码可以由java… 精准测试在评估需求的测试范围时需要评估一下代码的影响范围这个范围有两部分一是需求直接修改的代码二是修改代码影响到的功能模块。代码影响到的功能一般是通过调用链路分析来实现的java和kotlin代码可以由java-callgrap来分析出来调用链路iOS 的OC和Swift可以使用clang来编译生成前端貌似没有直接可用的工具。
一技术调研
通过在网上进行不断的搜索和尝试最终找到如下两个工具
1开源工具dependency-cruiser
1.1 项目地址GitHub - sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD. 1.2 使用方法
1安装与初始化
在要生成调用关系的项目中安装dependency-cruiser
npm install --save-dev dependency-cruiser # or yarn add -D dependency-cruiser pnpm add -D dependency-cruiser
再初始化一下项目目录
npx depcruise --init
2生成调用关系数据
生成全项目文件间的调用关系图
src/API/api.ts → src/API/controller/commonCntroller/commonController.ts src/API/api.ts → src/API/controller/configurationController/Configuration.ts src/API/api.ts → src/API/controller/covController/covController.ts src/API/api.ts → src/API/controller/recommendController/recommendController.ts src/API/api.ts → src/API/controller/report/report.ts src/router/routes/caseRecommend.ts →
src/views/CaseRecommend/CaseRecommend.vue
src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommendList/CaseRecommendList.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/mobileCaseRecommend/mobileCaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/Layout/Layout.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/SelectSearchModel/SelectSearchModel.vue src/views/CaseRecommend/CaseRecommend.vue → node_modules/vue-property-decorator/lib/vue-property-decorator.umd.js src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue → src/API/api.ts ......
生成全项目页面间的调用关系文本文件
npx depcruise src --focus ^src --output-type text all_pageanlys.text
生成的内容为项目中各个文件间的调用关系如下所示
src/API/api.ts → src/API/controller/commonCntroller/commonController.ts src/API/api.ts → src/API/controller/configurationController/Configuration.ts src/API/api.ts → src/API/controller/covController/covController.ts src/API/api.ts → src/API/controller/recommendController/recommendController.ts src/API/api.ts → src/API/controller/report/report.ts src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/CaseRecommendList/CaseRecommendList.vue src/router/routes/caseRecommend.ts → src/views/CaseRecommend/mobileCaseRecommend/mobileCaseRecommend.vue src/router/routes/caseRecommend.ts → src/views/Layout/Layout.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue src/views/CaseRecommend/CaseRecommend.vue → src/views/CaseRecommend/SelectSearchModel/SelectSearchModel.vue src/views/CaseRecommend/CaseRecommend.vue → node_modules/vue-property-decorator/lib/vue-property-decorator.umd.js src/views/CaseRecommend/CaseRecommendRecord/CaseRecommendRecord.vue → src/API/api.ts ......
生成指定目录的调用关系
npx depcruise src --focus ^src/views --output-type text all_pageanlys.text
2开源项目ts-dependency-graph
2.1 开源地址 URL:GitHub - PSeitz/ts-dependency-graph: prints a dependency graph in dot format for your typescript/react project 安装工具
npm i ts_dependency_graph -g
2.2 生成调用关系数据
ts_dependency_graph --start apps all_pagetanlys.txt
生成的数据如下所示 在文件中有调用关系信息
apps/quick-process-plus-e2e/src/e2e/app.cy.ts - apps/quick-process-plus-e2e/src/support/app.po.ts [color #F74B5F]
apps/quick-process-plus-e2e/src/support/e2e.ts - apps/quick-process-plus-e2e/src/support/commands.ts [color #8D9B0D]
apps/quick-process-plus/src/components/pc/select/index.ts - apps/quick-process-plus/src/components/pc/select/common-select.tsx [color #8B13D9] apps/quick-process-plus/src/components/pc/select/index.ts - apps/quick-process-plus/src/components/pc/select/people-select.tsx [color #8B13D9] apps/quick-process-plus/src/components/pc/select/index.ts - apps/quick-process-plus/src/components/pc/select/dept-select.tsx [color #8B13D9] apps/quick-process-plus/src/components/pc/select/people-select.tsx - apps/quick-process-plus/src/components/pc/select/common-select.tsx [color #A5F9DE] apps/quick-process-plus/src/components/pc/select/dept-select.tsx - apps/quick-process-plus/src/components/pc/select/common-select.tsx [color #44A823] apps/quick-process-plus/src/models/apiManage.ts - apps/quick-process-plus/src/types/apiManage.ts [color #6305F5] apps/quick-process-plus/src/models/app.ts - apps/quick-process-plus/src/models/index.ts [color #42F55F] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/user.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/tenant.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/auth.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/metadata.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/app.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/form.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/view.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/flow.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/corporation.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/page.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formRender.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formDesign.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formComponent.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/process.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/target.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/global.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formula.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/apiManage.ts [color #D4502A] apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/processManagement.ts [color #D4502A]
需要使用python文件进行过滤去掉后面的color信息最终得到
apps/quick-process-plus/src/models/app.ts - apps/quick-process-plus/src/models/index.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/user.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/tenant.tsapps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/auth.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/metadata.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/app.tsapps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/form.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/view.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/flow.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/corporation.tsapps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/page.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formRender.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formDesign.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/formComponent.ts
apps/quick-process-plus/src/models/index.ts - apps/quick-process-plus/src/models/process.ts
再利用ccg生成调用关系数据。
二调用关系技术方案
通过上面的两个基础工具我们可以生成Vue和React项目文件间的调用关系这个文件是脚本文件和页面问题没有样式文件在这些数据基础上再对文件进行过滤和整理就能生成符合要求的调用关系数据。
1调用链路生成方案 整体方案如下
通过工具生成调用关系数据过滤相应的文件如果是页面文件间的调用关系说明是组件和页面的关系直接存储如果是脚本文件可以分析脚本文件被调用的页面文件找出其调用的脚本文件中的函数以及调用行号生成脚本文件函数--页面文件[开始行号结束行号]的调用关系如果是样式文件分析样式文件的被调用页面文件分析页面文件调用样式文件中的样式函数的行号生成样式文件函数--页面文件[开始行号结束行号]的调用关系将上面三种调用关系数据入到CCG中生成调用关系数并存储到文件中以便后续查询根据diff文件改动的行号等信息查询CCG文件生成调用关系数据存储到数据表中。
主要功能实现介绍
生成调用关系数据在FEAgent上下载相应的项目代码安装工具生成调用关系数据CCG通过调用FEAgent上的接口下载调用关系数据解压数据并生成树型调用关系保存到pickle文件中CCG提借查询调用关系的接口供精准测试平台调用生成调用链路。
2现存的问题
由于时间原因上面的调用关系方案只很简单地实现了文件间的调用关系存储页面文件间的调用关系脚本文件与页同文件间的调用关系而且没有细化到函数级别主要原因在于
没有细化脚本文件到页面文件间的函数与行号的对应关系这个没有工具直接实现需要编码进行过滤没有生成样式文件到页面文件间的调用关系因为同级目录下的调用关系可以生成跨目录的同名文件无法扫描出调用关系没有过滤样式文件到页面文件间的函数调用与行号间的关系功能暂时没有开发。过滤过细的调用关系可以在后续推荐中做的更加精细但也存在着文件过多的时候性能较慢的问题。后面看领导的重视程度再安排细化工作。
