Update dependencies for modern node and python

- Added 'stestr' Python dependency
- Updated Node package.json
- Migrated from global Gulp dependency to npm scripts
- Added 'node-sass' to fix 'gulp-sass' deprecation
- Added package.json 'override' feature for gulp dependency 'graceful-fs'
- Updated installation and usage documentation

Change-Id: Ie8cfc9f976fec0a840b1d9b0248976321cef83c7
Signed-off-by: Austin Nazworth <austin.nazworth@gmail.com>

.gitignore

@@ -7,6 +7,7 @@ app/js/templates.js
 app/data
 *.py[cod]
 karma.subunit
+package-lock.json
 
 # C extensions
 *.so

README.rst

@@ -22,11 +22,9 @@ Installation
 ============
 Installation - Frontend
 -----------------------
-Installation of the frontend requires Node.js and Gulp. On Ubuntu::
+Installation of the frontend requires Node.js (>=16.14.0) and Gulp. On Ubuntu::
 
-    sudo apt-get install nodejs
+    sudo snap install node --classic --channel=16
-    sudo apt-get install npm
-    sudo npm install -g gulp
 
 Then, install the Node modules by running, from the project directory::
 
@@ -45,7 +43,7 @@ Usage - Development
 -------------------
 A development server can be run as follows::
 
-    gulp dev
+    npm run dev
 
 This will open a web browser and reload code automatically as it changes on the
 filesystem.
@@ -64,7 +62,7 @@ Usage - Production
 ------------------
 The production application can be build using::
 
-    gulp prod
+    npm run prod
 
 This will automatically build portable html/javascript and python
 utilities into ``dist/stackviz-VERSION.tar.gz``.
@@ -98,7 +96,7 @@ Data should be written to :code:`stackviz-html/data/` using
 Testing
 =======
 * Python tests: :code:`tox -e py36`
-* JavaScript unit tests: :code:`gulp unit`
+* JavaScript unit tests: :code:`npm run test`
 * JavaScript E2E tests: :code:`gulp e2e`
 
 Manuals & Developer Docs

doc/source/installation.rst

@@ -3,10 +3,9 @@ Installation
 
 Installation - Frontend
 -----------------------
-Installation of the frontend requires Node.js and Gulp. On Ubuntu::
+Installation of the frontend requires Node.js (>=16.14.0) and Gulp. On Ubuntu::
 
-    sudo apt-get install nodejs npm nodejs-legacy
+    sudo snap install node --classic --channel=16
-    sudo npm install -g gulp
 
 Then, install the Node modules by running, from the project directory::
 

gulp/tasks/styles.js

@@ -2,7 +2,7 @@
 
 var config       = require('../config');
 var gulp         = require('gulp');
-var sass         = require('gulp-sass');
+var sass         = require('gulp-sass')(require('node-sass'));
 var gulpif       = require('gulp-if');
 var handleErrors = require('../util/handleErrors');
 var browserSync  = require('browser-sync');

gulp/tasks/unit.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var path = require('path');
-
-var gulp   = require('gulp');
-var karma  = require('karma');
-var config = require('../config');
-
-gulp.task('unit', ['views'], function(done) {
-  new karma.Server({
-    configFile: path.join(process.cwd(), config.test.karma)
-  }, done).start();
-});

package.json

