Cannot load tests in non-cli project about angular-karma_test-explorer HOT 17 CLOSED

Hi Jeroen @VeldMuijz thank you for submitting this bug, If you cannot upload a test project I will need some extra information from you.

First, you should not use Karma as "angularKarmaTestExplorer.projectType": "Karma", since you re not in a Karma project, you re using Angular so "angularKarmaTestExplorer.projectType": "Angular" is the correct configuration.

Second a few questions, you re opening a folder with the project directly in the root?
when you open that project folder your karma.conf.js is located in the root path?

it is very strange that the explorer is reading everything correct and returning
[15:03:42] INFO: Test Loading completed!
this means karma was successfully initiated and the karma reporter returned RunCompleted.

could you provide me with a copy of the karma.conf.js file including path from the folder you re opening in vscode?

What do you see in the test explorer IO? not a single test?(if this is the case it seems like karma is not finding your tests for whatever reason, and returning completed without any test being found)

why do you guys use this command ? 'node_modules/.bin/karma start karma.conf.js --browsers Chrome'
could you try installing the karma-cli so you can do karma start or npx karma start?

from angular-karma_test-explorer.

Second a few questions, you re opening a folder with the project directly in the root?
when you open that project folder your karma.conf.js is located in the root path?

Yes, karma.conf.json is in the root.

could you provide me with a copy of the karma.conf.js file including path from the folder you re opening in vscode?

`const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

module.exports = function(config) {
config.set({
client: {
clearContext: false
},
basePath: './test/',
frameworks: ['jasmine'],
files: [
{ pattern: 'unit-tests.js' }
],
exclude: [],
preprocessors: {
'unit-tests.js': ['webpack', 'sourcemap']
},
webpack: require('./webpack.config')('test'),
reporters: ['progress', 'kjhtml', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome', 'ChromeHeadless'],
singleRun: false,
concurrency: Infinity
});
};`

What do you see in the test explorer IO?

No tests at all, the refresh icon seems to be loading for ever (waited for 20 minutes)

why do you guys use this command ?

Not sure why actually, this is an older project and don't know/remember why this is done.

I've installed karma-cli and set the project type to 'Angular', this results in:
[16:50:26] INFO: Test Loading started... [16:50:28] ERROR: error from ng child process: Error: spawn npx ENOENT

from angular-karma_test-explorer.

Great, thank you I will try that configuration locally to see what happens. The error marks that something is failing when starting karma as a child process.

could you provide me with 'unit-tests.js' that file you re using as preprocessor and give me the full path and source of an example test you re running? also I would need the webpack config.

sorry about the questions but without a test project I need to try multiple things that could be going wrong.

Now that I noticed you re using not only a non cli version but an older version of angular. before they combined karma with the angular core/testing library. so in your case I think karma is running completely separated from angular.... are you even using typescript for the tests?

that could also be the reason why you were seeing test loading completed( in that case the explorer loaded corretly but returned 0 tests)

from angular-karma_test-explorer.

webpack:

var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    performance: {
        hints: false
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [
            new TsConfigPathsPlugin({
                configFileName: 'tsconfig.json',
                compiler: 'typescript'
            })
        ]
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: 'tsconfig.json' }
                    },
                    'angular-router-loader',
                    'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loader: 'ignore-loader'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

unit tests.js (redacted for brevity):
require('../src/shared/shared.spec.ts');

shared.spec.ts

import 'zone.js/dist/zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test';
import 'zone.js/dist/jasmine-patch';

import { TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

// TestBed initialization
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

// load all specs from this app
const context = (require as any).context('./', true, /\.spec\.ts$/);
context.keys().map(context);

We are using typescript (also for the tests) and karma can run them with ease. but as I stated this is indeed an older project with a, lets say, less than ideal setup. All our new apps/projects etc are angular cli based and using a more modern setup in general.

So I understand if this is too much of a stretch for you to debug/figure out. So if the solution doesn't come quickly to you just let me know and i'll keep on working as we did (running karma in a browser window seperate from vscode)

from angular-karma_test-explorer.

Thank you very much.
No worries I wanna try to support as many scenarios as possible so I will try my best to reproduce it and fix it :).

Thanks for the feedback and of course for downloading my extension.

from angular-karma_test-explorer.

Hello, I have the same error. Managed to compile minimal project with the problem.
NoTestsFound.zip

The single test is testing angular component using karma and mocha.

After installing with npm, command npm run test should show one test successful.
Angular karma runner output shows me

[10:25:46 PM] INFO: Listening to AngularReporter events on port 9997
[10:26:16 PM] INFO: Test loading completed - No tests found

regardless whether I set the project to karma or angular.

Let me know if you can reproduce the issue using the code provided.

from angular-karma_test-explorer.

Hi @jaksmid thank you for taking the time to upload a test project, this currently doesn't support mocha(never tried it myself), only karma-jasmine, but your project it's gonna be awesome for me to reproduce it and bring support to mocha. Thank you very much. I will inform here as I make progress on this.

Once I get home and try it I will report here if indeed it happens or not.

from angular-karma_test-explorer.

Thanks @Raagh , let me know if I can help with anything!

from angular-karma_test-explorer.

@Raagh this issue still opened?
Not sure if it is the same issue in my vscode. I cannot load my tests in the explorer and the icon keeps spinning. The settings are default. No error in dev tool. Only two lines of logs when I open my project folder.
Starting Angular test enviroment for project
Listening to AngularReporter events on port 9999
I am very new to Angular and VSCode. I read the docs but I still don't know whether I need to change my settings. Say, the project type is now AngularCLI. I don't know the difference with Angular? I cannot find a youtube tell how to configure it (maybe too easy for experienced guys...)

from angular-karma_test-explorer.

Hey @amo-zhang thank you for commenting here, probably just a configuration issue. So let me explain:

You have several ways of creating an Angular project, one is just installing angula, karma and creating all the files yourself, the other one is using the AngularCLI which is a commandline tool that let's you create a new project and components/service/etc just by using the terminal. This is the one that most people uses nowadays and it is the one that is supported by default by this extension.

So let's start from the beginning, is your project an AngularCLI project or you did the setup manually?

from angular-karma_test-explorer.

@Raagh Surprised to get response so fast in Christmas night~
The project is not created by me. I just started to maintain it...
I guess it is AngularCLI and I tried both Angular and AngularCLI but no luck. I don't know what else to check.

from angular-karma_test-explorer.

@Raagh I downloaded this hero project https://github.com/johnpapa/angular-tour-of-heroes and open in test view. Same as my project. Maybe you can try it.

from angular-karma_test-explorer.

@amo-zhang yeah I am an idiot, I should be doing something else maybe ahha.
Can you join this https://gitter.im/Angular-Karma-Test-Explorer/Bugs ?

I can help you there

from angular-karma_test-explorer.

@amo-zhang the problem is your karma version is too old, my extension uses --karma-config as argument to the process in order to specify a special karma config file. In the version of karma you re using this argument does not exists.

I am currently working a complete rebuild of the extension that should allow cases likes this to work, but it will take time. I will inform here when the version is up.

from angular-karma_test-explorer.

@Raagh I see my dev doc. It tells to run "npm install -g @angular/[email protected]" so I guess my version is 1.7.4?

from angular-karma_test-explorer.

yes indeed, current version is v8.3.21

from angular-karma_test-explorer.

Can I ask the status of mocha support?
I have a non-angular (webcomponent based) project which uses karma and mocha and webpack to run tests in browser.
This project seems to be the one to have support for this setup. The extension start to execute the test project and can connect to the karma server, however no test spec is found.

from angular-karma_test-explorer.