Add a modules folder for all components on a page

Usually you want to develop components for your website or app which
should ideally be bundled into one directory. This commit adds a
directory `modules` for all these modules and updates according
configuration for Karma and the build process.

Reference: #123

.gitignore

@@ -6,5 +6,6 @@
 
 dist
 node_modules
+src/*.html
 test/coverage
 test/dist

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ### HEAD
+* Add a modules folder for all components on a page
 * Re-add .htaccess: server-configs-apache in version 2.11.0
 * Remove conditional comments for old IE
 * Drop IE8 support: update jQuery to v2.1.1

docs/tests.md

@@ -18,12 +18,7 @@ You can run tests by using the Grunt implementation. Just run `$ grunt connect:t
 For a less extensive unit test with PhantomJS use `$ grunt connect:test karma:unit`.
 
 ## How to set up a Jasmine Test suite
-When adding a new test suite you need to do the following:
-
-* Add a file in the folder `test/specs/`
-* Name it `{{spec-name}}.spec.js`
-* Add the file name without the extension to the list of dependencies in `test/spec.js`
-* Wrap your test suite in a `define` function call as you can see here in order to get it working with RequireJS
+Please refer to the [Writing Tests](writing-tests.md) documentation.
 
 ### Coverage
 Karma tests include a coverage report within the console.

docs/writing-tests.md

@@ -28,11 +28,11 @@ There are four different tasks of interested to run with Grunt:
 In general you want to write a test suite for each module you write. You can do
 this by following this steps:
 
-* If you haven't created the module within `src/js/` yet, do so now.
-* Add a file `modulename.spec.js` within `test/specs/` by copying over
-  `example.spec.js` and removing unnecessary stuff.
+* If you haven't created the module within `src/modules/` yet, do so now.
+* Add a file `modulename.spec.js` within `src/modles/modulename/` by copying
+  over `module.spec.js` and removing unnecessary stuff.
 * Adjust the `define` statement to include the module you want to test. Add
-  `modulename.spec.js` as `../../test/specs/modulename.spec` in
+  `modulename.spec.js` as `../modules/modulename/modulename.spec` in
   `test/test-main.js`.
 * Run tests to ensure everything works just as you expect it.
 

grunt/config.js

@@ -28,7 +28,8 @@ module.exports = {
   // JavaScript files
   js: {
     files: [
-      'src/js/**/*.js'
+      'src/js/**/*.js',
+      'src/modules/**/*.js'
     ],
     config: 'src/js/config.js',
     dest: 'dist/<%= pkg.version %>/main.min.js',
@@ -45,7 +46,7 @@ module.exports = {
       'src/css/**/*.css'
     ],
     src: 'src/css/main.css',
-    devDest: 'dist/css/main.css',
+    devDest: 'src/dist/main.css',
     dest: 'dist/<%= pkg.version %>/main.min.css'
   },
 
@@ -63,7 +64,7 @@ module.exports = {
   },
 
   tests: {
-    src: 'test/specs/**/*spec.js',
+    src: 'src/modules/**/*spec.js',
     config: 'test/test-main.js',
     coverage: 'test/coverage/'
   },
@@ -81,8 +82,8 @@ module.exports = {
     dev: {
       src: 'temp/**/*.html',
       dest: 'src/',
-      maincss: 'css/main.css',
-      modernizr: '../node_modules/modernizr/modernizr.js',
+      maincss: 'dist/main.css',
+      modernizr: '../node_modules/grunt-modernizr/lib/modernizr-dev.js',
       mainjs: '<script data-main="js/config" src="../node_modules/requirejs/require.js"></script>'
     }
   }

src/css/main.css

@@ -20,4 +20,4 @@
 @import url('src/css/layout/footer.css');
 
 /* Modules */
-@import url('src/css/modules/box.css');
+@import url('src/modules/module/module.css');

src/js/main.js

@@ -7,7 +7,7 @@
 
 require([
   // Require the modules
-  'modules/module'
+  '../modules/module/module'
 ], function (module) {
   'use strict';
 

test/specs/example.spec.js → src/modules/module/module.spec.js

@@ -1,8 +1,9 @@
 /**
  * An example specification for the example module
  * Loads the module and runs the test suite
+ * Module path is relative to the current path
  */
-define(['modules/module'], function (module) {
+define(['./module'], function (module) {
   'use strict';
 
   // Test suite INIT

test/test-main.js

@@ -12,7 +12,7 @@
   require.config({
 
     // Set baseUrl for Karma
-    baseUrl: 'http://localhost:9876/base/src/js',
+    baseUrl: 'http://localhost:9876/base/src/js/',
 
     deps: [
       '../../node_modules/grunt-modernizr/lib/modernizr-dev',
@@ -22,7 +22,7 @@
 
   // Load the example spec
   require([
-    '../../test/specs/example.spec'
+    '../modules/module/module.spec'
     // @TODO: Add your own specifications here
   ], window.__karma__.start);
 }());