惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Help Net Security
Help Net Security
G
Google Developers Blog
雷峰网
雷峰网
WordPress大学
WordPress大学
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Engineering at Meta
Engineering at Meta
Security Latest
Security Latest
T
Threat Research - Cisco Blogs
AWS News Blog
AWS News Blog
F
Full Disclosure
C
Cybersecurity and Infrastructure Security Agency CISA
T
The Exploit Database - CXSecurity.com
J
Java Code Geeks
U
Unit 42
C
Cyber Attacks, Cyber Crime and Cyber Security
V
V2EX
C
Cisco Blogs
博客园 - 司徒正美
Project Zero
Project Zero
L
LINUX DO - 热门话题
阮一峰的网络日志
阮一峰的网络日志
Blog — PlanetScale
Blog — PlanetScale
Scott Helme
Scott Helme
A
About on SuperTechFans
Hugging Face - Blog
Hugging Face - Blog
S
Securelist
小众软件
小众软件
aimingoo的专栏
aimingoo的专栏
S
Schneier on Security
G
GRAHAM CLULEY
酷 壳 – CoolShell
酷 壳 – CoolShell
Cyberwarzone
Cyberwarzone
MongoDB | Blog
MongoDB | Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
T
Threatpost
Recorded Future
Recorded Future
C
CXSECURITY Database RSS Feed - CXSecurity.com
宝玉的分享
宝玉的分享
N
News and Events Feed by Topic
人人都是产品经理
人人都是产品经理
The Register - Security
The Register - Security
S
Security Archives - TechRepublic
博客园 - Franky
N
News | PayPal Newsroom
Simon Willison's Weblog
Simon Willison's Weblog
S
SegmentFault 最新的问题
W
WeLiveSecurity
A
Arctic Wolf
B
Blog

博客园 - 叶伟民

RAG开发大模型应用掉进过的坑(1)——从讨论国内外大模型应用发展而起 大模型时代的PDF解析工具 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第10章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第9章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第8章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第7章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第6章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第4章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第3章 如何取书名(2) - 书店研究心得 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第5章 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第2章 走正确的路 - IT业没有护城河 - 机器翻译新锐Deepl 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第1章 Women forum两周年有感 现代化编程模式(1)-快 转型 - 在海归群的最大收获以及写给子孙后代的。 《 .NET并发编程实战》一书中的节流为什么不翻译成限流 《.NET内存管理宝典》 售后服务系列文(2) - WinDbg命令.cmdtree
使用Jasmine和karma对传统js进行单元测试
叶伟民 · 2020-09-19 · via 博客园 - 叶伟民

2020-09-19 22:25  叶伟民  阅读(244)  评论()    收藏  举报

当你拿到十五年前的一堆javascript的代码,你如何对这堆javascript代码写单元测试呢?于是就有了这篇文章。

注意:不需要装任何现代化js框架,包括angular,react,vue之类的,都不需要装!!!

  1. 先要安装nodejs

  2. 直接cmd进入js所在的目录

  3. 通过 npm 安装karma:

    npm install --save-dev karma
    
  4. 通过如下命令确认karma安装成功

    node ./node_modules/karma/bin/karma --version
    
  5. global安装karma-cli来直接执行karma命令

    npm i -g karma-cli
    
  6. 通过如下命令确认安装成功

    karma --version
    
  7. 通过如下命令安装jasmine

    npm i -D jasmine-core karma-jasmine karma-chrome-launcher
    
  8. 通过如下命令创建 karma.conf.js 配置文件

    karma init
    
  9. 配置karma.conf.js

    browsers: ['ChromeHeadless'],
    customLaunchers: {
    ChromeHeadlessCI: {
          base: 'ChromeHeadless',
          flags: ['--no-sandbox']
       }
    }
    
  10. 配置karma.conf.js以让karma能够找到你的测试文件:

    files: [      
       '*.js',
       '*.spec.js'
    ],
    exclude: ['karma.conf.js'],
    
  11. 添加test_if_karma_works.js,并ctrl+v以下内容

    function add(a, b){
       return a + b;
    }
    
  12. 添加test_if_karma_works.spec.js,并ctrl+v以下内容

    describe('add function unit test.', function(){
       it('2 + 3 = 5', function(){
          var result  = add( 2, 3 );
          expect( result ).toBe( 5 );
       });
    
       it('2 + 3 = 6, this should faild.', function(){
          var result = add( 2, 3 );
          expect(result).toBe( 6 );
       })
    });
    
  13. 通过如下命令开始测试

    karma start
    

    或者

    node ./node_modules/karma/bin/karma start
    
  14. 通过如下命令安装karma代码覆盖率

    npm install --save-dev karma-coverage
    
  15. 修改karma.conf.js

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    /* 覆盖源文件 不包括测试库文件*/
    preprocessors: {
       'src/**/*.js': ['coverage']
    },
    
    
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'],
    
    /* 新增的配置项 */
    coverageReporter: {
       type: 'html',
       dir: 'coverage/'
    },
    
    
  16. 通过如下命令改为spec模式

    npm install karma-spec-reporter --save-dev
    
  17. 修改karma.conf.js

    reporters: ['spec'],
    
  18. git check in (不要签入coverage目录,但是要把node_modules目前签入,因为时过境迁,旧的package会被删掉,只能靠这里的git库来还原了。)