Karma debug showing empty screen - unit-testing

When running tests for angular2 using Karma, when I click the debug button I'm not getting the on screen info that Im expecting, letting me know if the tests have passed etc.
They are passing ok in the console window.
I'm new to all this so would greatly appreciate some help!
Thanks

I do not exactly know your setup and what you expect to see. But I had a similar problem with the angular starter project from https://github.com/AngularClass/angular2-webpack-starter.
The solution for me was to add "karma-jasmine-html-reporter": "^0.2.2" as dev dependency in package.json and 'kjhtml' as reporter in config/karma.conf.js. After running npm install and npm run watch:test Chrome starts and the tests are executed but the Chrome window keeps open. When I click on "Debug", it shows the tests (an empty list for the starter project). I hope this helps.

Related

Running Ember Tests in the terminal: Console log not working

I am working on an ember 2.8 project and I am a newbie. On top of this, we are using a docker container to run in pc because we don't have a mac. So I running the qunit tests and am unable to go to /tests to see the tests in the browser. Because of Docker they break.
I must run 'ember test' in the terminal and view the output.
However I am finding it quite difficult to debug, the console.logs and qUnit.logs do not output to the terminal and I can't get the ms code debugger to work.
Does anyone have any suggestions?
Thank you

Debug Cypress in WebStorm

How do I set up Cypress debugging in WebStorm? I can get a debugger statement in my code to pause execution in Chrome and debug using devtools, but nothing happens in WebStorm.
This is true whether I am running or debugging my configuration, which is simply npm run cypress (with my cypress open script). When debugging the run configuration, I don't get checkmarks on my breakpoints in WebStorm.
The WebStorm docs refer to selecting your configuration type from the menu but there's no Cypress in the menu.
Is this possible to do?
it is a bit of a process but when you are done it is worth it.
Just a couple notes:
I use it on Mac, Version: 2019.3.2, however it should be very similar.
And (at this time) you have to be running the Chrome browser, you cannot attach to electron.
First, in your package.json file you need to have some npm launch script (not technically necessary, but makes everything else stupid simple) here is a sample of mine:
"scripts": {
"start:ci": "serve --no-clipboard --listen ${PORT:-8080}",
"cypress:open:localhost": "ENV=localhost npm run cypress:open",
"cypress:open:dev": "ENV=dev npm run cypress:open",
"cypress:open:qa": "ENV=qa npm run cypress:open",
"cypress:open:staging": "ENV=staging npm run cypress:open",
"cypress:open:production": "ENV=production npm run cypress:open",
"cypress:open": "cypress open"
},
Next you need to setup a debug configuration for npm. On Mac that is under run->Edit Configurations...
Add a new configuration using the npm template (click the plus and choose npm)
The template will have a drop down for scripts, select your npm script (mine is set for cypress:open:qa) Then click apply.
Now when you launch the debuger it will open your cypress instance with debugging attached to cypress. However, you want to attach to the browser so you can debug your JS.
Start any test in chrome, then open a new tab (in cypress chrome instance) go to the chrome extensions site and add the Jet Brains chrome extension, here is the link:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=en
This will apply it to the chrome version that cypress runs. When you are running your test you right click the JB icon and inspect in WebStorm.
This opens a new tab in your debug dialog box (default bottom left). Open the tab that says scripts in your https://yourproj... tab. Navigate in that dialog to integration file you want to debug, double click it. Slap in a break point and away you go.
There are two plugins that let your run cypress tests from Webstorm. Both let you select a single test and run it then see the result directly in webstorm.
The Pro version allow to debug tests in the cypress runner.
https://plugins.jetbrains.com/plugin/13819-cypress-support (free)
https://plugins.jetbrains.com/plugin/13987-cypress-support-pro (paid)
The pro version debugging capabilities:
You can run cypress as node job in webstorm.
For this:
Set the path to the cypress executable file
Select your folder as working directory
Add run options run --spec cypress/integration/Filters.feature
I am using cucumber so am giving a feature, if you use mocha use your run parameters the same as in the console.
Settings

Degugging a react native / expo app with webstorm