@@ -6,6 +6,9 @@
   "repository": "none",
   "license": "Apache 2.0",
   "devDependencies": {
+    "@playwright/test": "^1.41.2",
+    "@playwright/browser-firefox": "1.41.2",
+    "@types/node": "^20.11.17",
     "angular": "1.5.2",
     "angular-fontawesome": "0.4.0",
     "angular-mocks": "1.5.2",
@@ -43,7 +46,7 @@
     "gulp-protractor": "2.2.0",
     "gulp-rename": "1.2.2",
     "gulp-replace": "0.5.4",
-    "gulp-sass": "2.2.0",
+    "gulp-sass": "5.1.0",
     "gulp-sourcemaps": "1.6.0",
     "gulp-streamify": "0.0.5",
     "gulp-uglify": "1.5.3",
@@ -52,27 +55,32 @@
     "jasmine-ajax": "3.2.0",
     "jasmine-core": "2.4.1",
     "jasmine-fixture": "2.0.0",
-    "karma": "~0.13.22",
+    "karma": "6.4.2",
-    "karma-browserify": "5.0.3",
+    "karma-browserify": "8.1.0",
-    "karma-firefox-launcher": "2.1.0",
+    "karma-coverage": "2.2.1",
-    "karma-coverage": "0.5.5",
+    "karma-firefox-launcher": "2.1.2",
-    "karma-jasmine": "0.3.8",
+    "karma-jasmine": "5.1.0",
     "karma-subunit-reporter": "0.0.4",
     "morgan": "1.7.0",
+    "node-sass": "9.0.0",
     "nprogress": "^0.2.0",
     "pretty-hrtime": "1.0.2",
     "protractor": "^2.2.0",
     "run-sequence": "1.1.5",
     "tiny-lr": "^0.1.6",
     "uglifyify": "3.0.1",
-    "vinyl-buffer": "1.0.0",
+    "vinyl-buffer": "1.0.1",
-    "vinyl-source-stream": "1.1.0",
+    "vinyl-source-stream": "1.1.2",
     "watchify": "3.7.0"
   },
+  "overrides": {
+    "graceful-fs": "^4.2.11"
+  },
   "scripts": {
     "postinstall": "if [ ! -d .venv ]; then tox -epy38 --notest; fi",
-    "test": "gulp unit",
+    "test": "npx karma start test/karma.conf.js",
     "lint": "eslint ./",
-    "prod": "gulp prod; python setup.py sdist"
+    "prod": "gulp prod; python setup.py sdist",
+    "dev": "gulp dev"
   }
 }

requirements.txt

@@ -3,3 +3,4 @@ testtools>=0.9.30
 oslo.db>=6.0.0;python_version>='3.6'
 oslo.db==6.0.0;python_version<='3.5'
 six
+stestr

test/karma.conf.js

@@ -1,19 +1,26 @@
-'use strict';
+"use strict";
 
-var istanbul = require('browserify-istanbul');
+var istanbul = require("browserify-istanbul");
-var isparta = require('isparta');
+var isparta = require("isparta");
-
+var process = require("process");
-module.exports = function(config) {
 
+module.exports = function (config) {
+  process.env.FIREFOX_BIN = require("playwright").firefox.executablePath();
   config.set({
-
+    basePath: "../",
-    basePath: '../',
+    frameworks: ["jasmine", "browserify"],
-    frameworks: ['jasmine', 'browserify'],
     preprocessors: {
-      'app/js/**/*.js': ['browserify', 'coverage']
+      "app/js/**/*.js": ["browserify", "coverage"],
     },
-    browsers: ['Firefox'],
+    plugins: [
-    reporters: ['progress', 'subunit'],
+      require("karma-firefox-launcher"),
+      require("karma-jasmine"),
+      require("karma-browserify"),
+      require("karma-coverage"),
+      require("karma-subunit-reporter"),
+    ],
+    browsers: ["FirefoxHeadless"],
+    reporters: ["progress", "subunit"],
 
     autoWatch: true,
     singleRun: true,
@@ -21,36 +28,34 @@ module.exports = function(config) {
     browserify: {
       debug: true,
       transform: [
-        'bulkify',
+        "bulkify",
         istanbul({
           instrumenter: isparta,
-          ignore: ['**/node_modules/**', '**/test/**']
+          ignore: ["**/node_modules/**", "**/test/**"],
-        })
+        }),
-      ]
+      ],
     },
 
     subunitReporter: {
       slug: true,
-      tags: ['worker-0']
+      tags: ["worker-0"],
     },
 
     proxies: {
-      '/': 'http://localhost:9876/'
+      "/": "http://localhost:9876/",
     },
 
-    urlRoot: '/__karma__/',
+    urlRoot: "/__karma__/",
 
     files: [
       // app-specific code
-      'app/js/main.js',
+      "app/js/main.js",
 
       // 3rd-party resources
-      'node_modules/angular-mocks/angular-mocks.js',
+      "node_modules/angular-mocks/angular-mocks.js",
 
       // test files
-      'test/unit/**/*.js'
+      "test/unit/**/*.js",
-    ]
+    ],
-
   });
-
 };