前端精准测试调用链路分析

      精准测试在评估需求的测试范围时，需要评估一下代码的影响范围，这个范围有两部分：一是需求直接修改的代码；二是修改代码影响到的功能模块。代码影响到的功能一般是通过调用链路分析来实现的，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.ts""apps/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.ts""apps/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.ts""apps/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，现存的问题

由于时间原因，上面的调用关系方案，只很简单地实现了文件间的调用关系，存储页面文件间的调用关系，脚本文件与页同文件间的调用关系，而且没有细化到函数级别；主要原因在于：

  • 没有细化脚本文件到页面文件间的，函数与行号的对应关系，这个没有工具直接实现，需要编码进行过滤；
  • 没有生成样式文件到页面文件间的调用关系，因为同级目录下的调用关系可以生成，跨目录的同名文件无法扫描出调用关系；
  • 没有过滤样式文件到页面文件间的函数调用与行号间的关系，功能暂时没有开发。
  • 过滤过细的调用关系，可以在后续推荐中做的更加精细，但也存在着文件过多的时候，性能较慢的问题。
  • 后面看领导的重视程度，再安排细化工作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/739626.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux/Ubuntu/Debian基本命令：命令行历史记录

Linux/Ubuntu/Debian基本命令：命令行历史记录

一组与类 Unix 环境中的命令行(Terminal)历史记录和命令调用相关的键盘快捷键： Ctrl R： 启动对以前使用过的命令的反向搜索。 当你键入时，它将查找并显示与输入的字符匹配的最新命令。Ctrl G: 退出历史搜索模式，不运行命令。 如…
阅读更多...
[CUDA] 使用thrust::sort()函数排序

[CUDA] 使用thrust::sort()函数排序

一、简介 本文介绍了如何使用thrust::sort()函数对device_vector<int>容器&#xff0c;或者int*指针表示的内存&#xff08;显存&#xff09;处的数据进行排序。 二、示例代码 1. 排序 device_vector<int>中的数据 main.cu文件内容&#xff1a; #include <…
阅读更多...
前端页面访问后台hiveserver2，阶段性报错

前端页面访问后台hiveserver2，阶段性报错

1、运行环境 Windows11下安装VMware&#xff0c;VMware下安装CentOS7 Linux系统&#xff0c;三台虚拟机集群部署hadoop&#xff0c;安装hive&#xff1b; 在Linux下安装Eclipse&#xff0c;创建maven工程&#xff0c;使用hive-jdbc-2.3.2访问hiveserver2 2、在windows11下&…
阅读更多...
Python从0到100（四）：Python中的运算符介绍

Python从0到100（四）：Python中的运算符介绍

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…
阅读更多...
就业班 2401--3.12 Linux Day16 PXE布置——自动化装系统

就业班 2401--3.12 Linux Day16 PXE布置——自动化装系统

什么是PXE&#xff1f; PXE&#xff0c;全名Pre-boot Execution Environment&#xff0c;预启动执行环境&#xff1b;通过网络接口启动计算机&#xff0c;不依赖本地存储设备&#xff08;如硬盘&#xff09;或本地已安装的操作系统&#xff1b;由Intel和Systemsoft公司于1999年…
阅读更多...
云游戏发行是什么？云游戏发行的演进历程

云游戏发行是什么？云游戏发行的演进历程

云游戏发行是一系列基于云游戏技术的游戏发行策略或行为&#xff0c;融合云试玩、云微端、可玩广告、跨端移植等技术&#xff0c;从而在传统游戏发行生态的基础上实现更为卓越的发行效果。 云游戏发行出现的原因 近年来&#xff0c;游戏市场出现负增长。其原因一方面在于游戏版…
阅读更多...
一套plm系统大约多少钱？彩虹PLM系统

一套plm系统大约多少钱？彩虹PLM系统

一套PLM&#xff08;产品生命周期管理&#xff09;系统的价格因多个因素而异&#xff0c;包括企业规模、需求复杂性、系统功能、技术支持和厂商选择等。一般来说&#xff0c;面向小型和微型企业的PLM产品&#xff0c;其价位在5万元~15万元左右&#xff1b;面向中型企业的中端PL…
阅读更多...
【数据结构学习笔记】冒泡排序

【数据结构学习笔记】冒泡排序

【数据结构学习笔记】冒泡排序 参考电子书&#xff1a;排序算法精讲 算法原理 对未排序的元素进行多次遍历&#xff0c;每次遍历都将相邻的两个元素进行比较&#xff0c;如果它们的顺序错误就交换它们的位置。在每一轮遍历后&#xff0c;最大的元素会被冒泡到序列的末端。这…
阅读更多...
【Docker】容器的生态系统

【Docker】容器的生态系统

Docker提供了一整套技术支持&#xff0c;包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container&#xff08;容器&#xff09;在host&#xff08;集群、主机&#xff09;上运行起来的那些技术。 1&#xff09;容器规范&#xff1a;OCI&#xff08;runt…
阅读更多...
【Java】读取手机文件名称

【Java】读取手机文件名称

