วิธีดำเนินการทดสอบ spec เพียงหนึ่งเดียวด้วย angular-cli

ฉันมีโครงการสร้าง Angular2 ด้วย Angular-CLI (เบต้า 20)

มีวิธีเรียกใช้การทดสอบกับไฟล์ spec เพียงไฟล์เดียวที่เลือกหรือไม่

ฉันเคยมีโครงการตามการเริ่มต้นอย่างรวดเร็วของ Angular2 และฉันสามารถเพิ่มรายละเอียดลงในไฟล์จัสมินด้วยตนเอง แต่ฉันไม่ทราบวิธีตั้งค่านอกการทดสอบกรรมหรือวิธี จำกัด การทดสอบกรรมให้กับไฟล์เฉพาะด้วย Angular-CLI builds

.spec.tsไฟล์ของคุณแต่ละไฟล์มีการทดสอบทั้งหมดที่จัดกลุ่มเป็นdescribeบล็อกดังนี้:

describe('SomeComponent', () => {...}

คุณสามารถเรียกใช้เพียงบล็อกเดียวนี้ได้อย่างง่ายดายโดยนำหน้าdescribeชื่อฟังก์ชันด้วยf:

fdescribe('SomeComponent', () => {...}

หากคุณมีฟังก์ชั่นดังกล่าวจะไม่มีการdescribeบล็อกอื่น ๆ Btw คุณสามารถทำสิ่งที่คล้ายกันกับit=> fitและยังมีรุ่น "บัญชีดำ" x- ดังนั้น:

• fdescribeและfitทำให้เกิดเฉพาะฟังก์ชันที่ทำเครื่องหมายด้วยวิธีนี้เพื่อให้ทำงานได้
• xdescribeและxitทำให้ทั้งหมดยกเว้นฟังก์ชั่นที่ทำเครื่องหมายด้วยวิธีนี้ในการทำงาน

กำหนดค่าtest.tsไฟล์ภายในsrcโฟลเดอร์:

const context = require.context('./', true, /\.spec\.ts$/);

แทนที่/\.spec\.ts$/ด้วยชื่อไฟล์ที่คุณต้องการทดสอบ ตัวอย่างเช่น:/app.component\.spec\.ts$/

app.component.spec.tsนี้จะทำงานเฉพาะสำหรับการทดสอบ

คุณสามารถทดสอบเฉพาะไฟล์ได้ด้วยAngular CLI ( ngคำสั่ง) ดังนี้:

ng test --main ./path/to/test.ts

เอกสารเพิ่มเติมอยู่ที่https://angular.io/cli/test

โปรดทราบว่าแม้ว่าจะใช้งานได้กับไฟล์ไลบรารีแบบสแตนด์อโลน แต่ก็จะไม่ทำงานสำหรับส่วนประกอบ / บริการ / ฯลฯ นี่เป็นเพราะไฟล์เชิงมุมมีการขึ้นต่อกันของไฟล์อื่น (กล่าวคือsrc/test.tsใน Angular 7) น่าเสียดายที่--mainธงไม่ได้มีการโต้แย้งหลายครั้ง

หากคุณต้องการควบคุมไฟล์ที่เลือกจากบรรทัดคำสั่งฉันสามารถจัดการกับ Angular 7 ได้

โดยสรุปคุณจะต้องติดตั้ง@angular-devkit/build-angular:browserและสร้างปลั๊กอินเว็บแพ็คที่กำหนดเองเพื่อส่งไฟล์ทดสอบ regex ผ่าน ตัวอย่างเช่น:

angular.json - เปลี่ยนเครื่องมือสร้างการทดสอบจาก@angular-devkit/build-angular:browserและตั้งค่าไฟล์ปรับแต่ง:

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js - สร้างการกำหนดค่าwebpackที่อ่าน regex จากบรรทัดคำสั่ง:

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts - แก้ไขข้อมูลจำเพาะ

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

จากนั้นใช้ดังต่อไปนี้เพื่อแทนที่ค่าเริ่มต้น:

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

ฉันบันทึกbackstory ที่นี่ขอโทษล่วงหน้าสำหรับประเภทและลิงค์ผิด ๆ ให้เครดิตกับคำตอบข้างต้นโดย @ Aish-Anu เพื่อชี้ให้ฉันไปในทิศทางที่ถูกต้อง

สิ่งนี้ใช้ได้กับฉันใน Angular 7 ซึ่งขึ้นอยู่กับตัวเลือก - หลักของคำสั่ง ng ฉันไม่แน่ใจว่าตัวเลือกนี้ไม่มีเอกสารและอาจมีการเปลี่ยนแปลง แต่มันใช้ได้กับฉัน ฉันใส่บรรทัดในไฟล์ package.json ของฉันในส่วนของสคริปต์ มีการใช้ตัวเลือก - หลักของด้วยคำสั่งทดสอบ ng ฉันระบุเส้นทางไปยังไฟล์. spec.ts ฉันต้องการที่จะดำเนินการ ตัวอย่างเช่น

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

คุณสามารถเรียกใช้สคริปต์ในขณะที่คุณเรียกใช้สคริปต์ดังกล่าว ฉันเรียกใช้ใน Webstorm โดยคลิกที่ "ทดสอบ 1" ในส่วน npm

ฉันแก้ไขปัญหานี้ด้วยตัวเองโดยใช้เสียงฮึดฮัด ฉันมีสคริปต์เสี้ยงฮึดฮัดแสดงความไม่พอใจด้านล่าง สิ่งที่สคริปต์ทำคือใช้พารามิเตอร์บรรทัดคำสั่งของการทดสอบเฉพาะเพื่อเรียกใช้และสร้างสำเนาของ test.ts และใส่ชื่อการทดสอบนี้ไว้ในนั้น

ในการรันสิ่งนี้ก่อนอื่นให้ติดตั้ง grunt-cli โดยใช้:

npm install -g grunt-cli

ใส่การอ้างอิงเสียงฮึดฮัดด้านล่างใน package.json ของคุณ:

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

หากต้องการเรียกใช้ให้บันทึกไฟล์ grunt ด้านล่างเป็น Gruntfile.js ในโฟลเดอร์รูทของคุณ จากนั้นจากบรรทัดคำสั่งเรียกใช้เป็น:

grunt --target=app.component

สิ่งนี้จะเรียกใช้ app.component.spec.ts

ไฟล์ Grunt ดังต่อไปนี้:

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: ['temp.conf.js','src/temp-test.ts'],
    copy: {
      main: {
        files: [
             {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
             {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
             ],
      }
    },
    'string-replace': {
          dist: {
            files: {
              'temp.conf.js': 'temp.conf.js',
              'src/temp-test.ts': 'src/temp-test.ts'
            },
            options: {
              replacements: [{
                pattern: /test.ts/ig,
                replacement: 'temp-test.ts'
              },
              {
                pattern: /const context =.*/ig,
                replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
              }]
            }
        }
    },
    'exec': {
        sleep: {
          //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
          command: 'ping 127.0.0.1 -n 4 > nul',
          stdout: true,
          stderr: true
        },
        ng_test: {
          command: 'ng test --config=temp.conf.js',
          stdout: true,
          stderr: true
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-string-replace');
    grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};

การเพิ่มสิ่งนี้สำหรับคนอย่างฉันที่กำลังค้นหาวิธีเรียกใช้ข้อมูลจำเพาะเดี่ยวใน Angular และพบ SO นี้

ตามเอกสาร Angular ล่าสุด (v9.0.6 ณ เวลาที่เขียน) ng testคำสั่งมี--includeตัวเลือกที่คุณสามารถระบุไดเรกทอรีของ*.spec.(ts|tsx)ไฟล์หรือเพียงแค่.spec.(ts|tsx)ไฟล์เดียว

https://angular.io/cli/test

ต้องการการเปลี่ยนแปลงเพียงเล็กน้อยในtest.tsไฟล์ภายในโฟลเดอร์ src:

const context = require.context('./', true, /test-example\.spec\.ts$/);

นี่test-exampleคือชื่อไฟล์ที่แน่นอนที่เราต้องเรียกใช้

ในทำนองเดียวกันหากคุณต้องการทดสอบไฟล์บริการเพียงอย่างเดียวคุณสามารถแทนที่ชื่อไฟล์เช่น "/test-example.service"

สิ่งนี้ใช้ได้กับฉันในทุกกรณี:

ng test --include='**/dealer.service.spec.ts'

อย่างไรก็ตามฉันมักจะได้รับ "TypeError: ไม่สามารถอ่านคุณสมบัติ 'ngModule' เป็นโมฆะ" ได้:

ng test --main src/app/services/dealer.service.spec.ts

รุ่นของ @ angular / cli 10.0.4