feat:WB1419 .7 unit tests

gulp/browserSyncManager.js

@@ -1,13 +1,23 @@
 var browserSync = require('browser-sync');
 
+var bsyncHandle = null;
 
 module.exports = {
     closeServer: closeServer,
     reloadServer: reloadServer,
     streamToServer: streamToServer,
     startServer: startServer,
+    getBSyncHandle: getBSyncHandle
 };
 
+function getBSyncHandle() {
+    return bsyncHandle;
+}
+
+function initBSyncHandle(label) {
+    return bsyncHandle = ((label ? browserSync.create(label) : browserSync.create()));
+}
+
 function closeServer(label) {
    browserSync.get(label).exit();
 }
@@ -25,9 +35,9 @@ function startServer(args) {
     var port = args.port;
     var baseDir = args.baseDir;
     var middleware = args.middleware;
-    var open = args.open;
+    var open = args.open || false;  // Callee, '08-servers.js' does not set this to a value so expect it to be undefined
 
-    var server = browserSync.create(label);
+    initBSyncHandle(label);
     var conf = {
         port: port,
         server: {
@@ -38,6 +48,6 @@ function startServer(args) {
     if(middleware) {
         conf.middleware = args.middleware;
     }
-    server.init(conf);
+    bsyncHandle.init(conf);
 
 }

gulp/tasks/04-custom-css.js

@@ -8,24 +8,32 @@ let concat = require("gulp-concat");
 let debug = require('gulp-debug');
 var wrap = require("gulp-wrap");
 var glob = require('glob');
+let browserSyncManager = require('../browserSyncManager');
 
 let buildParams = config.buildParams;
 
 
 
 gulp.task('watch-css', gulp.series('select-view', (cb) => {
-    gulp.watch([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()], {interval: 1000, usePolling: true}, gulp.series('custom-css'));
+    var filesWatchGlob = [buildParams.customCssMainPath(), buildParams.customNpmCssPath()];
+    var excludesFilesGlob = ['!'+buildParams.customCssPath()]
+    gulp.watch(filesWatchGlob.concat(excludesFilesGlob), {interval: 3000, usePolling: true}, gulp.series('custom-css'));
     cb();
-}));
+})); //  
 
 
 
 
 gulp.task('custom-css', gulp.series('select-view', () => {
-
-    return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
-        .pipe(concat(buildParams.customCssFile))
-        .pipe(gulp.dest(buildParams.viewCssDir()));
-
+    if (browserSyncManager.getBSyncHandle() === null) {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()));
+    } else {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()))
+            .pipe(browserSyncManager.getBSyncHandle().stream());
+    }
 
 }));

karma.conf.js

@@ -0,0 +1,74 @@
+// Karma configuration
+// Generated on Fri Oct 13 2023 22:07:08 GMT+0100 (British Summer Time)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine', 'requirejs'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'tests/angular.min.js',
+      'tests/angular-mocks.js',
+      // {pattern: 'primo-explore/custom/IAMS_VU2/js/*.js', included: false},
+      {pattern: 'gulp/config.js', included: true},
+      {pattern: 'tests/automated/**/*Spec.js', included: false},
+      'tests/test-main.js'
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_ERROR,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}

package.json

@@ -1,8 +1,23 @@
 {
   "name": "primo-explore-devenv",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "The Exlibris Primo Open Discovery Framework",
   "author": "noamamit92",
+  "engines": {
+    "node": ">=13.14.0 < 15"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 2%"
+  ],
+  "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv",
+  "dependencies": {
+    "requirejs": "2.1.0"
+  },
+  "scripts": {
+    "testrunnerstart": "node ./node_modules/karma/bin/karma start karma.conf.js",
+    "testf-e": "node ./node_modules/karma/bin/karma run"
+  },
   "devDependencies": {
     "babel-core": "6.26.3",
     "babel-plugin-angularjs-annotate": "0.8.2",
@@ -13,7 +28,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "babelify": "8.0.0",
     "bluebird": "3.5.4",
-    "browser-sync": "2.9.9",
+    "browser-sync": "^2.23.7",
     "browserify": "16.2.3",
     "camel-case": "^3.0.0",
     "colors": "^1.3.3",
@@ -42,11 +57,18 @@
     "gulp-streamify": "1.0.2",
     "gulp-template": "5.0.0",
     "gulp-uglify": "3.0.2",
+    "gulp-using": "^0.1.1",
     "gulp-util": "3.0.8",
     "gulp-wrap": "^0.15.0",
     "gulp-zip": "4.2.0",
     "gulp4-run-sequence": "^1.0.1",
     "http-response-object": "3.0.2",
+    "jasmine-core": "3.5.0",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-firefox-launcher": "1.1.0",
+    "karma-jasmine": "1.1.1",
+    "karma-requirejs": "1.1.0",
     "listdirs": "3.1.1",
     "lodash": "4.17.19",
     "merge-stream": "1.0.1",
@@ -63,13 +85,5 @@
     "tar-fs": "2.0.0",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0"
-  },
-  "engines": {
-    "node": ">=16.17.0"
-  },
-  "browserslist": [
-    "last 2 version",
-    "> 2%"
-  ],
-  "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv"
-}
+  }
+}

