From 0847b751c221516f04e1d02f38ae34c0e7873f4e Mon Sep 17 00:00:00 2001 From: Peter Bacon Darwin Date: Wed, 20 Aug 2014 08:10:36 +0100 Subject: [PATCH] refact(*): further architectural improvements --- .jshintrc | 9 ++- .travis.yml | 4 +- README.md | 70 +++++++++---------- app/assets/css/.gitkeep | 0 app/assets/css/app.css | 30 -------- app/assets/img/.gitkeep | 0 app/components/directives/appVersion.js | 8 --- app/components/filters/interpolate.js | 10 --- app/components/services/appVersionService.js | 8 --- app/components/version/interpolate-filter.js | 9 +++ ...ter_test.js => interpolate-filter_test.js} | 4 +- app/components/version/version-directive.js | 13 ++-- .../version/version-directive_test.js | 4 +- app/components/version/version-filter.js | 8 --- app/components/version/version.js | 8 ++- app/components/version/version_test.js | 4 +- app/components/view1/view1.html | 1 - app/components/view1/view1.js | 13 ---- app/components/view2/view2.html | 5 -- app/components/view2/view2.js | 13 ---- app/index-async.html | 13 ++-- app/index.html | 4 +- app/view1/view1.js | 20 +++--- app/view1/view1_test.js | 18 +++-- app/view2/view2.js | 20 +++--- app/view2/view2_test.js | 19 +++-- .../protractor.conf.js | 2 +- {test/e2e => e2e-tests}/scenarios.js | 0 test/karma.conf.js => karma.conf.js | 7 +- package.json | 6 +- test/unit/view1Spec.js | 19 ----- test/unit/view2Spec.js | 18 ----- 32 files changed, 131 insertions(+), 236 deletions(-) delete mode 100644 app/assets/css/.gitkeep delete mode 100644 app/assets/css/app.css delete mode 100644 app/assets/img/.gitkeep delete mode 100644 app/components/directives/appVersion.js delete mode 100644 app/components/filters/interpolate.js delete mode 100644 app/components/services/appVersionService.js create mode 100644 app/components/version/interpolate-filter.js rename app/components/version/{version-filter_test.js => interpolate-filter_test.js} (78%) delete mode 100644 app/components/version/version-filter.js delete mode 100644 app/components/view1/view1.html delete mode 100644 app/components/view1/view1.js delete mode 100644 app/components/view2/view2.html delete mode 100644 app/components/view2/view2.js rename test/protractor-conf.js => e2e-tests/protractor.conf.js (94%) rename {test/e2e => e2e-tests}/scenarios.js (100%) rename test/karma.conf.js => karma.conf.js (83%) delete mode 100644 test/unit/view1Spec.js delete mode 100644 test/unit/view2Spec.js diff --git a/.jshintrc b/.jshintrc index da4080429a..6f00218e37 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,6 +1,13 @@ { "globalstrict": true, "globals": { - "angular": false + "angular": false, + "describe": false, + "it": false, + "expect": false, + "beforeEach": false, + "afterEach": false, + "module": false, + "inject": false } } \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 768fb150bd..cce5c682a8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,5 +10,5 @@ before_script: - sleep 1 # give server time to start script: - - node_modules/.bin/karma start test/karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox - - node_modules/.bin/protractor test/protractor-conf.js --browser=firefox + - node_modules/.bin/karma start karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox + - node_modules/.bin/protractor e2e-tests/protractor.conf.js --browser=firefox diff --git a/README.md b/README.md index f01b34b90b..b1d6c97b73 100644 --- a/README.md +++ b/README.md @@ -70,39 +70,33 @@ Now browse to the app at `http://localhost:8000/app/index.html`. ## Directory Layout - app/ --> all of the files to be used in production - assets/ --> all static asset files - css/ --> css files - app.css --> default stylesheet - img/ --> image files - components/ --> all app specific modules - directives/ --> application level directives - appVersion.js --> custom directive that returns the current app version - filters/ --> application level filters - interpolate.js --> custom interpolation filter - services/ --> application level services - appVersionService.js --> custom service that returns the current app version - view1/ --> a custom module for this application - view1.html --> the template rendered for this module - view1.js --> the application logic for this module - view2/ --> a custom module for this application - view2.html --> the template rendered for this module - view2.js --> the application logic for this module - app.js --> application - index.html --> app layout file (the main html template file of the app) - index-async.html --> just like index.html, but loads js files asynchronously - test/ --> test config and source files - protractor-conf.js --> config file for running e2e tests with Protractor - e2e/ --> end-to-end specs - scenarios.js - karma.conf.js --> config file for running unit tests with Karma - unit/ --> unit level specs/tests - directivessSpec.js --> specs for application level directives - filtersSpec.js --> specs for application level filters - servicesSpec.js --> specs for application level services - view1Spec.js --> specs for the view1 module - view2Spec.js --> specs for the view2 module - +``` +app/ --> all of the source files for the application + app.css --> default stylesheet + components/ --> all app specific modules + version/ --> version related components + version.js --> version module declaration and basic "version" value service + version_test.js --> "version" value service tests + version-directive.js --> custom directive that returns the current app version + version-directive_test.js --> version directive tests + interpolate-filter.js --> custom interpolation filter + interpolate-filter_test.js --> interpolate filter tests + view1/ --> the view1 view template and logic + view1.html --> the partial template + view1.js --> the controller logic + view1_test.js --> tests of the controller + view2/ --> the view2 view template and logic + view2.html --> the partial template + view2.js --> the controller logic + view2_test.js --> tests of the controller + app.js --> main application module + index.html --> app layout file (the main html template file of the app) + index-async.html --> just like index.html, but loads js files asynchronously +karma.conf.js --> config file for running unit tests with Karma +e2e-tests/ --> end-to-end tests + protractor-conf.js --> Protractor config file + scenarios.js --> end-to-end scenarios to be run by Protractor +``` ## Testing @@ -114,8 +108,8 @@ The angular-seed app comes preconfigured with unit tests. These are written in [Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma configuration file to run them. -* the configuration is found at `test/karma.conf.js` -* the unit tests are found in `test/unit/`. +* the configuration is found at `karma.conf.js` +* the unit tests are found in next to the code they are testing and are named as `..._test.js`. The easiest way to run the unit tests is to use the supplied npm script: @@ -143,8 +137,8 @@ The angular-seed app comes with end-to-end tests, again written in [Jasmine][jas are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has special features for Angular applications. -* the configuration is found at `test/protractor-conf.js` -* the end-to-end tests are found in `test/e2e/` +* the configuration is found at `e2e-tests/protractor-conf.js` +* the end-to-end tests are found in `e2e-tests/scenarios.js` Protractor simulates interaction with our web app and verifies that the application responds correctly. Therefore, our web server needs to be serving up the application, so that Protractor @@ -235,7 +229,7 @@ Then you can start your own development web server to serve static files from a running: ``` -http-server +http-server -a localhost -p 8000 ``` Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just diff --git a/app/assets/css/.gitkeep b/app/assets/css/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/app/assets/css/app.css b/app/assets/css/app.css deleted file mode 100644 index c92524070a..0000000000 --- a/app/assets/css/app.css +++ /dev/null @@ -1,30 +0,0 @@ -/* app css stylesheet */ - -.menu { - list-style: none; - border-bottom: 0.1em solid black; - margin-bottom: 2em; - padding: 0 0 0.5em; -} - -.menu:before { - content: "["; -} - -.menu:after { - content: "]"; -} - -.menu > li { - display: inline; -} - -.menu > li:before { - content: "|"; - padding-right: 0.3em; -} - -.menu > li:nth-child(1):before { - content: ""; - padding: 0; -} diff --git a/app/assets/img/.gitkeep b/app/assets/img/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/app/components/directives/appVersion.js b/app/components/directives/appVersion.js deleted file mode 100644 index c4c64bc8b4..0000000000 --- a/app/components/directives/appVersion.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -angular.module('appVersion', []) - .directive('appVersion', ['version', function(version) { - return function(scope, element, attributes, controller) { - element.text(version); - }; - }]); diff --git a/app/components/filters/interpolate.js b/app/components/filters/interpolate.js deleted file mode 100644 index a863038264..0000000000 --- a/app/components/filters/interpolate.js +++ /dev/null @@ -1,10 +0,0 @@ -'use strict'; - -/* Filters */ - -angular.module('interpolate', []). - filter('interpolate', ['version', function(version) { - return function(text) { - return String(text).replace(/\%VERSION\%/mg, version); - }; - }]); diff --git a/app/components/services/appVersionService.js b/app/components/services/appVersionService.js deleted file mode 100644 index 142de62414..0000000000 --- a/app/components/services/appVersionService.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -/* Services */ - -// Demonstrate how to register services -// In this case it is a simple value service. -angular.module('appVersionService', []) - .value('version', '0.1'); diff --git a/app/components/version/interpolate-filter.js b/app/components/version/interpolate-filter.js new file mode 100644 index 0000000000..03bb1987df --- /dev/null +++ b/app/components/version/interpolate-filter.js @@ -0,0 +1,9 @@ +'use strict'; + +angular.module('myApp.version.interpolate-filter', []) + +.filter('interpolate', ['version', function(version) { + return function(text) { + return String(text).replace(/\%VERSION\%/mg, version); + }; +}]); diff --git a/app/components/version/version-filter_test.js b/app/components/version/interpolate-filter_test.js similarity index 78% rename from app/components/version/version-filter_test.js rename to app/components/version/interpolate-filter_test.js index e25bd880df..ff56c529eb 100644 --- a/app/components/version/version-filter_test.js +++ b/app/components/version/interpolate-filter_test.js @@ -1,9 +1,9 @@ 'use strict'; -describe('version filter', function() { +describe('myApp.version module', function() { beforeEach(module('myApp.version')); - describe('interpolate', function() { + describe('interpolate filter', function() { beforeEach(module(function($provide) { $provide.value('version', 'TEST_VER'); })); diff --git a/app/components/version/version-directive.js b/app/components/version/version-directive.js index 62b8f76ac9..74088f8add 100644 --- a/app/components/version/version-directive.js +++ b/app/components/version/version-directive.js @@ -1,8 +1,9 @@ 'use strict'; -angular.module('myApp.version'). - directive('appVersion', ['version', function(version) { - return function(scope, elm, attrs) { - elm.text(version); - }; - }]); +angular.module('myApp.version.version-directive', []) + +.directive('appVersion', ['version', function(version) { + return function(scope, elm, attrs) { + elm.text(version); + }; +}]); diff --git a/app/components/version/version-directive_test.js b/app/components/version/version-directive_test.js index b38fbba5d2..4a59e1193a 100644 --- a/app/components/version/version-directive_test.js +++ b/app/components/version/version-directive_test.js @@ -1,9 +1,9 @@ 'use strict'; -describe('version directives', function() { +describe('myApp.version module', function() { beforeEach(module('myApp.version')); - describe('app-version', function() { + describe('app-version directive', function() { it('should print current version', function() { module(function($provide) { $provide.value('version', 'TEST_VER'); diff --git a/app/components/version/version-filter.js b/app/components/version/version-filter.js deleted file mode 100644 index 71c8bbcba2..0000000000 --- a/app/components/version/version-filter.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -angular.module('myApp.version'). - filter('interpolate', ['version', function(version) { - return function(text) { - return String(text).replace(/\%VERSION\%/mg, version); - }; - }]); diff --git a/app/components/version/version.js b/app/components/version/version.js index ecca360566..cb7a10f9db 100644 --- a/app/components/version/version.js +++ b/app/components/version/version.js @@ -1,4 +1,8 @@ 'use strict'; -angular.module('myApp.version', []). - value('version', '0.1'); +angular.module('myApp.version', [ + 'myApp.version.interpolate-filter', + 'myApp.version.version-directive' +]) + +.value('version', '0.1'); diff --git a/app/components/version/version_test.js b/app/components/version/version_test.js index c6d99e3a7e..4ca6880dab 100644 --- a/app/components/version/version_test.js +++ b/app/components/version/version_test.js @@ -1,9 +1,9 @@ 'use strict'; -describe('version service', function() { +describe('myApp.version module', function() { beforeEach(module('myApp.version')); - describe('version', function() { + describe('version service', function() { it('should return current version', inject(function(version) { expect(version).toEqual('0.1'); })); diff --git a/app/components/view1/view1.html b/app/components/view1/view1.html deleted file mode 100644 index 89459a65ca..0000000000 --- a/app/components/view1/view1.html +++ /dev/null @@ -1 +0,0 @@ -

