[RFR] Use fakerest and webpack-dev-server instead of json-server and grunt-connect

Gruntfile.js

@@ -15,9 +15,17 @@ module.exports = function (grunt) {
                 dest: 'src/javascripts/test/fixtures/',
                 options: {
                     process: function(content) {
-                        return content.replace(/http\:\/\/localhost\:8080\//g, '/');
+                        return content.replace(/http\:\/\/localhost\:8000\//g, '/');
                     }
                 }
+            },
+            test_fakerest: {
+                src: 'node_modules/fakerest/dist/FakeRest.min.js',
+                dest: 'src/javascripts/test/fixtures/examples/blog/build/fakerest.js'
+            },
+            test_sinon_server: {
+                src: 'node_modules/sinon/pkg/sinon-server-1.14.1.js',
+                dest: 'src/javascripts/test/fixtures/examples/blog/build/sinon-server.js'
             }
         },
         connect: {
@@ -31,23 +39,13 @@ module.exports = function (grunt) {
             },
             test: {
                 options: {
-                    port: 8000,
+                    port: 8001,
                     base: 'src/javascripts/test/fixtures/examples/blog/',
                     keepalive: false,
                     livereload: false
                 }
             }
         },
-        json_server: {
-            stub: {
-                options: {
-                    port: 3000,
-                    db: 'examples/blog/stub-server.json',
-                    keepalive: false,
-                    logger: false
-                }
-            }
-        },
         karma: {
             unit: {
                 configFile: 'src/javascripts/test/karma.conf.js',
@@ -62,25 +60,21 @@ module.exports = function (grunt) {
             }
         },
         exec: {
-            webpack: './node_modules/webpack/bin/webpack.js',
-            webpack_watch: './node_modules/webpack-dev-server/bin/webpack-dev-server.js --colors --devtool cheap-module-inline-source-map'
+            webpack: './node_modules/webpack/bin/webpack.js'
         }
     });
 
     grunt.loadNpmTasks('grunt-contrib-connect');
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-exec');
     grunt.loadNpmTasks('grunt-protractor-runner');
-    grunt.loadNpmTasks('grunt-json-server');
     grunt.loadNpmTasks('grunt-karma');
     grunt.loadNpmTasks('grunt-mocha-test');
 
     grunt.registerTask('test', ['karma', 'test:e2e']);
-    grunt.registerTask('test:e2e', ['test:e2e:prepare', 'json_server', 'connect:test', 'protractor']);
-    grunt.registerTask('test:e2e:prepare', ['exec:webpack', 'copy:test_sample_app', 'copy:test_build']);
+    grunt.registerTask('test:e2e', ['test:e2e:prepare', 'connect:test', 'protractor']);
+    grunt.registerTask('test:e2e:prepare', ['exec:webpack', 'copy:test_sample_app', 'copy:test_build', 'copy:test_fakerest', 'copy:test_sinon_server']);
 
     grunt.registerTask('test:local', ['karma', 'test:local:e2e']);
-    grunt.registerTask('test:local:e2e', ['test:e2e:prepare', 'json_server', 'connect:test', 'protractor']);
-
-    grunt.registerTask('default', ['json_server', 'connect:dev', 'exec:webpack_watch']);
+    grunt.registerTask('test:local:e2e', ['test:e2e:prepare', 'connect:test', 'protractor']);
 };

Makefile

@@ -5,7 +5,7 @@ install:
 	./node_modules/protractor/bin/webdriver-manager update
 
 run:
-	@./node_modules/.bin/grunt
+	@./node_modules/webpack-dev-server/bin/webpack-dev-server.js --colors --devtool cheap-module-inline-source-map --content-base examples/blog --port 8000
 
 build:
 	@NODE_ENV=production ./node_modules/webpack/bin/webpack.js -p --optimize-minimize --optimize-occurence-order --optimize-dedupe --progress --devtool source-map

examples/blog/build/fakerest.js

@@ -0,0 +1 @@
+../../../node_modules/fakerest/dist/FakeRest.min.js

examples/blog/build/sinon-server.js

@@ -0,0 +1 @@
+../../../node_modules/sinon/pkg/sinon-server-1.14.1.js

examples/blog/config.js

