Unit Testing Require.js

Mocha and Require.js :

http://stackoverflow.com/questions/20473614/mocha-requirejs-amd-testing

Jasmine and Require.js

https://www.airpair.com/jasmine/posts/javascriptintegrating-jasmine-with-requirejs-amd

  >> https://github.com/gsans/jasmine-require-bootstrap

What is a base URI for a hosted turtle document containing <> but no defined base?

To answer this question:

https://www.w3.org/2000/10/swap/Primer.html

"The <> being an empty URI reference always refers to the document it is written in." I am guessing a document base URI becomes whatever URI the triples are hosted at. (the absolute URI).

Further exploration of <> went here. It talks about <> referring to a base URI.

https://www.w3.org/TeamSubmission/n3/ 

https://www.ietf.org/rfc/rfc3986.txt

"

5.1.3.  Base URI from the Retrieval URI

   If no base URI is embedded and the representation is not encapsulated
   within some other entity, then, if a URI was used to retrieve the
   representation, that URI shall be considered the base URI.  Note that
   if the retrieval was the result of a redirected request, the last URI
   used (i.e., the URI that resulted in the actual retrieval of the
   representation) is the base URI."

Iterating through an array with a function

var array = ['apple','banana','grapefruit','cantelope'];

// Backwards
function reportarray(array) {
  var max = array.length;
  console.log(array[max - 1]);
  array.pop();
  if(max > 1) {
    return (reportarray(array));
  } else {
    return -1;
  }
}

// Forwards
function reportarrayrev(array) {
  var max = array.length;
  console.log(array[0]);
  array.shift();
  if(max > 1) {
    return (reportarrayrev(array));
  } else {
    return -1;
  }
}

// Except this is destructive and destroys the array
// Now for a non-desctructive way

var array = ['apple','banana','grapefruit','cantelope'];

// Backwards
function reportarray(array) {
  var arraynew = array.slice(0);
  var max = arraynew.length;
  console.log(arraynew[max - 1]);
  arraynew.pop();
  if(max > 1) {
    return (reportarray(arraynew));
  } else {
    return -1;
  }
}

// Forwards
function reportarrayrev(array) {
  var arraynew = array.slice(0);
  var max = array.length;
  console.log(arraynew[0]);
  arraynew.shift();
  if(max > 1) {
    return (reportarrayrev(arraynew));
  } else {
    return -1;
  }
}


// Thanks for the slice comment: https://davidwalsh.name/javascript-clone-array

OOP with JavaScript Experiments

Earlier, on January 8th, I said, "I was studying OOP with polymorphism, inheritance, and encapsulation. For some reason I picked up a book on C with C++. It's fun comparing."

OOP in JavaScript not like C++.

"While this is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model is in fact more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model."

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Bad_practice_Extension_of_native_prototypes

Using Functional Programming to replace elements in an array ...

The following pieces of code produce equivalent results:

var a = ['apple','banana','grapefruit','kiwi','strawberry'];
var b = ['banana','grape','watermelon','tangerene','kiwi'];
var matches = [];

for(var i = 0; i < a.length; i++) {
  for(var j = 0; j < b.length; j++) {
     if(a[i] === b[j]) {       
          matches.push(a[i]);
      }
   }
}

console.log(matches);

>>  ['banana','kiwi']





var _ = require('lodash');
var a = ['apple','banana','grapefruit','kiwi','strawberry'];
var b = ['banana','grape','watermelon','tangerene','kiwi'];
var matches = [];

var g = _.each(a, function(someThing) {
   _.each(b, function(someThingElse) {
       if(someThing === someThingElse) {
          matches.push(someThing);
       }
  })
})

>> ['banana','kiwi']
----------------------------------------
 sidenote: I am trying to embed a string replacement if there is a match:
----------------------------------------

 var a = {'apple' : 'orchard fruit','grape':'fruit of the vine'};
 var b = 'The apple grows right next to the grape';

  var c = Object.keys(a);

 for(var i = 0; i <  c.length; i++) {
      var newb = b.replace(c[i],a[c[i]]);
      var b = new b;
 }

  console.log(b);

>> The orchard fruit grows right next to the fruit of the vine

-     -       -         -          -

var b might be instead:

var b = ['apple','orange','grape','watermelon'];

which when operated on would give:

var b = ['orchard fruit','orange','grape','watermelon'];

I also want a second array that gives what I replaced:

var c = ['apple','grape'];

(the code a the beginning of this post does this...)

------------------------------------------
end sidenote
-----------------------------------------


However, the second piece of code appears to violate the side effects rule of functional programming.