This is the partial for view 1.

diff --git a/app/components/view1/view1.js b/app/components/view1/view1.js deleted file mode 100644 index 9f59986cc6..0000000000 --- a/app/components/view1/view1.js +++ /dev/null @@ -1,13 +0,0 @@ -'use strict'; - -angular.module('view1', []) - .config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/view1', { - templateUrl: 'components/view1/view1.html', - controller: 'MyCtrl1' - }); - }]) - - .controller('MyCtrl1', ['$scope', function($scope) { - - }]); \ No newline at end of file diff --git a/app/components/view2/view2.html b/app/components/view2/view2.html deleted file mode 100644 index b6503ee11a..0000000000 --- a/app/components/view2/view2.html +++ /dev/null @@ -1,5 +0,0 @@ -

This is the partial for view 2.

-

- Showing of 'interpolate' filter: - {{ 'Current version is v%VERSION%.' | interpolate }} -

diff --git a/app/components/view2/view2.js b/app/components/view2/view2.js deleted file mode 100644 index b0a4cee295..0000000000 --- a/app/components/view2/view2.js +++ /dev/null @@ -1,13 +0,0 @@ -'use strict'; - -angular.module('view2', []) - .config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/view2', { - templateUrl: 'components/view2/view2.html', - controller: 'MyCtrl2' - }); - }]) - - .controller('MyCtrl2', ['$scope', function($scope) { - - }]); \ No newline at end of file diff --git a/app/index-async.html b/app/index-async.html index ae63286a5f..a559b7168e 100644 --- a/app/index-async.html +++ b/app/index-async.html @@ -30,18 +30,19 @@ $script([ 'bower_components/angular/angular.js', 'bower_components/angular-route/angular-route.js', - 'js/app.js', - 'js/services.js', - 'js/controllers.js', - 'js/filters.js', - 'js/directives.js' + 'app.js', + 'view1/view1.js', + 'view2/view2.js', + 'components/version/version.js', + 'components/version/version-directive.js', + 'components/version/interpolate-filter.js' ], function() { // when all is done, execute bootstrap angular application angular.bootstrap(document, ['myApp']); }); My AngularJS App - +