@@ -20,29 +20,38 @@
             if (operation == "getList") {
                 // custom pagination params
                 if (params._page) {
-                    params._start = (params._page - 1) * params._perPage;
-                    params._end = params._page * params._perPage;
+                    var start = (params._page - 1) * params._perPage;
+                    var end = params._page * params._perPage - 1;
+                    params.range = "[" + start + "," + end + "]";
+                    delete params._page;
+                    delete params._perPage;
                 }
-                delete params._page;
-                delete params._perPage;
                 // custom sort params
                 if (params._sortField) {
-                    params._sort = params._sortField;
-                    params._order = params._sortDir;
+                    params.sort = '["' + params._sortField + '","' + params._sortDir + '"]';
                     delete params._sortField;
                     delete params._sortDir;
                 }
                 // custom filters
                 if (params._filters) {
-                    for (var filter in params._filters) {
-                        params[filter] = params._filters[filter];
-                    }
+                    params.filter = params._filters;
                     delete params._filters;
                 }
             }
             return { params: params };
         });
 
+        RestangularProvider.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
+            if (operation === "getList") {
+                var headers = response.headers();
+                if (headers['content-range']) {
+                    response.totalCount = headers['content-range'].split('/').pop();
+                }
+            }
+
+            return data;
+        });
+
         var admin = nga.application('ng-admin backend demo') // application main title
             .debug(false) // debug disabled
             .baseApiUrl('http://localhost:3000/'); // main API endpoint

examples/blog/fakerest-init.js

@@ -0,0 +1,31 @@
+(function () {
+    'use strict';
+
+    // setup fake server
+    var restServer = new FakeRest.Server('http://localhost:3000');
+    var testEnv = window.location.pathname.indexOf('test.html') !== -1;
+    restServer.init(apiData);
+    restServer.toggleLogging(); // logging is off by default, enable it
+
+    // use sinon.js to monkey-patch XmlHttpRequest
+    sinon.FakeXMLHttpRequest.useFilters = true;
+    sinon.FakeXMLHttpRequest.addFilter(function (method, url) {
+        // Do not catch webpack sync, config.js transformation but catch /upload in test env
+        return url.indexOf('/socket.io/') !== -1 || url.indexOf('config.js') !== -1
+            || (!testEnv && url.indexOf('/upload') !== -1);
+    });
+
+    var server = sinon.fakeServer.create();
+    server.autoRespond = true;
+    server.autoRespondAfter = 0; // answer immediately
+
+    server.respondWith(restServer.getHandler());
+
+    if (testEnv) {
+        server.respondWith(function (response) {
+            if (response.url.indexOf('/upload') !== -1) {
+                response.respond(JSON.stringify({apifilename: 'my-cat.jpg'}));
+            }
+        });
+    }
+}());

examples/blog/index.html

@@ -4,11 +4,15 @@
         <meta charset="utf-8">
         <title>Angular admin</title>
         <meta name="viewport" content="width=device-width">
-        <link rel="stylesheet" href="http://localhost:8080/build/ng-admin.min.css">
+        <link rel="stylesheet" href="http://localhost:8000/build/ng-admin.min.css">
     </head>
     <body ng-app="myApp" ng-strict-di>
         <div ui-view></div>
-        <script src="http://localhost:8080/build/ng-admin.min.js" type="text/javascript"></script>
+        <script src="build/fakerest.js" type="text/javascript"></script>
+        <script src="build/sinon-server.js" type="text/javascript"></script>
+        <script src="data.js" type="text/javascript"></script>
+        <script src="fakerest-init.js" type="text/javascript"></script>
+        <script src="http://localhost:8000/build/ng-admin.min.js" type="text/javascript"></script>
         <script src="config.js" type="text/javascript"></script>
     </body>
 </html>

package.json

@@ -29,6 +29,7 @@
     "es6-promise": "^2.3.0",
     "exports-loader": "^0.6.2",
     "extract-text-webpack-plugin": "^0.8.0",
+    "fakerest": "^1.0.5",
     "file-loader": "^0.8.1",
     "font-awesome": "^4.3.0",
     "grunt": "~0.4.4",