首先&#xff0c;确保你已经连接了你的手机并已启用 USB 调试模式。然后&#xff0c;你需要使用 Android Debug Bridge&#xff08;ADB&#xff09;工具来获取手机文件列表。以下是一个简单的 Java 代码片段&#xff0c;使用 ProcessBuilder 调用 ADB 命令来获取文件列表&#…
阅读更多...
InnoDB和MyISAM存储引擎

InnoDB和MyISAM存储引擎

InnoDB mysql默认存储引擎 支持事务&#xff0c;行级锁&#xff08;并发量大&#xff09;&#xff0c;外键约束&#xff0c;容量大&#xff0c;支持缓存&#xff0c;支撑主键自增&#xff0c; 全文检索&#xff0c;不存储表的总行数&#xff0c;需要sql逐行统计 MyISAM 不…
阅读更多...
QString的参数传递

QString的参数传递

在 Qt 框架中，QString 是一个非常常用的类，用于处理字符串。当涉及到 QString 的参数传递时，通常需要考虑以下几点： 按值传递 (Pass by Value)： 当你将一个 QString 对象作为参数传递给一个函数时，你可以直接传递它的值。这种情况下，函数会接收这个 QString 的一个副本。…
阅读更多...
沙发3d模型制作过程---模大狮模型网

沙发3d模型制作过程---模大狮模型网

制作沙发的3D模型通常需要经历以下步骤&#xff1a; 概念设计&#xff1a; 首先&#xff0c;根据设计师或客户的需求&#xff0c;进行概念设计。这包括通过手绘草图或数字绘图软件创建初始设计概念。 建模&#xff1a; 使用专业的3D建模软件(例如Blender、Maya、3ds Max)进行建…
阅读更多...
ATFX汇市：美国2月CPI数据来袭，高通胀问题或进一步缓解

ATFX汇市：美国2月CPI数据来袭，高通胀问题或进一步缓解

ATFX汇市&#xff1a;今日20:30&#xff0c;美国劳工部将公布2月未季调核心CPI年率数据&#xff0c;前值为3.9%&#xff0c;预期值3.7%&#xff0c;预期将下降0.2个百分点。历史数据看&#xff0c;美国核心CPI年率处于快速下降状态&#xff0c;去年3月份数据仍高达5.6%&#xf…
阅读更多...
CSS 用 flex 布局绘制骰子

CSS 用 flex 布局绘制骰子

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.box {height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;display: flex;justify-content: center; // 水平居中/* alig…
阅读更多...
[论文笔记] ICLR 2022 | 减少跨语言表示差异，字节跳动AI Lab通过流形混合增强跨语言迁移

[论文笔记] ICLR 2022 | 减少跨语言表示差异，字节跳动AI Lab通过流形混合增强跨语言迁移

论文地址：https://openreview.net/pdf?id=OjPmfr9GkVv代码地址：https://github.com/yhy1117/X-Mixup 字节跳动人工智能实验室和加利福尼亚大学圣塔芭芭拉分校的研究者提出了 跨语言流形混合（X-Mixup）方法为目标语言提供 “折衷” 的表示，让模型自适应地校准表示差…
阅读更多...
LLM(大语言模型)常用评测指标-MAP@R

LLM(大语言模型)常用评测指标-MAP@R

MAPR (Mean Average Precision at R) 是一种用于评估信息检索系统或排序模型效果的评价指标。它特别适用于那些返回一组相关结果的情况&#xff0c;例如搜索引擎或推荐系统。这里的“R”代表返回的相关结果的数量。MAPR 考虑了结果的排名和相关性两个因素。 计算方法 计算平…
阅读更多...
基础小白快速入门web前端开发技术-------＞hbuilder的下载安装以及简易的网页最开始制作

基础小白快速入门web前端开发技术-------＞hbuilder的下载安装以及简易的网页最开始制作

工欲善其事&#xff0c;必先利其器&#xff0c; 在我们学习开发网页设计&#xff0c;我们首先需要一个良好的开发工具 这里我比较推荐hbuilder这个 只需要进入官网傻瓜下载&#xff0c;傻瓜安装 https://dcloud.io/ 点击hbuilder选择版本进行下载安装即可 hbuilder的新建文件…
阅读更多...
01 THU大模型之基础入门

01 THU大模型之基础入门

1. NLP Basics Distributed Word Representation词表示 Word representation: a process that transform the symbols to the machine understandable meanings 1.1 How to represent the meaning so that the machine can understand Compute word similarity 计算词相似度 …
阅读更多...
高级语言讲义2018软专（仅高级语言部分）

高级语言讲义2018软专（仅高级语言部分）

1.编写程序输入任意一个正整数n&#xff0c;,输出由组成的最大正整数。例如输入3846,则输出8643. #include <stdio.h>void sort(int *arr,int m,int n) {for(int im; i<n-1; i)for(int jm; j<nm-i; j)if(arr[j]<arr[j1]) {int temparr[j];arr[j]arr[j1];arr[j1…
阅读更多...
最新文章

Copyright @ 2022~2023