Move front-end linting and tests to NPM scripts (Fixes #8479)

.circleci/config.yml

@@ -12,7 +12,7 @@ jobs:
 
   test_js:
     docker:
-      - image: "circleci/node:10.15.3-browsers"
+      - image: "circleci/node:12-browsers"
     steps:
       - checkout
       - restore_cache:
@@ -23,10 +23,7 @@ jobs:
           name: JS Tests
           command: |
             yarn install --pure-lockfile
-            node_modules/.bin/gulp css:lint
-            node_modules/.bin/gulp js:lint
-            node_modules/.bin/gulp js:test
-            node_modules/.bin/gulp json:lint
+            npm run test
       - save_cache:
           key: v1-node-{{ checksum "yarn.lock" }}
           paths:

.eslintignore

@@ -0,0 +1 @@
+media/js/libs/*.js

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     extends: [
         '@mozilla-protocol/eslint-config',
         'plugin:no-jquery/recommended',
-        'plugin:no-jquery/all'
+        'plugin:no-jquery/all',
+        'plugin:json/recommended'
     ],
     plugins: [
         'no-jquery'

.stylelintignore

@@ -0,0 +1 @@
+media/css/libs/*

Dockerfile

@@ -1,7 +1,7 @@
 ########
 # assets builder and dev server
 #
-FROM node:8-slim AS assets
+FROM node:12-slim AS assets
 
 ENV PATH=/app/node_modules/.bin:$PATH
 WORKDIR /app
@@ -11,11 +11,12 @@ COPY package.json yarn.lock ./
 
 # install dependencies
 RUN yarn install --pure-lockfile
-RUN yarn global add gulp-cli@2.0.1
+RUN yarn global add gulp-cli@2.2.1
 
 # copy supporting files and media
-COPY .eslintrc.js .stylelintrc gulpfile.js ./
+COPY .eslintrc.js .eslintignore .stylelintrc .stylelintignore gulpfile.js ./
 COPY ./media ./media
+COPY ./tests/unit ./tests/unit
 
 RUN gulp build --production
 

Makefile

@@ -17,7 +17,7 @@ help:
 	@echo "  clean         - remove all build, test, coverage and Python artifacts"
 	@echo "  rebuild       - force a rebuild of all of the docker images"
 	@echo "  submodules    - resync and fetch the latest git submodules"
-	@echo "  lint          - check style with flake8, jshint, and stylelint"
+	@echo "  lint          - check style with flake8, eslint, and stylelint"
 	@echo "  test          - run tests against local files"
 	@echo "  test-image    - run tests against files in docker image"
 	@echo "  docs          - generate Sphinx HTML documentation"
@@ -95,7 +95,7 @@ clean:
 
 lint: .docker-build-pull
 	${DC} run test flake8
-	${DC} run assets gulp js:lint css:lint json:lint
+	${DC} run assets npm run lint
 
 test: .docker-build-pull
 	${DC} run test

docs/testing.rst

@@ -41,7 +41,7 @@ following command:
 
 .. code-block:: bash
 
-    $ gulp js:test
+    $ npm run test
 
 See the `Jasmine`_ documentation for tips on how to write JS behavioral or unit
 tests. We also use `Sinon`_ for creating test spies, stubs and mocks.

gulpfile.js

@@ -16,10 +16,6 @@ const uglify = require('gulp-uglify');
 const concat = require('gulp-concat');
 const sourcemaps = require('gulp-sourcemaps');
 const del = require('del');
-const karma = require('karma');
-const eslint = require('gulp-eslint');
-const gulpStylelint = require('gulp-stylelint');
-const gulpJsonLint = require('gulp-jsonlint');
 const argv = require('yargs').argv;
 const browserSync = require('browser-sync').create();
 const merge = require('merge-stream');
@@ -31,23 +27,6 @@ const buildDir = 'static_build';
 // directory for the final assets ready for consumption
 const finalDir = 'static_final';
 
-const lintPathsJS = [
-    'media/js/**/*.js',
-    '!media/js/libs/*.js',
-    'tests/unit/spec/**/*.js',
-    'gulpfile.js'
-];
-
-const lintPathsCSS = [
-    'media/css/**/*.scss',
-    'media/css/**/*.css',
-    '!media/css/libs/*'
-];
-
-const lintPathsJSON = [
-    'bedrock/base/templates/includes/structured-data/**/*.json'
-];
-
 const cachedOpts = {
     optimizeMemory: true
 };
