Sass

amanda_keogh/app/index.html

@@ -52,9 +52,9 @@ <h2>{{morderor.name}}</h2>
             <button class="form-button" type="submit">Submit Changes</button>
             <button class="form-button" data-ng-click="morderor.editing = false; refresh(morderor)">Cancel!!</button>
           </form>
-          <button>Pick Me!</button>
+          <button class="form-button">Pick Me!</button>
           <button class="form-button" data-ng-if="!morderor.editing" data-ng-click="morderor.editing = true">Change me!</button>
-          <button class="form-button" data-ng-click="remove(morderor)">Kill me!</button>
+          <button class="delete-button" data-ng-click="remove(morderor)">Kill me!</button>
         </div>
       </div>
   </main>

amanda_keogh/app/js/morderors/controllers/morderors_controller.js

@@ -25,10 +25,11 @@ module.exports = function(app) {
   };
 
   $scope.create = function(morderor) {
-    $http.post('api/morderors', morderor)
+    $http.post('/api/morderors', morderor)
       .then(function(res) {
         $scope.morderors.push(res.data);
         $scope.newMorderor = {};
+        console.log('morderor created');
       }, function(err) {
         console.log(err.data);
       });
@@ -41,12 +42,12 @@ module.exports = function(app) {
         console.log('morderor updated.');
       }, function(err) {
         console.log(err.data);
-      })
+      });
   };
 
   $scope.remove = function(morderor) {
     $scope.morderors.splice($scope.morderors.indexOf(morderor), 1);
-    $http.delete('api/morderors/' + morderor._id)
+    $http.delete('/api/morderors/' + morderor._id)
       .then(function(res) {
         console.log('morderor removed!');
       }, function(err) {
@@ -56,7 +57,7 @@ module.exports = function(app) {
   };
 
   $scope.refresh = function(morderor) {
-    $http.get('api/morderors/' + morderor._id)
+    $http.get('/api/morderors/' + morderor._id)
       .then(function(res) {
         console.log('refresh!');
         $scope.morderors[$scope.morderors.indexOf(morderor)] = res.data[0];

amanda_keogh/app/sass/_base.scss

@@ -0,0 +1,9 @@
+body {
+  color: $black;
+  background-color: $background-color;
+  font-family: 'Open Sans', sans-serif;
+}
+
+form {
+  background-color: $accent-color;
+}

amanda_keogh/app/sass/_config.scss

@@ -0,0 +1,8 @@
+$blue: #51c1bc;
+$white: #f6f4f0;
+$black: #646464;
+$yellow: #e5a919;
+
+$background-color: $white;
+$accent-color: $blue;
+$second-accent: $yellow;

amanda_keogh/app/sass/layout.scss → amanda_keogh/app/sass/_layout.scss

@@ -1,9 +1,6 @@
 header {
-  background-color: #51c1bc;
+  background-color: $accent-color;
   padding: 1.5em;
-  h1 {
-    margin: 0px;
-  }
 }
 
 @media all and (min-width: 420px) {

amanda_keogh/app/sass/modules.scss → amanda_keogh/app/sass/_modules.scss

@@ -1,6 +1,6 @@
 .morderor {
   margin: 25px;
-  border: 1px solid #646464;
+  border: 1px solid $black;
   padding: 1em;
   text-align: center;
 }
@@ -21,10 +21,6 @@ form[name="newMorderorForm"] {
   text-align: center;
 }
 
-.form-button {
-  margin-top: 10px;
-}
-
 .vs-box {
   padding-top: 25px;
   padding-bottom: 25px;

amanda_keogh/app/sass/application.scss

@@ -0,0 +1,7 @@
+@import 'config';
+@import 'buttons/buttons';
+@import 'reset';
+@import 'base';
+@import 'layout';
+@import 'modules';
+@import 'state';

amanda_keogh/app/sass/buttons/_buttons.scss

@@ -0,0 +1,22 @@
+@import 'mixins';
+
+%button-defaults {
+  border: 1px solid $black;
+  border-radius: 5px;
+}
+
+button {
+  @extend %button-defaults;
+  @include button($second-accent, $white, "large");
+}
+
+.form-button {
+  @extend button-defaults;
+  @include button($second-accent, $white, "small");
+  margin-top: 10px;
+}
+
+.delete-button {
+  @extend button-defaults;
+  @include button(#ff0000, $white, "small");
+}

amanda_keogh/app/sass/buttons/_mixins.scss

@@ -0,0 +1,21 @@
+@mixin button-size($size) {
+  @if $size == "small" {
+    font-size: .75em;
+    padding: .5em;
+  }
+  @else if $size == "large" {
+    font-size: 1.2em;
+    padding: .75em;
+  }
+}
+
+@mixin button($background, $color, $size) {
+  @include button-size($size);
+  background-color: $background;
+  color: $color;
+
+  &:hover,
+  &:active {
+    background-color: lighten($background, 8%);
+  }
+}

amanda_keogh/gulpfile.js

@@ -41,8 +41,8 @@ gulp.task('webpack:test', function() {
   .pipe(gulp.dest('test/client/'));
 });
 
-gulp.task('webpack:sass', function() {
-  return gulp.src(['app/sass/reset.scss', 'app/sass/base.scss', 'app/sass/layout.scss', 'app/sass/modules.scss', 'app/sass/state.scss'])
+gulp.task('sass', function() {
+  return gulp.src(['app/sass/**/*.scss'])
     .pipe(sourcemaps.init({loadMaps: true}))
       .pipe(sass().on('error', sass.logError))
       .pipe(concatCss('styles.min.css'))
@@ -51,7 +51,7 @@ gulp.task('webpack:sass', function() {
     .pipe(gulp.dest('build/'));
 })
 
-gulp.task('build:dev', ['static:dev', 'webpack:dev', 'webpack:sass']);
+gulp.task('build:dev', ['static:dev', 'webpack:dev', 'sass']);
 
 /* * * * * * * * * * * * * * * * * *
             LINT TASKS
@@ -99,7 +99,7 @@ gulp.task('mocha', function() {
 gulp.task('buildWatch', function() {
   gulp.watch(htmlFiles, ['static:dev']);
   gulp.watch('app/js/**/*.js', ['build:dev']);
-  gulp.watch('app/sass/**/*.sass', ['webpack:sass']);
+  gulp.watch('app/sass/**/*.scss', ['sass']);
 });
 
 // backend

amanda_keogh/test/client/morderor_controller_tests.js

@@ -35,19 +35,58 @@ describe('morderors controller', function() {
     });
 
     it('should add to the morderors array with GETall', function() {
-      $httpBackend.expectGET('/api/morderors').respond(200, [{_id: 1, name: 'testthing', verb: 'testaction'}]);
+      $httpBackend.expectGET('/api/morderors').respond(200, [{_id: 1, name: 'getall test', verb: 'testaction'}]);
       $scope.getAll();
       $httpBackend.flush();
-      expect($scope.morderors[0].name).toBe('testthing');
+      expect($scope.morderors[0].name).toBe('getall test');
     });
 
-    it('should post a new bear', function() {
-      $httpBackend.expectPOST('/api/morderors', {name: 'testthing', verb: 'testaction'}).respond(200, {name: 'differenttestthing'});
+    it('should post a new morderor', function() {
+      $httpBackend.expectPOST('/api/morderors', {name: 'testthing', verb: 'testaction'}).respond(200, {name: 'post test'});
       expect($scope.morderors.length).toBe(0);
-      $scope.create({name: 'testthing'});
+      $scope.create({name: 'testthing', verb:'testaction'});
       $httpBackend.flush();
-      expect($scope.morderors[0].name).toBe('differenttestthing');
-    })
+      expect($scope.morderors[0].name).toBe('post test');
+      expect($scope.newMorderor.name).toBe(undefined);
+    });
+
+    it('should edit a morderor', function() {
+      // test that "editing" property is changed
+      $httpBackend.expectPUT('/api/morderors/test', {_id: 'test', name: 'a test?', verb: 'no really', editing: false}).respond(200, {name: 'put test'});
+      $scope.update({_id: 'test', name: 'a test?', verb: 'no really'});
+      $httpBackend.flush();
+    });
+  });
+
+  //tests which require a dummy morderer in list
+  describe('delete, refresh', function() {
+    beforeEach(angular.mock.inject(function(_$httpBackend_, $rootScope) {
+      $httpBackend = _$httpBackend_;
+      $scope = $rootScope.$new();
+      $ControllerConstructor('IntroController', {$scope: $scope});
+      $scope.morderors = [{_id: 'test', name: 'test name', verb: 'test verb'}];
+    }));
+
+    afterEach(function() {
+      $httpBackend.verifyNoOutstandingExpectation();
+      $httpBackend.verifyNoOutstandingRequest();
+    });
+
+    it('should delete a morderor', function() {
+      $httpBackend.expectDELETE('/api/morderors/test').respond(200);
+      $scope.remove({_id: 'test'});
+      $httpBackend.flush();
+      expect($scope.morderors[0]).toBe(undefined);
+    });
+
+    it('should refresh the current list with new information', function() {
+      $httpBackend.expectGET('/api/morderors/test').respond(200, [{_id: 'test', name: 'super diff'}]);
+      $scope.refresh($scope.morderors[0]);
+      $httpBackend.flush();
+      expect($scope.morderors[0].name).toBe('super diff');
+    });
 
   });
+
+
 })