diff --git a/README.md b/README.md index 4171bc5..7207e89 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,11 @@ # Thoughter Definitely not a Twitter clone. + +Edited by: Carlyse Jordan +TIY +03/16/17 + +This was a homework exercise used to get more practice with asynchronous DOM +and ajax testing using tools such as mocha(describe/module library), chai(assertion +framework) and karma as the test runner. diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..ec9ee63 --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,80 @@ +module.exports = function configureGrunt(gruntConfig){ + + gruntConfig.initConfig({ + clean: ['build/'], + + copy: { + htmlcopy: { + + files: [ { + src: 'src/*.html', + dest: 'build/', + expand: true + } + ] + } + }, + copythejquery: { + files: [ + { + src: ['jquery.js'], + dest: 'build/js/vendor/', + expand: true + } + ] + + }, + + copythejs:{ + files: [ + { + cwd: 'src/', + src: ['**/*.js'], + dest: 'build/', + expand: true + } + ] + }, + + sass: { + all: { + files: { + 'build/style.csss':'src/sass/main.scss' + } + } + }, + jshint: { + appjs: { + options: { + jshintrc: '.jshintrc' + }, + files: { + src: ['src/**/*.js'] + } + } + }, + karma: { + all: { + + options:{ + //if Im using grunt to run karma (tests), then we DON'T need a app.conf.js + //file for karma separatelly + //Same options from Conf.js file + frameworks: ['mocha', 'chai'], + browsers: ['Chrome'], + singleRun: true, + files: [ + 'src/**/*.js', + 'tests/specs/**/*.js' + ] + } + } + } + +}); +require('load-grunt-tasks')(gruntConfig); + +//create a task called "alias" to run multiple OTHER tasks +//can create more aliases! +gruntConfig.registerTask('build',['jshint','karma','clean','copy','sass']); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..6f7a6bb --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "wk5-day3", + "version": "1.0.0", + "description": "this is code for homework", + "main": "src/js/recent-thoughts.js", + "dependencies": { + "chai": "^3.5.0", + "karma": "^1.5.0", + }, + "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", + "jquery": "^3.2.0", + "karma": "^1.5.0", + "load-grunt-tasks": "^3.5.2", + "mocha": "^3.2.0", + }, + "scripts": { + "test": "karma start thoughter.conf.js" + }, + "author": "Carlyse Jordan", + "license": "ISC", + "repository": { + "type": "git", + "url": "git+https://github.com/Carlysej89/thoughter.git" + }, + "bugs": { + "url": "https://github.com/Carlysej89/thoughter/issues" + }, + "homepage": "https://github.com/Carlysej89/thoughter#readme" +} diff --git a/src/js/recent-thoughts.js b/src/js/recent-thoughts.js index c548e79..4a446ef 100644 --- a/src/js/recent-thoughts.js +++ b/src/js/recent-thoughts.js @@ -10,50 +10,61 @@ * @return {void} */ window.thoughter.showRecent = function showRecent(thoughts = []) { + // this is creating a function (showRecent)which takes an arg (thought = []) if (!Array.isArray(thoughts)) { + //if (thoughts) is not an array return nothing, return; } - recent = document.querySelector('.recent'); - thoughts.forEach(function showThought(thought) { + let recent = document.querySelector('.recent'); + //selecting an element with the class name of recent and defining recent + thoughts.forEach(function showThought(thoughts) { + //for each object in the array called thoughts if (!thought.content || !thought.createTime || !thought.id) { + //if the thought has no content or createTime or an id we don't want it, so we return return; } let thoughtUI = document.createElement('article'); + //creating an element (article) while setting it to a variable thoughtUI.classList.add('panel'); + //adding the class panel to the article 'thoughtUI' thoughtUI.classList.add('panel-info'); + //adding class panel-info to the article 'thoughtUI' thoughtUI.setAttribute('id', 'thought-' + thought.id); + //setting an id to thoughtUI thoughtUI.innerHTML = `
Posted ${thoughts.createTime}

${thought.content}