@@ -281,54 +260,6 @@ function jsMinify() {
         .pipe(gulp.dest(finalDir));
 }
 
-/**
- * Run the JS test suite.
- */
-function jsTest(cb) {
-    new karma.Server({
-        configFile: `${__dirname}/tests/unit/karma.conf.js`,
-        singleRun: true
-    }, cb).start();
-}
-gulp.task('js:test', jsTest);
-
-/**
- * Run eslint style check on all JS.
- */
-function jsLint() {
-    return gulp.src(lintPathsJS)
-        .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(eslint.failAfterError());
-}
-gulp.task('js:lint', jsLint);
-
-/**
- * Run CSS style check on all CSS.
- */
-function cssLint() {
-    return gulp.src(lintPathsCSS)
-        .pipe(gulpStylelint({
-            reporters: [{
-                formatter: 'string',
-                console: true
-            }],
-            debug: true
-        }));
-}
-gulp.task('css:lint', cssLint);
-
-/**
- * Run JSON lint on JSON files
- */
-
-function jsonLint() {
-    return gulp.src(lintPathsJSON)
-        .pipe(gulpJsonLint())
-        .pipe(gulpJsonLint.reporter());
-}
-gulp.task('json:lint', jsonLint);
-
 /**
  * Watch for changes in the `media` directory and copy changed files to
  * either `static_build` or `static_final` depending on the file type.
@@ -401,11 +332,6 @@ function devWatch(cb) {
     // --------------------------
     gulp.watch(buildDir + '/css/**/_*.scss', reloadSass);
 
-    // --------------------------
-    // watch:js
-    // --------------------------
-    gulp.watch('media/js/**/*.js', jsLint);
-
     // --------------------------
     // watch:html
     // --------------------------

package.json

@@ -9,18 +9,15 @@
     "ansi-colors": "4.1.1",
     "clean-css-cli": "4.3.0",
     "del": "5.1.0",
-    "eslint": "6.3.0",
+    "eslint": "^7.0.0",
     "gulp": "4.0.2",
     "gulp-cached": "^1.1.1",
     "gulp-clean-css": "4.2.0",
     "gulp-concat": "^2.6.1",
-    "gulp-eslint": "6.0.0",
     "gulp-filter": "6.0.0",
     "gulp-if": "3.0.0",
-    "gulp-jsonlint": "^1.3.1",
     "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
-    "gulp-stylelint": "9.0.0",
     "gulp-uglify": "^3.0.0",
     "merge-stream": "2.0.0",
     "stylelint": "^10.1.0",
@@ -39,6 +36,7 @@
     "browser-sync": "2.26.7",
     "concurrently": "4.1.2",
     "eslint-plugin-no-jquery": "^2.5.0",
+    "eslint-plugin-json": "^2.1.1",
     "jasmine-core": "3.4.0",
     "karma": "4.3.0",
     "karma-chrome-launcher": "3.1.0",
@@ -49,6 +47,12 @@
     "tinypng-cli": "^0.0.7"
   },
   "scripts": {
-    "start": "concurrently --kill-others \"python manage.py runserver 0.0.0.0:8080\" \"gulp\""
+    "start": "concurrently --kill-others \"python manage.py runserver 0.0.0.0:8080\" \"gulp\"",
+    "lint-js": "./node_modules/.bin/eslint media/js/**/*.js tests/unit/spec/**/*.js gulpfile.js",
+    "lint-css": "./node_modules/.bin/stylelint \"media/css/**/*.{css,scss}\"",
+    "lint-json": "./node_modules/.bin/eslint bedrock/base/templates/includes/structured-data/**/*.json",
+    "lint": "npm run lint-js && npm run lint-css && npm run lint-json",
+    "pretest": "npm run lint",
+    "test": "./node_modules/.bin/karma start ./tests/unit/karma.conf.js"
   }
 }