fixed linting errors, put proper files in eslintignore and gitignore

ruben/.eslintignore

@@ -0,0 +1,4 @@
+test/test_bundle.js
+package.json
+build/
+node_modules/

ruben/.eslintrc

@@ -0,0 +1,45 @@
+{
+"rules": {
+"no-console": 0,
+"indent": [
+2,
+2,
+{
+"SwitchCase": 1
+}
+],
+"quotes": [
+2,
+"single"
+],
+"linebreak-style": [
+2,
+"unix"
+],
+"semi": [
+2,
+"always"
+]
+},
+"env": {
+"es6": true,
+"node": true,
+"browser": true,
+"mocha": true,
+"jasmine": true
+},
+"globals": {
+"describe": false,
+"it": false,
+"beforeEach": false,
+"afterEach": false,
+"before": false,
+"after": false
+},
+"ecmaFeatures": {
+"modules": true,
+"experimentalObjectRestSpread": true,
+"impliedStrict": true
+},
+"extends": "eslint:recommended"
+}

ruben/.gitignore

@@ -1 +1,3 @@
 node_modules/
+build/
+test/test_bundle.js

ruben/app/templates/album.html

@@ -22,3 +22,9 @@
 
 <lable>Full Image Album<input type="radio" name="mode" value="list" ng-model="mode" ng-change="changeView()"/></lable>
 <lable>Small Image Album<input type="radio" name="mode" value="single" ng-model="mode" ng-change="changeView()"/></lable>
+
+
+<div ng-hide="test">
+  <h1>{{title}}</h1>
+  <h2>{{description}}</h2>
+</div>

ruben/app/templates/full-image.html

@@ -1,3 +1,7 @@
 <div>
+  <div>
+    <h1>{{title}}</h1>
+    <h2>{{description}}</h2>
+  </div>
   <img src="{{url}}" alt="">
 </div>

ruben/app/templates/small-image.html

@@ -1,3 +1,7 @@
 <div>
+  <div>
+    <h1>{{title}}</h1>
+    <h2>{{description}}</h2>
+  </div>
   <img src="{{url}}" height= "100px" width="100px" alt="{{title}}">
-</div
+</div>

ruben/app/templates/title-image.html

@@ -1,5 +1,5 @@
 <div>
-  <h3>{{title}}</h3>
+  <h1>{{title}}</h1>
   <h3>{{url}}</h3>
-  <h3>{{description}}</h3>
+  <h2>{{description}}</h2>
 </div>

ruben/build/templates/album.html

@@ -22,3 +22,9 @@
 
 <lable>Full Image Album<input type="radio" name="mode" value="list" ng-model="mode" ng-change="changeView()"/></lable>
 <lable>Small Image Album<input type="radio" name="mode" value="single" ng-model="mode" ng-change="changeView()"/></lable>
+
+
+<div ng-hide="test">
+  <h1>{{title}}</h1>
+  <h2>{{description}}</h2>
+</div>

ruben/build/templates/full-image.html

@@ -1,3 +1,7 @@
 <div>
+  <div>
+    <h1>{{title}}</h1>
+    <h2>{{description}}</h2>
+  </div>
   <img src="{{url}}" alt="">
 </div>

ruben/build/templates/small-image.html

@@ -1,3 +1,7 @@
 <div>
+  <div>
+    <h1>{{title}}</h1>
+    <h2>{{description}}</h2>
+  </div>
   <img src="{{url}}" height= "100px" width="100px" alt="{{title}}">
-</div
+</div>

ruben/build/templates/title-image.html

@@ -1,5 +1,5 @@
 <div>
-  <h3>{{title}}</h3>
+  <h1>{{title}}</h1>
   <h3>{{url}}</h3>
-  <h3>{{description}}</h3>
+  <h2>{{description}}</h2>
 </div>

ruben/gulpfile.js

