I am testing the javascript that's sitting on top of my Rails app (using sprockets) with NPM (which is not connected to my Rails app in any way).
Everything is working great - the tests run (using NPM).
But how do I tell MochaJS which JavaScript files I want to test in my Rails app?
After doing some research I found out one would need to use a task runner such as Gulp, Grunt, or Webpack along with MochaJS to watch the files being tested.
You may want to look into konacha gem which integrates mocha and chai in the rails workflow.
Konacha ... is a Rails engine that allows you to test your JavaScript with the Mocha test framework and chai assertion library.
It ... does not attempt to be framework agnostic. By sticking with Rails, Konacha can take full advantage of features such as the asset pipeline and engines.
It can be integrated with guard through guard-konacha to watch for files and re-run tests.
Related
Let's say I'm running default production build settings in angular.json. What happens to all of my unit test and e2e test files (Protractor OR Cypress) when I run npm build --prod? Are these files included in the final build within the dist folder, or are they excluded to reduce bundle size? Is this inclusion or exclusion of test files in production builds configurable?
Angular has in its prod build process procedures called "tree-shaking" and, "dead-code elimination". Any code that is not in use by the angular prod app and/or its dependencies is removed from the built code.
This answer provides good details on how it works for angular builds
tl;dr;
If your object/function/class (test or not) is referenced by your components/modules/services/(and other angular blocks or other js/ts code dependencies) it is almost certain to remain into the built app. All other code is removed from the built app.
if you want some code from test files to remain in the built files, you will need to reference that file's exported objects/function from your js files and use that reference somehow.
I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.
I don't have experience in front-end but I want to create a simple app using Angular 2.
Why do I need to install Node.js as a prerequisite step? Why does Angular use Node.js?
There are a couple of things that Angular uses Node.js for:
Installing and managing packages. From the Quickstart tutorial:
Angular application developers rely on the npm package manager to install the libraries and packages their apps require. The Angular team recommends the starter-set of packages specified in the dependencies and devDependencies sections.
Compiling the TypeScript used into JavaScript that the browser understands - browsers can't process TypeScript natively and the SystemJS imports used in your code aren't supported in browsers yet:
We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase before running the application for several reasons including:
We see compiler warnings and errors that are hidden from us in the browser.
Precompilation simplifies the module loading process and it's much easier to diagnose problems when this is a separate, external step.
Precompilation means a faster user experience because the browser doesn't waste time compiling.
We iterate development faster because we only recompile changed files. We notice the difference as soon as the app grows beyond a handful of files.
Precompilation fits into a continuous integration process of build, test, deploy.
node.js is required in order to install the library using the node package manager (npm).
It is not required to run an app using angular2, only to build it.
For any modern JS based application, as the complexity grows, the app becomes difficult to manage.
In order to make developing and managing complex applications simpler, there are frameworks such as Angular, React etc. and they provide number of tools for the same.
These tools are linting, scaffolding, running unit test cases, starting web server for local development, minify and creating build for the production use etc.
These tools are based on NodeJS as it is JavaScript only and therefore can be customize as per developers needs.
And that's the reason you need Node.js for Angular2 development.
I have some Angular/Rails app where Rails part is just JSON API, all front works is doing by AngularJS. I've made model/controller test already using RSpec, and now I want to make some integration tests. Earlier I use request test (with Capybara, Selenium) of RSpec to test my pages/JS, but Angular is often tested by Karma/Jasmine, and I don't understand what way is preferred in Angular/Rails app. Please, give me advice, may be you share some experience with me. Thanks.
First of all you should test everything wisely. I will recommend great series of blog posts from the link below.
Since you are already familiar with RSpec, keep using it for your rails tests like models, controllers, request, etc.
For your Angularjs tests, karma and Jasmine are great choices. But Rails uses Sprockets for asset management so configuring karma can be a little bit tricky. For Rails and Jasmine I wrote a rake task. To run javascript tests you should simply run rake karma:start. I shared the link of the gist below.
The gist contains 2 files. You should put them:
karma.rake -> lib/tasks
karma.unit.js -> spec/javascripts/
Finally you should run feature/acceptance tests with Capybara.
Testing Series Intro
The Gist of Rake Task and Karma Configuration
as I'm developing a web application using AngularJS in the front-end and Node.js in the server. For now I'm writing tests for the node server (based on Express) using Mocha (+ Chai + Supertest), and client side tests using Mocha and Testacular as a test runner, since Testacular is the tool of choice with Angular.
Note that the Angular app is "embedded" in the node app, as it's located in the template files.
My testing process : for server tests, I just npm test, i.e. mocha <my-test-folder> <my-test-options> ; for client tests, I launch a Testacular server that watches changes in the desired files. But I don't like this parallel and disconnected process and I'm sure there's a better, unified automated way.
Could help me refine the process ?
In my travels I haven't seen a precident for this, but you should be able to achieve it using grunt. You can make a grunt target that calls both.
I have a github project that should help show how to use testacular on an angular project using grunt which will at least help with the client part; will help get you part of the way there.