Test Explorer parses tests endlessly

markusfalk commented 5 years ago

Describe the bug The Test Explorer does not recognize the project properly. The Test Explorer seems to endlessly parse for the project's tests.

To Reproduce 🤔

Logs no logs :(

Screenshots

Desktop (please complete the following information):

Test Explorer UI: 2.12.1
Angular/Karma TEst Explorer: 1.0.3
OS: macOS Mojave 10.14.5
Angular Version: "@angular/core": "~8.1.1", "karma": "~4.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2",
Node version: v11.15.0
VS Code: Version 1.36.1 (1.36.1)
karma.conf.js path from the root folder you re opening in vscode: ./src/karma.conf.js

Context

might be related to #21

markusfalk commented 5 years ago

Tried to restart everything
It is CLI default project
all my other extensions installed: https://marketplace.visualstudio.com/items?itemName=MarkusFalk.angular-development-extension-pack

Raagh commented 5 years ago

Hi @markusfalk Markus, thank you downloading the extension and for reporting this. Could you upload a test project that reproduce the bug so I can fix it?

Could you check the Output channel "Test Explorer Logs" ? that's the one that contains the actual logs of the test explorer. Could you also check the VSCODE developer tools and let me know the errors?(Help -> Toggle developer tools). Do you have any configuration done to the test explorer?(CLI projects should work by default)

Raagh commented 5 years ago

More questions: Are you opening the root folder of the project(open folder) or a workspace? Could you also provide me with a copy of your angular.json file?

markusfalk commented 5 years ago

Hey @Raagh, thanks for the quick reply. Not sure how I can give you access to the private repo for reproduction. Yes I opened root folder. Here is some more info:

Test Explorer Logs

angular-errors.log

[error] TypeError: Cannot destructure property `error` of 'undefined' or 'null'.
    at TestCommand.runSingleTarget (/Users/markusfalk/Projects/mobile-frameworks-comparison-chart/node_modules/@angular/cli/models/architect-command.js:197:40)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)

Chrome Console

[Extension Host] [9:41:29 AM] INFO: Starting Angular test enviroment for project: mobile-frameworks-comparison-chart
console.ts:134 [Extension Host] [9:41:30 AM] INFO: Listening to AngularReporter events on port 9999

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mobile-frameworks-comparison-chart": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mobile-frameworks-comparison-chart",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/robots.txt",
              "src/humans.txt",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/normalize.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "2mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "src/ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mobile-frameworks-comparison-chart:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "mobile-frameworks-comparison-chart:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mobile-frameworks-comparison-chart:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mobile-frameworks-comparison-chart-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mobile-frameworks-comparison-chart:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "mobile-frameworks-comparison-chart:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "mobile-frameworks-comparison-chart"
}

Raagh commented 5 years ago

mmmm very strange, for some reason chrome browser or something else is closing socket connection between the karma server and the test explorer. (Angular Reporter closed connection with event transport close) (There is currently a bug in karma that does this but it should not happen continuously, only once in a while)

When that happens the default behavior is close karma and start everything all over again. But in your case after trying that the angular run instance is throwing an error (karma itself since error comes from stderr which is the karma error output).

Could you verify if everything works fine if you do "ng test"? I don't need all your project to debug this, but I would be nice to have a test project with the same structure and the app.component with its own tests. The rest of the code I don't care or need.

Raagh commented 5 years ago

I don't see anything strange in the angular.json really, apart from this proxy.conf.json, It should not affect cause its on the serve command but still, what do you have in there?

and also maybe copy here your karma.conf.js.

Sorry for so many questions but as you can see, the setup on an angular testing environment is a huge integration between different technologies, not an easy one to debug.

markusfalk commented 5 years ago

reproduction is in the works (need some time for that)
it is an angular/pwa web project (not ionic)
ng test works with 1 failing test

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage/mobile-frameworks-comparison-chart'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

proxy

{
  "/api": {
    "target": "https://www.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  },
  "/fake-api": {
    "target": "http://localhost:3000/frameworks",
    "secure": false
  }
}

I greatly appreciate the help. Thanks alot :)

markusfalk commented 5 years ago

It does seem to work when I start ng test as well 🤔

Takes about 5 minutes to load but then shows something and runs them too.

Raagh commented 5 years ago

No problem!, thank you for reporting and taking the time to help make this extension better. Please make sure that the test project still reproduces the problem before submitting it.

Its really a strange case cause basically I have the same angular.json and karma.conf.js, tried it on mac and windows just to be sure and it works fine. I am wondering if it could be a network configuration or something like that(though generally those problems come up on windows not on mac).

EDIT: WOW I didn't not expect that happening, this means that the original server(the one that the test explorer starts) must be running, cause if you run regular ng-test the connection to the test explorer will not be made. This is very very strange

markusfalk commented 5 years ago

I cannot reproduce the problem anymore. It takes a long time for the tests to load but eventually they all show up now.

Thanks for your time 🤓

Raagh commented 5 years ago

Well I have to say I am not sure how happy I am with that ahha. I am glad that it works for you but I wonder why it didn't before. If you encounter something like this again please report it and I will do my best to take care of it

Still glad it works, hopefully you can enjoy it now :)

Just wondering, how long does it take from the test explorer? And how long does it take when you do Ng test?

markusfalk commented 5 years ago

I understand completely. What took long was not the test execution but the parsing of available tests. But this too now has improved. Running Test Explorer and ng test together changed something to make it all work.

If it shows up again I will let you know.

Raagh / angular-karma_test-explorer