search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.72k stars 11.98k forks source link

`ng test` runs multiple instances of the browser #28219

Closed Maryannah closed 1 month ago

Maryannah commented 1 month ago

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

When running the testing command, the browser is running multiple instances and falsifying the tests feedbacks.

Here is my console for running a single test (I did nothing else than running ng test, and stopping it) : 

MYPC > MYNAME @ ~/projects/ng-snippets (master) $ : npx ng test --project snippets
✔ Browser application bundle generation complete.
16 08 2024 10:52:55.843:WARN [karma]: No captured browser, open http://localhost:9876/
16 08 2024 10:52:55.850:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
16 08 2024 10:52:55.850:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
16 08 2024 10:52:55.854:INFO [launcher]: Starting browser ChromeHeadless
16 08 2024 10:52:56.555:INFO [Chrome Headless 126.0.6478.127 (Windows 10)]: Connected on socket FXRY_GAkj6XIKlvTAAAB with id 82731947

START:
  Datepicker component
    ✔ Works

Finished in 0.001 secs / 0.044 secs @ 10:52:56 GMT+0200 (Central European Summer Time)

SUMMARY:
✔ 1 test completed
✔ Browser application bundle generation complete.
16 08 2024 10:53:04.861:INFO [Chrome Headless 126.0.6478.127 (Windows 10)]: Connected on socket Ac_kKIY6t8eKUkMAAAAD with id 63963824

===============================================================================================================================================================================================================================================================

START:
  Datepicker component
    ✔ Works
    ✔ Works 

Finished in 0.061 secs / 0.031 secs @ 10:53:04 GMT+0200 (Central European Summer Time)

SUMMARY:
✔ 2 tests completed
16 08 2024 10:53:13.001:INFO [Chrome Headless 126.0.6478.127 (Windows 10)]: Connected on socket Ojm6SLRk_uCyhnxGAAAF with id 55152395

===============================================================================================================================================================================================================================================================

START:
  Datepicker component
    ✔ Works
    ✔ Works 
    ✔ Works 

Finished in 0.066 secs / 0.044 secs @ 10:53:13 GMT+0200 (Central European Summer Time)

SUMMARY:
✔ 3 tests completed
16 08 2024 10:53:14.883:INFO [Chrome Headless 126.0.6478.127 (Windows 10)]: Connected on socket TqvaqEoqyRlOe7iGAAAH with id 5424256

===============================================================================================================================================================================================================================================================

START:
  Datepicker component
    ✔ Works
    ✔ Works 
    ✔ Works 
    ✔ Works 

Finished in 0.165 secs / 0.06 secs @ 10:53:15 GMT+0200 (Central European Summer Time)

SUMMARY:
✔ 4 tests completed
^C16 08 2024 10:53:17.625:WARN [Chrome Headless 126.0.6478.127 (Windows 10)]: Disconnected (0 times) Client disconnected from CONNECTED state (server shutting down)
Chrome Headless 126.0.6478.127 (Windows 10) ERROR
  Disconnected Client disconnected from CONNECTED state (server shutting down)
16 08 2024 10:53:17.626:WARN [Chrome Headless 126.0.6478.127 (Windows 10)]: Disconnected (0 times) Client disconnected from CONNECTED state (server shutting down)
Chrome Headless 126.0.6478.127 (Windows 10) ERROR
  Disconnected Client disconnected from CONNECTED state (server shutting down)
16 08 2024 10:53:17.626:WARN [Chrome Headless 126.0.6478.127 (Windows 10)]: Disconnected (0 times) Client disconnected from CONNECTED state (server shutting down)
Chrome Headless 126.0.6478.127 (Windows 10) ERROR
  Disconnected Client disconnected from CONNECTED state (server shutting down)
16 08 2024 10:53:17.626:WARN [Chrome Headless 126.0.6478.127 (Windows 10)]: Disconnected (0 times) Client disconnected from CONNECTED state (server shutting down)
Chrome Headless 126.0.6478.127 (Windows 10) ERROR
  Disconnected Client disconnected from CONNECTED state (server shutting down)

Please provide a link to a minimal reproduction of the bug

https://github.com/Maryannah/ng-snippets/tree/bug-tests

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 18.1.3
Node: 20.10.0
Package Manager: npm 10.2.3
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.3
@angular-devkit/build-angular   18.1.3
@angular-devkit/core            18.1.3
@angular-devkit/schematics      18.1.3
@schematics/angular             18.1.3
ng-packagr                      18.1.0
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.8

Anything else?

OS (Windows + WSL) :

angular.json

