From 257113a948a2b8c2026bc07caffa9445fcde51b8 Mon Sep 17 00:00:00 2001
From: Harsh Khandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com>
Date: Sat, 22 Jun 2019 00:41:10 +0530
Subject: [PATCH] Shorten UI code with new `$step` method (#710)

* update dist

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

dist update

Revert "dist update"

This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d.

* Merge remote-tracking branch 'upstream/main' into main

* add dist

* add new func

* update itermediate

* changes

* fix gitignore

* use scopeQuery

* add mapHtmlTypes test

* scopeQuery tests added

* try something

* change

* fix stepui test

* Remove double quotes

* update new code

* refactor to spec
---
 examples/lib/defaultHtmlStepUi.js             | 78 ++++++++++--------
 examples/lib/intermediateHtmlStepUi.js        | 32 ++++----
 examples/lib/scopeQuery.js                    | 60 ++++++++++++++
 package-lock.json                             | 33 +++-----
 package.json                                  |  2 +-
 spec/insertPreview.spec.js                    | 26 ------
 spec/intermediateHtmlStepUi.spec.js           | 19 -----
 spec/support/jasmine.json                     | 11 ---
 spec/urlHash.spec.js                          | 40 ---------
 src/modules/NoiseReduction/NoiseReduction.js  | 42 +++++-----
 test/spec/defaultHtmlSequencerUi.spec.js      | 42 ----------
 test/spec/defaultHtmlStepUi.spec.js           | 61 --------------
 test/spec/helpers/reporter.js                 |  8 --
 .../ui/spec}/defaultHtmlSequencerUi.spec.js   |  4 +-
 .../ui/spec}/defaultHtmlStepUi.spec.js        | 14 +++-
 {spec => test/ui/spec}/helpers/reporter.js    |  0
 test/{ => ui}/spec/insertPreview.spec.js      |  4 +-
 .../spec/intermediateHtmlStepUi.spec.js       |  4 +-
 test/ui/spec/mapHtmlTypes.spec.js             | 24 ++++++
 test/ui/spec/scopeQuery.spec.js               | 81 +++++++++++++++++++
 test/{ => ui}/spec/support/jasmine.json       |  0
 test/{ => ui}/spec/urlHash.spec.js            |  2 +-
 22 files changed, 274 insertions(+), 313 deletions(-)
 create mode 100644 examples/lib/scopeQuery.js
 delete mode 100644 spec/insertPreview.spec.js
 delete mode 100644 spec/intermediateHtmlStepUi.spec.js
 delete mode 100644 spec/support/jasmine.json
 delete mode 100644 spec/urlHash.spec.js
 delete mode 100644 test/spec/defaultHtmlSequencerUi.spec.js
 delete mode 100644 test/spec/defaultHtmlStepUi.spec.js
 delete mode 100644 test/spec/helpers/reporter.js
 rename {spec => test/ui/spec}/defaultHtmlSequencerUi.spec.js (88%)
 rename {spec => test/ui/spec}/defaultHtmlStepUi.spec.js (80%)
 rename {spec => test/ui/spec}/helpers/reporter.js (100%)
 rename test/{ => ui}/spec/insertPreview.spec.js (83%)
 rename test/{ => ui}/spec/intermediateHtmlStepUi.spec.js (71%)
 create mode 100644 test/ui/spec/mapHtmlTypes.spec.js
 create mode 100644 test/ui/spec/scopeQuery.spec.js
 rename test/{ => ui}/spec/support/jasmine.json (100%)
 rename test/{ => ui}/spec/urlHash.spec.js (94%)

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index e3933987..07cd8c99 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -8,18 +8,22 @@
 // output values, step information.
 // See documetation for more details.
 