@@ -45,7 +46,6 @@
     "grunt-contrib-uglify": "~0.6.0",
     "grunt-contrib-watch": "~0.5.2",
     "grunt-exec": "^0.4.6",
-    "grunt-json-server": "git://github.com/fzaninotto/grunt-json-server.git",
     "grunt-karma": "^0.8.3",
     "grunt-mocha-test": "^0.12.7",
     "grunt-ng-annotate": "^0.10.0",
@@ -78,15 +78,15 @@
     "rangy": "^1.3.0",
     "restangular": "^1.5.1",
     "sass-loader": "^0.5.0",
-    "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
+    "sinon": "1.14.1",
     "style-loader": "^0.12.2",
     "superagent": "^0.18.2",
     "textangular": "^1.3.11",
     "ui-select": "angular-ui/ui-select#271bf6a03078587c5afdb05f61e826573a13d348",
     "underscore": "^1.8.3",
     "url-loader": "^0.5.5",
-    "webpack": "^1.9.4",
-    "webpack-dev-server": "^1.8.2"
+    "webpack": "^1.10.0",
+    "webpack-dev-server": "^1.10.1"
   },
   "engines": {
     "node": ">=0.10.0"

src/javascripts/test/e2e/EditionViewSpec.js

@@ -22,10 +22,10 @@ describe('EditionView', function () {
                 return $$('button[type="submit"]').first().click();
             })
             .then(function() {
-                return browser.get(browser.baseUrl + '#/comments/list');     
+                return $$('#page-wrapper .btn-default').first().click();
             })
             .then(function() {
-                return browser.get(browser.baseUrl + '#/comments/edit/11');
+                return $$('.ng-admin-column-actions .btn-xs').first().click();
             })
             .then(function() {
                 return $$('.ng-admin-field-author_name input').first();
@@ -99,7 +99,7 @@ describe('EditionView', function () {
             .then(function() {
                 return browser.getLocationAbsUrl();
             })
-            .then(function(url){
+            .then(function(url) {
                 expect(url).toContain('/comments/edit/');
             });
         });

src/javascripts/test/e2e/filterViewSpec.js

@@ -5,7 +5,7 @@ describe('List filter', function () {
     var hasToLoad = true;
     beforeEach(function() {
         if (hasToLoad) {
-            browser.get(browser.baseUrl + '#/comments/list');    
+            browser.get(browser.baseUrl + '#/comments/list');
         }
         hasToLoad = true;
     });
@@ -22,7 +22,7 @@ describe('List filter', function () {
             return $$('ma-view-actions button').then(function(buttons) {
                 expect(buttons[0].getText()).toBe(' Add filter');
             });
-        });        
+        });
     });
 
     describe('filter button', function() {
@@ -94,7 +94,7 @@ describe('List filter', function () {
                 return browser.driver.sleep(600); // debounce delay
             })
             .then(function() {
-                return $$('.grid tr td:nth-child(4)');    
+                return $$('.grid tr td:nth-child(4)');
             })
             .then(function (tdElements) {
                 expect(tdElements.length).toBe(1);
@@ -116,7 +116,7 @@ describe('List filter', function () {
                 return browser.driver.sleep(600); // debounce delay
             })
             .then(function() {
-                return $$('.grid tr td:nth-child(4)');    
+                return $$('.grid tr td:nth-child(4)');
             })
             .then(function (tdElements) {
                 expect(tdElements.length).toBe(10);
@@ -184,7 +184,7 @@ describe('List filter', function () {
                 return $$('ma-datagrid-pagination .total');
             })
             .then(function (totalElements) {
-                expect(totalElements[0].getText()).toBe('1 - 5 on 5');
+                expect(totalElements[0].getText()).toBe('1 - 4 on 4');
             });
         });
     });

src/javascripts/test/protractor.conf.js

@@ -4,7 +4,7 @@ exports.config =  {
     sauceKey: process.env.SAUCE_ACCESS_KEY,
 
     specs: ['e2e/*.js'],
-    baseUrl: 'http://' + (process.env.CI ? 'ngadmin' : 'localhost') + ':8000',
+    baseUrl: 'http://' + (process.env.CI ? 'ngadmin' : 'localhost') + ':8001',
     maxSessions: 1,
     multiCapabilities: [
         {