From 870e9dd41a3860ff9490f78ee0f54c6b334ab753 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Thu, 16 Mar 2017 13:18:44 -0400 Subject: [PATCH 01/12] ran first test succesfully --- src/js/recent-thoughts.js | 1 + test/specs/recent-thoughts.spec.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 test/specs/recent-thoughts.spec.js diff --git a/src/js/recent-thoughts.js b/src/js/recent-thoughts.js index c548e79..e986e72 100644 --- a/src/js/recent-thoughts.js +++ b/src/js/recent-thoughts.js @@ -2,6 +2,7 @@ 'use strict'; window.thoughter = window.thoughter || {}; + //name space /** * Shows the provided thought data on the page in the `.recent` element diff --git a/test/specs/recent-thoughts.spec.js b/test/specs/recent-thoughts.spec.js new file mode 100644 index 0000000..704e0c9 --- /dev/null +++ b/test/specs/recent-thoughts.spec.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + let expect = window.chai.expect; + + describe('recent-thoughts.js', function() { + //describes recent-thoughts.js filet() + it('should know that the nameSpace exists', function(){ + //name spaces are an object so we want it to be an object + expect(window.thoughter).to.be.a('object'); + }); + + describe('addStuff function', function() { + //describes first function im testing + //which is .showRecent + }); + }); +}()); From 42f2b4104d1fb68c99b5e1be402fb9aca1c76991 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Thu, 16 Mar 2017 14:42:56 -0400 Subject: [PATCH 02/12] ran show recent thought test sucessfully --- src/js/recent-thoughts.js | 16 ++++++--- test/specs/recent-thoughts.spec.js | 58 ++++++++++++++++++++++++++++-- 2 files changed, 67 insertions(+), 7 deletions(-) diff --git a/src/js/recent-thoughts.js b/src/js/recent-thoughts.js index e986e72..6ba9925 100644 --- a/src/js/recent-thoughts.js +++ b/src/js/recent-thoughts.js @@ -8,19 +8,27 @@ * Shows the provided thought data on the page in the `.recent` element * * @param {Array} thoughts The array of thought objects to display + *this function takes an array as an arg and does a lot of dom manipulation + *so what we're gunna test is whethere or not the corrext dom manip is happening * @return {void} */ window.thoughter.showRecent = function showRecent(thoughts = []) { if (!Array.isArray(thoughts)) { return; } - - recent = document.querySelector('.recent'); + //element(ex section/main) with a class of recent + //trying to find something with the class of recent + let recent = document.querySelector('.recent'); + //when it finds something with the class of recent thoughts.forEach(function showThought(thought) { + //for each thought do the stuff down here + //if each thought does not have thought.content, thought.createTime + //or a thought.id then return and dont do that stuff if (!thought.content || !thought.createTime || !thought.id) { - return; + return;//dont want to go down cus ill get an error } - + //it creates for each thought a new article element and then + //appends it to the recent element let thoughtUI = document.createElement('article'); thoughtUI.classList.add('panel'); thoughtUI.classList.add('panel-info'); diff --git a/test/specs/recent-thoughts.spec.js b/test/specs/recent-thoughts.spec.js index 704e0c9..081b3d1 100644 --- a/test/specs/recent-thoughts.spec.js +++ b/test/specs/recent-thoughts.spec.js @@ -1,18 +1,70 @@ (function() { 'use strict'; - + //this is where i created the 3 thoughts let expect = window.chai.expect; + let hi = {}; + hi.content = 'hi'; + hi.createTime = new Date(); + hi.id = 'xxxx'; + let bye = {}; + bye.content = 'bye'; + bye.createTime = new Date(); + bye.id = 'yyyy'; + let hibye = {}; + hibye.content = 'hibye'; + hibye.createTime = new Date(); + hibye.id = 'zzzz'; describe('recent-thoughts.js', function() { - //describes recent-thoughts.js filet() + //describes recent-thoughts.js file it('should know that the nameSpace exists', function(){ //name spaces are an object so we want it to be an object expect(window.thoughter).to.be.a('object'); }); - describe('addStuff function', function() { + describe('showRecent function', function() { //describes first function im testing //which is .showRecent + //going to need a fixture for this test suite + //create an element with a class of recent + beforeEach(function() { + //everything im doing in my before and after is not connected + //to the recent-thoughts.js + //but im getting the info from recent-thoughts.js + //and im trying to recreate what it's trying to do + let mainTag = document.createElement('main'); + //before i run this test making sure there is an + //existing element with a class of recent + //when i run my test line 20 will work because i created + //the element with the class of recent + mainTag.classList.add('recent'); + //document.createElement('body'); + document.querySelector('body').appendChild(mainTag); + }); + //now im removing it -idempoden + //if i dont remove it as i go to my other tests having that + //fixture there might cause failures + afterEach(function() { + let mainTag = document.querySelector('main'); + mainTag.parentNode.removeChild(mainTag); + //after each test assertion in this describe i find + //a main element and remove it + }); + //keep on same cus its not imbeded in fn + it('should create a new article element for every thought', function(){ + window.thoughter.showRecent([hi, bye, hibye]);//3 thoughts + //create a variable so i dont have to type doc.querselect everytime + let recentElement = document.querySelector('.recent'); + //testing that the recent element has children and that it has more + //then one + expect(recentElement.childNodes.length).to.equal(3); + //selected recent element dug into child nodes got length of child node_modules + //and tested if the length was equal to the amount of thoughts i gave the fn + //console.log(window.thoughter.showRecent); + //want to test that articles are being created + //console.info(document.querySelector('.recent')); + }); + }); }); }()); From 6d64144dc432ab7ff86b065cb570a53a15cb50c6 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Thu, 16 Mar 2017 15:23:38 -0400 Subject: [PATCH 03/12] made a read me and created test assertion for thoughter git recent function --- README.md | 6 ++- src/js/recent-thoughts.js | 5 ++- test/specs/recent-thoughts.spec.js | 60 ++++++++++++++++++++++++++++-- 3 files changed, 66 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4171bc5..e277842 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ # Thoughter -Definitely not a Twitter clone. +This project was created for Iron Yard Students to practice Unit testing with Karma, Mocha and Chai. + +Using Karma to test Thoughter app. Mocking servers with Sinon Forked and cloned source code from https://github.com/TIYDC/thoughter + +Testing code created by Elizabeth Boles. diff --git a/src/js/recent-thoughts.js b/src/js/recent-thoughts.js index 6ba9925..e43ed60 100644 --- a/src/js/recent-thoughts.js +++ b/src/js/recent-thoughts.js @@ -33,6 +33,7 @@ thoughtUI.classList.add('panel'); thoughtUI.classList.add('panel-info'); thoughtUI.setAttribute('id', 'thought-' + thought.id); + //66 thoughtUI.innerHTML = `
Posted ${thoughts.createTime}

