TIYDC · SSStrasburg · Mar 11, 2017 · Mar 11, 2017 · Mar 11, 2017 · Mar 17, 2017
diff --git 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
@@ -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/gruntfile.js b/gruntfile.js
@@ -0,0 +1,80 @@
+module.exports = function configureGrunt(gruntConfiguration) {
+
+  gruntConfiguration.initConfig({
+
+    clean: [ 'build/' ],
+
+    copy: {
+
+    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'
+      },
+      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'
+      }
+    }
+
+
+  });
+
+  require('load-grunt-tasks')(gruntConfiguration);
+
+  gruntConfiguration.registerTask( 'build', ['clean', 'copy', 'jshint', 'karma', 'sass' ] );
+
+
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "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",
+    "fetch-mock": "^6.0.1",
+    "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"
+  },
+  "dependencies": {
+    "jquery": "^3.2.0"
+  }
+}
diff --git a/review/review.js 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
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='utf-8'>
+        <title>Thoughter</title>
+
+        <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+
+        <link href='style.css' rel='stylesheet'>
+    </head>
+    <body>
+        <header>
+            <h1>Thoughter</h1>
+        </header>
+
+        <!-- TODO! -->
+
+        <script src='/js/vendor/jquery.js'></script>
+        <script src='/js/recent-thoughts.js'></script>
+    </body>
+</html>
diff --git a/src/js/new-thought.js b/src/js/new-thought.js
@@ -0,0 +1,36 @@
+(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);
+                return Promise.reject('Sorry, but there was a problem with your request.');
+            } else {
+                return res.json();
+            }
+        });
+    };
+
+})();
diff --git 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/src/sass/header.scss 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
@@ -0,0 +1,7 @@
+
+.login {
+    form {
+        width: $loginWidth;
+        margin: 0 auto;
+    }
+}
diff --git a/src/sass/main.scss 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
@@ -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
@@ -0,0 +1,11 @@
+
+$themeFontColor: #222222;
+$themeBorder: 1px solid #99bbff;
+$topHeaderFontSize: 1.2em;
+$topHeaderShift: 5em;
+
+$loginWidth: 60%;
+
+$recentContainerWidth: 90%;
+$thoughtColumns: 2;
+$thoughtMargin: 2em;
diff --git a/test/specs/thoughts.spec.js b/test/specs/thoughts.spec.js
@@ -0,0 +1,66 @@
+(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('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');
+    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(JSON.stringify(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);
+
+  });
+
+}());