primo-explore/custom/.gitignore

@@ -1,8 +1,15 @@
 *.*
 # Add entries to prefixed with '!' to unhide your view files:
 # Eg:
-# !*/css/**
-# !*/html/**
-# !*/img/**
-# !*/js/**
+#!*/css/**
+#!*/js/**
+#!*/html/**
+#!*/img/**
+!*/css/**
+# The custom reskining files are now Git-visible from the above....BUT...
+# the end-product of the build itself css/custom1.css does not need to be
+# tracked hence the below
+**/css/custom1.css
+**/js/custom.js
+
 

primo-explore/custom/IAMS_VU2/css/README.md

@@ -0,0 +1,129 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+##css documentation
+
+- Primo uses Angular Directives massively in this project
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework  :
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+    <header layout="column" layout-fill class="topbar-wrapper">
+       <prm-topbar>
+       </prm-topbar>
+
+   <prm-search-bar (search-event)="prmSearch.onSearchBarSearchEvent()">
+   </prm-search-bar>
+
+          <md-progress-linear class="header-progress-bar animation-scale-up-down" md-mode="indeterminate" ng-show="prmSearch.searchInProgress">
+          </md-progress-linear>
+
+   </header>
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+- When defining css rules it is important to understand the css cascading/specifity logic:
+
+> http://www.w3.org/TR/css3-cascade/
+
+> https://specificity.keegan.st/
+
+
+
+
+- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent
+to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes
+
+- For the example above we can define selectors:
+
+```
+prm-topbar input {....}
+prm-topbar.md-primoExplore-theme input {....}
+```
+- Primo is using a theme inside angular-material to define a palette of colors see:
+> https://material.angularjs.org/latest/Theming/01_introduction
+
+
+- This means that you will often encounter a class "md-primoExplore-theme" attached to  elements.
+
+
+
+##Recipes/Examples:
+
+
+# css Recipe 1 - Color Scheme
+
+-  Open a new command line window
+
+-  cd to the project base directory (C:\**\**\primo-explore-devenv)
+-  Run `gulp css-colors` to save the OTB css file
+-  Run `css-color-extractor primo-explore/tmp/app.css --format=css  > primo-explore/tmp/colors.css` to extract the color definitions from the OTB css file and copy the css rules to primo-explore/custom/css/custom1.css
+
+
+Run the following steps repeatedly until you are satisfied with the result
+
+
+-  Choose a color from the interface (using your browsers' dev tools or extensions such as colorzilla)
+
+
+-  Choose the new color from your library color scheme
+-  Replace all values in the custom1.css file
+-  Save and refresh your browser
+
+
+
+# css Recipe 2 - Moving the Facets to the Left
+
+
+-  Select the parent container containing the search result and the facets
+-  Copy the selector definition using your browsers' dev tools
+-  Define the container as
+```
+display:flex;
+flex-flow:row-reverse;
+```
+
+
+- complete css definition:
+```
+prm-search > md-content.md-primoExplore-theme .main {
+    display: -webkit-flex; !* Safari *!
+    -webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *!
+    display: flex;
+    flex-flow: row-reverse wrap;
+
+}
+.screen-gt-sm .sidebar{
+    webkit-flex: 0 0 15%;
+    flex: 0 0 15%;
+}
+```
+-  Save and refresh your browser
+
+
+
+
+
+
+
+
+