@@ -27,9 +27,15 @@ gulp.task('bundle:test', () => {
     .pipe(webpack({
       output: {
         filename: 'test_bundle.js'
+      },
+      module: {
+        loaders: [{
+          test: /\.html$/,
+          loader: 'html'
+        }]
       }
     }))
-    .pipe(gulp.dest(__dirname + '/test'))
+    .pipe(gulp.dest(__dirname + '/test'));
 });
 
 gulp.task('watch', () => {
@@ -38,4 +44,4 @@ gulp.task('watch', () => {
   gulp.watch('./app/css/app.css', ['copy']);
 });
 
-gulp.task('default', ['bundle:test', 'bundle', 'copy',]);
+gulp.task('default', ['bundle:test', 'bundle', 'copy']);

ruben/karma.conf.js

@@ -15,7 +15,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-       'test/test_bundle.js'
+      'test/test_bundle.js'
     ],
 
 
@@ -65,5 +65,5 @@ module.exports = function(config) {
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity
-  })
-}
+  });
+};

ruben/test/directive_test.js

@@ -0,0 +1,144 @@
+'use strict';
+const angular = require('angular');
+require('angular-mocks');
+require('../app/js/client');
+
+const fullTemplate = require('../app/templates/full-image.html');
+const smallTemplate = require('../app/templates/small-image.html');
+const titleTemplate = require('../app/templates/title-image.html');
+const albumTemplate = require('../app/templates/album.html');
+
+describe('directive tests', () => {
+  let $httpBackend;
+  let $scope;
+  let $compile;
+
+  beforeEach(() => {
+    angular.mock.module('ImageApp');
+    angular.mock.inject(function(_$httpBackend_, $rootScope, _$compile_) {
+      $scope = $rootScope.$new();
+      $compile = _$compile_;
+      $httpBackend = _$httpBackend_;
+    });
+  });
+
+  it('should get the full image title', () => {
+    $httpBackend.expectGET('./templates/full-image.html')
+     .respond(200, fullTemplate);
+    $scope.test = 'full title';
+    let link = $compile('<full-directive title="test"></full-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h1 = directive.find('h1');
+    let text = h1.text();
+
+    expect(text).toBe('full title');
+  });
+
+  it('should get the full image description', () => {
+    $httpBackend.expectGET('./templates/full-image.html')
+     .respond(200, fullTemplate);
+    $scope.test = 'full description';
+    let link = $compile('<full-directive description="test"></full-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h2 = directive.find('h2');
+    let text = h2.text();
+
+    expect(text).toBe('full description');
+  });
+
+  it('should get the small image title', () => {
+    $httpBackend.expectGET('./templates/small-image.html')
+    .respond(200, smallTemplate);
+    $scope.test = 'small title';
+    let link = $compile('<small-directive title="test"></small-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h1 = directive.find('h1');
+    let text = h1.text();
+
+    expect(text).toBe('small title');
+  });
+
+  it('should get the small image description', () => {
+    $httpBackend.expectGET('./templates/small-image.html')
+     .respond(200, smallTemplate);
+    $scope.test = 'small description';
+    let link = $compile('<small-directive description="test"></small-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h2 = directive.find('h2');
+    let text = h2.text();
+
+    expect(text).toBe('small description');
+  });
+
+  it('should get the title directive title', () => {
+    $httpBackend.expectGET('./templates/title-image.html')
+     .respond(200, titleTemplate);
+    $scope.test = 'title title';
+    let link = $compile('<title-directive title="test"></title-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h1 = directive.find('h1');
+    let text = h1.text();
+
+    expect(text).toBe('test');
+  });
+
+  it('should get the title directive description', () => {
+    $httpBackend.expectGET('./templates/title-image.html')
+     .respond(200, titleTemplate);
+    $scope.test = 'title description';
+    let link = $compile('<title-directive description="test"></title-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h2 = directive.find('h2');
+    let text = h2.text();
+
+    expect(text).toBe('test');
+  });
+
+  it('should get the album directive title', () => {
+    $httpBackend.expectGET('./templates/album.html')
+    .respond(200, albumTemplate);
+    $scope.test = 'album title';
+    let link = $compile('<album-directive title="test"></album-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h1 = directive.find('h1');
+    let text = h1.text();
+
+    expect(text).toBe('album title');
+  });
+
+  it('should get the album directive description', () => {
+    $httpBackend.expectGET('./templates/album.html')
+     .respond(200, albumTemplate);
+    $scope.test = 'album description';
+    let link = $compile('<album-directive description="test"></album-directive>');
+    let directive = link($scope);
+    $scope.$digest();
+    $httpBackend.flush();
+
+    let h2 = directive.find('h2');
+    let text = h2.text();
+
+    expect(text).toBe('album description');
+  });
+});