Empty test explorer when using hybrid app

[Camo30]

Hi,

thank you for developing this great extension! I am trying to load my karma tests of a hybrid app (Angular CLI with embedded Angular 7 and AngularJS 1.5) which does not work since the list in the test explorer keeps empty. Did not get any debug output from the extension, neither in the output panel nor anywhere else. Tried to use the setting

"angularKarmaExplorer.logpanel": true

but that doesn't change anything. Any thoughts?

[Raagh]

Hi @Camo30 thank for downloading the extension!.
I would need some extra help to reproduce this and fix it.

Could you open developer tools on vscode and copy the error that you probably have in the console?
Could you provide me with a test project that has the bug for testing what's going on?, unfortunately I don't have an hybrid app that I can try myself.

[Camo30]

Hi @Raagh,

there are no errors in the console of the developer tools, the only thing which is visible there is this line

[Extension Host] Starting Angular tests with arguments: test --karma-config="C:\Users\sta\.vscode\extensions\raagh.angular-karma-test-explorer-1.0.0\out\config\test-explorer-karma.conf.js"

I looked into that file and I think i've found the problem. This line

let originalConfigPath = path.join(process.cwd(), "src", "karma.conf.js");

searches the configuration file in the src folder, in a hybrid application the folder structure is quite different. The main karma.conf.js file is located in the root path, while there are sub configurations placed in subfolders like apps/[projectname]. The main file is referenced in the angular.json file.

I tried to remove the src part from the test-explorer-karma.conf.js file, so it should search in the root folder, but until now I dont have any success. I'm not deep into vs code extensions development, how can I output the current value of originalConfigPath into the console?

[Raagh]

mmm the thing is I am looking also in the root.

`let originalConfigPath = path.join(process.cwd(), "src", "karma.conf.js");
const karmaConfigurator = new KarmaConfigurator();

const setupCorrectKarmaConfFilePath = () => {
try {
require.resolve(originalConfigPath);
} catch (error) {
originalConfigPath = path.join(process.cwd(), "karma.conf.js");
}
};`

the code first checks src\karma.conf.js [ let originalConfigPath = path.join(process.cwd(), "src", "karma.conf.js"); ] if it doesnt found it there it will look into the root karma.conf.js [ originalConfigPath = path.join(process.cwd(), "karma.conf.js"); ]

can you put a copy of the karma.conf.js ? are you referencing angular-devkit?

for logging a value just do global.console.log(originalConfigPath)

[Camo30]

You are right, the root folder will also be checked. This is my karma.conf.js file, I think it's quite common:

const { join } = require('path');
const { constants } = require('karma');