${thought.content}

@@ -47,7 +48,9 @@ * @param {Number} count How many thoughts to limit to, must be a positive number (defaults to 10) * @return {Promise} The resolved promise will have the data array as the argument */ - window.thoughter.getRecent = function getRecent(count = 10) { + window.thoughter.getRecent = function getRecent(numb = 10) { + let count = numb; + if (typeof(count) !== 'number' || count < 1) { return Promise.reject('Sorry, but the count must be a positive number'); } diff --git a/test/specs/recent-thoughts.spec.js b/test/specs/recent-thoughts.spec.js index 081b3d1..e104171 100644 --- a/test/specs/recent-thoughts.spec.js +++ b/test/specs/recent-thoughts.spec.js @@ -1,4 +1,4 @@ -(function() { + (function() { 'use strict'; //this is where i created the 3 thoughts let expect = window.chai.expect; @@ -63,8 +63,62 @@ //console.log(window.thoughter.showRecent); //want to test that articles are being created //console.info(document.querySelector('.recent')); + expect(recentElement.childNodes[1].id).to.equal('thought-yyyy'); + //console.log(recentElement.childNodes[1]); + //tapping into first article }); }); - }); -}()); + //where new describe begins - 3rd one + //every function has its own describe + describe('get recent', function(){ + let server; + + beforeEach(function() { + server = sinon.fakeServer.create(); + server.autoRespond = true; + server.respondWith( + 'GET', + 'http://thoughter.herokuapp.com/api/Thoughts?filter={"order":"createTime DESC","limit":3}', + [ + 200, + { 'Content-Type': 'application/json' }, + //moching out what the fetch returns in its response + '["hi", "bye", "hibye"]' + ] + //the function that im testing fetches at a specific url so to test that fetch + //setting up a fake server connected to that specific url so that the real + //function hits server and not the API + // + ); + }); + + afterEach(function() { + server.restore(); + }); + it('should return data back from server', function(){ + let result = window.thoughter.getRecent(); + // expect( result ).to.be.an('object'); + expect( result.then ).to.be.a('function'); + expect( result.catch ).to.be.a('function'); + + result + .then(function( data ) { + expect(data).to.be.an('array'); + expect(data.length).to.equal(3); + //expect data and we know data is an + //array and has a length of 3 + //expect the first index in the data array + //to equal hi and it should equal hi because + //thats what i told my moc server to type + expect(data[0]).to.equal('hi'); + tellMochaWeAreDone(); + }) + .catch(function(err) { + tellMochaWeAreDone(err); + }); + }); + }); + + }); + }()); From 4a2e1a04caacbc15320bdac14c3e4f3dd10a4918 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Thu, 16 Mar 2017 17:05:55 -0400 Subject: [PATCH 04/12] succesfully made 2 more tests pass --- test/specs/recent-thoughts.spec.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/test/specs/recent-thoughts.spec.js b/test/specs/recent-thoughts.spec.js index e104171..3ccf5db 100644 --- a/test/specs/recent-thoughts.spec.js +++ b/test/specs/recent-thoughts.spec.js @@ -58,23 +58,32 @@ //testing that the recent element has children and that it has more //then one expect(recentElement.childNodes.length).to.equal(3); - //selected recent element dug into child nodes got length of child node_modules + //selected recent element dug into child nodes got length of child nodes //and tested if the length was equal to the amount of thoughts i gave the fn //console.log(window.thoughter.showRecent); //want to test that articles are being created //console.info(document.querySelector('.recent')); - expect(recentElement.childNodes[1].id).to.equal('thought-yyyy'); + //expect(recentElement.childNodes[1].id).to.equal('thought-yyyy'); //console.log(recentElement.childNodes[1]); //tapping into first article }); - + it('should pass an array with 1obj', function(){ + let recentElement = document.querySelector('.recent'); + window.thoughter.showRecent([hi]); + expect(recentElement.childNodes.length).to.equal(1); + }); + it('should pass in an empty array', function(){ + let article = document.querySelector('.recent'); + window.thoughter.showRecent([]); + expect(article.length).to.equal(); + }); }); //where new describe begins - 3rd one //every function has its own describe describe('get recent', function(){ let server; - beforeEach(function() { + beforeEach(function(){ server = sinon.fakeServer.create(); server.autoRespond = true; server.respondWith( @@ -99,11 +108,11 @@ it('should return data back from server', function(){ let result = window.thoughter.getRecent(); // expect( result ).to.be.an('object'); - expect( result.then ).to.be.a('function'); - expect( result.catch ).to.be.a('function'); + expect(result.then).to.be.a('function'); + expect(result.catch).to.be.a('function'); result - .then(function( data ) { + .then(function(data) { expect(data).to.be.an('array'); expect(data.length).to.equal(3); //expect data and we know data is an From aedda9ca98c64ae670a9df92f187cbc3722678cc Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 13:12:45 -0400 Subject: [PATCH 05/12] refactored failing tests --- test/specs/recent-thoughts.spec.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/test/specs/recent-thoughts.spec.js b/test/specs/recent-thoughts.spec.js index 3ccf5db..79ea683 100644 --- a/test/specs/recent-thoughts.spec.js +++ b/test/specs/recent-thoughts.spec.js @@ -2,6 +2,7 @@ 'use strict'; //this is where i created the 3 thoughts let expect = window.chai.expect; + //because lazy let hi = {}; hi.content = 'hi'; hi.createTime = new Date(); @@ -48,7 +49,7 @@ let mainTag = document.querySelector('main'); mainTag.parentNode.removeChild(mainTag); //after each test assertion in this describe i find - //a main element and remove it + //a main/tag element and remove it }); //keep on same cus its not imbeded in fn it('should create a new article element for every thought', function(){ @@ -68,12 +69,12 @@ //tapping into first article }); it('should pass an array with 1obj', function(){ - let recentElement = document.querySelector('.recent'); + let recentElement = document.querySelector('main.recent'); window.thoughter.showRecent([hi]); expect(recentElement.childNodes.length).to.equal(1); }); it('should pass in an empty array', function(){ - let article = document.querySelector('.recent'); + let article = document.querySelector('main.recent'); window.thoughter.showRecent([]); expect(article.length).to.equal(); }); From 1f52a1ca0454643ca6fb285702fd719044e55c8a Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 13:56:51 -0400 Subject: [PATCH 06/12] configure grunt and completed copy task successfully --- gruntfile.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 35 ++++++++++++++++++++++++ thought.conf.js | 12 +++++++++ 3 files changed, 118 insertions(+) create mode 100644 gruntfile.js create mode 100644 package.json create mode 100644 thought.conf.js diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..6953efe --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,71 @@ +module.exports = function configureGrunt(gruntConfig){ + gruntConfig.initConfig({ + clean: [ 'build/' ], + + copy: { // task name (defined by the plugin) + + copythehtml: { // target name (I make it up) + // the configuration for THIS target, in THIS task is below + files: [ + { + cwd: 'src/',//to get into source + src: [ '*.html' ],//anything that has a html at end + dest: 'build/',//copy file and put that copy in this build dir + expand: true + } + ] + } + + } + + // sass: { // task name + // + // all: { // target name + // // configuration for this target + // files: { + // // DESTINATION : SOURCE + // 'build/style.css' : 'src/sass/main.scss' + // } + // } + // + // }, + // + // jshint: { + // + // appjs: { + // options: { + // jshintrc: '.jshintrc' + // }, + // files: { + // src: [ 'src/**/*.js' ] + // } + // } + // + // }, + // + // karma: { + // + // all: { + // options: { + // // These came from my karma configuration file... + // // they are the SAME options! + // // IF you use grunt to run karma (tests), then we + // // do NOT also need a app.conf.js file for karma separately + // frameworks: [ 'mocha', 'chai' ], + // browsers: [ 'Chrome' ], + // singleRun: true, + // files: [ + // 'src/**/*.js', + // 'node_modules/fetch-mock/es5/client-browserified.js', + // 'test/specs/**/*.js' + // ] + // } + // } + // + // } + + }); + require('load-grunt-tasks')(gruntConfig); + //whenever i run grunt build in my terminal do these things in this order + gruntConfig.registerTask( 'build', [ 'copy' ] ); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..e438bac --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "dandatesting", + "version": "1.0.0", + "description": "", + "main": "thoughter/src/js/recent-thoughts.js", + "scripts": { + "test": "karma start thought.conf.js" + }, + "repository": { + "type": "git", + "url": "git+ssh://git@github.com/ElizabethBoles/thoughter.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/ElizabethBoles/thoughter/issues" + }, + "homepage": "https://github.com/ElizabethBoles/thoughter#readme", + "devDependencies": { + "chai": "^3.5.0", + "grunt": "^1.0.1", + "grunt-contrib-clean": "^1.0.0", + "grunt-contrib-copy": "^1.0.0", + "grunt-contrib-jshint": "^1.1.0", + "grunt-contrib-sass": "^1.0.0", + "grunt-karma": "^2.0.0", + "karma": "^1.5.0", + "karma-chai": "^0.1.0", + "karma-chrome-launcher": "^2.0.0", + "karma-mocha": "^1.3.0", + "load-grunt-tasks": "^3.5.2", + "mocha": "^3.2.0", + "sinon": "^2.0.0" + } +} diff --git a/thought.conf.js b/thought.conf.js new file mode 100644 index 0000000..cd1a8fc --- /dev/null +++ b/thought.conf.js @@ -0,0 +1,12 @@ +module.exports = function karmConfig( config ) { + config.set({ + frameworks: [ 'mocha', 'chai' ], + browsers: [ 'Chrome' ], + singleRun: true, + files: [ + 'thoughter/src/**/*.js', + 'node_modules/sinon/pkg/sinon-2.0.0.js', + 'thoughter/test/specs/**/*.js' + ] + }); +}; From 6973bcbd52f14d83516d9f8fe85db298137709df Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 14:20:49 -0400 Subject: [PATCH 07/12] configured jshint and sass tasks for grunt --- gruntfile.js | 65 ++++++++++++++++++++++++++----------------- src/js/new-thought.js | 2 +- src/sass/main.scss | 1 - 3 files changed, 40 insertions(+), 28 deletions(-) diff --git a/gruntfile.js b/gruntfile.js index 6953efe..e50f721 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -14,34 +14,47 @@ module.exports = function configureGrunt(gruntConfig){ expand: true } ] + }, + copythejs: { + files: [ + { + cwd: 'src/js/', + src: ['*.js'], + dest: 'build/js/', // slash at the end means i want you to find the js and go in it and thats where i want you to put the files + expand: true + } + ] + } + }, + sass: {//within the sass what we're creating is a task that looks for + //all our sass/css and then compiling all of it into one pile called + //style.css and putting our style.css file in our build directory + //style.css will only ever be in the build + all: {// + // + files: { + //dest/source + //dest - where were gunna put whatever we say is our source into + //> creates a new file called style.css and puts in our main.scss + //and everything that exports into it + 'build/style.css' : 'src/sass/main.scss' + } } - } + }, - // sass: { // task name - // - // all: { // target name - // // configuration for this target - // files: { - // // DESTINATION : SOURCE - // 'build/style.css' : 'src/sass/main.scss' - // } - // } - // - // }, - // - // jshint: { - // - // appjs: { - // options: { - // jshintrc: '.jshintrc' - // }, - // files: { - // src: [ 'src/**/*.js' ] - // } - // } - // - // }, + jshint: { + + appjs: { + options: { + jshintrc: '.jshintrc' + }, + files: { + src: [ 'src/**/*.js' ] + } + } + + }, // // karma: { // @@ -67,5 +80,5 @@ module.exports = function configureGrunt(gruntConfig){ }); require('load-grunt-tasks')(gruntConfig); //whenever i run grunt build in my terminal do these things in this order - gruntConfig.registerTask( 'build', [ 'copy' ] ); + gruntConfig.registerTask( 'build', [ 'jshint', 'copy', 'sass' ] ); }; diff --git a/src/js/new-thought.js b/src/js/new-thought.js index f56e972..30c790d 100644 --- a/src/js/new-thought.js +++ b/src/js/new-thought.js @@ -28,7 +28,7 @@ console.error('Looks like a bad status code:', res.status); return Promise.reject('Sorry, but there was a problem with your request.'); } else { - return res.json() + return res.json(); } }); }; diff --git a/src/sass/main.scss b/src/sass/main.scss index affe303..8710b24 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -2,5 +2,4 @@ @import 'variables'; @import 'header'; @import 'login'; -@import 'new-thought'; @import 'recent'; From 34859299e3ed96fd135443fcee64cb219c398370 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 14:30:33 -0400 Subject: [PATCH 08/12] succesfully ran karma with grunt --- gruntfile.js | 50 ++++++++++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/gruntfile.js b/gruntfile.js index e50f721..214aebb 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -26,6 +26,7 @@ module.exports = function configureGrunt(gruntConfig){ ] } }, + sass: {//within the sass what we're creating is a task that looks for //all our sass/css and then compiling all of it into one pile called //style.css and putting our style.css file in our build directory @@ -55,30 +56,35 @@ module.exports = function configureGrunt(gruntConfig){ } }, - // - // karma: { - // - // all: { - // options: { - // // These came from my karma configuration file... - // // they are the SAME options! - // // IF you use grunt to run karma (tests), then we - // // do NOT also need a app.conf.js file for karma separately - // frameworks: [ 'mocha', 'chai' ], - // browsers: [ 'Chrome' ], - // singleRun: true, - // files: [ - // 'src/**/*.js', - // 'node_modules/fetch-mock/es5/client-browserified.js', - // 'test/specs/**/*.js' - // ] - // } - // } - // - // } + + karma: { + + all: { + options: { + // These came from my karma configuration file... + // they are the SAME options! + // IF you use grunt to run karma (tests), then we + // do NOT also need a app.conf.js file for karma separately + frameworks: [ 'mocha', 'chai' ], + browsers: [ 'Chrome' ], + singleRun: true, + files: [ + 'src/**/*.js', + 'node_modules/sinon/pkg/sinon-2.0.0.js', + 'test/specs/**/*.js' + ] + } + } + + } }); require('load-grunt-tasks')(gruntConfig); //whenever i run grunt build in my terminal do these things in this order - gruntConfig.registerTask( 'build', [ 'jshint', 'copy', 'sass' ] ); + //out of convention building our build directory + //we dont want to put anything in our build directory thats broken + //thats why first jshint to make sure theres no syntax errors and then why + //i test my files next to make sure nothing breaks and then if those two pass + //i know i have good code so i can copy those files and put into build directory + gruntConfig.registerTask( 'build', [ 'jshint', 'karma', 'copy', 'sass' ] ); }; From 8149749ff72a5d2b22423d4e74633bd37bb5a8a2 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 15:00:39 -0400 Subject: [PATCH 09/12] configured copy for vendor js files and grunt --- README.md | 19 ++++++++++++++++--- gruntfile.js | 37 ++++++++++++++++++++++++------------- package.json | 3 +++ 3 files changed, 43 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index e277842..9af0adb 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,21 @@ # Thoughter -This project was created for Iron Yard Students to practice Unit testing with Karma, Mocha and Chai. +This project was created for Iron Yard Students to practice Unit testing with +Karma, Mocha and Chai. -Using Karma to test Thoughter app. Mocking servers with Sinon Forked and cloned source code from https://github.com/TIYDC/thoughter +How to use: -Testing code created by Elizabeth Boles. +App uses grunt as a dev dependency. Grunt is configured to copy app js html and +scss files into build directory. Prior to copying js files are linted and tested +using js hint and karma. + +To set up: + +-Fork directory from https://github.com/ElizabethBoles/thoughter +-Run NPM install in your terminal which downloads necessary app dependencies +and developer dependencies (jQuery, Grunt and Grunt task managers). +-Run Grunt build to create build directory which then can be used to view app +in preferred browser. + +Testing code and Grunt configuration created by Elizabeth Boles. diff --git a/gruntfile.js b/gruntfile.js index 214aebb..52ad0df 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -1,11 +1,10 @@ module.exports = function configureGrunt(gruntConfig){ gruntConfig.initConfig({ - clean: [ 'build/' ], + clean: [ 'build/' ],//cleaning - copy: { // task name (defined by the plugin) + copy: { - copythehtml: { // target name (I make it up) - // the configuration for THIS target, in THIS task is below + copythehtml: { files: [ { cwd: 'src/',//to get into source @@ -24,6 +23,16 @@ module.exports = function configureGrunt(gruntConfig){ expand: true } ] + }, + copythejquery: {//copying dependency files into js build folder so my app has proper linkage + files: [ + { + cwd: 'node_modules/jquery/dist/', + src: ['jquery.js'],//jquery is js + dest: 'build/js/vendor/',//so now we know the jquery file will be copied into our build/js/vendor folder//then when you run it you can see its created on right + expand: true + } + ] } }, @@ -44,7 +53,7 @@ module.exports = function configureGrunt(gruntConfig){ }, - jshint: { + jshint: {//linting appjs: { options: { @@ -57,18 +66,18 @@ module.exports = function configureGrunt(gruntConfig){ }, - karma: { - + karma: {//testing + //configuring karma with grunt letting grunt know that karma works + //with mocha and chai frame works and to launch testing within karma browser all: { options: { - // These came from my karma configuration file... - // they are the SAME options! - // IF you use grunt to run karma (tests), then we - // do NOT also need a app.conf.js file for karma separately frameworks: [ 'mocha', 'chai' ], browsers: [ 'Chrome' ], singleRun: true, - files: [ + files: [//test all of the files that end in extension .js + //when i use my sinnon server find node modules file with that code + //and test code is written my test/specs folder with any file that has + //a .js extention 'src/**/*.js', 'node_modules/sinon/pkg/sinon-2.0.0.js', 'test/specs/**/*.js' @@ -86,5 +95,7 @@ module.exports = function configureGrunt(gruntConfig){ //thats why first jshint to make sure theres no syntax errors and then why //i test my files next to make sure nothing breaks and then if those two pass //i know i have good code so i can copy those files and put into build directory - gruntConfig.registerTask( 'build', [ 'jshint', 'karma', 'copy', 'sass' ] ); + //the clean task deletes the whole build directory and is the first task that runs + //build = running all of these tasks. you can name it whatever + gruntConfig.registerTask( 'build', [ 'clean', 'jshint', 'karma', 'copy', 'sass' ] ); }; diff --git a/package.json b/package.json index e438bac..fd7c85e 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "load-grunt-tasks": "^3.5.2", "mocha": "^3.2.0", "sinon": "^2.0.0" + }, + "dependencies": { + "jquery": "^3.2.0" } } From 80c079025d4964dee805f1cac2d970b8ad0aa4e7 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 15:01:17 -0400 Subject: [PATCH 10/12] updated read me --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9af0adb..c49ff7b 100644 --- a/README.md +++ b/README.md @@ -4,18 +4,18 @@ This project was created for Iron Yard Students to practice Unit testing with Karma, Mocha and Chai. -How to use: +## How to use: App uses grunt as a dev dependency. Grunt is configured to copy app js html and scss files into build directory. Prior to copying js files are linted and tested using js hint and karma. -To set up: +## To set up: --Fork directory from https://github.com/ElizabethBoles/thoughter --Run NPM install in your terminal which downloads necessary app dependencies +1. Fork directory from https://github.com/ElizabethBoles/thoughter +2. Run ```npm install``` in your terminal which downloads necessary app dependencies and developer dependencies (jQuery, Grunt and Grunt task managers). --Run Grunt build to create build directory which then can be used to view app +3. Run ```Grunt build``` to create build directory which then can be used to view app in preferred browser. Testing code and Grunt configuration created by Elizabeth Boles. From 4cf1efe265271055de6144e60d72bac66627959d Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 18:07:07 -0400 Subject: [PATCH 11/12] updated files --- gruntfile.js | 18 +++++++++++++++++- package.json | 1 + 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/gruntfile.js b/gruntfile.js index 52ad0df..a3c9b43 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -81,12 +81,27 @@ module.exports = function configureGrunt(gruntConfig){ 'src/**/*.js', 'node_modules/sinon/pkg/sinon-2.0.0.js', 'test/specs/**/*.js' - ] + ], + preprocessors: {//what files we want to be pre processed + 'src/**/*.js': ['coverage'],//all the files were testing + //want coverage plug in to watch during those tests + //then generate a summary + //coverage is the plug in and dots is part of how they report + //back + }, + reporters: ['dots', 'coverage'],//in that summary i want + //dots which shows me the number of tests and a color + //indication of whether or not they passed + coverageReporter: { + type: 'text-summary'//so it doesnt come out looking all codey + //makes it look clean in terminal + } } } } + }); require('load-grunt-tasks')(gruntConfig); //whenever i run grunt build in my terminal do these things in this order @@ -98,4 +113,5 @@ module.exports = function configureGrunt(gruntConfig){ //the clean task deletes the whole build directory and is the first task that runs //build = running all of these tasks. you can name it whatever gruntConfig.registerTask( 'build', [ 'clean', 'jshint', 'karma', 'copy', 'sass' ] ); + //gruntConfig.registerTask( 'watch', ['build']); }; diff --git a/package.json b/package.json index fd7c85e..8ffb0cf 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "karma": "^1.5.0", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^2.0.0", + "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "load-grunt-tasks": "^3.5.2", "mocha": "^3.2.0", From 6712e15ccd814ad778e1899e609ae322af3d93b1 Mon Sep 17 00:00:00 2001 From: elizabeth boles Date: Fri, 17 Mar 2017 19:27:33 -0400 Subject: [PATCH 12/12] fixed console error in browser --- src/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index d257fa8..e40156f 100644 --- a/src/index.html +++ b/src/index.html @@ -16,6 +16,8 @@

Thoughter

- + + +