My Problem:
I recently became the new Dev in a system which has a backend with Dotnet 3.1 and a Frontend of React, TypeScript and it is build with Yarn.
I can run the whole monster. For this, I first build the frontend, copy the created .js files to a static files folder in the backend, and run the Monster.dll.
How to debug the frontend? (I am afraid it relies on the backend being available.)
So far I tried to use Visual Studio but I'd try anything that is free and runs on Linux.
Seems you confused the front-end environment with the back-end.
Basically, your React front-end application runs on browsers whereas dotnetCore application runs on CoreCLR. Meaning that you can debug your React front-end application in browser's Developer Tools in a basic way.
Ensure that the build operation of your React front-end app generates source map (*.map) files. These files map your browser compatible js output files to the tsx / ts sources. Then you should be able to debug it on your browser's Developer Tool.
Is it possible to debug a Spring application running on jetty and the front-end angular part at the same time in IntelliJ Idea?
The breakpoints in the backend work great, but the front-end ones are ignored.
Yes, it's posible.
You need to install this Chrome Extension:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
To debug the angular project, you create a new debug configuration:
In IntelliJ Idea go to Run -> Edit configurations.
Click the + button (Add New Configuration) and select the JavaScript Debug.
Change the URL with your application local development url, usually http://localhost:4200/
Save the configuration, execute ng serve and run the configuration in debug mode.
You get the breakpoints working in server and client!!!
It can be done in this way with IntelliJ Idea:
For backend (pretty obvious)
Create a Maven run profile and pass in these arguments: jetty:run.
Then debug this run configuration. This will enable you to 'listen' to the backend of your application.
For frontend:
Create a JavaScript Debug run profile and set it up as follows:
URL: http://localhost:9070/ (this is where my jetty server and my application was running).
Then you have to set the REMOTE URL of the directory where you AngularJS app is (in my case it was /app) to: http://localhost:9070/
And all that's left is to run as debug this configuration and that will make debugging the front end possible also.
I'm very new to AngularJS. I am trying to automate an angularJS app.
installed node.js
installed protractor (npm install -g protractor)
updated webdriver manager tool (webdriver-manager update)
started the driver (webdriver-manager start)
I create a simple conf.js and spec.js files. Everything works fine and set to go.
when we execute spec.js, protractor talk to selenium webdriver which then launches the browser and does the other stuff like interacting with angularJS app. Am I correct?
So, what is the role of node.js here in protractor?
I might be wrong, if so please do correct me and explain how protractor works.
Thanks in advance :)
Node.js is an open source runtime environment to develop applications in JavaScript.
WebDriverJS has been written in Node.js and Protractor has been written on top of WebDriverJS.
Node.js will be executing the javascript code you've written in your spec and po files with its JavaScript Engine (Google V8), or as you've so colourfully described: "does the other stuff like interacting with angularJS app".
Read more here and here
Protractor is a Node.js application... hence the Node requirement. Protractor is written in Javascript, so it requires a Javascript engine, which Node provides (Google V8), thus allowing it to run on a server.
Node.js is package file we are using in protractor automation tool to run the angular.js based application.It contains selenium and other browser drivers to run our applications in different environments.
I am trying to figure out a simple way to run tests on angularjs application.
I am new to the testing world, so it's a little hard to understand all the options and the difference between them.
My goal: to be able to run the tests simply from within my IDE - Eclipse.
And to tests the code on google chrome browser.
I found jasmine to be the obvious choice for writing js unit tests. The problem is choosing a runner both for the jasmine tests and for e2e tests.
Trying to keep it simple, I've come up with the following idea for a setup:
Write the unit tests in jasmine, and the e2e tests in phantomjs and syn.js.
Then configure eclipse to run phantomjs as an external tool, so that the output will go to the console in eclipse.
I also plan to have a CI job in Jenkins, and to my understanding Jenkins can also run phantom, so theoretically this solution will work the same for CI.
Alternatively, there are test running tools like Karma and Protractor. On one hand, they seem to be recommended, but on the other hand they seem to me like overkill in some cases. They require a lot of different tools/services/processes to be running in order to work, and it seems like a pain maintain all that setup if it breaks.
To my understanding: protractor runs on webdriverjs which runs on nodejs, and it requires a selenium server to be running in the background, and on top of all that the selenium opens real browser windows which seems a little pointless as opposed to headless browser testing.
Then there is Karma, that I did not yet fully understand what it's supposed to do. From what I've read it monitors the files in my project and whenever a file is changed it runs the tests. I'm not sure how it runs the tests - is it also using selenium?
And lastly, there are grunt and yeoman, which I did not understand at all what they do and how they interact or fit together with the other tools I've listed.
I would appreciate if someone could clarify what these different tools do, and how they fit together. Also, how would they fit with Jenkins as a CI server?
Also if you could comment on my "simpler setup" - does it make sense? Am I missing something?
Karma is for unit testing your JS, regardless of whether it is using Angular or not. The ins and outs of unit testing with Karma are covered very well here: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html. Yes, Karma opens and closes browser windows as needed and specified in the configuration file. If you don't want any browser windows opened, you can use PhantomJS. You can run Karma from within most any IDE that is capable of running an external script, or run it via the command line.
Protractor is for end-to-end (or E2E) testing of your project as a whole. It will open a browser window and click through the pages as though it were a user, entering data where you tell it to and looking for the specified results. Protractor is a bit more complicated than just writing some Jasmine, but the results are worth it. Like Karma, you can run Protractor from within most any IDE that is capable of running external scripts or via the command line.
Yeoman is a process management system that incorporates dependency management via Bower, task automation via Grunt, and project management via Yo. It will run your tests in Karma and Protractor, minify your JS, CSS, and HTML, compile everything into appropriate files (internal JS, external libraries, and CSS) and provide you with a complete package that can be deployed. The beauty of Yeoman is that it is not specific to any one IDE. Everything it does can be done by scripting in your IDE or via the command line.
Now, having said all of this about Yeoman, you do still have to write the tests (it won't magically come up with them for you) and learn to integrate it into your development routine, but it is definitely the way to go for JS development. Eclipse is fine for JS development, but you'll get better performance and ease of use (IMHO) from WebStorm.
As for how these all fit into CI like Jenkins, I believe that both Karma and Protractor output test results in a format that Jenkins can read and display. With the scripting possibilities in Jenkins you can configure it to run the build process each time your source control repository (you are using some sort of source control, aren't you?) changes and show those results on the Jenkins page. My office has a very similar setup and we use it daily. I'm not the guy that has to do the Jenkins configuration, but I do work with Yeoman (and thus Karma and Protractor) via WebStorm on a regular basis and have had very good results.
I would say the clear choice here is Karma and Protractor. While it is true that they rely on a bunch of other stuff, they do so pretty antiseptically: protractor starts up the selenium server and then shuts it off when it's done. Once you have node installed, the other installations are all super simple. I would also install httpster, which will serve up your public director on port 3333.
Frankly, having come from a decade of doing TDD in the Java world, when I first looked at Javascript a few years ago (again), the testing picture was a complete joke. But now, I think the combination of Karma and Protractor is pretty fantastic. Inside IntelliJ, you can run the Karma tests and they are stupid fast and the results are presented in a runner that's as good as anything I've seen in the Java world (Xcode 5 has the best test integration). You can also install the ddescribe plugin in IntelliJ and have a ui for running individual tests or excluding tests.
On the protractor side, I found this post because I am at the point now where I am going to run my karma, protractor and then JUnit tests on a continuous integration server (either Jenkins or TeamCity). I was kind of surprised at the paucity of info on that leg of the trip, but the clear direction I see there is Grunt, because it will run your protractor tests then generate the JUnit-style output Jenkins wants. Grunt is also a pretty impressive addition to the JS world.
I know this sounds like a bunch of opinions, but I think that as happened in the Java world, the Javascript world has now reached that level of maturity where you are just going to have to expect things to drag other things in with them. Frankly, looks like node and npm do a pretty nice job of making that pretty seamless (vs. a decade down the drain on Maven in the Java world).
Updated: Sorry I did not read your question properly.
karma is a test runner, which is best suited for jasmine. For setting up is very very easy. Please download node, and install npm install karma. Follow the angular seed sandbox project it contains all the basic config set up for unit testing and end to end testing (in config folder).all you need is nodejs plugin installed in eclipse
Yeoman can be used for javascript minification, sass compilation e.t.c.
Install node eclipse and you can set all up in eclipse.
http://www.nodeclipse.org/
Is there somewhere an example of AngularJS app generated by yo angular generator that has e2e tests with $httpBackend from ngMockE2E module? Preferably with single and continuous versions for CI and development.
It looks like using $httpBackend requires one to create a new app that depends on the original app module and ngMockE2E module and requires new index.html file that loads this new app.
If tests use a different app, does it mean that I should modify configuration to store files generated for tests somewhere else than files generated by grunt server command (.tmp), or will these files be exactly the same? I'd like to be able to have grunt server running for development while running e2e tests in the background with PhantomJS.
Has anyone created a task that automatically generates modified index-e2e.html file based on index.html? This way it would be always up to date and it could also be used with watch to automatically regenerate it whenever original index.html file changes.
You should notice that angular is depreacting e2e in favor of the protractor framework.. Also notice that e2e (and protractor also) is quite slow. so running continuously in the background like we do with unittesting isn't recommended. That said, for your question - No you don't need a different app, index file etc. (unless you need coverage data from e2e, in that case you'll need to instrument the js files, and that would require a different index.html, that can be created in grunt task with sed). what you do need is a different karma.conf.js file, a different grunt karma task ro reference it, including ng-scenario in the files section of the karma.conf. and running some kind of grunt testServer task that would run a test server, which isn't the same as the dev grunt server. You can run both with foreman or something similiar (as explained in this SO [question]. (How can I automate both E2E and unit tests with Yeoman & AngularJS?) and answer). If this is what you are looking for - you can find a karma.conf.js example for both e2e an unit in this PR. and again, don't invest heavily into the current e2e framework. better working the the new and shiny protractor