Grunt + Rails just for test javascript - javascript

I've seen many posts in stackoverflow about Grunt + Rails, but many cases asked about changes from Grunt.js to Rails asset pipeline, that is not my case.
My Gruntfile was set up to work with Mocha, in other words, just for test javascript codes.
So my doubt is: How the best way to organize my files into rails project?
I thought about creating a directory in my test path called "javascript" and put all test into there, after change options in Gruntfile.
Is this the best way?

We had some Jasmine specs in our recent rails project. You could follow Jasmine's convention:
project root/
spec/
javascript/
Since another JavaScript testing framework has already done what you are suggesting, creating a "javascript" folder in your "test" folder would work just fine.

Related

How do you handle bower components properly when it comes to references, concat, and minify?

I recently started an endeavor on creating a VSTS Extension. I utilized bower to automatically pull in the latest vss-web-extension-sdk component, and everything works fine so far. One thing that bothers me is that I had to reference the script in the following way:
<script src="bower_components/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
I understand that I can change the bower components directory, but should it be a unique name or can it be scripts, which is the folder where my own scripts reside?
Additionally:
Should I (and how do I) concatenate components together when it comes to production?
Should I minify all of my components (Javascript) together, even though I'm already provided *.min.js files?
I've come across other similar questions relating to this, but I'm not utilizing Grunt or Gulp, just npm and bower. I ask this because I want to ensure that my production code does not identify which tooling I used (npm, bower), and I want the production code to be as proper as possible, which may require me to minify all JS together (I'm not sure on this one)?

How to publishing an angular2 directives

I have written an angular2 directive called ng2-clearfix. The typescript code itself is ready, it's tested and works just fine.
I now want to publish the directive on github so others can use it as well, i had a few questions while doing that:
How should i serve the file? Like should i provide ng2-clearfix.js file or should i just leave ng2-clearfix.ts and let the user compile typescript to javascript.
How should i manage dependancies for ng2-clearfix itself. I want to publish it on both npm and bower. i think using bower for my own dependency management will be a problem because the developer using ng2-clearfix may or may not be using bower.
Thanks for you time.
Also if you know a boilerplate for angular2 directive please let me know, that would make tasks easier.
Well, you can start by using this amazing tool generator-angular2-library
Iv'e used it recently for a library I wrote for Ionic2, and it really saved me some time.
It is a pretty simple Yeoman generator that produces you a skeleton for your library.
Then, after you finish organizing your app, you can publish it to npm.
Since Angular 2 uses Typescript, all the files should eventually be transpiled to javascript.
The basic idea is to keep all the source files in your repository, compile the files and publish them to npm under the right version. You should not commit the compiled files to the repository.
Your'e welcome to look at the library I wrote to see how things basically work: https://github.com/kadoshms/ionic2-autocomplete

How to minify AngularAMD code?

I've been looking at the AngularAMD library and I'm wondering if there's a way to minify the code for use in production.
I've taken a look at the AngularAMD sample which does have a Grunt configuration, but unfortunately, the instructions for building aren't working for me, and it's giving an error on the grunt setup step. So I'm not able to see whether this project is producing the sort of minimized code that I'm looking for.
When trying to use grunt-contrib-concat on the example AngularAMD code, the problems I run into are the same ones that you traditionally run into when trying to minimize Angular projects with RequireJS which led to Ravi Kiran's blog post on how to integrate the two.
(e.g. defining both app which creates the initial Angular module, and its controllers as RequireJS modules ends up with a circular dependency, so that you need to define the controllers as individual functions, list those functions as dependencies in the code which creates the Angular module, and then call angular.module(...).controller on each of them.)
The problem with angularAMD-sample project during grunt setup resulting in cryptic Fatal error: Arguments to path.join must be strings was actually caused by an older version of grunt-bower-task. Updating it to 0.4.0 from 0.3.2 resolved the problem.
grunt deploy should now produce the minified code with angularAMD.

What is preferred method to test Angular/Rails app?

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

Where should I store my Jasmine files in a Symfony project?

What is the best place to put the Jasmine files (libs, specs, SpecRunner.html)
in a symfony project?
I would make in this way:
the jasmine libs in web/vendor/js
the spec files in src/myProject/WebBundle/Resources/public/js
and the SpecRunner.html I have no idea.
Since Jasmine is used just for testing your JavaScript code, I don't think it is a good idea to put libraries and spec files in the public.
I would put them in src/myProject/WebBundle/Resources/
src/myProject/WebBundle/Resources/js/lib/jasmine
src/myProject/WebBundle/Resources/js/spec

Categories

Resources