-var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js');
-var urlHash = require('./urlHash.js');
-var _ = require('lodash');
-var mapHtmlTypes = require('./mapHtmltypes');
+var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
+  urlHash = require('./urlHash.js'),
+  _ = require('lodash'),
+  mapHtmlTypes = require('./mapHtmltypes'),
+  scopeQuery = require('./scopeQuery'),
+  $stepAll,
+  $step;
 
 function DefaultHtmlStepUi(_sequencer, options) {
-  
+
   options = options || {};
   var stepsEl = options.stepsEl || document.querySelector('#steps');
   var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
 
   function onSetup(step, stepOptions) {
+
     if (step.options && step.options.description)
       step.description = step.options.description;
 
@@ -67,8 +71,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
     var parser = new DOMParser();
     step.ui = parser.parseFromString(step.ui, 'text/html');
     step.ui = step.ui.querySelector('div.container-fluid');
-    step.linkElements = step.ui.querySelectorAll('a');
-    step.imgElement = step.ui.querySelector('a img.img-thumbnail');
+
+    $step = scopeQuery.scopeSelector(step.ui);
+    $stepAll = scopeQuery.scopeSelectorAll(step.ui);
+
+    step.linkElements = $stepAll('a');
+    step.imgElement = $step('a img.img-thumbnail')[0];
 
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
       var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -144,12 +152,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
           html +
           '\
                          </div>';
-        step.ui.querySelector('div.details').appendChild(div);
+        $step('div.details').append(div);
       }
-      $(step.ui.querySelector('div.panel-footer')).append(
+      $step('div.panel-footer').append(
         '<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
       );
-      $(step.ui.querySelector('div.panel-footer')).prepend(
+      $step('div.panel-footer').prepend(
         '<button class="pull-right btn btn-default btn-sm insert-step" >\
         <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
         <button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
@@ -159,13 +167,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
     }
 
     if (step.name != 'load-image') {
-      step.ui
-        .querySelector('div.trash-container')
+      $step('div.trash-container')
         .prepend(
           parser.parseFromString(tools, 'text/html').querySelector('div')
         );
-      $(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed', 'remove-notification');});
-      $(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
+
+      $stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
+      $stepAll('.insert-step').on('click', function() { util.insertStep(step.ID); });
       // Insert the step's UI in the right place
       if (stepOptions.index == _sequencer.steps.length) {
         stepsEl.appendChild(step.ui);
@@ -179,19 +187,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
     else {
       $('#load-image').append(step.ui);
     }
-    $(step.ui.querySelector('.toggle')).on('click', () => {
-      $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
-      $(step.ui.querySelectorAll('.cal')).collapse('toggle');
+    $step('.toggle').on('click', () => {
+      $step('.toggleIcon').toggleClass('rotated');
+      $stepAll('.cal').collapse('toggle');
     });
     
     $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
     $(step.imgElement).on('click', (e) => {e.preventDefault(); });
-    $(step.ui.querySelectorAll('#color-picker')).colorpicker();
+    $stepAll('#color-picker').colorpicker();
 
     function saveOptions(e) {
       e.preventDefault();
       if (optionsChanged){
-        $(step.ui.querySelector('div.details'))
+        $step('div.details')
           .find('input,select')
           .each(function(i, input) {
             $(input)
@@ -204,7 +212,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         // modify the url hash
         urlHash.setUrlHashParameter('steps', _sequencer.toString());
         // disable the save button
-        $(step.ui.querySelector('.btn-save')).prop('disabled', true);
+        $step('.btn-save').prop('disabled', true);
         optionsChanged = false;
         changedInputs = 0;
       }
@@ -215,15 +223,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
       changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
       optionsChanged = changedInputs > 0;
 
-      $(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
+      $step('.btn-save').prop('disabled', !optionsChanged);
       return inputChanged;
     }
 
     var
       changedInputs = 0,
       optionsChanged = false;
-    $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
-    $(step.ui.querySelectorAll('.target')).each(function(i, input) {
+    $step('.input-form').on('submit', saveOptions);
+    $stepAll('.target').each(function(i, input) {
       $(input)
         .data('initValue', $(input).val())
         .data('hasChangedBefore', false)
@@ -248,19 +256,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
   }
 
 
-  function onDraw(step) {
-    $(step.ui.querySelector('.load')).show();
-    $(step.ui.querySelector('img')).hide();
-    $(step.ui.querySelectorAll('.load-spin')).show();
+  function onDraw() {
+    $step('.load').show();
+    $step('img').hide();
+    $stepAll('.load-spin').show();
   }
 
   function onComplete(step) {
-    $(step.ui.querySelector('img')).show();
-    $(step.ui.querySelectorAll('.load-spin')).hide();
-    $(step.ui.querySelector('.load')).hide();
+    $step('img').show();
+    $stepAll('.load-spin').hide();
+    $step('.load').hide();
 
     step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
-    var imgthumbnail = step.ui.querySelector('.img-thumbnail');
+    var imgthumbnail = $step('.img-thumbnail');
     for (let index = 0; index < step.linkElements.length; index++) {
       if (step.linkElements[index].contains(imgthumbnail))
         step.linkElements[index].href = step.imgElement.src;
@@ -271,7 +279,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       return output.split('/')[1].split(';')[0];
     }
 
-    $(step.ui.querySelectorAll('.download-btn')).on('click', () => {
+    $stepAll('.download-btn').on('click', () => {
 
       for (let index = 0; index < step.linkElements.length; index++){
         
@@ -294,18 +302,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
       for (var i in inputs) {
         if (step.options[i] !== undefined) {
           if (inputs[i].type.toLowerCase() === 'input')
-            $(step.ui.querySelector('div[name="' + i + '"] input'))
+            $step('div[name="' + i + '"] input')
               .val(step.options[i])
               .data('initValue', step.options[i]);
           if (inputs[i].type.toLowerCase() === 'select')
-            $(step.ui.querySelector('div[name="' + i + '"] select'))
+            $step('div[name="' + i + '"] select')
               .val(step.options[i])
               .data('initValue', step.options[i]);
         }
       }
       for (var i in outputs) {
         if (step[i] !== undefined)
-          $(step.ui.querySelector('div[name="' + i + '"] input'))
+          $step('div[name="' + i + '"] input')
             .val(step[i]);
       }
     }
diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
index ea2a36ee..e3feab25 100644
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -66,20 +66,20 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
 
 
   function selectNewStepUi() {
-    var insertSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertSelect = $step('.insert-step-select');
     var m = insertSelect.val();
-    $(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
-    $(step.ui.querySelector('.insertDiv .add-step-btn')).prop('disabled', false);
+    $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
+    $step('.insertDiv .add-step-btn').prop('disabled', false);
   }
     
     
   var toggleDiv = function(callback = function(){}){
-    $(step.ui.querySelector('.insertDiv')).collapse('toggle');
-    if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
-      $(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
+    $step('.insertDiv').collapse('toggle');
+    if ($step('.insert-text').css('display') != 'none'){
+      $step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});
     }
     else {
-      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
+      $step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
     }
   };
 
@@ -89,7 +89,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
     var addStepUI = stepUI();
     addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
 
-    if ($(step.ui.querySelector('.insertDiv')).length > 0){
+    if ($step('.insertDiv').length > 0){
       toggleDiv();
     }
     else {
@@ -103,9 +103,9 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
       });
     }
 
-    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
+    $step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
     
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
     insertStepSelect.html('');
     // Add modules to the insertStep dropdown
     for (var m in modulesInfo) {
@@ -117,26 +117,26 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
     insertStepSelect.selectize({
       sortField: 'text'
     });
-    $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
+    $step('.inserDiv .add-step-btn').prop('disabled', true);
     
     insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
-    $(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
+    $step('.insertDiv .radio-group .radio').on('click', function () {
       $(this).parent().find('.radio').removeClass('selected');
       $(this).addClass('selected');
       newStep = $(this).attr('data-value');
-      $(step.ui.querySelector('.insert-step-select')).val(newStep);
+      $step('.insert-step-select').val(newStep);
       selectNewStepUi();
       insert(id);
       $(this).removeClass('selected');
     });
     insertStepSelect.on('change', selectNewStepUi);
-    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
-  };
+    $step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
+  }
 
   function insert(id) {
 
     options = options || {};
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
     if (insertStepSelect.val() == 'none') return;
 
     var newStepName = insertStepSelect.val();
diff --git a/examples/lib/scopeQuery.js b/examples/lib/scopeQuery.js
new file mode 100644
index 00000000..bf00cf3f
--- /dev/null
+++ b/examples/lib/scopeQuery.js
@@ -0,0 +1,60 @@
+/**
+ * @method $scope
+ * @param {"DOMNode"} scope A DOM Node as the scope 
+ */
+function $scope(scope) {
+  return function(queryString){
+    var element = $(scope.querySelector(queryString));
+
+    element.elem = function(queryString){
+      return new $scope(scope)(queryString);
+    }
+    element.elemAll = function(queryString){
+      return new $scopeAll(scope)(queryString);
+    }
+
+    return element;
+  }
+}
+
+/**
+ * @method $scopeAll
+ * @param {"DOMNode"} scope A DOM Node as the scope 
+ */
+function $scopeAll(scope){
+  return function(queryString){
+    var element = $(scope.querySelectorAll(queryString));
+
+    element.elem = function(queryString){
+      return new $scope(scope)(queryString);
+    }
+    element.elemAll = function(queryString){
+      return new $scopeAll(scope)(queryString);
+    }
+
+    return element;
+  }
+}
+
+/**
+ * @method scopeSelector
+ * @description A scoped jQuery selector
+ * @param {"DOMNode"} scope DOM Node as the scope 
+ */
+function scopeSelector(scope){
+  return $scope(scope);
+}
+
+/**
+ * @method scopeSelectorAll
+ * @description A scoped jQuery multiple selector
+ * @param {"DOMNode} scope DOM Node as the scope 
+ */
+function scopeSelectorAll(scope){
+  return $scopeAll(scope);
+}
+
+module.exports = {
+  scopeSelector,
+  scopeSelectorAll
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2fd8b11a..5b5c28dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3581,8 +3581,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3625,8 +3624,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3637,8 +3635,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3755,8 +3752,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3768,7 +3764,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3791,14 +3786,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3817,7 +3810,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3898,8 +3890,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3911,7 +3902,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3997,8 +3987,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4034,7 +4023,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4054,7 +4042,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4098,14 +4085,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 9a08243c..694f0d2a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
     "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec; node test/core/sequencer/benchmark.js;  browserify test/core/sequencer/meta-modules.js test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js  test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js | tape-run --render=\"tap-spec\"",
-    "test-ui": "node node_modules/jasmine/bin/jasmine test/spec/*.js",
+    "test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
     "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
     "start": "grunt serve"
   },
diff --git a/spec/insertPreview.spec.js b/spec/insertPreview.spec.js
deleted file mode 100644
index 0c97dccd..00000000
--- a/spec/insertPreview.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-describe('Preview UI HTML', function() {
-
-  var InsertPreview = require('../examples/lib/insertPreview');
-  var sequencer = require('../src/ImageSequencer')();
-  var insertPreview;
-  var options = { brightness: 50 };
-
-  beforeEach(()=>{
-    insertPreview = InsertPreview;
-
-    spyOn(insertPreview, 'generatePreview');
-    spyOn(insertPreview, 'updatePreviews');
-
-    insertPreview.generatePreview('brightness', options, 'src', 'selector');
-    insertPreview.updatePreviews('src', 'selector');
-  });
-
-  it('generate preview ui', function() {
-    expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness', options, 'src', 'selector');
-  });
-
-  it('update preview ui', function() {
-    expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src', 'selector');
-  });
-
-});
\ No newline at end of file
diff --git a/spec/intermediateHtmlStepUi.spec.js b/spec/intermediateHtmlStepUi.spec.js
deleted file mode 100644
index 2ef71b06..00000000
--- a/spec/intermediateHtmlStepUi.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-describe('Intermediate step HTML', function() {
-
-  var IntermediateHtmlStepUi = require('../examples/lib/intermediateHtmlStepUi');
-  var sequencer = require('../src/ImageSequencer')();
-  var intermediateHtmlStepUi;
-
-  beforeEach(()=>{
-    intermediateHtmlStepUi = new IntermediateHtmlStepUi(sequencer);
-
-    spyOn(intermediateHtmlStepUi, 'insertStep');
-
-    intermediateHtmlStepUi.insertStep();
-  });
-
-  it('insert step ui', function() {
-    expect(intermediateHtmlStepUi.insertStep).toHaveBeenCalled();
-  });
-
-});
\ No newline at end of file
diff --git a/spec/support/jasmine.json b/spec/support/jasmine.json
deleted file mode 100644
index 370fc446..00000000
--- a/spec/support/jasmine.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "spec_dir": "spec",
-  "spec_files": [
-    "**/*[sS]pec.js"
-  ],
-  "helpers": [
-    "helpers/**/*.js"
-  ],
-  "stopSpecOnExpectationFailure": false,
-  "random": true
-}
diff --git a/spec/urlHash.spec.js b/spec/urlHash.spec.js
deleted file mode 100644
index 9feee15b..00000000
--- a/spec/urlHash.spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-describe('URL manipulation methods', function() {
-
-  var UrlHash = require('../examples/lib/urlHash');
-  var urlHash;
-  var params = {
-    module: 'brightness',
-    brightness: 50
-  };
-
-  beforeEach(()=>{
-    urlHash = UrlHash;
-
-    spyOn(urlHash, 'getUrlHashParameters');
-    spyOn(urlHash, 'getUrlHashParameter');
-    spyOn(urlHash, 'setUrlHashParameters');
-    spyOn(urlHash, 'setUrlHashParameter');
-
-    urlHash.getUrlHashParameters();
-    urlHash.getUrlHashParameter('module');
-    urlHash.setUrlHashParameters(params);
-    urlHash.setUrlHashParameter('module', 'brightness');
-  });
-
-  it('gets url hash params from window hash', function() {
-    expect(urlHash.getUrlHashParameters).toHaveBeenCalled();
-  });
-
-  it('gets url hash param from params object', function() {
-    expect(urlHash.getUrlHashParameter).toHaveBeenCalledWith('module');
-  });
-
-  it('accepts param object and sets url hash params', function() {
-    expect(urlHash.setUrlHashParameters).toHaveBeenCalledWith(params);
-  });
-
-  it('accepts param key-value pair and sets url hash params', function() {
-    expect(urlHash.setUrlHashParameter).toHaveBeenCalledWith('module', 'brightness');
-  });
-
-});
\ No newline at end of file
diff --git a/src/modules/NoiseReduction/NoiseReduction.js b/src/modules/NoiseReduction/NoiseReduction.js
index 82f037e1..8a2d5b82 100644
--- a/src/modules/NoiseReduction/NoiseReduction.js
+++ b/src/modules/NoiseReduction/NoiseReduction.js
@@ -6,7 +6,7 @@ module.exports = function Noise(pixels, method) {
 
     for(let y = 0; y < pixels.shape[1]; y++){
       for(let x = 0; x < pixels.shape[0]; x++){
-        let i = 0, k = 0, windowr = [],windowg = [], windowb = [];
+        let i = 0, k = 0, windowr = [], windowg = [], windowb = [];
 
         while( k <= 8){
           let newX = x + neighbourX[k], newY = y + neighbourY[k];
@@ -14,9 +14,9 @@ module.exports = function Noise(pixels, method) {
           if( newX >= 0 && newX < pixels.shape[0])
           {
             if( newY >= 0 && newY < pixels.shape[1]){
-              windowr[i] = pixels.get((newX),(newY),0);
-              windowg[i] = pixels.get((newX),(newY),1);
-              windowb[i] = pixels.get((newX),(newY),2);
+              windowr[i] = pixels.get((newX), (newY), 0);
+              windowg[i] = pixels.get((newX), (newY), 1);
+              windowb[i] = pixels.get((newX), (newY), 2);
               i++;
             }
           }
@@ -27,22 +27,22 @@ module.exports = function Noise(pixels, method) {
         windowg.sort();
         windowb.sort();
         
-        if(i%2 == 0)
+        if(i % 2 == 0)
         {
-          let value = windowr[i/2] + windowr[(i/2)-1];
-          pixels.set(x,y,0,value);
+          let value = windowr[i / 2] + windowr[(i / 2) - 1];
+          pixels.set(x, y, 0, value);
 
-          value = windowg[i/2] + windowg[(i/2)-1];
-          pixels.set(x,y,1,value);
+          value = windowg[i / 2] + windowg[(i / 2) - 1];
+          pixels.set(x, y, 1, value);
 
-          value = windowb[i/2] + windowb[(i/2)-1];
-          pixels.set(x,y,2,value);
+          value = windowb[i / 2] + windowb[(i / 2) - 1];
+          pixels.set(x, y, 2, value);
 
         }
         else {
-          pixels.set(x, y, 0, windowr[Math.floor(i/2)]);
-          pixels.set(x, y, 1, windowg[Math.floor(i/2)]);
-          pixels.set(x, y, 2, windowb[Math.floor(i/2)]);
+          pixels.set(x, y, 0, windowr[Math.floor(i / 2)]);
+          pixels.set(x, y, 1, windowg[Math.floor(i / 2)]);
+          pixels.set(x, y, 2, windowb[Math.floor(i / 2)]);
 
         }
       }
@@ -52,7 +52,7 @@ module.exports = function Noise(pixels, method) {
     
     for(let y = 0; y < pixels.shape[1]; y++){
       for(let x = 0; x < pixels.shape[0]; x++){
-        let i = 0, k = 0, sumR=0, sumG = 0, sumB =0;
+        let i = 0, k = 0, sumR = 0, sumG = 0, sumB = 0;
 
         while( k <= 8){
           let newX = x + neighbourX[k], newY = y + neighbourY[k];
@@ -60,18 +60,18 @@ module.exports = function Noise(pixels, method) {
           if( newX >= 0 && newX < pixels.shape[0])
           {
             if( newY >= 0 && newY < pixels.shape[1]){
-              sumR += pixels.get(newX,newY,0);
-              sumG += pixels.get(newX,newY,1);
-              sumB += pixels.get(newX,newY,2);
+              sumR += pixels.get(newX, newY, 0);
+              sumG += pixels.get(newX, newY, 1);
+              sumB += pixels.get(newX, newY, 2);
               i++;
             }
           }
           k++;
         }
 
-        pixels.set(x, y, 0, sumR/i);
-        pixels.set(x, y, 1, sumG/i);
-        pixels.set(x, y, 2, sumB/i);
+        pixels.set(x, y, 0, sumR / i);
+        pixels.set(x, y, 1, sumG / i);
+        pixels.set(x, y, 2, sumB / i);
 
       }
     }
diff --git a/test/spec/defaultHtmlSequencerUi.spec.js b/test/spec/defaultHtmlSequencerUi.spec.js
deleted file mode 100644
index 2c5e5b6b..00000000
--- a/test/spec/defaultHtmlSequencerUi.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-describe('Default sequencer HTML', function() {
-
-  var DefaultHtmlSequencerUi = require('../../examples/lib/defaultHtmlSequencerUi');
-  var sequencer = require('../../src/ImageSequencer')();
-  var defaultHtmlSequencerUi;
-
-  beforeEach(()=>{
-    defaultHtmlSequencerUi = new DefaultHtmlSequencerUi(sequencer);
-
-    spyOn(defaultHtmlSequencerUi, 'onLoad');
-    spyOn(defaultHtmlSequencerUi, 'selectNewStepUi');
-    spyOn(defaultHtmlSequencerUi, 'removeStepUi');
-    spyOn(defaultHtmlSequencerUi, 'addStepUi');
-    spyOn(defaultHtmlSequencerUi, 'importStepsFromUrlHash');
-
-    defaultHtmlSequencerUi.onLoad();
-    defaultHtmlSequencerUi.selectNewStepUi();
-    defaultHtmlSequencerUi.addStepUi();
-    defaultHtmlSequencerUi.removeStepUi();
-    defaultHtmlSequencerUi.importStepsFromUrlHash();
-  });
-
-  it('load default ui', function() {
-    expect(defaultHtmlSequencerUi.onLoad).toHaveBeenCalled();
-  });
-
-  it('select step ui', function() {
-    expect(defaultHtmlSequencerUi.selectNewStepUi).toHaveBeenCalled();
-  });
-
-  it('add step ui', function() {
-    expect(defaultHtmlSequencerUi.addStepUi).toHaveBeenCalled();
-  });
-
-  it('remove step ui', function() {
-    expect(defaultHtmlSequencerUi.removeStepUi).toHaveBeenCalled();
-  });
-
-  it('import options from url', function() {
-    expect(defaultHtmlSequencerUi.importStepsFromUrlHash).toHaveBeenCalled();
-  });
-});
\ No newline at end of file
diff --git a/test/spec/defaultHtmlStepUi.spec.js b/test/spec/defaultHtmlStepUi.spec.js
deleted file mode 100644
index fc5c6951..00000000
--- a/test/spec/defaultHtmlStepUi.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-var { JSDOM } = require('jsdom');
-var DOM = new JSDOM('<body></body>');
-
-global.document = DOM.window.document;
-
-describe('Sequencer step HTML', function() {
-
-  var DefaultHtmlStepUi = require('../../examples/lib/defaultHtmlStepUi');
-  var sequencer = require('../../src/ImageSequencer')();
-  var defaultHtmlStepUi;
-  var step = 'brightness';
-  var options = {
-    name: 'Brightness',
-    description: 'Change the brightness of the image by given percent value'
-  };
-  // options = JSON.parse(options)
-
-  beforeEach(()=>{
-    defaultHtmlStepUi = new DefaultHtmlStepUi(sequencer);
-
-    spyOn(defaultHtmlStepUi, 'getPreview');
-    spyOn(defaultHtmlStepUi, 'onSetup');
-    spyOn(defaultHtmlStepUi, 'onComplete');
-    spyOn(defaultHtmlStepUi, 'onDraw');
-    spyOn(defaultHtmlStepUi, 'onRemove');
-    spyOn(defaultHtmlStepUi, 'notify');
-
-    defaultHtmlStepUi.getPreview();
-    defaultHtmlStepUi.onSetup(step, options);
-    defaultHtmlStepUi.onComplete(step);
-    defaultHtmlStepUi.onDraw(step);
-    defaultHtmlStepUi.onRemove(step);
-    defaultHtmlStepUi.notify('Step removed', 'remove-notification');
-  });
-
-
-  it('result preview ui', function() {
-    expect(defaultHtmlStepUi.getPreview).toHaveBeenCalled();
-  });
-
-  it('load initial setup ui', function() {
-    expect(defaultHtmlStepUi.onSetup).toHaveBeenCalledWith(step, options);
-  });
-
-  it('load completion ui', function() {
-    expect(defaultHtmlStepUi.onComplete).toHaveBeenCalledWith(step);
-  });
-
-  it('draw step ui', function() {
-    expect(defaultHtmlStepUi.onDraw).toHaveBeenCalledWith(step);
-  });
-
-  it('remove step ui', function() {
-    expect(defaultHtmlStepUi.onRemove).toHaveBeenCalledWith(step);
-  });
-
-  it('notification ui', function() {
-    expect(defaultHtmlStepUi.notify).toHaveBeenCalledWith('Step removed', 'remove-notification');
-  });
-
-});
\ No newline at end of file
diff --git a/test/spec/helpers/reporter.js b/test/spec/helpers/reporter.js
deleted file mode 100644
index 77d907fe..00000000
--- a/test/spec/helpers/reporter.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
-
-jasmine.getEnv().clearReporters();               // remove default reporter logs
-jasmine.getEnv().addReporter(new SpecReporter({  // add jasmine-spec-reporter
-  spec: {
-    displayPending: true
-  }
-}));
\ No newline at end of file
diff --git a/spec/defaultHtmlSequencerUi.spec.js b/test/ui/spec/defaultHtmlSequencerUi.spec.js
similarity index 88%
rename from spec/defaultHtmlSequencerUi.spec.js
rename to test/ui/spec/defaultHtmlSequencerUi.spec.js
index 868fbee9..9504285e 100644
--- a/spec/defaultHtmlSequencerUi.spec.js
+++ b/test/ui/spec/defaultHtmlSequencerUi.spec.js
@@ -1,7 +1,7 @@
 describe('Default sequencer HTML', function() {
 
-  var DefaultHtmlSequencerUi = require('../examples/lib/defaultHtmlSequencerUi');
-  var sequencer = require('../src/ImageSequencer')();
+  var DefaultHtmlSequencerUi = require('../../../examples/lib/defaultHtmlSequencerUi');
+  var sequencer = require('../../../src/ImageSequencer')();
   var defaultHtmlSequencerUi;
 
   beforeEach(()=>{
diff --git a/spec/defaultHtmlStepUi.spec.js b/test/ui/spec/defaultHtmlStepUi.spec.js
similarity index 80%
rename from spec/defaultHtmlStepUi.spec.js
rename to test/ui/spec/defaultHtmlStepUi.spec.js
index bf9c3cff..75abe310 100644
--- a/spec/defaultHtmlStepUi.spec.js
+++ b/test/ui/spec/defaultHtmlStepUi.spec.js
@@ -5,8 +5,8 @@ global.document = DOM.window.document;
 
 describe('Sequencer step HTML', function() {
 
-  var DefaultHtmlStepUi = require('../examples/lib/defaultHtmlStepUi');
-  var sequencer = require('../src/ImageSequencer')();
+  var DefaultHtmlStepUi = require('../../../examples/lib/defaultHtmlStepUi');
+  var sequencer = require('../../../src/ImageSequencer')();
   var defaultHtmlStepUi;
   var step = 'brightness';
   var options = {
@@ -15,6 +15,16 @@ describe('Sequencer step HTML', function() {
   };
   // options = JSON.parse(options)
 
+  beforeAll(() => {
+    const { JSDOM } = require('jsdom');
+    var { window } = new JSDOM();
+
+    const { document } = window;
+    global.window = window;
+    global.document = document;
+    const $ = global.jQuery = global.$ = require('jquery');
+  });
+
   beforeEach(()=>{
     defaultHtmlStepUi = new DefaultHtmlStepUi(sequencer);
 
diff --git a/spec/helpers/reporter.js b/test/ui/spec/helpers/reporter.js
similarity index 100%
rename from spec/helpers/reporter.js
rename to test/ui/spec/helpers/reporter.js
diff --git a/test/spec/insertPreview.spec.js b/test/ui/spec/insertPreview.spec.js
similarity index 83%
rename from test/spec/insertPreview.spec.js
rename to test/ui/spec/insertPreview.spec.js
index 5e0fe63e..27ba2171 100644
--- a/test/spec/insertPreview.spec.js
+++ b/test/ui/spec/insertPreview.spec.js
@@ -1,7 +1,7 @@
 describe('Preview UI HTML', function() {
 
-  var InsertPreview = require('../../examples/lib/insertPreview');
-  var sequencer = require('../../src/ImageSequencer')();
+  var InsertPreview = require('../../../examples/lib/insertPreview');
+  var sequencer = require('../../../src/ImageSequencer')();
   var insertPreview;
   var options = { brightness: 50 };
 
diff --git a/test/spec/intermediateHtmlStepUi.spec.js b/test/ui/spec/intermediateHtmlStepUi.spec.js
similarity index 71%
rename from test/spec/intermediateHtmlStepUi.spec.js
rename to test/ui/spec/intermediateHtmlStepUi.spec.js
index 354d9368..9a95a65e 100644
--- a/test/spec/intermediateHtmlStepUi.spec.js
+++ b/test/ui/spec/intermediateHtmlStepUi.spec.js
@@ -1,7 +1,7 @@
 describe('Intermediate step HTML', function() {
 
-  var IntermediateHtmlStepUi = require('../../examples/lib/intermediateHtmlStepUi');
-  var sequencer = require('../../src/ImageSequencer')();
+  var IntermediateHtmlStepUi = require('../../../examples/lib/intermediateHtmlStepUi');
+  var sequencer = require('../../../src/ImageSequencer')();
   var intermediateHtmlStepUi;
 
   beforeEach(()=>{
diff --git a/test/ui/spec/mapHtmlTypes.spec.js b/test/ui/spec/mapHtmlTypes.spec.js
new file mode 100644
index 00000000..f413b3d2
--- /dev/null
+++ b/test/ui/spec/mapHtmlTypes.spec.js
@@ -0,0 +1,24 @@
+describe('HTML Types Mapping Function', function() {
+
+  var mapHtmlTypes = require('../../../examples/lib/mapHtmltypes');
+
+  it('maps range and number types', function() {
+    expect(mapHtmlTypes({type: 'percentage'})).toEqual({type: 'number'});
+
+    expect(mapHtmlTypes({type: 'integer'})).toEqual({type: 'number'});
+    expect(mapHtmlTypes({type: 'integer', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100});
+
+    expect(mapHtmlTypes({type: 'float'})).toEqual({type: 'text'});
+    expect(mapHtmlTypes({type: 'float', min: 20, max: 100})).toEqual({type: 'range', min: 20, max: 100});
+  });
+
+  it('maps text type', function() {
+    expect(mapHtmlTypes({type: 'string'})).toEqual({type: 'text'});
+    expect(mapHtmlTypes({type: 'anything'})).toEqual({type: 'text'});
+  });
+
+  it('maps select type', function() {
+    expect(mapHtmlTypes({type: 'select'})).toEqual({type: 'select'});
+  });
+
+});
\ No newline at end of file
diff --git a/test/ui/spec/scopeQuery.spec.js b/test/ui/spec/scopeQuery.spec.js
new file mode 100644
index 00000000..04ab5050
--- /dev/null
+++ b/test/ui/spec/scopeQuery.spec.js
@@ -0,0 +1,81 @@
+const scopeQuery = require('../../../examples/lib/scopeQuery');
+
+describe('scopeQuery Method', function() {
+
+  beforeAll(() => {
+    const { JSDOM } = require('jsdom');
+
+    var { window } = new JSDOM(`
+      <body>
+        <div id="scope1">
+          <div class="child" id="child1">Child1</div>
+          <div class="child" id="child2">Child2</div>
+          <div class="child" id="child3">Child3</div>
+          <div class="child" id="child4">Child4</div>
+          <div class="child" id="child5">Child5</div>
+          <div class="child" id="child6">Child6</div>
+        </div>
+
+        <div id="scope2">
+          <div class="child" id="child1">Child1Scope2</div>
+          <div class="child" id="child2">Child2Scope2</div>
+          <div class="child" id="child3">Child3Scope2</div>
+          <div class="child" id="child4">Child4Scope2</div>
+          <div class="child" id="child5">Child5Scope2</div>
+        </div>
+      </body>`);
+
+    const { document } = window;
+    global.window = window;
+    global.document = document;
+    const $ = global.jQuery = global.$ = require('jquery');
+  });
+  
+  
+  it('scope 1 querySelector', function() {
+
+    const $scope1 = scopeQuery.scopeSelector(document.querySelector('#scope1'));
+    const $scope1All = scopeQuery.scopeSelectorAll(document.querySelector('#scope1'));
+
+    expect($scope1('.child').length).toBe(1);
+    expect($scope1All('.child').length).toBe(6);
+
+    expect($scope1('#child1').text()).toBe('Child1');
+    expect($scope1('#child2').text()).toBe('Child2');
+
+    expect($scope1All('#child1').text()).toBe('Child1');
+    expect($scope1All('#child2').text()).toBe('Child2');
+
+    expect($scope1().elem('.child').length).toBe(1);
+    expect($scope1().elemAll('.child').length).toBe(6);
+
+    expect($scope1All().elem('.child').length).toBe(1);
+    expect($scope1All().elemAll('.child').length).toBe(6);
+  });
+
+  it('scope 2 querySelector', function() {
+
+    const $scope2 = scopeQuery.scopeSelector(document.querySelector('#scope2'));
+    const $scope2All = scopeQuery.scopeSelectorAll(document.querySelector('#scope2'));
+
+    expect($scope2('.child').length).toBe(1);
+    expect($scope2All('.child').length).toBe(5);
+
+    expect($scope2('#child1').text()).toBe('Child1Scope2');
+    expect($scope2('#child2').text()).toBe('Child2Scope2');
+
+    expect($scope2All('#child1').text()).toBe('Child1Scope2');
+    expect($scope2All('#child2').text()).toBe('Child2Scope2');
+
+    expect($scope2().elem('.child').length).toBe(1);
+    expect($scope2().elemAll('.child').length).toBe(5);
+
+    expect($scope2All().elem('.child').length).toBe(1);
+    expect($scope2All().elemAll('.child').length).toBe(5);
+  });
+
+});
+
+global.document = null;
+global.$ = null;
+DOM = null;
\ No newline at end of file
diff --git a/test/spec/support/jasmine.json b/test/ui/spec/support/jasmine.json
similarity index 100%
rename from test/spec/support/jasmine.json
rename to test/ui/spec/support/jasmine.json
diff --git a/test/spec/urlHash.spec.js b/test/ui/spec/urlHash.spec.js
similarity index 94%
rename from test/spec/urlHash.spec.js
rename to test/ui/spec/urlHash.spec.js
index 6cffa8d0..404d5ce7 100644
--- a/test/spec/urlHash.spec.js
+++ b/test/ui/spec/urlHash.spec.js
@@ -1,6 +1,6 @@
 describe('URL manipulation methods', function() {
 
-  var UrlHash = require('../../examples/lib/urlHash');
+  var UrlHash = require('../../../examples/lib/urlHash');
   var urlHash;
   var params = {
     module: 'brightness',