Skip to content

Commit 866ec4d

Browse files
csilvavcsilvav
committed
New config files for karma and protractor with their respective directories for unit and e2e testing. Also config-build.js modified to accept style preprocessors, new libs for app, and i18n. Finally gulpfile was modified for better task execution, improve performance and working with browser sync server.
1 parent 1fb1435 commit 866ec4d

File tree

6 files changed

+129
-32
lines changed

6 files changed

+129
-32
lines changed

‎config-build.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = function () {
55
var appScriptsFile = 'app.js';
66
var appStylesFile = 'app.css';
77
var appTemplatesFile = 'templates.js';
8+
var appLanguagesFile = 'languages.js';
89
var vendorScriptsFile = 'vendor.js';
910
var vendorStylesFile = 'vendor.css';
1011
var distributionAppFolder = 'dist';
@@ -18,9 +19,12 @@ module.exports = function () {
1819
var directFiles = ['public/**/*', 'app/index.html'];
1920

2021
var appAssets = {
21-
scripts: ['app/app.js', 'app/modules/**/*.js', 'app/**/*.js'],
22+
scripts: ['app/app.js', 'app/modules/**/*.js', 'app/**/*.js', '!app/locales/**/*.js'],
2223
styles: 'app/styles/**/*.css',
23-
templates: 'app/templates/**/*.html'
24+
sassStyles: 'app/styles/**/*.scss',
25+
lessStyles: 'app/styles/**/*.less',
26+
templates: 'app/templates/**/*.html',
27+
languages: 'app/locales/**/*.js'
2428
};
2529

2630
var vendorAssets = {
@@ -57,6 +61,10 @@ module.exports = function () {
5761
app.importScript('bower_components/angular-ui-router/release/angular-ui-router.min.js');
5862
app.importScript('bower_components/angular-restmod/dist/angular-restmod-bundle.min.js');
5963
app.importScript('bower_components/satellizer/satellizer.min.js');
64+
app.importScript('bower_components/angular-translate/angular-translate.min.js');
65+
app.importScript('bower_components/angular-cookies/angular-cookies.min.js');
66+
app.importScript('bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js');
67+
app.importScript('bower_components/angular-translate-storage-local/angular-translate-storage-local.min.js');
6068

6169
//Returning module object
6270
return {
@@ -65,6 +73,7 @@ module.exports = function () {
6573
appScriptsFile: appScriptsFile,
6674
appStylesFile: appStylesFile,
6775
appTemplatesFile: appTemplatesFile,
76+
appLanguagesFile: appLanguagesFile,
6877
vendorScriptsFile: vendorScriptsFile,
6978
vendorStylesFile: vendorStylesFile,
7079
distributionAppFolder: distributionAppFolder,

‎gulpfile.js‎

Lines changed: 74 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
//Getting all dependencies to run all tasks
2+
3+
//Runners and compilers
24
var gulp = require('gulp');
35
var concat = require('gulp-concat');
4-
var connect = require('gulp-connect');
56
var templateCache = require('gulp-angular-templatecache');
67
var inject = require('gulp-inject');
7-
var history = require('connect-history-api-fallback');
8+
var sass = require('gulp-sass');
9+
var less = require('gulp-less');
10+
var merge = require('merge-stream');
11+
12+
//Build and server config
13+
var browserSync = require('browser-sync').create();
14+
var historyMiddleware = require('connect-history-api-fallback')({});
815
var config = require('./config-build')();
9-
var historyMiddleware = history({});
16+
17+
//Config variables to may build all
18+
var appScript = config.distributionAssetsFolder + '/' + config.appScriptsFile;
19+
var appStyle = config.distributionAssetsFolder + '/' + config.appStylesFile;
20+
var appTemplateScript = config.distributionAssetsFolder + '/' + config.appTemplatesFile;
21+
var appLanguageScript = config.distributionAssetsFolder + '/' + config.appLanguagesFile;
22+
var vendorScript = config.distributionAssetsFolder + '/' + config.vendorScriptsFile;
23+
var vendorStyle = config.distributionAssetsFolder + '/' + config.vendorStylesFile;
24+
25+
//Variables to handle unit and end to end testing
26+
var Server = require('karma').Server;
27+
var protractor = require("gulp-protractor").protractor;
1028

1129

1230
//ALL TASK TO COMPILE, CONCAT AND COPY APP FILES TO DIST
@@ -26,7 +44,11 @@ gulp.task('app-scripts', function () {
2644
//Concat and copy App CSS files to distribution folder
2745
gulp.task('app-styles', function () {
2846

29-
return gulp.src(config.assets.app.styles).pipe(concat(config.appStylesFile)).pipe(gulp.dest(config.distributionAssetsFolder));
47+
var sassStream = gulp.src(config.assets.app.sassStyles).pipe(sass());
48+
var lessStream = gulp.src(config.assets.app.lessStyles).pipe(less());
49+
var cssStream = gulp.src(config.assets.app.styles);
50+
51+
return merge(sassStream, lessStream, cssStream).pipe(concat(config.appStylesFile)).pipe(gulp.dest(config.distributionAssetsFolder));
3052
});
3153

3254
//Compile, concat and copy App Template files to distribution folder
@@ -38,6 +60,12 @@ gulp.task('app-templates', function () {
3860
})).pipe(gulp.dest(config.distributionAssetsFolder));
3961
});
4062

63+
//Compile, concat and copy App Languages files to distribution folder
64+
gulp.task('app-languages', function () {
65+
66+
return gulp.src(config.assets.app.languages).pipe(concat(config.appLanguagesFile)).pipe(gulp.dest(config.distributionAssetsFolder));
67+
});
68+
4169

4270
//ALL TASK TO COMPILE, CONCAT AND COPY VENDOR / THIRD PARTY FILES TO DIST
4371

@@ -57,40 +85,56 @@ gulp.task('vendor-styles', function () {
5785
//MAIN TASKS TO RUN ALWAYS WITH ANOTHER TASKS AS DEPENDENCIES
5886

5987
//Task to build, copy and inject all files inside a dist folder
60-
gulp.task('build-inject', ['direct-files', 'app-scripts', 'app-styles', 'app-templates', 'vendor-scripts', 'vendor-styles'], function () {
88+
gulp.task('build', ['direct-files', 'app-scripts', 'app-styles', 'app-templates', 'app-languages', 'vendor-scripts', 'vendor-styles'], function () {
6189

62-
var appScript = config.distributionAssetsFolder + '/' + config.appScriptsFile;
63-
var appStyle = config.distributionAssetsFolder + '/' + config.appStylesFile;
64-
var appTemplateScript = config.distributionAssetsFolder + '/' + config.appTemplatesFile;
65-
var vendorScript = config.distributionAssetsFolder + '/' + config.vendorScriptsFile;
66-
var vendorStyle = config.distributionAssetsFolder + '/' + config.vendorStylesFile;
67-
68-
return gulp.src('dist/index.html').pipe(inject(gulp.src([vendorScript, appScript, appTemplateScript, vendorStyle, appStyle], {read: false}), {relative: true})).pipe(gulp.dest('dist'));
90+
return gulp.src('dist/index.html').pipe(inject(gulp.src([vendorScript, appScript, appTemplateScript, appLanguageScript, vendorStyle, appStyle], {read: false}), {relative: true})).pipe(gulp.dest('dist'));
6991
});
7092

7193
//Task to run a Dev Server
72-
gulp.task('server', function () {
73-
connect.server({
74-
port: 8000,
75-
root: 'dist',
76-
livereload: true,
77-
middleware: function(connect, opt) {
78-
return [historyMiddleware];
79-
}
80-
});
81-
});
94+
gulp.task('serve', function () {
8295

83-
//Task to apply live reload inside a Dev Server
84-
gulp.task('reload', function () {
85-
gulp.src('dist/**/*').pipe(connect.reload());
86-
});
96+
browserSync.init({
97+
server: {
98+
baseDir: 'dist'
99+
},
100+
middleware: [historyMiddleware]
101+
});
87102

88-
//Task to detect dev changes and then rebuild all dependencies calling the main task 'build-inject'
89-
gulp.task('rebuild', function () {
90-
gulp.watch(['config-build.js', 'app/**/*'], ['build-inject', 'reload']);
103+
//Watch for apply live reload inside a Dev Server
104+
gulp.watch("dist/**/*").on('change', browserSync.reload);
105+
//Watch for to detect dev changes and then rebuild all dependencies calling the tasks properly
106+
gulp.watch(config.directFiles, ['direct-files'], function () {
107+
gulp.src('dist/index.html').pipe(inject(gulp.src([vendorScript, appScript, appTemplateScript, appLanguageScript, vendorStyle, appStyle], {read: false}), {relative: true})).pipe(gulp.dest('dist'));
108+
});
109+
gulp.watch(config.assets.app.scripts, ['app-scripts']);
110+
gulp.watch([config.assets.app.sassStyles, config.assets.app.lessStyles, config.assets.app.styles], ['app-styles']);
111+
gulp.watch(config.assets.app.templates, ['app-templates']);
112+
gulp.watch(config.assets.app.languages, ['app-languages']);
91113
});
92114

93115
//Gulp default task
94-
gulp.task('default', ['build-inject', 'server', 'rebuild']);
116+
gulp.task('default', ['build', 'serve']);
117+
95118

119+
//ALL TASK TO EXECUTE UNIT / End2End Tests
96120

121+
//Unit testing using karma
122+
gulp.task('unit-tests', function (done) {
123+
124+
new Server({
125+
configFile: 'karma.conf.js',
126+
singleRun: true
127+
}, done).start();
128+
});
129+
130+
//E2E testing using protractor
131+
gulp.task('e2e-tests', function () {
132+
133+
gulp.src(['tests/e2e/**/*.js']).pipe(protractor({
134+
configFile: "protractor.conf.js",
135+
args: ['--baseUrl', 'http://127.0.0.1:8000']
136+
})
137+
).on('error', function (e) {
138+
throw e
139+
});
140+
});

‎karma.conf.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
// Karma configuration
3+
module.exports = function(config) {
4+
config.set({
5+
// base path that will be used to resolve all patterns (eg. files, exclude)
6+
basePath: '',
7+
// frameworks to use
8+
frameworks: ['jasmine'],
9+
// list of files / patterns to load in the browser
10+
files: [
11+
'dist/assets/**/*.js',
12+
'tests/unit/**/*.js'
13+
],
14+
// enable / disable colors in the output (reporters and logs)
15+
colors: true,
16+
// level of logging, possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
17+
logLevel: config.LOG_INFO,
18+
// enable / disable watching file and executing tests whenever any file changes
19+
autoWatch: false,
20+
// start these browsers
21+
browsers: ['Chrome'],
22+
// execute tests and exists
23+
singleRun: true
24+
});
25+
};

‎protractor.conf.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
exports.config = {
4+
// frameworks to use (default)
5+
framework: 'jasmine',
6+
// connect directly to the browser without selenium
7+
directConnect: true,
8+
// Uue Chrome as browser for testing
9+
capabilities: {
10+
'browserName': 'chrome'
11+
},
12+
// e2e test files
13+
specs: ['tests/e2e/**/*.js'],
14+
// jasmine additional options
15+
jasmineNodeOpts: {
16+
showColors: true,
17+
defaultTimeoutInterval: 30000
18+
}
19+
};

app/modules/.gitkeep renamed to tests/e2e/.gitkeep

File renamed without changes.

tests/.gitkeep renamed to tests/unit/.gitkeep

File renamed without changes.

0 commit comments

Comments
 (0)