From bedd988ec0e981bec3838b3796c852f80c5c3aae Mon Sep 17 00:00:00 2001 From: Amanda Keogh Date: Thu, 31 Dec 2015 16:54:40 -0800 Subject: [PATCH 1/5] add color variables --- amanda_keogh/app/sass/_base.scss | 17 +++++++++++++++++ amanda_keogh/app/sass/_colors.scss | 9 +++++++++ .../app/sass/{layout.scss => _layout.scss} | 5 +---- .../app/sass/{modules.scss => _modules.scss} | 2 +- .../app/sass/{reset.scss => _reset.scss} | 0 .../app/sass/{state.scss => _state.scss} | 0 amanda_keogh/app/sass/application.scss | 6 ++++++ amanda_keogh/app/sass/base.scss | 17 ----------------- amanda_keogh/gulpfile.js | 2 +- 9 files changed, 35 insertions(+), 23 deletions(-) create mode 100644 amanda_keogh/app/sass/_base.scss create mode 100644 amanda_keogh/app/sass/_colors.scss rename amanda_keogh/app/sass/{layout.scss => _layout.scss} (80%) rename amanda_keogh/app/sass/{modules.scss => _modules.scss} (93%) rename amanda_keogh/app/sass/{reset.scss => _reset.scss} (100%) rename amanda_keogh/app/sass/{state.scss => _state.scss} (100%) create mode 100644 amanda_keogh/app/sass/application.scss delete mode 100644 amanda_keogh/app/sass/base.scss diff --git a/amanda_keogh/app/sass/_base.scss b/amanda_keogh/app/sass/_base.scss new file mode 100644 index 0000000..58de97e --- /dev/null +++ b/amanda_keogh/app/sass/_base.scss @@ -0,0 +1,17 @@ +body { + color: $black; + background-color: $background-color; + font-family: 'Open Sans', sans-serif; +} + +button { + background-color: $second-accent; + color: $white; + padding: 1em; + border: 1px solid #646464; + border-radius: 5px; +} + +form { + background-color: $accent-color; +} diff --git a/amanda_keogh/app/sass/_colors.scss b/amanda_keogh/app/sass/_colors.scss new file mode 100644 index 0000000..0cc3ed7 --- /dev/null +++ b/amanda_keogh/app/sass/_colors.scss @@ -0,0 +1,9 @@ +$blue: #51c1bc; +$white: #f6f4f0; +$black: #646464; +$yellow: #e5a919; + +$background-color: $white; +$accent-color: $blue; +$second-accent: $yellow; + diff --git a/amanda_keogh/app/sass/layout.scss b/amanda_keogh/app/sass/_layout.scss similarity index 80% rename from amanda_keogh/app/sass/layout.scss rename to amanda_keogh/app/sass/_layout.scss index a6be255..4b95538 100644 --- a/amanda_keogh/app/sass/layout.scss +++ b/amanda_keogh/app/sass/_layout.scss @@ -1,9 +1,6 @@ header { - background-color: #51c1bc; + background-color: $blue; padding: 1.5em; - h1 { - margin: 0px; - } } @media all and (min-width: 420px) { diff --git a/amanda_keogh/app/sass/modules.scss b/amanda_keogh/app/sass/_modules.scss similarity index 93% rename from amanda_keogh/app/sass/modules.scss rename to amanda_keogh/app/sass/_modules.scss index a59dbff..fc3dd9d 100644 --- a/amanda_keogh/app/sass/modules.scss +++ b/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; } diff --git a/amanda_keogh/app/sass/reset.scss b/amanda_keogh/app/sass/_reset.scss similarity index 100% rename from amanda_keogh/app/sass/reset.scss rename to amanda_keogh/app/sass/_reset.scss diff --git a/amanda_keogh/app/sass/state.scss b/amanda_keogh/app/sass/_state.scss similarity index 100% rename from amanda_keogh/app/sass/state.scss rename to amanda_keogh/app/sass/_state.scss diff --git a/amanda_keogh/app/sass/application.scss b/amanda_keogh/app/sass/application.scss new file mode 100644 index 0000000..1ae23b4 --- /dev/null +++ b/amanda_keogh/app/sass/application.scss @@ -0,0 +1,6 @@ +@import 'colors'; +@import 'reset'; +@import 'base'; +@import 'layout'; +@import 'modules'; +@import 'state'; diff --git a/amanda_keogh/app/sass/base.scss b/amanda_keogh/app/sass/base.scss deleted file mode 100644 index 7f0d07e..0000000 --- a/amanda_keogh/app/sass/base.scss +++ /dev/null @@ -1,17 +0,0 @@ -body { - color: #646464; - background-color: #f6f4f0; - font-family: 'Open Sans', sans-serif; -} - -button { - background-color: #e5a919; - color: #f6f4f0; - padding: 1em; - border: 1px solid #646464; - border-radius: 5px; -} - -form { - background-color: #51c1bc; -} diff --git a/amanda_keogh/gulpfile.js b/amanda_keogh/gulpfile.js index e2002f1..f72c581 100644 --- a/amanda_keogh/gulpfile.js +++ b/amanda_keogh/gulpfile.js @@ -42,7 +42,7 @@ gulp.task('webpack:test', function() { }); 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']) + return gulp.src(['app/sass/*.scss']) .pipe(sourcemaps.init({loadMaps: true})) .pipe(sass().on('error', sass.logError)) .pipe(concatCss('styles.min.css')) From 9f14ae036cadbf415637b456d70aa2bc1d35648e Mon Sep 17 00:00:00 2001 From: Amanda Keogh Date: Mon, 4 Jan 2016 12:43:41 -0800 Subject: [PATCH 2/5] write button mixins --- .../app/sass/{_colors.scss => _config.scss} | 1 - amanda_keogh/app/sass/_layout.scss | 2 +- amanda_keogh/app/sass/application.scss | 3 ++- amanda_keogh/app/sass/buttons/_buttons.scss | 0 amanda_keogh/app/sass/buttons/_mixins.scss | 22 +++++++++++++++++++ 5 files changed, 25 insertions(+), 3 deletions(-) rename amanda_keogh/app/sass/{_colors.scss => _config.scss} (99%) create mode 100644 amanda_keogh/app/sass/buttons/_buttons.scss create mode 100644 amanda_keogh/app/sass/buttons/_mixins.scss diff --git a/amanda_keogh/app/sass/_colors.scss b/amanda_keogh/app/sass/_config.scss similarity index 99% rename from amanda_keogh/app/sass/_colors.scss rename to amanda_keogh/app/sass/_config.scss index 0cc3ed7..bbedf21 100644 --- a/amanda_keogh/app/sass/_colors.scss +++ b/amanda_keogh/app/sass/_config.scss @@ -6,4 +6,3 @@ $yellow: #e5a919; $background-color: $white; $accent-color: $blue; $second-accent: $yellow; - diff --git a/amanda_keogh/app/sass/_layout.scss b/amanda_keogh/app/sass/_layout.scss index 4b95538..6959e3c 100644 --- a/amanda_keogh/app/sass/_layout.scss +++ b/amanda_keogh/app/sass/_layout.scss @@ -1,5 +1,5 @@ header { - background-color: $blue; + background-color: $accent-color; padding: 1.5em; } diff --git a/amanda_keogh/app/sass/application.scss b/amanda_keogh/app/sass/application.scss index 1ae23b4..353fb7e 100644 --- a/amanda_keogh/app/sass/application.scss +++ b/amanda_keogh/app/sass/application.scss @@ -1,4 +1,5 @@ -@import 'colors'; +@import 'config'; +@import 'buttons/buttons'; @import 'reset'; @import 'base'; @import 'layout'; diff --git a/amanda_keogh/app/sass/buttons/_buttons.scss b/amanda_keogh/app/sass/buttons/_buttons.scss new file mode 100644 index 0000000..e69de29 diff --git a/amanda_keogh/app/sass/buttons/_mixins.scss b/amanda_keogh/app/sass/buttons/_mixins.scss new file mode 100644 index 0000000..3e12568 --- /dev/null +++ b/amanda_keogh/app/sass/buttons/_mixins.scss @@ -0,0 +1,22 @@ +@mixin button-size($size) { + @if $size == "small" { + font-size: .75em; + padding: .4em; + } + @else if $size == "large" { + font-size: 1.2em; + padding: .75em; + } +} + +@mixin button($background-color, $color, $size) { + @include button-size($size); + background-color: $background-color; + color: $color; + + &:hover, + &:active { + background-color: $color; + color: $background-color; + } +} From 3d9ced280a5fb98e6830cb52fbef826f5f4c57b4 Mon Sep 17 00:00:00 2001 From: Amanda Keogh Date: Mon, 4 Jan 2016 17:05:29 -0800 Subject: [PATCH 3/5] edit mixins --- amanda_keogh/app/sass/_base.scss | 8 -------- amanda_keogh/app/sass/_modules.scss | 4 ---- amanda_keogh/app/sass/buttons/_buttons.scss | 22 +++++++++++++++++++++ amanda_keogh/app/sass/buttons/_mixins.scss | 13 ++++++------ 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/amanda_keogh/app/sass/_base.scss b/amanda_keogh/app/sass/_base.scss index 58de97e..18d2269 100644 --- a/amanda_keogh/app/sass/_base.scss +++ b/amanda_keogh/app/sass/_base.scss @@ -4,14 +4,6 @@ body { font-family: 'Open Sans', sans-serif; } -button { - background-color: $second-accent; - color: $white; - padding: 1em; - border: 1px solid #646464; - border-radius: 5px; -} - form { background-color: $accent-color; } diff --git a/amanda_keogh/app/sass/_modules.scss b/amanda_keogh/app/sass/_modules.scss index fc3dd9d..3f4f9eb 100644 --- a/amanda_keogh/app/sass/_modules.scss +++ b/amanda_keogh/app/sass/_modules.scss @@ -21,10 +21,6 @@ form[name="newMorderorForm"] { text-align: center; } -.form-button { - margin-top: 10px; -} - .vs-box { padding-top: 25px; padding-bottom: 25px; diff --git a/amanda_keogh/app/sass/buttons/_buttons.scss b/amanda_keogh/app/sass/buttons/_buttons.scss index e69de29..67b0296 100644 --- a/amanda_keogh/app/sass/buttons/_buttons.scss +++ b/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"); +} diff --git a/amanda_keogh/app/sass/buttons/_mixins.scss b/amanda_keogh/app/sass/buttons/_mixins.scss index 3e12568..0685aa5 100644 --- a/amanda_keogh/app/sass/buttons/_mixins.scss +++ b/amanda_keogh/app/sass/buttons/_mixins.scss @@ -1,22 +1,21 @@ @mixin button-size($size) { @if $size == "small" { font-size: .75em; - padding: .4em; + padding: .5em; } @else if $size == "large" { - font-size: 1.2em; - padding: .75em; + font-size: 1.2em; + padding: .75em; } } -@mixin button($background-color, $color, $size) { +@mixin button($background, $color, $size) { @include button-size($size); - background-color: $background-color; + background-color: $background; color: $color; &:hover, &:active { - background-color: $color; - color: $background-color; + background-color: lighten($background, 8%); } } From 1aeec5351d69743f577fd772a3e7b1f40666a198 Mon Sep 17 00:00:00 2001 From: Amanda Keogh Date: Mon, 4 Jan 2016 19:57:05 -0800 Subject: [PATCH 4/5] fix create() typo --- .../app/js/morderors/controllers/morderors_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/amanda_keogh/app/js/morderors/controllers/morderors_controller.js b/amanda_keogh/app/js/morderors/controllers/morderors_controller.js index 0d2120a..a923cb4 100644 --- a/amanda_keogh/app/js/morderors/controllers/morderors_controller.js +++ b/amanda_keogh/app/js/morderors/controllers/morderors_controller.js @@ -25,7 +25,7 @@ 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 = {}; @@ -41,7 +41,7 @@ module.exports = function(app) { console.log('morderor updated.'); }, function(err) { console.log(err.data); - }) + }); }; $scope.remove = function(morderor) { From e87a03aaaa032b3ad634607961c4316107815ff5 Mon Sep 17 00:00:00 2001 From: Amanda Keogh Date: Tue, 5 Jan 2016 13:17:47 -0800 Subject: [PATCH 5/5] add client tests --- amanda_keogh/app/index.html | 4 +- .../controllers/morderors_controller.js | 5 +- amanda_keogh/gulpfile.js | 8 +-- .../test/client/morderor_controller_tests.js | 53 ++++++++++++++++--- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/amanda_keogh/app/index.html b/amanda_keogh/app/index.html index 86b26d3..0c7800d 100644 --- a/amanda_keogh/app/index.html +++ b/amanda_keogh/app/index.html @@ -52,9 +52,9 @@

{{morderor.name}}

- + - + diff --git a/amanda_keogh/app/js/morderors/controllers/morderors_controller.js b/amanda_keogh/app/js/morderors/controllers/morderors_controller.js index a923cb4..d9e974d 100644 --- a/amanda_keogh/app/js/morderors/controllers/morderors_controller.js +++ b/amanda_keogh/app/js/morderors/controllers/morderors_controller.js @@ -29,6 +29,7 @@ module.exports = function(app) { .then(function(res) { $scope.morderors.push(res.data); $scope.newMorderor = {}; + console.log('morderor created'); }, function(err) { console.log(err.data); }); @@ -46,7 +47,7 @@ module.exports = function(app) { $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]; diff --git a/amanda_keogh/gulpfile.js b/amanda_keogh/gulpfile.js index f72c581..9af6504 100644 --- a/amanda_keogh/gulpfile.js +++ b/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/*.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 diff --git a/amanda_keogh/test/client/morderor_controller_tests.js b/amanda_keogh/test/client/morderor_controller_tests.js index 62452f4..475b49e 100644 --- a/amanda_keogh/test/client/morderor_controller_tests.js +++ b/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'); + }); }); + + })