I can't debug my react native / expo app in WebStorm, but I can in Visual Studio Code.
I have a react native app that I can successfully run using expo. I set up the configuration according to the info on this site:
https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo
When I click "run" or "debug" and "Debug JS Remotely" is turned off, the bundler builds a JS bundle and the app starts on my devices.
But once I turn on "Debug JS Remotely", the bundler only says:
Starting custom debugger by executing: : [my working directory] [my working directory again]
and never goes on to build the JS bundle.
After a short while, a red screen appears on the device, and it says:
Unable to connect with remote debugger
Timeout while connecting to remote debugger
onFailure
DevSupportManagerImpl.java:851
onFailure
WebsocketJavaScriptExecutor.java:83
run
WebsocketJavaScriptExecutor.java:142
handleCallback
Handler.java:790
dispatchMessage
Handler.java:99
...
The bundler doesn't say anything more than the message above.
As soon as I turn off remote debugging, the the bundler starts building again and finishes with
"Building JavaScript bundle: finished in ...ms"
as usual, but the device, again, shows the red screen with aforementioned messages, or doesn't show anything but the regular white screen with a message at the bottom saying "Downlading JavaScript bundle 100,00%". I either have to stop and restart within WebStorm or I have to close the expo app and re-open it. Either way will make the app start again on my device.
This is my first time working with javascript, react native, expo, so I am not sure, but it should be possible to debug in WebStorm directly, right? As mentioned, in Visual Studio Code everything including debugging works fine, so I don't think it's anything in the code. Maybe someone here has an idea where the problem lies?
node -v: v11.6.0
react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1
Any help will be greatly appreciated! Thanks in advance!
PROOF
HOWTO
Looks like there's been an update to how you can setup Configurations since you tried.
Try changing the Bundler host to 127.0.0.1 and try again.
I just setup Webstorm v2020.2 yesterday to debug my Expo application and it is working as expected.
These instructions were all that I required: https://www.jetbrains.com/help/webstorm/react-native.html#ws_react_native_create_run_config
On the main menu, go to Run | Edit Configurations, click icons.general.add.svg and select React Native from the list. The Run/Debug Configuration: React Native opens.
Choose whether you want WebStorm to build and launch the application for you:
Select the Build and launch checkbox if you are launching your application for the first time or if you have updated its native code since the last run.
If your application uses Expo, clear the checkbox because this bundler takes care of the process itself.
If you selected the Build and launch checkbox, choose the target platform, Android or iOS. Depending on your choice, WebStorm will run the bundler with react-native run-ios or with react-native run-android.
Optionally, type the arguments to be passed to React Native, for example, specify the simulator type through the ‑‑simulator flag: ‑‑simulator="iPhone 4s".
In the Bundler host field, specify the host where the React Native bundler runs, the default value is localhost.
If you are using Expo, change the default bundler host to ensure successful connection with the debugger. This connection may fail because WebStorm by default uses localhost to start debugging while Expo expects 127.0.0.1 or an external IP address depending on what is selected in Connection field of the Metro bundler configuration. See Debugging a React Native application that uses Expo for details.
In the Bundler port field, specify the port on which the React Native bundler runs, by default 8081 is chosen, learn more from the React Native official website.
Choose the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.
Specify the path to react-native-cli and the working directory of the application. Optionally, type the environment variables for react-native run-android or react-native run-ios.
By default, WebStorm starts the React Native bundler automatically when you invoke the run/debug configuration. If you have already started the bundler from outside WebStorm, for example, from the command line, you can re-use it without stopping and restarting. Select your bundler in the Before Launch area and click Remove.
The issue is tracked at WEB-35719, please follow it for updates

New Ember app gives blank screen

I'm new to ember and doing a introductory tutorial to build a simple app. When I create a new app and start server, I try visiting the localhost page (http://localhost:4200/) in my browser but the page is blank. The browser window title is of my app name but there is no "Welcome to Ember" text as their should be. Also the ember inspector says "Ember application not detected!" although the little ember icon appears in the address bar of Firefox indicating that there is an ember app.
I have tried to restart the tutorial 3 times now and come up with same results. I have followed all set-up steps provided here. The only thing I did different or in addition to the turorial is I had to run sudo chown -R $USER /usr/localbecause of permissions issues.
All I have done so far is install node, npm, bower, ember-cli 2.2.0-beta.2., and then run these few commands:
ember new ember2-blog
cd ember2-blog
ember server
The terminal gives me a "Build successful - 7016ms." message but I go to http://localhost:4200/ and see the blank page... The inspector says "no ember app detected". Seems like I'm missing something simple but can't figure it out. Is it something to do with permissions? Please and thank you for your help.
This is a bug due to a new version of jQuery. For now you can change the following line in your bower.json file. Then run bower install and it should work.
"jquery": "^1.11.3",
to
"jquery": "1.11.3",
A new version of ember.js is imminent which should fix this.

ember-cli-blanket not working

I have installed the plugin for 'ember-cli-blanket', using command:
ember install:addon ember-cli-blanket0
But when I run the tests using "http://localhost:4200/tests", nothing is loading I am getting just a blank page, no error in console also.
When I referred in some online tutorials, they asked to pass "data-cover" with the <script></script> tag. But no progress.
If i uninstall the plugin and run the tests it is working fine.
Can anyone tell what am I doing wrong or any more settings needs to be done?