Angular Quickstart fails karma testing out of the box - node.js

The official Angular quickstart is not able to run karma tests after a clean install on Windows 10. I typed the following 4 commands and nothing else:
C:\projects\temp>git clone https://github.com/angular/quickstart.git
C:\projects\temp>cd C:\projects\temp\quickstart
C:\projects\temp\quickstart>npm install
...install logs omitted for brevity
C:\projects\temp\quickstart>npm start
...app launched successfully, but logs omitted for brevity
C:\projects\temp\quickstart>npm test
...Error shown in complete logs below
The full error message resulting after the final command is as follows:
C:\projects\temp\quickstart>npm test
> angular-quickstart#1.0.0 pretest C:\projects\temp\quickstart
> npm run build
> angular-quickstart#1.0.0 build C:\projects\temp\quickstart
> tsc -p src/
> angular-quickstart#1.0.0 test C:\projects\temp\quickstart
> concurrently "npm run build:watch" "karma start karma.conf.js"
[0]
[0] > angular-quickstart#1.0.0 build:watch C:\projects\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 01 06 2017 14:33:49.385:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js" does not match any file.
[1] 01 06 2017 14:33:49.406:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 01 06 2017 14:33:49.407:WARN [watcher]: Pattern "C:/projects/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 01 06 2017 14:33:49.891:WARN [karma]: No captured browser, open http://localhost:9876/
[1] 01 06 2017 14:33:49.906:WARN [karma]: Port 9876 in use
[1] 01 06 2017 14:33:49.908:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9877/
[1] 01 06 2017 14:33:49.908:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[1] 01 06 2017 14:33:49.958:INFO [launcher]: Starting browser Chrome
[1] 01 06 2017 14:33:51.821:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.js".
[1] 01 06 2017 14:33:51.843:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.component.spec.js".
[1] 01 06 2017 14:33:51.850:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/app/app.module.js".
[0] 2:33:51 PM - Compilation complete. Watching for file changes.
[1] 01 06 2017 14:33:51.873:INFO [watcher]: Changed file "C:/projects/temp/quickstart/src/main.js".
[1] 01 06 2017 14:33:51.965:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]: Connected on socket pXysNFDP8RC3agm8AAAA with id 9156960
[1] 01 06 2017 14:33:52.077:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)
What needs to change in order for npm test to succeed out of the box on Windows 10?

The Angular quickstart project has largely been superseded by the Angular CLI. I would suggest using the CLI it for any new projects as it not only gives you an initial framework for your application, but it will also generate the additional boilerplate needed as you extend your application.
Before installing Angular CLi, ensure you have an up to date version of Node (6.9.0 or higher) and NPM (3 or higher). Also there may be other prerequisites not listed in the documentation, to install on an Android system I found it also needed Python 2.7 and g++ installed.
Install with:
npm install -g #angular/cli
To create a new project:
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
ng new will take some time to complete as in addition to building the project structure it also does the npm install.
Run unit tests with ng test and end-to-end tests with ng e2e.
Both ng test and ng serve will run continuously watching for changes and rebuilding the affected code. You can even leave both running in separate windows if you wish.
ng generate BLUEPRINT will generate new code, blueprints include module, component, service, class, directive, enum, guard, interface, pipe
Other useful commands:. You may want to experiment with this a bit before you write a real app: by default each component or service goes into its own subdirectory and is added to the top level app module, but you can explicitly create modules to provide additional structure if you wish.
ng build: builds your application into the output path.
ng doc KEYWORD: opens angular documentation for that keyword.
ng eject: ejects the app and outputs webpack configuration
ng lint: lints the project
ng xi18n: extracts i18n messages from the project.

