Tests not loaded for default generated Angular 15 project

[arifmahmudrana]

Not showing the test buttons

• Not showing the test related buttons e.g run tests, show log etc buttons aren't showing in the UI.

Steps to Reproduce the Behavior

1. Install a fresh Angular project
2. Open the project
3. Open the default app.component.spec.ts file
4. See no buttons showing out

Describe the Expected Behavior

• Showing the buttons like test run button, show log button etc. The test run works perfectly using npm test but no controls show from UI so no issues with the tests.

Screenshots(No controls show)

Please Provide the Following Information

• OS: Ubuntu 20.04.5 LTS
• Node Version: v16.13.0
• VS Code Version: 1.73.1
• Karma Version: 6.4.1
• Frameworks: Jasmine

[lucono]

@arifmahmudrana, please also provide:

• Debug logs
• Minimal project that reproduces the issue

[arifmahmudrana]

@arifmahmudrana, please also provide:

• Debug logs
• Minimal project that reproduces the issue

@lucono

extHostLog

2022-12-04 00:50:20.661 [info] Skipping acquiring lock for /home/arif/.config/Code/User/workspaceStorage/b2d5fce63b58c6e0108ae9bb3aa57014.
2022-12-04 00:50:20.742 [info] ExtensionService#_doActivateExtension vscode.typescript-language-features, startup: false, activationEvent: 'onLanguage:typescript'
2022-12-04 00:50:20.742 [info] ExtensionService#_doActivateExtension Angular.ng-template, startup: false, activationEvent: 'onLanguage:typescript'
2022-12-04 00:50:20.742 [info] ExtensionService#_doActivateExtension ms-vscode.test-adapter-converter, startup: false, activationEvent: 'onLanguage:typescript', root cause: lucono.karma-test-explorer
2022-12-04 00:50:20.743 [info] ExtensionService#_doActivateExtension rvest.vs-code-prettier-eslint, startup: false, activationEvent: 'onLanguage:typescript'
2022-12-04 00:50:20.743 [info] ExtensionService#_doActivateExtension vscode.microsoft-authentication, startup: false, activationEvent: 'onAuthenticationRequest:microsoft'
2022-12-04 00:50:20.743 [info] ExtensionService#_doActivateExtension vscode.git-base, startup: true, activationEvent: '*', root cause: vscode.git
2022-12-04 00:50:20.744 [info] ExtensionService#_doActivateExtension be5invis.vscode-custom-css, startup: true, activationEvent: '*'
2022-12-04 00:50:20.744 [info] ExtensionService#_doActivateExtension tombonnike.vscode-status-bar-format-toggle, startup: true, activationEvent: '*'
2022-12-04 00:50:20.744 [info] ExtensionService#_doActivateExtension vscode.npm, startup: true, activationEvent: 'workspaceContains:package.json'
2022-12-04 00:50:20.744 [info] ExtensionService#_doActivateExtension yzhang.markdown-all-in-one, startup: true, activationEvent: 'workspaceContains:README.md'
2022-12-04 00:50:21.157 [info] ExtensionService#_doActivateExtension vscode.markdown-math, startup: false, activationEvent: 'api', root cause: yzhang.markdown-all-in-one
2022-12-04 00:50:21.311 [info] ExtensionService#_doActivateExtension hbenl.vscode-test-explorer, startup: false, activationEvent: 'onLanguage:typescript', root cause: lucono.karma-test-explorer
2022-12-04 00:50:21.311 [info] ExtensionService#_doActivateExtension vscode.git, startup: true, activationEvent: '*'
2022-12-04 00:50:21.312 [info] ExtensionService#_doActivateExtension vscode.github, startup: true, activationEvent: '*'
2022-12-04 00:50:21.495 [info] ExtensionService#_doActivateExtension lucono.karma-test-explorer, startup: false, activationEvent: 'onLanguage:typescript'
2022-12-04 00:50:21.542 [info] Eager extensions activated
2022-12-04 00:50:21.606 [info] ExtensionService#_doActivateExtension vscode.github-authentication, startup: false, activationEvent: 'onAuthenticationRequest:github'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension vscode.debug-auto-launch, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension vscode.emmet, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension vscode.merge-conflict, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension eamodio.gitlens, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension Equinusocio.vsc-material-theme, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension equinusocio.vsc-material-theme-icons, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.607 [info] ExtensionService#_doActivateExtension esbenp.prettier-vscode, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.608 [info] ExtensionService#_doActivateExtension PKief.material-icon-theme, startup: false, activationEvent: 'onStartupFinished'
2022-12-04 00:50:21.608 [info] ExtensionService#_doActivateExtension streetsidesoftware.code-spell-checker, startup: false, activationEvent: 'onStartupFinished'

Output of ng version

Angular CLI: 15.0.2
Node: 16.13.0
Package Manager: npm 8.1.0
OS: linux x64

Angular: 15.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.2
@angular-devkit/build-angular   15.0.2
@angular-devkit/core            15.0.2
@angular-devkit/schematics      15.0.2
@schematics/angular             15.0.2
rxjs                            7.5.7
typescript                      4.8.4

[lucono]

@arifmahmudrana It's a different log that's needed.

To get the debug logs for the extension, set the karmaTestExplorer.logLevel extension setting to debug and re-open your project in VSCode, then attach the logs from all the Karma Test Explorer... and Karma Server... output channels after the issue occurs.

And for the minimal reproduction project, you can create the simplest project that reproduces the issue in a new public github repo, and share the repo link. That will help reproduce and diagnose the issue.