```json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "schematics": { "@schematics/angular:component": { "style": "scss", "changeDetection": "OnPush", "displayBlock": true }, "@schematics/angular:class": {}, "@schematics/angular:directive": {}, "@schematics/angular:guard": { "functional": true }, "@schematics/angular:interceptor": { "functional": true }, "@schematics/angular:pipe": {}, "@schematics/angular:resolver": { "functional": true }, "@schematics/angular:service": {} }, "projects": { "ng-snippets": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "snip", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/ng-snippets", "index": "src/index.html", "browser": "src/main.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [{ "glob": "**/*", "input": "public" }], "styles": ["src/styles.scss"], "scripts": [] }, "configurations": { "production": { "budgets": [], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "ng-snippets:build:production" }, "development": { "buildTarget": "ng-snippets:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [{ "glob": "**/*", "input": "public" }], "styles": ["src/styles.scss"], "scripts": [], "karmaConfig": "karma.conf.js" } } } }, "snippets": { "projectType": "library", "root": "projects/snippets", "sourceRoot": "projects/snippets/src", "prefix": "ui", "architect": { "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { "project": "projects/snippets/ng-package.json" }, "configurations": { "production": { "tsConfig": "projects/snippets/tsconfig.lib.prod.json" }, "development": { "tsConfig": "projects/snippets/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "tsConfig": "projects/snippets/tsconfig.spec.json", "karmaConfig": "karma.conf.js" } }, "storybook": { "builder": "@storybook/angular:start-storybook", "options": { "open": false, "compodoc": false, "configDir": "projects/snippets/.storybook", "browserTarget": "snippets:build", "compodocArgs": ["-e", "json", "-d", "projects/snippets"], "port": 6006, "styles": ["src/styles.scss", "projects/snippets/.storybook/styles.scss"] } }, "build-storybook": { "builder": "@storybook/angular:build-storybook", "options": { "configDir": "projects/snippets/.storybook", "browserTarget": "snippets:build", "compodoc": true, "compodocArgs": ["-e", "json", "-d", "projects/snippets"], "outputDir": "dist/storybook/snippets", "styles": ["src/styles.scss", "projects/snippets/.storybook/styles.scss"] } } } } } } ```

karma.conf.js

```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', 'mocha', '@angular-devkit/build-angular'], plugins: [ require('karma-mocha'), require('karma-mocha-reporter'), require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma'), ], client: { mocha: { reporter: 'html', }, jasmine: { // you can add configuration options for Jasmine here // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, clearContext: false, // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { suppressAll: true, // removes the duplicated traces }, coverageReporter: { dir: require('path').join(__dirname, './coverage/ng-snippets'), subdir: '.', reporters: [{ type: 'html' }, { type: 'text-summary' }], }, reporters: ['mocha'], browsers: ['ChromeHeadless'], restartOnFileChange: true, }); }; ```

package.json

```json { "name": "ng-snippets", "version": "0.0.0", "scripts": { "start:server": "json-server --watch db.json", "storybook": "ng run snippets:storybook", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^18.1.0", "@angular/common": "^18.1.0", "@angular/compiler": "^18.1.0", "@angular/core": "^18.1.0", "@angular/forms": "^18.1.0", "@angular/platform-browser": "^18.1.0", "@angular/platform-browser-dynamic": "^18.1.0", "@angular/router": "^18.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^18.1.3", "@angular/cli": "^18.1.3", "@angular/compiler-cli": "^18.1.0", "@chromatic-com/storybook": "^1.6.1", "@compodoc/compodoc": "^1.1.25", "@storybook/addon-docs": "^8.2.9", "@storybook/addon-essentials": "^8.2.9", "@storybook/addon-interactions": "^8.2.9", "@storybook/addon-links": "^8.2.9", "@storybook/angular": "^8.2.9", "@storybook/blocks": "^8.2.9", "@storybook/test": "^8.2.9", "@types/jasmine": "~5.1.0", "autoprefixer": "^10.4.20", "jasmine-core": "~5.1.0", "json-server": "^1.0.0-beta.1", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "karma-mocha": "^2.0.1", "karma-mocha-reporter": "^2.2.5", "mocha": "^10.7.3", "ng-packagr": "^18.1.0", "postcss": "^8.4.40", "prettier": "^3.3.3", "storybook": "^8.2.9", "tailwindcss": "^3.4.7", "typescript": "~5.5.2" } } ```
alan-agius4 commented 1 month ago

Hi @Maryannah, I am not able to replicate what you are experiencing with the steps provided.


npx ng test --project snippets
✔ Browser application bundle generation complete.
16 08 2024 09:48:49.054:WARN [karma]: No captured browser, open http://localhost:9876/
16 08 2024 09:48:49.086:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
16 08 2024 09:48:49.087:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
16 08 2024 09:48:49.093:INFO [launcher]: Starting browser ChromeHeadless
16 08 2024 09:48:49.509:INFO [Chrome Headless 127.0.6533.119 (Linux x86_64)]: Connected on socket eupgm4PR1WtR8hMUAAAB with id 92834468

START:

Finished in 0.002 secs / 0 secs @ 09:48:49 GMT+0000 (Coordinated Universal Time)

SUMMARY:
✔ 0 tests completed
✔ Browser application bundle generation complete.
^C16 08 2024 09:49:29.358:WARN [Chrome Headless 127.0.6533.119 (Linux x86_64)]: Disconnected (0 times) Client disconnected from CONNECTED state (transport close)
Chrome Headless 127.0.6533.119 (Linux x86_64) ERROR
  Disconnected Client disconnected from CONNECTED state (transport close)
Maryannah commented 1 month ago

@alan-agius4 are you using WSL too ?

alan-agius4 commented 1 month ago

No, but I doubt this is a issues caused by WSL.

Maryannah commented 1 month ago

Well if you don't have the issue and I have it, it could be ... By the way, I have updated the issue to give a specific branch with my own modifications to be able to test it

Maryannah commented 1 month ago

@alan-agius4 upon further investigation (which is the nice way of saying I'm a dumbass who didn't restart its computer), it seems to work without any issues. It was indeed related to my own computer and not the framework. I am sorry for wasting your time, I will quickly close this issue, no actions are required !

angular-automatic-lock-bot[bot] commented 2 days ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.