This is not answer, just give more case to find out root cause.
I followed steps which you described and got this:
D:\Project\temp\quickstart>npm test
> angular-quickstart#1.0.0 pretest D:\Project\temp\quickstart
> npm run build
> angular-quickstart#1.0.0 build D:\Project\temp\quickstart
> tsc -p src/
> angular-quickstart#1.0.0 test D:\Project\temp\quickstart
> concurrently "npm run build:watch" "karma start karma.conf.js"
[0]
[0] > angular-quickstart#1.0.0 build:watch D:\Project\temp\quickstart
[0] > tsc -p src/ -w
[0]
[1] 02 06 2017 22:34:04.733:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.js" does not match any file.
[1] 02 06 2017 22:34:04.746:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.ts" does not match any file.
[1] 02 06 2017 22:34:04.747:WARN [watcher]: Pattern
"D:/Project/temp/quickstart/testing/**/*.js.map" does not match any file.
[1] 02 06 2017 22:34:05.103:WARN [karma]: No captured browser, open
http://localhost:9876/
[1] 02 06 2017 22:34:05.120:INFO [karma]: Karma v1.7.0 server started at
http://0.0.0.0:9876/
[1] 02 06 2017 22:34:05.120:INFO [launcher]: Launching browser Chrome with
unlimited concurrency
[1] 02 06 2017 22:34:05.156:INFO [launcher]: Starting browser Chrome
[1] 02 06 2017 22:34:06.742:INFO [Chrome 58.0.3029 (Windows 10 0.0.0)]:
Connected on socket GGConP8Ks64GubSYAAAA with id 70486747
[1] 02 06 2017 22:34:07.822:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.component.js".
[1] 02 06 2017 22:34:07.837:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.component.spec.js".
[1] 02 06 2017 22:34:07.856:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/app/app.module.js".
[0] 10:34:07 PM - Compilation complete. Watching for file changes.
[1] 02 06 2017 22:34:07.865:INFO [watcher]: Changed file
"D:/Project/temp/quickstart/src/main.js".
[1] 02 06 2017 22:34:08.084:INFO [karma]: Delaying execution, these browsers
are not ready: Chrome 58.0.3029 (Windows 10 0.0.0)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.159 secs /
0.149 secs)
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.117 secs /
0.112 secs)

Related

Karma. SyntaxError: Expected an identifier but found ... instead - my version

I've read Karma. SyntaxError: Expected an identifier but found ... instead, and my issue seems the same. But please humor me, it's weirder in my case.
I have 2 Jenkins jobs that runs grunt karma on the same directory, but on 2 different branches, and the only diffs between the two branches is a *.js file that is in a different directory that I'm running grunt karma on. IOW, for all practical purposes on the directory I'm testing, the 2 branches are identical.
On my sandbox job that checks out my master branch, I can issue grunt karma and get
$ grunt karma
Running "karma:unit" (karma) task
08 01 2023 21:12:16.404:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 01 2023 21:12:16.406:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
08 01 2023 21:12:16.412:INFO [launcher]: Starting browser PhantomJS
08 01 2023 21:12:16.713:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket Ceegz0CmpJmQjl0uAAAA with id 84751163
PhantomJS 2.1.1 (Linux 0.0.0): Executed 51 of 51 SUCCESS (0.191 secs / 0.2 secs)
Done, without errors.
But on a job that runs grunt karma on a release/* branch I get
$ grunt karma
Running "karma:unit" (karma) task
08 01 2023 21:34:55.619:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 01 2023 21:34:55.621:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
08 01 2023 21:34:55.625:INFO [launcher]: Starting browser PhantomJS
08 01 2023 21:34:55.937:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket PeYT79bHxmpbsAj2AAAA with id 65885438
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Expected an identifier but found 'jasmineRequire' instead
at src/desktop/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:25
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: jasmineRequire
at src/desktop/node_modules/karma-jasmine/lib/boot.js:14
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: jasmine
at src/desktop/node_modules/karma-jasmine/lib/adapter.js:405
Warning: Task "karma:unit" failed. Use --force to continue.
On BOTH branches, this is the line in above file
var getJasmineRequireObj = (function(jasmineGlobal) {
let jasmineRequire; // This is the offending line
Here's my karma.conf.js file, also the same on BOTH branches
// karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
singleRun: true,
browsers: ['PhantomJS'],
browserConsoleLogOptions: {
terminal: true,
level: ""
},
files: [
'src/common/lib/jquery/jquery-1.9.0.js',
'src/common/lib/jquery/jquery.cookie.js',
'src/common/lib/angular/1.8.2/angular.min.js',
'src/common/lib/angular/1.8.2/*.js',
'src/common/lib/angular-scrollable-table/angular-scrollable-table.js',
'src/desktop/lib/bootstrap/bootstrap.js',
'src/desktop/lib/bootstrap/angular-strap.js',
'src/desktop/node_modules/angular-mocks/angular-mocks.js',
'src/common/lib/hicharts/highcharts.js',
'src/common/lib/localization/sprintf.js',
'src/common/lib/localization/localization.js',
'src/common/js/directives/ZiftDirectives.js',
'src/common/js/modules/*.js',
'src/common/js/controllers/agencyorder/*.js',
'src/common/js/controllers/CampaignActivateController.js',
'src/common/js/services/agencyorder/agencyOrderAssetOrderService.js',
'src/common/js/services/agencyorder/quoteAgencySelectService.js',
'src/common/js/constants.js',
'src/common/js/services.js',
'src/common/js/downloads/*.js',
'src/common/js/services/export/ExportService.js',
'src/common/js/services/leads/*.js',
'test/**/*.js'
]
});
I delete the workspace when I run the jobs. What is my issue? TIA!