[arifmahmudrana]

@lucono here is the log from Karma Test Explorer

[2022-12-05 05:02:23.270] [INFO] [Main]: Activating Karma Test Explorer, v0.7.5
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating file handler
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating workspace configuration resolver
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating project factory
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating config change manager
[2022-12-05 05:02:23.270] [DEBUG] [ConfigChangeManager]: Creating config change subscription
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating preference manager
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating port acquisition manager
[2022-12-05 05:02:23.270] [INFO] [Main]: Creating multi-status display
[2022-12-05 05:02:23.271] [INFO] [Main]: Registering project selection command
[2022-12-05 05:02:23.271] [INFO] [Main]: Registering function execution command
[2022-12-05 05:02:23.271] [INFO] [Main]: Setting initial multi-project context
[2022-12-05 05:02:23.271] [INFO] [Main]: Setting multi-project context to: false
[2022-12-05 05:02:23.271] [INFO] [Main]: Processing initial workspace folders
[2022-12-05 05:02:23.271] [INFO] [Main]: Discovering projects for workspace folders: [
  "/home/arif/Desktop/intro"
]
[2022-12-05 05:02:23.271] [DEBUG] [ProjectFactory]: Inspecting workspace folder for testing: /home/arif/Desktop/intro
[2022-12-05 05:02:23.271] [DEBUG] [ProjectFactory]: Workspace folder '/home/arif/Desktop/intro' does not explicitly enable or disable testing with the 'karmaTestExplorer.enableExtension' extension setting
[2022-12-05 05:02:23.292] [DEBUG] [ProjectFactory]: Workspace folder '/home/arif/Desktop/intro' has no Karma Test Explorer settings configured
[2022-12-05 05:02:23.292] [DEBUG] [ProjectFactory]: Found package.json file at '/home/arif/Desktop/intro/package.json'
[2022-12-05 05:02:23.293] [DEBUG] [ProjectFactory]: Found a workspace package.json file at '/home/arif/Desktop/intro/package.json'
[2022-12-05 05:02:23.293] [DEBUG] [ProjectFactory]: Including projects in workspace folder '/home/arif/Desktop/intro' because workspace package.json file '/home/arif/Desktop/intro/package.json' includes a karma dev dependency
[2022-12-05 05:02:23.293] [DEBUG] [ProjectFactory]: Including projects in workspace folder - One or more inclusion conditions were satisfied: /home/arif/Desktop/intro
[2022-12-05 05:02:23.293] [DEBUG] [SimpleFileHandler]: Reading file synchronously: /home/arif/Desktop/intro/angular.json
[2022-12-05 05:02:23.293] [WARN] [ProjectFactory]: No Angular projects found for Angular config: /home/arif/Desktop/intro/angular.json
[2022-12-05 05:02:23.293] [INFO] [ProjectFactory]: Using project type 'angular' (auto-detected) for workspace folder: /home/arif/Desktop/intro
[2022-12-05 05:02:23.293] [WARN] [ProjectFactory]: No projects found for Angular workspace: /home/arif/Desktop/intro
[2022-12-05 05:02:23.293] [INFO] [Main]: Ignoring empty added project list
[2022-12-05 05:02:23.293] [INFO] [Main]: Subscribing to config changes for workspace folder: /home/arif/Desktop/intro
[2022-12-05 05:02:23.293] [INFO] [Main]: Subscribing for subsequent workspace folder additions and removals

I couldn't find Karma Server log like you mentioned.

You can try generate a project and test else you can test with this repo https://github.com/arifmahmudrana/intro

[lucono]

@arifmahmudrana It seems Angular 15 no longer creates some files that were previously generated by default, including the karma.conf.js file, which Karma Test Explorer expects to exist. (See item 4 here and Angular team discussion here about it).

Karma Test Explorer will need an update for this new behavior, but you can work around it by manually creating a karma.conf.js file and adding the architect.test.options.karmaConfig key to the project in the Angular workspace config, as described here in the Angular docs.

[arifmahmudrana]

@lucono but it's not working for my another project which is a hybrid Angular and AngularJS app.

ng version

Angular CLI: 14.2.9
Node: 16.13.0
Package Manager: npm 8.1.0 
OS: linux x64

Angular: 14.2.11
... animations, common, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1402.10
@angular-devkit/build-angular     14.2.9
@angular-devkit/core              14.2.10
@angular-devkit/schematics        14.2.9
@angular/cdk                      14.2.6
@angular/cli                      14.2.9
@angular/flex-layout              14.0.0-beta.41
@angular/material                 14.2.6
@angular/material-luxon-adapter   14.2.6
@schematics/angular               14.2.9
rxjs                              7.5.7
typescript                        4.8.4
webpack                           5.75.0

Karma Version: 6.4.1
karma-server.log
karma-test-explorer.log

[lucono]

For the first project at https://github.com/arifmahmudrana/intro, did adding the karma.conf.js file and the architect.test.options.karmaConfig option to the Angular config resolve the issue and load the tests, or did that still not work?

[lucono]

@arifmahmudrana try this updated .visx from the beta branch to confirm if it resolves the issue for a newly generated Angular 15 project. It should show as v0.8.0 in the VS Code extensions tab.

For the other project, you can create a separate issue as that seems to be something different. For that issue, you'll again need to provide a minimal project that reproduces the issue, and share the repo link.

[lucono]

Released as v0.8.0. Please reopen if this is still an issue.