Anjana Vakil discusses this in "Learning Functional Programming with JavaScript - JSUnconf 2016'" (https://www.youtube.com/watch?v=e-5obm1G_FY) .

An article in Smashing Magazine seems the most useful:

https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/

also, maybe I should use map at some point? Maybe the function can be the replacing

SeeAlso: https://www.youtube.com/playlist?list=PLQB2www8g0gROTRDOixjquch4w4MZs8OY&spfreload=5

-------------------

Perhaps this will work:

function find(a,b) {
   let dummy = [];
   _.each(a, function(someThing) {
      _.each(b, function(someThingElse) {
          if(someThing === someThingElse) {
             dummy.push(someThing);
          }
       })
   })
   return dummy;
}
 
Push and array declaration is used inside of a function here:
http://cryto.net/~joepie91/blog/2015/05/04/functional-programming-in-javascript-map-filter-reduce/
This is stateless and immutable

Jasmine and Underscore vs Lodash

https://groups.google.com/forum/#!topic/jasmine-js/GIzFsJKf-zs

https://github.com/jasmine/jasmine/issues/715

http://stackoverflow.com/questions/16401237/checking-object-equality-in-jasmine

http://stackoverflow.com/questions/31528200/jasmine-test-for-object-properties

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Using jasmine.contains() to check that objects contain certain key/value pairs

 expect(parseNameSpaces.namespace('@prefix foaf:   <http://xmlns.com/foaf/0.1/> .')).toEqual(jasmine.any(Object));

http://joelhooks.com/blog/2014/02/06/stop-writing-for-loops-start-using-underscorejs/

http://stackoverflow.com/questions/13789618/differences-between-lodash-and-underscore

-------------------

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

 http://stackoverflow.com/questions/874709/converting-user-input-string-to-regular-expression

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

How to write Jasmine asynchronous test

The Jasmine documentation at https://jasmine.github.io/edge/introduction says:

describe("long asynchronous specs", function() {
    beforeEach(function(done) {
      done();
    }, 1000);

    it("takes a long time", function(done) {
      setTimeout(function() {
        done();
      }, 9000);
    }, 10000);

    afterEach(function(done) {
      done();
    }, 1000);
  });

I know I can have a callback function in one file (called callbacj3.js):

 var fs = require('fs');

module.exports = {
   pasty: function(url, fn) {

      fs.readFile( __dirname + url, function (err, data) {
           if (err) {
           throw err;
         }
       fn(data.toString());

      });

   }
}

And a second file referencing it (called  callbacj3-ref2.js):

var acallnack = require('./callbacj3');
var url = '/namespaces.txt';

acallnack.pasty(url, function(duck) {
  console.log(duck);
})

And even a third file referencing it (called var acallnack = require('./callbacj3');
var url = '/namespaces.txt';

function cals(url, fn) {
  acallnack.pasty(url, function(duck) {
    fn(duck);
   })

 }

cals(url, function(goody) {
  console.log(goody);
});

Using the Jasmine syntax above, how do a use callbacj3-ref2 and callbacj3-ref to construct

a test?

https://discuss.atom.io/t/correct-way-to-test-asynchronous-ipc-calls-with-jasmine/20038/3 

SeeAlso:

Testing Asynchronous Code - JavaScript Testing - Udacity: https://www.youtube.com/watch?v=C5NGKzxe5vs

 

Correcting our Asynchronous Test - JavaScript Testing - Udacity:
https://www.youtube.com/watch?v=C5NGKzxe5vs

exporting callback results notes

Exporting a callback result:

Try arrow functions? Try Function Expressions?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

(function expression)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Function

https://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/

or what about this?

http://eslint.org/docs/developer-guide/working-with-rules

JavaScript: String.prototype.match

JavaScript: string.prototype.match()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

returns an array of all matches of a regular expression

Exporting modules, understanding function expressions

I'm seeing code like:

module.exports = {
  methodname: function(arg) {

},
  methodname2: function(arg2) {

  }
};

exports.somename = {
methodname: function(arg) {

},
  methodname2: function(arg2) {

  }
};

I suppose this is the same as the function expression pattern mentioned here:

 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name



I find it interesting where it says for a function expression:

var object = {
  someMethod: function object_someMethod() {}
};

In node.js module.exports is an object:

https://nodejs.org/api/modules.html#modules_module_exports

exports.somename

exports = typeof window === 'undefined' ? global : window;  

related links:

https://www.hacksparrow.com/global-variables-in-node-js.html

https://nodejs.org/api/globals.html#globals_global_objects

http://www.mattburkedev.com/export-a-global-to-the-window-object-with-browserify/
https://developer.mozilla.org/en-US/docs/Web/API/Window

http://stackoverflow.com/questions/38746211/will-typeof-window-object-always-be-true

http://stackoverflow.com/questions/27133852/export-module-pattern

 Examples:

https://github.com/codenorman/solitaire/blob/development/src/gameEngine.js

https://github.com/rmurphey/js-assessment/blob/master/app/arrays.js

In an experiment when firing up js-assessment (the second example): 

window.arraysAnswers gives:

 window.arraysAnswers
Object { indexOf: exports.arraysAnswers.indexOf(), 

sum: exports.arraysAnswers.sum(), remove: exports.arraysAnswers.remove(), 

removeWithoutCopy: exports.arraysAnswers.removeWithoutCopy(), ... }

global gives:

undefined

window gives: 

window ->  http://127.0.0.1:4444/ 

I find it interesting where it says for a function expression:

 My guess is the exports.name  and 

" exports = typeof window === 'undefined' ? global : window; "

binds the name to the window object if in the browser, but the 

global object when in node. At the moment, I am not sure how this 

makes the methods automatically match to the global and 

window object.

Maybe that is a nature of being bound to global as the paragraph 

"So, in conclusion, there are two ways of creating global variables 

in Node.js, one uses the global object, and the other uses  

module.exports. What is my recommendation? global method 

for small apps, module.exports for big apps." in hacksparrow's

 post seems to suggest.

jQuery Functions for showing and hidding things with Buttons!

I'd like to use hide() and show() for the Load Data Menu in EISPP.

With respect to, "JavaScript and JQuery: The Missing Manual" by David Sawyer McFarland, page 184:


The jQuery toggle() function is like an on-off switch:

The hide() function is like the big red button in Dr.
 Strangelove:

The show() function is like the Genesis project from Star Trek:

Now I can look at the code: https://github.com/sawmac/js3e/blob/master/testbed/effects.html .


I spy:
          <p class="effect hid" title="show">show('#text')</p>
          <p class="effect vis" title="hide">hide('#text')</p>

as well as stuff like:

        

switch (action) {

case 'hide' :

target.hide();

break;

case 'show' :

target.show();

break;

and

var vis = $(targID).is(':visible');

$('.effect:contains('+targID+')').each(function() {

var $this = $(this);

if (vis) {

if ($this.hasClass('vis')) {

$this.fadeTo(.25,1);

}

if ($this.hasClass('hid')) {

$this.fadeTo(.25,.25);

}

First Jasmine Test I constructed outside of a Tutorial

In the File src/LoadString.js

function LoadFile() {};

LoadFile.prototype.start = 'hello';


-----------------------------------------------------------------------

 In the File spec/SpecLoadString.js




describe("LoadFile", function() {

    var start;

    //This will be called before running each spec
    beforeEach(function() {
        LoadFile = new LoadFile();
    });

   it("matches any value", function() {
      expect(LoadFile.start).toEqual(jasmine.any(String));
   });
});

-----------------------

changing  src/LoadString.js breaks it:

function LoadFile() {

let start = 'hello';
};

Responsive Design Explorations

Responsive Website Basics (in 3 simple steps) - DevTips 
(https://www.youtube.com/watch?v=h3IdEqpjMvQ)

Specification: https://www.w3.org/TR/css-device-adapt-1/
working draft: https://drafts.csswg.org/css-device-adapt/

Responsive Web Design Navigation - CodeCourse
(https://www.youtube.com/watch?v=nQK0kz65wpo)

   Responsive Web Design: Media Queries - CodeCourse
   (https://www.youtube.com/watch?v=KX94fPaKqaU)

   Responsive Web Design: Understanding The Viewport - CodeCourse
   (https://www.youtube.com/watch?v=XrMTuTzX4co) 

    Responsive Web Design: Viewport Units - CodeCourse    (https://www.youtube.com/watch?v=Ul1Sqxb-mFQ)

    Responsive Websites With The Foundation 5 Grid - CodeCourse
    (https://www.youtube.com/watch?v=TUHQ6ltDi44)

    or see the entire playlist:
     (https://www.youtube.com/watch?v=XrMTuTzX4co&list=PLfdtiltiRHWEzMJ3vc_lU2bAVf4JVOfzU)


Destraction: The box model for button design. https://www.youtube.com/watch?v=GvIP6QtCVSg&spfreload=5 (The Box Model, Box-sizing & Box-shadow - DevTips)

HTML/CSS 12 Point Grid:

Grid Theory:
http://www.creativebloq.com/web-design/grid-theory-41411345


Grid Application: 
HTML/CSS: How to layout your website on a 12-column grid - Chris Lam
(https://www.youtube.com/watch?v=BZ0Js9hjaB8) 
HTML/CSS: How to layout your website on a 12-column grid (Part 2)- Chris Lam

(https://www.youtube.com/watch?v=Q17nvi9cFBo)HTML/CSS Gridding: From Wireframe to HTML (part 1)
(https://www.youtube.com/watch?v=_8fZMR6Y-dA)

HTML/CSS: Wireframe to Grid (Part 2)
(https://www.youtube.com/watch?v=ViEAsAfBB9I) 

HTML Structure, Classes, IDs, and CSS
(https://www.youtube.com/watch?v=oCy5FhqSPmI)

  W3CSchools Responsive Web Design - Grid View 

 http://www.w3schools.com/css/css_rwd_grid.asp

 broad overview including cell, track, and area 

(https://www.youtube.com/watch?v=3J9cCAnDeCs)

 

---break --- something entirely new ??...

Chris Lam's example, when modified, gives something like a line printer.

Modification: https://github.com/bshambaugh/12-column-grid-video1
(https://en.wikipedia.org/wiki/Line_printer).
 

I can apparently only break in one dimension (along the row). But what if I want to break upon the column and the row, so that the design below is not cut up into sections?

 

This illustration shows this design does not split well along the column:

So try: 
Manuel Rego - CSS Grid Layout is Just Around the Corner  

(https://www.youtube.com/watch?v=9js_5MjiGFo) 

I want CSS grid layout instead of just css flex box layout
https://www.w3.org/TR/css-grid-1/ , https://www.w3.org/TR/css-flexbox-1/

Revised Subgrid specification 

https://rachelandrew.co.uk/archives/2016/04/25/a-revised-subgrid-specification/

https://rachelandrew.co.uk/archives/2015/02/04/css-grid-layout-creating-complex-grids/ 

to get the complex grids to work you may need to include the grid polyfill:

https://github.com/FremyCompany/css-grid-polyfill

or enable in the firefox web browser with: layout.css.grid.enabled

Reference: https://igalia.github.io/css-grid-layout/enable.html

Examples: https://igalia.github.io/css-grid-layout/index.html , http://gridbyexample.com/

Status of the Callbacks

somefunction( parameter, function(response) {
    response
    // do something after the response  function(response)
});

Get error:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function

--------------------------------------------------------------------------------------------------
function longProcess(url, fn) {
  createprimatives(url, function(dummy) {
      fn(dummy);
  });
};

longProcess(url, function(graph) {
  var width = 800;
  var height = 800;
  console.log(graph); /// this takes awhile
});

longProcess(url, function(graph) {
  var width = 800;
  var height = 800;
  draw(width,height,graph); // this fails
  console.log(graph); /// this takes awhile
});


longProcess(url, function(graph) {
  var width = 800;
  var height = 800;
  var graph = someObject;
  draw(width,height,graph); // this succeeds
  console.log(graph);
});

Goal: have a callback run another callback

somefunction( parameter, function(response) {
    response
    // do something after the response
});


https://gist.github.com/ytiurin/7e5f57809e3e6eeac616
Alternative ways to pass a callback to a function in JavaScript

https://www.impressivewebs.com/callback-functions-javascript/
Callback functions in JavaScript - Louis Lazaris

https://github.com/bshambaugh/ok-coders-summer-2014/blob/master/08-javascript-functions-adv/08-01-functional-programming.md
OKCoders Functional Programming

XMLHttpRequest and AJAX with jquery

http://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest


http://api.jquery.com/load/


http://api.jquery.com/category/ajax/shorthand-methods/

 http://api.jquery.com/jQuery.get/#jqxhr-object

To this I followed the steps:

(1) Run common-n3-parse-triples.js (instead of assigning the contents of the array to a varible in the code, pass the file in and assign to the variable. also make sure you escape special characters like " ' ")
(2) Feed the output to 4d3-commonjs-createprimatives.js (pass the array from step 1 to this)
(3) Feed the output with an output file into index.html (read in string instead of pasting the output from step 3 into  file)

The graph may look nicer if I chaged URIs to curies.  This would make http://data.thespaceplan.com/ontologies/lsi#relatedIndustriesFields isp:relatedIndustriesFields with @prefix isp: <http://data.thespaceplan.com/ontologies/lsi#> stated somewhere

JQuery UI for EISPP

https://jqueryui.com/button/#default
https://jqueryui.com/draggable/  (use z index in css? to drift over other elements)

special thanks for JavaScript and JQuery the Missing Manual, David Sawyer McFarland

progress RDF to D3 vis project

Pull a ttl file into an array with N3 (done, but it chokes on characters like ')

Convert this into an array and then a custom object with nodes and edges (done)

Convert this array into an object that D3 understands (to do, JSON method on aptly named object before export should work)

Feed an object that d3 understands that plots a force directed graph with labeled s,p,o (done)

Call necessary libraries with AMD model (done)

documentation rdflib.js

For the rdflib (https://github.com/linkeddata/rdflib.js) with Tabulator,
http://dig.csail.mit.edu/2005/ajar/ajaw/Developer.html
https://github.com/solid/solid-tutorial-rdflib.js

Getting into JavaScript testing

https://jasmine.github.io/1.3/introduction.html

https://github.com/jasmine/jasmine/releases?after=v2.3.0

https://github.com/jasmine/jasmine#installation

https://mochajs.org/#getting-started

https://qunitjs.com/

Sara Raasch: Javascript Testing - Unit tests, TDD, BDD, IDK. | js.la July 2016
https://www.youtube.com/watch?v=Fjc_cwPDbNY
(mentions unit testing and integration testing and behaviorable driven development)

 --mentions that mocha is a behavior driven testing framework that lets you chose your assertion library (she is using chai as her assertion library)
-- get requirements from product people...

Test-driven development: Write better code in less time by Evan Dorn
 (https://www.youtube.com/watch?v=HhwElTL-mdI)
 -- write cleaner, better code, faster...

oops, I already wrote the code?

Here is a gentler introduction to Unit testing with example from Udacity:

https://www.youtube.com/playlist?list=PLAwxTw4SYaPkv4LG-0UHNfhPkKPfYacOg

Using the force directed graph with custom data (pt2)

The code in
https://github.com/bshambaugh/node-arc-d3/blob/master/js/tests/index.html was used.

The lines 41 - 51 and 103 - 105 were added:

var linklabel = svg.append("g")
.attr("class","links")
.selectAll("text")
.data(graph.links)
.enter().append("text");

var linklabels = linklabel
.text( function(d) { return d.label; })
.attr("font-family","sans-serif")
.attr("font-size","10px")
.attr("fill","black");

linklabels
.attr("x", function(d) { return (d.source.x + d.target.x)/2; })
.attr("y", function(d) { return (d.source.y + d.target.y)/2; });

The data source was changed:
(see: https://github.com/bshambaugh/node-arc-d3/blob/master/js/tests/createprimatives-out4.json)

{
  "nodes": [
    {"id": "a", "group": 1},
    {"id": "c", "group": 1},
    {"id": "d", "group": 1},
    {"id": "e", "group": 1},
    {"id": "q", "group": 1}
  ],
"links": [
    {"source": "d", "target": "q", "value": 1, "label": "i"},
    {"source": "a", "target": "c", "value": 8, "label": "f"},
    {"source": "c", "target": "d", "value": 10, "label": "g"},
    {"source": "e", "target": "c", "value": 10, "label": "h"},
    {"source": "c", "target": "q", "value": 10, "label": "i"}
  ]
}

Using the force directed graph with custom data

Using the code at: https://github.com/bshambaugh/mod-d3test-force-directed-4062045

replace miserables.json with:

{
  "nodes": [
    {"id": "a", "group": 1},
    {"id": "c", "group": 1},
    {"id": "d", "group": 1},
    {"id": "e", "group": 1},
    {"id": "q", "group": 1}
  ],
"links": [
    {"source": "d", "target": "q", "value": 1},
    {"source": "a", "target": "c", "value": 8},
    {"source": "c", "target": "d", "value": 10},
    {"source": "e", "target": "c", "value": 10},
    {"source": "c", "target": "q", "value": 10}
  ]
}

run the code and get:

see: https://github.com/bshambaugh/node-arc-d3/blob/master/js/tests/index.html for the implementation

Exposing N3 from a script tag in the browser

This seems to work thus far:

clone: https://github.com/RubenVerborgh/N3.js

Write some code that does this (save it to exportN3.js):

var N3 = require('./N3.js/N3.js');
exports.N3 = N3;

 Type this in the cli:

 browserify exportN3.js -s N3 -o bun2-exportN3.js

exportN3.js should be something that can be worked with





The two things to note are the exporting of the library, and the second is the generation of a Universal Module with the -s option

D3 Force Directed Graph with Node Labels

Adapted from: https://bl.ocks.org/mbostock/4062045, https://bl.ocks.org/mbostock/raw/4062045/ and https://www.dashingd3js.com/svg-text-element with https://www.dashingd3js.com/adding-an-svg-element as an additional reference.

The same code changed to give named node labels from miserables.json is at https://github.com/bshambaugh/mod-d3test-force-directed-4062045 .