`; + //adding HTML to the article recent.appendChild(thoughtUI); + //adding the recent class to the article thoughtUI }); }; - /** - * Retrieves the most recent thoughts, using the provided count as the limit - * - * @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) { - if (typeof(count) !== 'number' || count < 1) { - return Promise.reject('Sorry, but the count must be a positive number'); - } - - return fetch( - 'http://thoughter.herokuapp.com/api/Thoughts?filter={"order":"createTime DESC","limit":' + count + '}' - ) - .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(); - } - }); - }; + // /** + // * Retrieves the most recent thoughts, using the provided count as the limit + // * + // * @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) { + // if (typeof(count) !== 'number' || count < 1) { + // return Promise.reject('Sorry, but the count must be a positive number'); + // } + // + // return fetch( + // 'http://thoughter.herokuapp.com/api/Thoughts?filter={"order":"createTime DESC","limit":' + count + '}' + // ) + // .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(); + // } + // }); + // }; })(); diff --git a/src/recent-thoughts.js b/src/recent-thoughts.js new file mode 100644 index 0000000..4a446ef --- /dev/null +++ b/src/recent-thoughts.js @@ -0,0 +1,70 @@ +(function() { + 'use strict'; + + window.thoughter = window.thoughter || {}; + + /** + * Shows the provided thought data on the page in the `.recent` element + * + * @param {Array} thoughts The array of thought objects to display + * @return {void} + */ + window.thoughter.showRecent = function showRecent(thoughts = []) { + // this is creating a function (showRecent)which takes an arg (thought = []) + if (!Array.isArray(thoughts)) { + //if (thoughts) is not an array return nothing, + return; + } + + let recent = document.querySelector('.recent'); + //selecting an element with the class name of recent and defining recent + thoughts.forEach(function showThought(thoughts) { + //for each object in the array called thoughts + if (!thought.content || !thought.createTime || !thought.id) { + //if the thought has no content or createTime or an id we don't want it, so we return + return; + } + + let thoughtUI = document.createElement('article'); + //creating an element (article) while setting it to a variable + thoughtUI.classList.add('panel'); + //adding the class panel to the article 'thoughtUI' + thoughtUI.classList.add('panel-info'); + //adding class panel-info to the article 'thoughtUI' + thoughtUI.setAttribute('id', 'thought-' + thought.id); + //setting an id to thoughtUI + thoughtUI.innerHTML = `
Posted ${thoughts.createTime}
+
+

${thought.content}

+
`; + //adding HTML to the article + recent.appendChild(thoughtUI); + //adding the recent class to the article thoughtUI + }); + }; + + // /** + // * Retrieves the most recent thoughts, using the provided count as the limit + // * + // * @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) { + // if (typeof(count) !== 'number' || count < 1) { + // return Promise.reject('Sorry, but the count must be a positive number'); + // } + // + // return fetch( + // 'http://thoughter.herokuapp.com/api/Thoughts?filter={"order":"createTime DESC","limit":' + count + '}' + // ) + // .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(); + // } + // }); + // }; + +})(); diff --git a/src/sass/main.scss b/src/sass/main.scss index affe303..c915712 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -2,5 +2,5 @@ @import 'variables'; @import 'header'; @import 'login'; -@import 'new-thought'; +//@import 'new-thought'; @import 'recent'; diff --git a/src/specs/thoughter.specs.js b/src/specs/thoughter.specs.js new file mode 100644 index 0000000..a403391 --- /dev/null +++ b/src/specs/thoughter.specs.js @@ -0,0 +1,44 @@ +(function() { + 'use strict'; + let expect = chai.expect; + + describe('test run', function(){ + it('should be true', function(){ + expect(true).to.be.true; + }); + describe('recent module', function(){ + describe('show recent function', function(){ + beforeEach(function(){ + // I need to add an element with a class of recent + let recentTag = document.createElement('main'); + recentTag.className = 'recent'; + document.querySelector('body').appendChild(recentTag); + }); + + afterEach(function(){ + + let recentTag = document.querySelector('main'); + recentTag.className = 'recent'; + recentTag.parentNode.removeChild(recentTag); + + }); + it('should be a function', function(){ + expect(window.thoughter.showRecent).to.be.a('function'); + + }); + it('should check for all the properties in each array', function(){ + window.thoughter.showRecent([ + { + content: '', + createTime: '', + id: ' ' + } + ]); + let recent = document.querySelectorAll('main.recent article'); + expect(recent.length).to.equal(1); + }); + }); + + }); + }); +}()); diff --git a/thoughter.conf.js b/thoughter.conf.js new file mode 100644 index 0000000..2a3a859 --- /dev/null +++ b/thoughter.conf.js @@ -0,0 +1,16 @@ +module.exports = function karmaConfig( config ){ + config.set({ + // Karma will inject the mocha and chai JS files into its test runner HTMl + + frameworks: ['mocha', 'chai'], + browsers: ['Chrome'], + singleRun: true, + files: [ + 'src/**/*.js', + //globbing pattern - look an the src/ directory and ANY subdirectory + //for ANY file that ends in .js + 'node_modules/sinon/pkg/sinon-2.0.0.js', + 'tests/specs/**/*.js' + ] + }); +};