From 480f6ec9492520b59dad1eebd4e49d5216bc4a45 Mon Sep 17 00:00:00 2001 From: Jordan Kasper Date: Sat, 11 Mar 2017 16:58:09 -0500 Subject: [PATCH 1/8] Added Sass code and new thought JS --- src/index.html | 21 +++++++++++++++++++++ src/js/new-thought.js | 35 +++++++++++++++++++++++++++++++++++ src/sass/header.scss | 10 ++++++++++ src/sass/login.scss | 7 +++++++ src/sass/main.scss | 6 ++++++ src/sass/recent.scss | 10 ++++++++++ src/sass/variables.scss | 11 +++++++++++ 7 files changed, 100 insertions(+) create mode 100644 src/index.html create mode 100644 src/js/new-thought.js create mode 100644 src/sass/header.scss create mode 100644 src/sass/login.scss create mode 100644 src/sass/main.scss create mode 100644 src/sass/recent.scss create mode 100644 src/sass/variables.scss diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..d257fa8 --- /dev/null +++ b/src/index.html @@ -0,0 +1,21 @@ + + + + + Thoughter + + + + + + +
+

Thoughter

+
+ + + + + + + diff --git a/src/js/new-thought.js b/src/js/new-thought.js new file mode 100644 index 0000000..cd2d613 --- /dev/null +++ b/src/js/new-thought.js @@ -0,0 +1,35 @@ +(function() { + + window.thoughter = window.thoughter || {}; + + /** + * Creates a new thought with the given text + * + * @param {String} text The text to use for the thought - this is REQUIRED! + * @return {Promise} The resolved promise will have the new thought data object in it + */ + window.thoughter.createThought = function createThought(text) { + if (typeof(text) !== 'string' || !text.length) { + return Promise.reject('Please provide text for this new thought'); + } + + return fetch( + 'http://thoughter.herokuapp.com/api/Thoughts', + { + method: 'post', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ content: text }) + } + ) + .then(function handleResponse(res) { + if (res.status > 299) { + console.error('Looks like a bad status code:', res.status); + } else { + return res.json() + } + }); + }; + +})(); diff --git a/src/sass/header.scss b/src/sass/header.scss new file mode 100644 index 0000000..aed64e2 --- /dev/null +++ b/src/sass/header.scss @@ -0,0 +1,10 @@ + +header { + border-bottom: $themeBorder; + + h1 { + font-size: $topHeaderFontSize; + font-weight: bold; + margin-left: $topHeaderShift; + } +} diff --git a/src/sass/login.scss b/src/sass/login.scss new file mode 100644 index 0000000..2a0f74b --- /dev/null +++ b/src/sass/login.scss @@ -0,0 +1,7 @@ + +.login { + form { + width: $loginWidth; + margin: 0 auto; + } +} diff --git a/src/sass/main.scss b/src/sass/main.scss new file mode 100644 index 0000000..affe303 --- /dev/null +++ b/src/sass/main.scss @@ -0,0 +1,6 @@ + +@import 'variables'; +@import 'header'; +@import 'login'; +@import 'new-thought'; +@import 'recent'; diff --git a/src/sass/recent.scss b/src/sass/recent.scss new file mode 100644 index 0000000..938e465 --- /dev/null +++ b/src/sass/recent.scss @@ -0,0 +1,10 @@ + +.recent { + width: $recentContainerWidth; + margin: 0 auto; + display: flex; + + article { + flex: 0 0 calc((100% / $thoughtColumns) - $thoughtMargin); + } +} diff --git a/src/sass/variables.scss b/src/sass/variables.scss new file mode 100644 index 0000000..85ac3f8 --- /dev/null +++ b/src/sass/variables.scss @@ -0,0 +1,11 @@ + +$themeFontColor: #222222; +$themeBorder: 1px solid #99bbff; +$topHeaderFontSize: 1.2em; +$topHeaderShift: 5em; + +$loginWidth: 60%; + +$recentContainerWidth: 90%; +$thoughtColumns: 2; +$thoughtMargin: 2em; From 61ed5414cc6d238da2054d19c8e9f5859ab87d2f Mon Sep 17 00:00:00 2001 From: Jordan Kasper Date: Sat, 11 Mar 2017 17:53:52 -0500 Subject: [PATCH 2/8] Added rejected promise on non-200 status code for new thoughts --- src/js/new-thought.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/new-thought.js b/src/js/new-thought.js index cd2d613..f56e972 100644 --- a/src/js/new-thought.js +++ b/src/js/new-thought.js @@ -26,6 +26,7 @@ .then(function handleResponse(res) { if (res.status > 299) { 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() } From 06e83c6ccb3040ba4e5c88051366183c4d10425f Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Fri, 17 Mar 2017 04:37:54 -0700 Subject: [PATCH 3/8] adding several tests to thoughter code --- README.md | 4 ++- config.js | 16 +++++++++++ package.json | 20 ++++++++++++++ src/js/recent-thoughts.js | 5 ++-- test/specs/thoughts.spec.js | 54 +++++++++++++++++++++++++++++++++++++ 5 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 config.js create mode 100644 package.json create mode 100644 test/specs/thoughts.spec.js diff --git a/README.md b/README.md index 4171bc5..b2b13b3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ # Thoughter -Definitely not a Twitter clone. +Definitely not a Twitter clone, because their would be copyright questions. + +This is for academic purposes only. Testing the DOM, and AJAX. Creating a fake server for each and removing it after the test is run. Each test is Idempotent, independent of every other test. diff --git a/config.js b/config.js new file mode 100644 index 0000000..5d1ebde --- /dev/null +++ b/config.js @@ -0,0 +1,16 @@ +module.exports = function karmaConfig( config ) { + config.set({ + //minimum config set that we need + //Karma will inject the mocha and js files into its test runner HTML file for us + frameworks: ['chai', 'mocha'], + browsers: [ 'Chrome' ], + singleRun: true, //this is going to launch Chrome, if it was false, it would run the test inside of the browser and then leave it there + files: [ + //the script tags that you want to put in the fake html tag + 'src/**/*.js', + 'node_modules/sinon/pkg/sinon-2.0.0.js', + 'test/specs/**/*.js' + + ] + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..063895e --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "thoughter", + "version": "1.0.0", + "description": "thoughter testing", + "main": "config.js", + "scripts": { + "test": "karma start config.js" + }, + "author": "Steven Strasburg", + "license": "ISC", + "devDependencies": { + "chai": "^3.5.0", + "karma": "^1.5.0", + "karma-chai": "^0.1.0", + "karma-chrome-launcher": "^2.0.0", + "karma-mocha": "^1.3.0", + "mocha": "^3.2.0", + "sinon": "^2.0.0" + } +} diff --git a/src/js/recent-thoughts.js b/src/js/recent-thoughts.js index c548e79..c7f454b 100644 --- a/src/js/recent-thoughts.js +++ b/src/js/recent-thoughts.js @@ -14,10 +14,10 @@ return; } - recent = document.querySelector('.recent'); + let recent = document.querySelector('.recent'); thoughts.forEach(function showThought(thought) { if (!thought.content || !thought.createTime || !thought.id) { - return; + return 'please enter thoughter message'; //returns to api? } let thoughtUI = document.createElement('article'); @@ -32,6 +32,7 @@ }); }; + /** * Retrieves the most recent thoughts, using the provided count as the limit * diff --git a/test/specs/thoughts.spec.js b/test/specs/thoughts.spec.js new file mode 100644 index 0000000..2dac938 --- /dev/null +++ b/test/specs/thoughts.spec.js @@ -0,0 +1,54 @@ +(function() { + 'use strict'; + let expect =chai.expect; + + beforeEach(function(){ + let articleTag = document.createElement('main'); + articleTag.classList.add('recent'); + document.querySelector('body').appendChild( articleTag ); + }); + + afterEach(function(){ + let articleTag = document.querySelector('article'); + articleTag.parentNode.removeChild(articleTag); + }); + + it('is article present', function(){ + window.thoughter.showRecent([{content: 'Steven', createTime: 1983, id: 'human/big-foot'}]); + let article = document.querySelectorAll('article'); + expect(article.length).to.equal(1); + }); + + it('content on article should be a string', function(){ + window.thoughter.showRecent([{content: 'Steven', createTime: 1983, id: 'human/big-foot'}]); + let pTag = document.querySelectorAll('p'); + console.info(pTag, 'im here, here! Look at me!'); + console.info(pTag.innerText, 'hello there 1'); + console.info(pTag.innerHTML, 'hello there 2'); + console.info(pTag.textContent, 'hello there 3'); + console.info(pTag[0], 'hello there 4'); + expect(pTag[0]).to.equal('Steven') + + }); + + xit('content on article should be a string', function(){ + window.thoughter.showRecent([{content: 'Steven', createTime: 1983, id: 'human/big-foot'}]); + let pTag = document.querySelectorAll('p'); + console.info(pTag, 'im here, here! Look at me!'); + console.info(pTag[0].innerText, 'hello there 1'); + console.info(pTag.innerHTML, 'hello there 2'); + console.info(pTag.textContent, 'hello there 3'); + console.info(pTag[0], 'hello there 4'); + expect(pTag[0]).to.equal('Steven'); + + }); + + + xit('should display number of articles', function(){ + let result = window.thoughter.sum([3]); + expect(result).to.be.a('number'); + expect(result).to.equal(3); + + }); + +}()); From 3266095e7287f4db2db3ba4b5f027be5dcf69fd5 Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Fri, 17 Mar 2017 10:55:13 -0700 Subject: [PATCH 4/8] upto date thoughter page --- test/specs/thoughts.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/specs/thoughts.spec.js b/test/specs/thoughts.spec.js index 2dac938..fcfde70 100644 --- a/test/specs/thoughts.spec.js +++ b/test/specs/thoughts.spec.js @@ -13,6 +13,18 @@ articleTag.parentNode.removeChild(articleTag); }); + it('should be a function', function(){ + + }); + + it('should create articles for every thought it is given', fucntion(){ + let result = window.thoughter.showRecent([ + {content:'example text', createTime:9:00 am, id:'test'} + ]); + let articles = document.querySelectorAll('main.recent article') + expect(articles.length).to.equal(1); + }); + it('is article present', function(){ window.thoughter.showRecent([{content: 'Steven', createTime: 1983, id: 'human/big-foot'}]); let article = document.querySelectorAll('article'); From e307237be290ea601d0b8be8ecb82ca65e97a925 Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Fri, 17 Mar 2017 12:15:53 -0700 Subject: [PATCH 5/8] added clean and copy to grunt the task runner --- gruntfile.js | 33 +++++++++++++++++++++++++++++++++ package.json | 5 +++++ 2 files changed, 38 insertions(+) create mode 100644 gruntfile.js diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..b7aea33 --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,33 @@ +module.exports = function configureGrunt(gruntConfiguration) { + + gruntConfiguration.initConfig({ + + clean: [ 'build/' ], + + copy: { + + htmlCopy:{ + files: [ + { + cwd: 'src/', + src: [ '*html' ], + dest: 'build/', + expand: true + } + ] + }, + +//enter sass +//enter jshint +//enter karma + + } + }); + + require('load-grunt-tasks')(gruntConfiguration); + + // gruntConfiguration.registerTask( 'build', ['jshint', 'karma', 'clean', 'copy', 'sass' ] ); + gruntConfiguration.registerTask( 'build', ['clean', 'copy' ] ); + + +}; diff --git a/package.json b/package.json index 063895e..aaa4fdd 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,15 @@ "license": "ISC", "devDependencies": { "chai": "^3.5.0", + "fetch-mock": "^6.0.1", + "grunt": "^1.0.1", + "grunt-contrib-clean": "^1.0.0", + "grunt-contrib-copy": "^1.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" } From ddd51678d2b08e0d13c4140020b8e7457209e529 Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Fri, 17 Mar 2017 15:22:48 -0700 Subject: [PATCH 6/8] added sass and jshint to grunt the task runner and running error tests --- gruntfile.js | 35 +++++++++++++++++++++++++++++------ package.json | 3 +++ src/js/new-thought.js | 2 +- test/specs/thoughts.spec.js | 16 ++++++++-------- 4 files changed, 41 insertions(+), 15 deletions(-) diff --git a/gruntfile.js b/gruntfile.js index b7aea33..3aa0ee8 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -15,19 +15,42 @@ module.exports = function configureGrunt(gruntConfiguration) { expand: true } ] + } + }, + jshint: { + options: { + jshintrc: '.jshintrc' }, + files: { + src: [ 'src/**/*.js' ] // look any sub directory of src that includes a .js file + } + }, + + + sass: { // Task + dist: { // Target + options: { // Target options + style: 'expanded' + }, + files: { // Dictionary of files + 'main.css': 'src/sass/main.scss' // 'destination': 'source' + + } + } + }, + + karma: { + unit: { + configFile: 'config.js' + } + } -//enter sass -//enter jshint -//enter karma - } }); require('load-grunt-tasks')(gruntConfiguration); - // gruntConfiguration.registerTask( 'build', ['jshint', 'karma', 'clean', 'copy', 'sass' ] ); - gruntConfiguration.registerTask( 'build', ['clean', 'copy' ] ); + gruntConfiguration.registerTask( 'build', ['clean', 'copy', 'jshint', 'karma', 'sass' ] ); }; diff --git a/package.json b/package.json index aaa4fdd..f58a59b 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ "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", 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/test/specs/thoughts.spec.js b/test/specs/thoughts.spec.js index fcfde70..b60c9b8 100644 --- a/test/specs/thoughts.spec.js +++ b/test/specs/thoughts.spec.js @@ -17,13 +17,13 @@ }); - it('should create articles for every thought it is given', fucntion(){ - let result = window.thoughter.showRecent([ - {content:'example text', createTime:9:00 am, id:'test'} - ]); - let articles = document.querySelectorAll('main.recent article') - expect(articles.length).to.equal(1); - }); + // it('should create articles for every thought it is given', fucntion(){ + // let result = window.thoughter.showRecent([ + // {content:'example text', createTime:9:00 am, id:'test'} + // ]), + // let articles = document.querySelectorAll('main.recent article') + // expect(articles.length).to.equal(1); + // }); it('is article present', function(){ window.thoughter.showRecent([{content: 'Steven', createTime: 1983, id: 'human/big-foot'}]); @@ -39,7 +39,7 @@ console.info(pTag.innerHTML, 'hello there 2'); console.info(pTag.textContent, 'hello there 3'); console.info(pTag[0], 'hello there 4'); - expect(pTag[0]).to.equal('Steven') + expect(JSON.stringify(pTag[0])).to.equal('Steven') }); From 2a5202998369073f5810bb311f1f709977a629cf Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Fri, 17 Mar 2017 16:42:24 -0700 Subject: [PATCH 7/8] updating with structure for HTML --- gruntfile.js | 44 ++++++++++++++++++++++++++++++++++---------- package.json | 3 +++ src/index.html | 2 +- 3 files changed, 38 insertions(+), 11 deletions(-) diff --git a/gruntfile.js b/gruntfile.js index 3aa0ee8..c116081 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -6,17 +6,41 @@ module.exports = function configureGrunt(gruntConfiguration) { copy: { - htmlCopy:{ - files: [ - { - cwd: 'src/', - src: [ '*html' ], - dest: 'build/', - expand: true - } - ] - } + copyjs:{ + files: [ + { + cwd: 'src/js/', + src: [ '*.js' ], + dest: 'build/js', + expand: true + } + ] + }, + + htmlcopy:{ + files: [ + { + cwd: 'src/', + src: [ '*.html' ], + dest: 'build/', + expand: true + } + ] }, + + + copyjquery:{ + files: [ + { + cwd: 'node_modules/jquery/dist', + src: [ 'jquery.js' ], + dest: 'build/js/vendor', + expand: true + } + ] + } + }, + jshint: { options: { jshintrc: '.jshintrc' diff --git a/package.json b/package.json index f58a59b..0288118 100644 --- a/package.json +++ b/package.json @@ -24,5 +24,8 @@ "load-grunt-tasks": "^3.5.2", "mocha": "^3.2.0", "sinon": "^2.0.0" + }, + "dependencies": { + "jquery": "^3.2.0" } } diff --git a/src/index.html b/src/index.html index d257fa8..1dc2018 100644 --- a/src/index.html +++ b/src/index.html @@ -16,6 +16,6 @@

Thoughter

- + From 51b5fc6e7def97682ca0a7bef3734bc9883da668 Mon Sep 17 00:00:00 2001 From: Steven Strasburg Date: Mon, 3 Apr 2017 23:35:30 -0400 Subject: [PATCH 8/8] adding gruntfile from branch to master --- review/review.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 review/review.js diff --git a/review/review.js b/review/review.js new file mode 100644 index 0000000..ee8b31a --- /dev/null +++ b/review/review.js @@ -0,0 +1,22 @@ +// readme +// clone the repository +// npm install +// +// how to run test; +// grunt karma +// +// how to build final product: +//grunt build +// + +//index.html +//link href matches the build directory + +//gruntfile.js +//clean: ... +//copy: ... +//**/*.js //find all files **, *.js all that end with js +// +//watch: // watching for individual changes +//gruntConfig.registerTask('gruntWatch',['watch:watchGrunt']) +//or from terminal: grunt watch