Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get Karma to run tests of a specific angular 6 component library inside workspace

I have an angular 6 workspace (called miami-space) and have created a component library called "vice-lib". This directory tree looks like this:

.
└── miami-space       <-- This is my workspace directory
    ├── e2e
    │   └── src
    ├── node_modules
    ...
    ├── projects      <-- Projects directory for created libraries
    │   └── vice-lib
    │       └── src
    │           └── lib
    └── src           <-- The source directory for the app
        ├── app
        ├── assets
        └── environments

(I created the library with ng new library vice-lib --ext=vlib)

If I go to the root dir (miami-space) and run the unit tests with

npm run test

Karma runs the tests in the browser, but because there are tests for the app and tests for the library, karma runs the tests in 2 phases.

The first phase ONLY runs the tests for the app and you see this in the console:

λ ~/dev/tasks/t-122/cat/miami-space/ npm run test

> [email protected] test /Users/Plastikfan/dev/tasks/t-122/cat/miami-space
> ng test

 10% building modules 1/1 modules 0 active(node:41963) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
21 06 2018 13:47:36.106:WARN [karma]: No captured browser, open http://localhost:9876/
21 06 2018 13:47:36.111:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
21 06 2018 13:47:36.111:INFO [launcher]: Launching browser Chrome with unlimited concurrency
21 06 2018 13:47:36.116:INFO [launcher]: Starting browser Chrome
21 06 2018 13:47:39.894:WARN [karma]: No captured browser, open http://localhost:9876/    
21 06 2018 13:47:40.006:INFO [Chrome 67.0.3396 (Mac OS X 10.13.4)]: Connected on socket _5z2mq2NuMiHHahdAAAA with id 8795036
Chrome 67.0.3396 (Mac OS X 10.13.4): Executed 3 of 3 SUCCESS (0.154 secs / 0.138 secs)

... and the test results for the app show up in the browser

If you hit <CTRL>-C, Karma kills the browser and then runs the tests for the library ONLY (note the ^C denoting when I hit CTRL-C):

^C  0% compiling21 06 2018 13:50:21.034:WARN [karma]: No captured browser, open http://localhost:9876/
21 06 2018 13:50:21.035:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
21 06 2018 13:50:21.035:INFO [launcher]: Launching browser Chrome with unlimited concurrency
21 06 2018 13:50:21.044:INFO [launcher]: Starting browser Chrome
21 06 2018 13:50:24.453:WARN [karma]: No captured browser, open http://localhost:9876/  
21 06 2018 13:50:24.544:INFO [Chrome 67.0.3396 (Mac OS X 10.13.4)]: Connected on socket FelqTteskkryAtnYAAAB with id 63644171
Chrome 67.0.3396 (Mac OS X 10.13.4): Executed 5 of 5 SUCCESS (0.112 secs / 0.093 secs)

So I don't really understand how Karma is running here, presuming this is intended behaviour.

Are you only allowed to run tests for the component library after running the application tests? What if I have a lot of tests in the app but I only want to run the library tests?

If I "cd" to the vice-lib directory and try to run the tests using npm run test, then because the package.json is a cutdown config which doesn't include a scripts section, npm fails understandably:

echo 'Error: no test specified'

So I read up further on the karma documentation and saw the 'basePath' (by default set to empty string). This is described as:

The root path location that will be used to resolve all relative paths defined in files and exclude. If the basePath configuration is a relative path, then it will be resolved to the __dirname of the configuration file.

I thought I could update this to point to the root of the library (hopefully with the option of specifying on the command line, so I could write multiple script entries, see further down below) ie

./src/projects/vice-lib

But this seems to have no effect on the behaviour of Karma and again both sets of tests are run, with a CTRL-C required to get to the 2nd phase running the library tests. This seems to be a very cumbersome workflow and I hope there is a way round this, so I can just run the library tests straight away.

Let's say I inserted another library into the workspace, so now there are 2 component libraries and an app. Does that mean I would have to run first the app tests, then vice-lib tests, then the new library tests? I think you can see where I'm going with this and it just doesn't seem to be right, unless I'm doing something wrong (most likely!).

I have a default test.ts file which is unchanged from the default which includes the line (for finding the test cases to run):

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);

but I'm not sure how I could change this on a per library level.

I was hoping that I could define multiple entries in package.json: scripts, something like:

"test:app": "ng test",
"test:vice": "ng test --<some option to refer to .projects/vice-lib>"

so that I could directly run the tests for the library I want.

So how is Karma running here, and is it not designed to work with multiple projects in a workspace?

UPDATE: I also tried to use fdescribe on one of teh vice-lib test fixtures, but this had no effect other than a warning on the console:

Chrome 67.0.3396 (Mac OS X 10.13.4) ERROR: 'DEPRECATION: fit and fdescribe will cause your suite to report an 'incomplete' status in Jasmine 3.0'

like image 629
Plastikfan Avatar asked Jun 21 '18 13:06

Plastikfan


People also ask

How would you run your unit tests for an Angular project?

If Angular CLI is used to manage the Angular projects, it will automatically support Jasmine and Karma Configurations. All you need in order to test your application is to type the command ng test. As far as possible, run tests on real browsers and devices to ensure that software is verified under real user conditions.

Can you conduct automated testing on Angular?

The Angular framework is a mature and comprehensive solution for enterprise-ready applications based on web technologies. At Angular's core lies the ability to test all application parts in an automated way.

What is used for running test cases in Angular by default?

Jasmine is the default test framework used with Angular. It ships with Angular CLI by default.


1 Answers

If you need to run only tests for the library, you can use ng test library-name, like you use a build command to generate the dist files. Is explained here.

like image 195
Carlos Osiel Avatar answered Sep 22 '22 10:09

Carlos Osiel