Phase two

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.

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']);
+};

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"
+}

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 = `<header class='panel-heading'>Posted ${thoughts.createTime}</header>
                 <main class='panel-body'>
                     <p>${thought.content}</p>
                 </main>`;
+                //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();
+    //         }
+    //     });
+    // };
 
 })();

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 = `<header class='panel-heading'>Posted ${thoughts.createTime}</header>
+                <main class='panel-body'>
+                    <p>${thought.content}</p>
+                </main>`;
+                //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();
+    //         }
+    //     });
+    // };
+
+})();

src/sass/main.scss

@@ -2,5 +2,5 @@
 @import 'variables';
 @import 'header';
 @import 'login';
-@import 'new-thought';
+//@import 'new-thought';
 @import 'recent';

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);
+      });
+        });
+
+    });
+  });
+}());

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'
+      ]
+    });
+};