Angular 12 npm run test throws "Couldn't load color-version"

We recently migrated our application from angular 6 to 12 , everything looks good and i am able to run application(npm start is working) and test the UI features but when i run my angular unit tests(npm run test ) on my local it throwing error and this is only happening on my machine(other peers have no issues with unit test run)
03 03 2022 09:17:14.914:DEBUG [reporter]: Trying to load reporter: #angular-devkit/build-angular--event-reporter
03 03 2022 09:17:14.927:DEBUG [reporter]: Trying to load color-version of reporter: #angular-devkit/build-angular--event-reporter (#angular-devkit/build-angular--event-reporter_color)
03 03 2022 09:17:14.930:DEBUG [reporter]: Couldn't load color-version.
03 03 2022 09:17:14.932:DEBUG [reporter]: Trying to load reporter: #angular-devkit/build-angular--sourcemap-reporter
03 03 2022 09:17:14.933:DEBUG [reporter]: Trying to load color-version of reporter: #angular-devkit/build-angular--sourcemap-reporter (#angular-devkit/build-angular--sourcemap-reporter_color)
03 03 2022 09:17:14.942:DEBUG [reporter]: Couldn't load color-version.
I tried re install node/cli/npm install everything.....still no luck
Has anyone seen this error before ? Appreciate your response....
"Couldn't load color-version" is a debug-level message informing you that Karma was unable to find a "colorized" version of the reporter (#angular-devkit/build-angular--event-reporter_color).
One reason you might be seeing this message locally and not elsewhere is that you have set your log level to debug (--log-level debug).

In Azure pipelines, how do you set up X display for headless Chrome testing?

In our Azure Pipeline, we are attempting to run end-to-end tests in our Angular 9 application, using the following task ...
The package.json defines this ...
"scripts": {
...
"e2e": "npm run install-puppeteer && ng e2e"
},
but when the agent runs the above task, it dies with "Unable to open X display" error ...
> npm run install-puppeteer && ng test "--watch=false" "--codeCoverage=true"
> thermo-protect-ui#0.0.0 install-puppeteer /home/vsts/work/1/s
> cd node_modules/puppeteer && npm run install
> puppeteer#5.5.0 install /home/vsts/work/1/s/node_modules/puppeteer
> node install.js
Chromium is already in /home/vsts/work/1/s/node_modules/puppeteer/.local-chromium/linux-818858; skipping download.
08 12 2020 18:54:56.858:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
08 12 2020 18:54:56.863:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 12 2020 18:54:56.866:INFO [launcher]: Starting browser Chrome
08 12 2020 18:54:57.134:ERROR [launcher]: Cannot start Chrome
[2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display.
08 12 2020 18:54:57.134:ERROR [launcher]: Chrome stdout:
08 12 2020 18:54:57.135:ERROR [launcher]: Chrome stderr: [2099:2099:1208/185457.060113:ERROR:browser_main_loop.cc(1439)] Unable to open X display.
08 12 2020 18:54:57.675:INFO [launcher]: Trying to start Chrome again (1/2).
08 12 2020 18:54:59.035:ERROR [launcher]: Cannot start Chrome
22 error Exit status 1
23 error Failed at the thermo-protect-ui#0.0.0 test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Normally this kind of thing is dealt with by installing Xvfb. How do I do that using Azure pipelines?
Really this is #Hugh Lin's answer from the comments but for the benefit of posterity I created a bash task which ran a script in my repository. The script contained
#!/bin/bash
xvfb-run --auto-servernum --server-args='-screen 0, 1920x1080x24' npm run test -- --watch=false --codeCoverage=true
Then the tests ran successfully.

Chrome not captured when using karma with Docker

I am trying to run some karma tests using chrome in a Docker container. My Dockerfile looks like:
FROM node:6-alpine
RUN apk update \
&& apk add --update alpine-sdk \
&& apk add chromium \
&& npm install -g #angular/cli#1.0.0 \
&& ng set --global packageManager=yarn \
&& apk del alpine-sdk \
&& rm -rf /tmp/* /var/cache/apk/* *.tar.gz ~/.npm \
&& npm cache clear \
&& sed -i -e "s/bin\/ash/bin\/sh/" /etc/passwd
ENV CHROME_BIN=/usr/local/bin/my-chrome-build
When I run ng test in this container (having mounted a project which I know works), I get:
$ ng test -sr && yarn run test:server
04 04 2017 10:32:27.896:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
04 04 2017 10:32:27.915:INFO [launcher]: Launching browser Chrome with unlimited concurrency
04 04 2017 10:32:27.985:INFO [launcher]: Starting browser Chrome
04 04 2017 10:33:28.047:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
04 04 2017 10:33:30.053:WARN [launcher]: Chrome was not killed in 2000 ms, sending SIGKILL.
04 04 2017 10:33:32.056:WARN [launcher]: Chrome was not killed by SIGKILL in 2000 ms, continuing.
error Command failed with exit code 1.
I don't really know how to debug this, any ideas what might be wrong or how I can find out more?
I'm using Chrome headless unstable in a Docker container with the following Karma browser config (excerpt):
...
browsers: ['Chrome_in_Docker'],
customLaunchers: {
Chrome_in_Docker: {
base: 'ChromeHeadless',
flags: [
'--disable-web-security',
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--remote-debugging-port=9223',
'--headless',
'--disable-gpu'
]
}
},
...

Node-oracledb fails to run with "Cannot find module '../build/Debug/oracledb'"

I'm trying to install the Node oracledb package on Windows 8.1 x64, which is known to be complicated. I followed the instructions in this detailed article. I still got the error MSB4019 when trying to install, but I solved with one of the answers in an SO question. But then when running my tests with Karma (jasmine tests), I get this:
C:\Users\potero\angular\Sunnel_View_Test\unit\jasmine>call karma start
C:\Users\
potero\angular\Sunnel_View_Test\unit\jasmine\conf\karma.conf.js 04 02
2016 11:42:39.758:INFO [framework.browserify]: registering rebuild
(autoWa tch=true) 04 02 2016 11:42:40.581:ERROR
[framework.browserify]: bundle error 04 02 2016 11:42:40.581:ERROR
[framework.browserify]: Error: Cannot find module
'../build/Release/oracledb' from
'C:\Users\potero\node_modules\oracledb\lib' 04 02 2016
11:42:40.583:WARN [karma]: No captured browser, open http://localhost
:9876/ 04 02 2016 11:42:40.590:INFO [karma]: Karma v0.13.19 server
started at http://lo calhost:9876/ 04 02 2016 11:42:40.599:INFO
[launcher]: Starting browser IE 04 02 2016 11:42:40.608:INFO
[launcher]: Starting browser Chrome 04 02 2016 11:42:40.613:ERROR
[framework.browserify]: bundle error 04 02 2016 11:42:40.613:ERROR
[framework.browserify]: Error: Cannot find module
'../build/Debug/oracledb' from
'C:\Users\potero\node_modules\oracledb\lib' 04 02 2016
11:42:40.615:INFO [framework.browserify]: bundle updated 04 02 2016
11:42:41.318:INFO [IE 11.0.0 (Windows 8.1 0.0.0)]: Connected on socke
t /#jugOlM6ncxlElbTbAAAA with id 28583632 04 02 2016 11:42:43.555:INFO
[Chrome 48.0.2564 (Windows 8.1 0.0.0)]: Connected o n socket
/#bwze1YzRw7uyxQfwAAAB with id 57743574
START: IE 11.0.0 (Windows 8.1 0.0.0) ERROR bundle error (see logs)
at
C:/Users/potero/AppData/Local/Temp/fcd332ac97c6f0099b6d2cbea5282df8.browser
ify:1 Chrome 48.0.2564 (Windows 8.1 0.0.0) ERROR Uncaught Error:
bundle error (see logs) at
C:/Users/potero/AppData/Local/Temp/fcd332ac97c6f0099b6d2cbea5282df8.browser
ify:1
Finished in 3.922 secs / 0 secs
SUMMARY: V 0 tests completed
There is a similar issue on the package Github page but the solution given there (re installing node) did not work for me. I also re installed oracledb without success.
I checked the folders referred in the error message and the files are not there as stated.
Why does it need those files? Why weren't them installed? Why does it look up for them on my home folder instead that on the folder the project is?
Does PATH have the Oracle client libraries (e.g. Instant Client) in it?

Resources