module.exports = () => {
  return {
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-firefox-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-junit-reporter'),
      require('karma-spec-reporter')
    ],
    client: {
      captureConsole: false, // Don't show console log entries of application in karma log
      clearContext: false // Leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: join(__dirname, 'coverage'),
      reports: ['html', 'cobertura'],
      fixWebpackSourcePaths: true,
      skipFilesWithNoCoverage: true,
      'report-config': {
        html: {
          subdir: '../../html'
        },
        cobertura: {
          file: '../../coverage-result.xml'
        }
      }
    },
    junitReporter: {
      outputDir: '../../unit',
      outputFile: 'unit-result.xml',
      useBrowserName: false
    },
    reporters: ['spec', 'junit'],
    port: 9876,
    colors: true,
    logLevel: constants.LOG_INFO,
    autoWatch: false,
    browsers: ['ChromeHeadless'],
    singleRun: true
  };
};```

[Raagh]

the only thing I could think of is that currently this extension doesn't work well with karma-jasmine-html-reporter because of this : specFilter issue
this prevents from running karma run ( which is used to load the tests).
I have a workaround implemented and seems to work on my project though ( which also contains the plugin)

could you remove it and see if it works?

if it works: please let me know and I will do a temporary fix to remove that reporter from the load if its present in the user's karma config, until the proper workaround is finished.

if it doesnt work:
if you re already changing the code do you mind doing a little debugging and see where the code is stopping?. I can do it myself but I would really need a test project from you to try it, unfortunately since this extension is really an integration between multiple things (vs code, karma, angular-cli, project config) its hard to reproduce a very specific case like this, but it would be awesome to fully support hybrid apps like yours.

if you wanna contribute you can follow this contributing guidelines on how to run the project, debug it, made changes and requesting to be merged.

[Camo30]

Just removed the plugin, now it looks like this:

const { join } = require('path');
const { constants } = require('karma');

module.exports = () => {
  return {
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-firefox-launcher'),
      require('karma-phantomjs-launcher'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-junit-reporter'),
      require('karma-spec-reporter')
    ],
    client: {
      captureConsole: false, // Don't show console log entries of application in karma log
      clearContext: false // Leave Jasmine Spec Runner output visible in browser
    },
    junitReporter: {
      outputDir: '../../unit',
      outputFile: 'unit-result.xml',
      useBrowserName: false
    },
    reporters: ['spec', 'junit'],
    port: 9876,
    colors: true,
    logLevel: constants.LOG_INFO,
    autoWatch: false,
    browsers: ['ChromeHeadless'],
    singleRun: true
  };
};

Does not work either. Tried some debugging but stuck at this point (line 34) in angular-test-explorer.ts:

await this.karmaRunner.waitTillKarmaIsRunning(this.eventEmitter);

Here it steps over to the end of the method so I think there's an error happening. Stepping into it leads to tslib.js which does not really helps. Putting that code part into a "try catch" does result in nothing else.

[Raagh]

lets move it to here so we can discuss it further

https://gitter.im/Angular-Karma-Test-Explorer/community#

[Raagh]

If I did understand the example correctly its gonna be a long way since I can support hybrid apps.

you can have a karma.conf.js in the root folder but i guess thats just common config, basically every app you have in the apps folder its a separate app, each with its own karma.conf.js. They re all referenced in the angular.json so I guess I could grab that to get the references to every single karma conf in that folder, but then I wouldnt know how to run them if they re run separately because as far as I know karma only takes one config file. I guess its doing multiple runs with every file?. also those files will have to be processed to remove 'kjthml' reporter which will cause karma run --grep not to work.

I am pretty sure that if you open the folder of a single app the test explorer will "work" cause inside the app the structure is pretty normal ( except for the fact that the angular.json is not there so the test explorer is gonna think its not angular project )

I am gonna figure it out but its gonna be hard ahahah

[Camo30]

Yes i completely agree that it will not be that easy. And I'm afraid that there may be other hybrid app configurations out there which are completely different to this one. But it would be awesome to get it working, that would help me a lot!

I'll definitely try to provide an exact copy of the project folder structure in my git repo, just need some time.

[Raagh]

Sure no problem. Thanks that would be of a lot of help. In the meantime I will ask around in the angular GitHub for more info on how they handle all the karma.conf and see what I can get working

[Camo30]

I've created a fully working hybrid app using nwrl schematics from scratch which has exactly the same project structure, you can find the repo here: https://github.com/Camo30/karma-test-explorer-hybrid-demo

[Raagh]

Hey one more question, in your project. When you run Ng test, does it run tests from all apps? Or only from one? Do you have to specify which app?.
In this demo project is the same behavior?.

[Camo30]

Yes, it should run all tests together but I'm not completely sure. My project is heavily in progress, I'll know more in a few days. In the demo project there are only a few Angular tests, in my opinion the legacy AngularJS unit tests are far less important to show up in the test explorer as they will get migrated

[Raagh]

I think I figure out how it works, yes it runs all tests from all apps but it does it by starting and ending the karma process with each run( cause as I thought karma doesn't support multiple files at once)

I started working on it on this branch: https://github.com/Raagh/angular-karma_test-explorer/tree/feature/support-multiple-apps .its gonna take time but it something mandatory cause its the same structure when you create a component library and an app in the same project( I encountered this case at my job).

probably what I am gonna do is load all tests from all apps in their independent suite separated by project name ( by reading angular.json and launching karma each time but not running the tests). unfortunately that means that when you decide on to test one project I will have to start karma again for that specific project if you then start a test in another project the same will happen again, but if you keep testing on the same one then it will not start it every time).

I will try to include some config values so you can set which project you want to run tests on so as not load everything if you don't want to.

[Camo30]

Sounds great, thank you! I'm really looking forward to the update. It would be awesome to have a config value to set the current project which is getting tested.

[Raagh]

I added initial support for multi apps. Now apps will be loaded from the angular.json file, there it will find the corresponding karma.conf.js, also you can setup a configuration value for the app you want to run (based on the name used in the angular.json).

still havent figured out how to load multiple apps at the same time in the test explorer. so for now you have to pick the one you want to load and setup the name in the configuration. If you change the app name in the configuration the tests should reload automatically. Hope this version is already a progress for you. I will keep working to have full functionality.

[Camo30]

Thank you very much, this is a great addition. I'm quite busy at the moment so I can't test it extensively. As a first small feedback: it seems to work but it's fairly slow. To get the available two unit tests (angular 7) from the project it lasts more than one minute.

[Raagh]

You should also have an output channel called test explorer logs..please check that and let me know what you see. It should not take much longer that running Ng test as that is exactly what it does to load the tests, maybe something is getting error in the middle of the process and restarting.

[Raagh]

new update will bring a picker in the status bar that will let you select the project you want to test in case of having multiple projects in one root, thats gonna be the full feature. I will let you know here when that is out

[Raagh]

now you can see an icon on the navbar of the test explorer in case you want to change the selected project, I consider this as full support for hybrid apps. Please feel free to open a new bug if you find something new :)