Merge pull request #379 from camerenisonfire/master

Convert TDD Learn page to use ES6. resolves #315

Author: lmccart

dist/es/learn/coordinate-system-and-shapes.html

@@ -191,7 +191,7 @@ <h2>Formas Primitivas</h2>
         }
       </script>
 
-      <p>Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una <a href="/reference/#/p5/ellipse">ellipse()</a> es muy sencilla de dibujar. De hecho es idéntica al <a href="/reference/#/p5/rect">rect()</a>> con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la <a href="/reference/#/p5/ellipse">ellipse()</a> es <a href="/reference/#/p5/CENTER">CENTER</a>, en vez de <a href="/reference/#/p5/CORNER">CORNER</a>.</p>
+      <p>Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una <a href="/reference/#/p5/ellipse">ellipse()</a> es muy sencilla de dibujar. De hecho es idéntica al <a href="/reference/#/p5/rect">rect()</a> con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la <a href="/reference/#/p5/ellipse">ellipse()</a> es <a href="/reference/#/p5/CENTER">CENTER</a>, en vez de <a href="/reference/#/p5/CORNER">CORNER</a>.</p>
       <script type="text/p5" data-autoplay>
         function setup(){
           createCanvas(100, 100);

dist/es/learn/tdd.html

@@ -212,9 +212,9 @@ <h2>A sketch without tests</h2>
               // fillColor will be the color of the rectangle.
               // colorIncreaser will become an instance of our ColorIncreaser class.
 
-              var colorValueIncrease = 1;
-              var fillColor
-              var colorIncreaser
+              let colorValueIncrease = 1;
+              let fillColor;
+              let colorIncreaser;
 
               function setup() {
                 createCanvas(500, 500);
@@ -249,7 +249,7 @@ <h2>A sketch without tests</h2>
             </xmp></code></pre>
           </li>
           <li>
-           Open the index.html file in your browser (you don’t need to run a local server in this case). You should see a black box become red and then black again. This is the basis of looping over all the RGB colors. The problem you face is that there are 256 values for red, green, and blue, which means there are over 16 million combinations of colors! You can make this faster. However, making this faster will cause flashing lights which might give some people headaches or seizures. Please only increase this value if you do not have issues with flashing lights. The rest of the tutorial should be fine.  In the sketch.js file change the<pre><code class="language-javascript"><xmp>var colorValueIncrease = 33;</xmp></code></pre> and reload the page. However this still doesn’t guarantee this is working properly. You don’t have time to watch all the colors change nor can you tell yourself if it is iterating through the millions of colors. Change the colorValueIncrease variable back to 1 before you move on.
+           Open the index.html file in your browser (you don’t need to run a local server in this case). You should see a black box become red and then black again. This is the basis of looping over all the RGB colors. The problem you face is that there are 256 values for red, green, and blue, which means there are over 16 million combinations of colors! You can make this faster. However, making this faster will cause flashing lights which might give some people headaches or seizures. Please only increase this value if you do not have issues with flashing lights. The rest of the tutorial should be fine.  In the sketch.js file change the<pre><code class="language-javascript"><xmp>let colorValueIncrease = 33;</xmp></code></pre> and reload the page. However this still doesn’t guarantee this is working properly. You don’t have time to watch all the colors change nor can you tell yourself if it is iterating through the millions of colors. Change the colorValueIncrease variable back to 1 before you move on.
           </li>
           <li>
             At 30 draw loops per second it would take over six days to loop through all of the colors. You certainly don’t have time to do that once, and would never be able to check and see if it worked every time you updated our code. What if you accidentally change something in our draw loop that breaks the code right before install?  You wouldn’t know until it was live and everyone saw your sketch break.
@@ -264,13 +264,14 @@ <h2>Your first unit tests</h2>
       <p>
         In the folder called color_unit_test that you already created, make a new folder called test.  Open the test folder and make a file called test.js.  Type this code into test.js
         <pre><code class="language-javascript"><xmp>
+          'use strict';
           // Import the expect library.  This is what allows us to check our code.
           // You can check out the full documentation at http://chaijs.com/api/bdd/
-          var expect = require('chai').expect;
+          const expect = require('chai').expect;
 
 
           // Create the variable you are going to test
-          var p5js = 'awesome';
+          let p5js = 'awesome';
 
 
           // describe lets you comment on what this block of code is for.
@@ -309,11 +310,11 @@ <h2>Your first unit tests</h2>
       </p>
       <p>
         Let's look at what happens when tests fail. Change line 6 in test.js from:
-        <pre><code class="language-javascript"><xmp>var p5js = 'awesome';</xmp></code></pre>
+        <pre><code class="language-javascript"><xmp>let p5js = 'awesome';</xmp></code></pre>
       </p>
       <p>
         to
-        <pre><code class="language-javascript"><xmp>var p5js = 42;</xmp></code></pre>
+        <pre><code class="language-javascript"><xmp>let p5js = 42;</xmp></code></pre>
       </p>
       <p>
         Save test.js and go back to your terminal and run the mocha command again. You should see something like:
@@ -358,13 +359,15 @@ <h2>Test Driven Development</h2>
       <p>
         Delete everything in test.js and replace it with this
         <pre><code class="language-javascript">
+          'use strict';
           // Import the expect library.  This is what allows us to check our code.
           // You can check out the full documentation at http://chaijs.com/api/bdd/
-          var expect = require('chai').expect;
+          const expect = require('chai').expect;
           // Import our colorIncreaser class.
-          var ColorIncreaser = require('../sketch').ColorIncreaser;
+          const ColorIncreaser = require('../sketch');
 
           describe('ColorIncreaser tests', function() {
+            let colorIncreaser;
 
             // beforeEach is a special function that is similar to the setup function in
             // p5.js.  The major difference it that this function runs before each it()
@@ -386,18 +389,20 @@ <h2>Test Driven Development</h2>
 
         Go to the bottom of your sketch.js file, below the closing bracket } for the draw function, and add this:
         <pre><code class="language-javascript">
-          function ColorIncreaser() {
-            // Stores a value and a color and allows you to increase the color
-            // by that value.
+          class ColorIncreaser {
+            constructor() {
+              // Stores a value and a color and allows you to increase the color
+              // by that value.
+            }
           }
 
-          module.exports.ColorIncreaser = ColorIncreaser;
+          module.exports = ColorIncreaser;
         </code></pre>
       </p>
       <p>
-        Save sketch.js.  The function line will be our color increasing object.  The module.export line is what allows our test.js file to import our ColorIncreaser with the line you already added that looks like this:
+        Save sketch.js.  The function line will be our color increasing object.  The module.exports line is what allows our test.js file to import our ColorIncreaser with the line you already added that looks like this:
         <pre><code class="language-javascript">
-           var ColorIncreaser = require('../sketch').ColorIncreaser;
+           const ColorIncreaser = require('../sketch');
         </code></pre>
       </p>
       <p>
@@ -406,7 +411,7 @@ <h2>Test Driven Development</h2>
         Now get your ColorIncreaser function to actually do something.  Start by storing the colorValueIncrease as a variable in your class.  Before you change the code in sketch.js you have to write your tests.  Change the beforeEach function in test.js to look like this
         <pre><code class="language-javascript">
           beforeEach(function() {
-              var colorValueIncrease = 1;
+              let colorValueIncrease = 1;
               colorIncreaser = new ColorIncreaser(colorValueIncrease);
           });
         </code></pre>
@@ -429,10 +434,12 @@ <h2>Test Driven Development</h2>
         </code></pre>
         and change the ColorIncreaser function to look like this
         <pre><code class="language-javascript">
-          function ColorIncreaser(colorValueIncrease) {
-            // Stores a value and a color and allows you to increase the color
-            // by that value.
-            this.colorValueIncrease = colorValueIncrease
+          class ColorIncreaser() {
+            constructor(colorValueIncrease) {
+              // Stores a value and a color and allows you to increase the color
+              // by that value.
+              this.colorValueIncrease = colorValueIncrease
+            }
           }
         </code></pre>
         Let’s run the mocha test again.  It should pass!
@@ -443,7 +450,7 @@ <h2>Testing when your object is composed of other objects</h2>
         Now you need to add an instance of the p5 color class to our ColorIncreaser. However, for your tests, you don’t want to use an actual instance of the color() class because you don’t want to test external dependencies given by another library.You just want to make sure that your increment function works. So you are going to create what is called a mock of the p5 color class so you can test without worrying about the implementation of code you didn’t write.
       </p>
       <p>
-        The original way of incrementing colors just used the color.levels and changed the red, green and blue values at index [0], [1], and [2].  You can see this in the draw function in sketch.js.  The implementation of color just stores those values in a javascript array so you can mock it out very easily.  Put this code in test.js below the var ColorIncreaser = require… line and above the describe line
+        The original way of incrementing colors just used the color.levels and changed the red, green and blue values at index [0], [1], and [2].  You can see this in the draw function in sketch.js.  The implementation of color just stores those values in a javascript array so you can mock it out very easily.  Put this code in test.js below the const ColorIncreaser = require… line and above the describe line
         <pre><code class="language-javascript">
           function mockColor(red, green, blue, alpha) {
               // Mock of the color class from p5
@@ -459,8 +466,8 @@ <h2>Testing when your object is composed of other objects</h2>
         Update your beforeEach() function
         <pre><code class="language-javascript">
           beforeEach(function() {
-              var colorValueIncrease = 1;
-              var fillColor = new mockColor(0, 0, 0, 255);
+              let colorValueIncrease = 1;
+              let fillColor = new mockColor(0, 0, 0, 255);
               colorIncreaser = new ColorIncreaser(colorValueIncrease, fillColor);
           });
         </code></pre>
@@ -488,11 +495,13 @@ <h2>Testing when your object is composed of other objects</h2>
       <p>
         and update the ColorValueIncreaser function
         <pre><code class="language-javascript">
-          function ColorIncreaser(colorValueIncrease, fillColor) {
-            // Stores a value and a color and allows you to increase the color
-            // by that value.
-            this.colorValueIncrease = colorValueIncrease
-            this.fillColor = fillColor;
+          class ColorIncreaser {
+            constructor(colorValueIncrease, fillColor) {
+              // Stores a value and a color and allows you to increase the color
+              // by that value.
+              this.colorValueIncrease = colorValueIncrease
+              this.fillColor = fillColor;
+            }
           }
         </code></pre>
       </p>
@@ -512,7 +521,7 @@ <h2>Testing class methods</h2>
         <pre><code class="language-javascript">
           it('should have rgb values 255, 0, 0 after calling increaseFillColor 255 times', function(done) {
             //it is 256^1 - 1 because it starts with the color black
-            for (var count = 0; count < 255; count += 1) {
+            for (let count = 0; count < 255; count += 1) {
                 colorIncreaser.increaseFillColor()
             }
             expect(colorIncreaser.fillColor.levels[0]).to.equal(255)
@@ -524,7 +533,7 @@ <h2>Testing class methods</h2>
 
           it('should have rgb values 255, 255, 0 after calling increaseFillColor 65535 times', function(done) {
             //it is 256^2 - 1 because it starts with the color black
-            for (var count = 0; count < 65535; count += 1) {
+            for (let count = 0; count < 65535; count += 1) {
                 colorIncreaser.increaseFillColor()
             }
             expect(colorIncreaser.fillColor.levels[0]).to.equal(255)
@@ -536,7 +545,7 @@ <h2>Testing class methods</h2>
 
           it('should have rgb values 255, 255, 255 after calling increaseFillColor 16777215 times', function(done) {
             //it is 256^3 - 1 because it starts with the color black
-            for (var count = 0; count < 16777215; count += 1) {
+            for (let count = 0; count < 16777215; count += 1) {
                 colorIncreaser.increaseFillColor()
             }
             expect(colorIncreaser.fillColor.levels[0]).to.equal(255)
@@ -547,9 +556,9 @@ <h2>Testing class methods</h2>
         </code></pre>
       </p>
       <p>
-        And when you run mocha the tests will fail because that function does not exist!  Let’s add a skeleton function in sketch.js between your ColorIncreaserFunction and your module export
+        And when you run mocha the tests will fail because that function does not exist!  Let’s add a skeleton function in sketch.js inside the ColorIncreaser class below the constructor function.
         <pre><code class="language-javascript">
-          ColorIncreaser.prototype.increaseFillColor = function() {
+          increaseFillColor() {
             // increase the first color channel by one.  If that channel
             // is now > 255 then increment the next color channel.  Repeat for second
             // and third channel
@@ -559,7 +568,7 @@ <h2>Testing class methods</h2>
       <p>
         Save sketch.js.  Now when you run mocha the tests fail for a different reason.  It finds the function, but it doesn’t do what you expect it to.  Let’s change the function in sketch.js to look like what is inside the draw function.
         <pre><code class="language-javascript">
-          ColorIncreaser.prototype.increaseFillColor = function() {
+          increaseFillColor() {
             // increase the first color channel by one.  If that channel
             // is now > 255 then increment the next color channel.  Repeat for second
             // and third channel

dist/learn/coordinate-system-and-shapes.html

@@ -191,7 +191,7 @@ <h2>Simple Shapes</h2>
         }
       </script>
 
-      <p>Once we have become comfortable with the concept of drawing a rectangle, an <a href="/reference/#/p5/ellipse">ellipse()</a> is a snap. In fact, it is identical to <a href="/reference/#/p5/rect">rect()</a>> with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode for <a href="/reference/#/p5/ellipse">ellipse()</a> is <a href="/reference/#/p5/CENTER">CENTER</a>, rather than <a href="/reference/#/p5/CORNER">CORNER</a>.</p>
+      <p>Once we have become comfortable with the concept of drawing a rectangle, an <a href="/reference/#/p5/ellipse">ellipse()</a> is a snap. In fact, it is identical to <a href="/reference/#/p5/rect">rect()</a> with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode for <a href="/reference/#/p5/ellipse">ellipse()</a> is <a href="/reference/#/p5/CENTER">CENTER</a>, rather than <a href="/reference/#/p5/CORNER">CORNER</a>.</p>
       <script type="text/p5" data-autoplay>
         function setup(){
           createCanvas(100, 100);