{"id":2405,"date":"2022-12-02T14:35:06","date_gmt":"2022-12-02T13:35:06","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2405"},"modified":"2023-01-25T09:35:18","modified_gmt":"2023-01-25T08:35:18","slug":"how-to-execute-only-one-test-spec-with-angular-cli","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/12\/02\/how-to-execute-only-one-test-spec-with-angular-cli\/","title":{"rendered":"How to run only specific test spec file in Angular"},"content":{"rendered":"\n

\u00a0there is a way to run tests against only one selected spec file. For doing that, we should configure\u00a0test.ts<\/code>\u00a0file inside\u00a0src<\/code>\u00a0<\/strong>folder. This file contains the below line of code which configures to include test files while running the\u00a0ng test<\/code>\u00a0or\u00a0ng t<\/code>\u00a0command.<\/p>\n\n\n\n

const context = require.context('.\/', true, \/\\.spec\\.ts$\/);<\/code><\/pre>\n\n\n\n
The first parameter is the repository path (here, all files of an angular project<\/em>) the third parameter includes all spec files.<\/p>\n\n\n\n
<\/p>\n\n\n\n
let’s assume now, we have a\u00a0 “brice.component.spec.ts<\/code>” \u00a0that we want to run a single component test file for debugging and testing it. There are multiple ways we can do it. <\/p>\n\n\n\n
configure test.js to execute a single spec file<\/h4>\n\n\n\n
Replace\u00a0\/\\.spec\\.ts$\/<\/strong><\/code>\u00a0with the file name you want to test. For example:\u00a0\/brice.component\\.spec\\.ts$\/<\/strong><\/code><\/p>\n\n\n\n
then Runs the following command :<\/p>\n\n\n\n
ng test [project]\n\/\/or \nng t [project]<\/code><\/pre>\n\n\n\n
This will run test only for\u00a0app.component.spec.ts<\/code>.<\/em><\/p>\n\n\n\n
PS: <\/strong>if we want to run all test spec files inside a folder, we can configure them like this<\/span><\/em><\/p>\n\n\n\n
const context = require.context('.\/service', true, \/\\.spec\\.ts$\/);<\/code><\/pre>\n\n\n\n
this will run all spec files under the\u00a0service<\/code>\u00a0folder.<\/p>\n\n\n\n
command line to run single test spec file<\/h4>\n\n\n\n
use\u00a0--include<\/code><\/p>\n\n\n\n
Angular CLI provides the\u00a0--include<\/code>\u00a0option to include a regular expression for including single or multiple files\/folders.<\/p>\n\n\n\n
ng test --include=**\/brice.component.spec.ts \/\/ single file\r\nng test --include'**\/service\/*.spec.ts \/\/ multiple files inside a folder<\/code><\/pre>\n\n\n\n
or<\/p>\n\n\n\n
\/\/ single file\r\nnpm run test -- --include src\/app\/brice.component.spec.ts\r\n\r\n\/\/ all files inside the service folder\r\nnpm run test -- --include src\/app\/service<\/code><\/pre>\n\n\n\n
npm script to single test spec file<\/h4>\n\n\n\n
we can also configure the\u00a0scripts<\/code>\u00a0tag in package.json<\/p>\n\n\n\n
{\r\r\n    \"scripts\": {\r\n        \"singletest\": \"ng test --include=**\/brice.component.spec.ts\"\r\n    }\r\n}<\/code><\/pre>\n\n\n\n
then run it with “npm run singletest<\/strong><\/em>” command.<\/p>\n\n\n\n
jasmine and karma allow executing one component test spec<\/h4>\n\n\n\n
Jasmine provides\u00a0fdescribe<\/span><\/em><\/code>\u00a0and\u00a0fit<\/span><\/em><\/code>\u00a0allowing us to focus specific test cases to run it and skipped non-focused test case execution.<\/p>\n\n\n\n
fdescribe('MyComponent', () => {\r\n  fit('should create', () => {\r\n    \/\/test for undefined \r\n  }\r\n}<\/code><\/pre>\n\n\n\n
  • fdescribe<\/strong><\/em> -> Allows to run a group of tests<\/code><\/li>
  • fit -<\/strong><\/em>> Allows running a single test case<\/code><\/li><\/ul>\n\n\n\n
    PS: <\/em><\/span><\/strong> Please note that use\u00a0ddescribe<\/code>\u00a0<\/span>for jasmine version <2.1 version, and use\u00a0fdescribe<\/span><\/code>\u00a0for >2.1 version.<\/em><\/p>\n\n\n\n
    mocha and karma allow running a single component spec file <\/h4>\n\n\n\n
    mocha provides describe.only<\/span><\/em> and it.only<\/span><\/em><\/code>\u00a0allowing us to focus specific test cases to run it and skipped non-focused test case execution.<\/p>\n\n\n\n
    • describe.only<\/code>– Allows to run a group of tests<\/li>
    • it.only<\/code> – Allows running a single test case<\/li><\/ul>\n\n\n\n
      describe.only('MyComponent', () => {\r\n  it.only('should create', () => {\r\n    \/\/test for undefined \r\n  }\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      \u00a0there is a way to run tests against only one selected spec file. For doing that, we should configure\u00a0test.ts\u00a0file inside\u00a0src\u00a0folder. This file contains the below line of code which configures to include test files while running the\u00a0ng test\u00a0or\u00a0ng t\u00a0command. The first parameter is the repository path (here, all files of an angular project) the third […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[643,161,217,642],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2405"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2405"}],"version-history":[{"count":5,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2405\/revisions"}],"predecessor-version":[{"id":2502,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2405\/revisions\/2502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}