HUL-48 | Modernize Development Environment and Testing Infrastructure (#49)

* fix: modernize SASS configuration and eliminate deprecation warnings

- Update sass-loader to use modern API instead of legacy JS API
- Add sass:math and sass:color module imports to SASS files
- Replace deprecated ceil(), floor(), and darken() functions with modern equivalents
- Configure sass-loader to suppress import deprecation warnings from bootstrap-sass
- Add quietDeps and silenceDeprecations options to reduce build noise

* chore: modernize test environment with React Testing Library

- Add @testing-library/react and @testing-library/dom for modern component testing
- Replace deprecated isparta-loader with babel-plugin-istanbul for code coverage
- Update chai to v4.3.10 (CommonJS compatible version)
- Remove legacy babel-core v5 and associated deprecated testing utilities
- Clean up unused testing dependencies and modernize test infrastructure

* chore: modernize webpack toolchain

- Migrate from webpack-dotenv-plugin to dotenv-webpack for better webpack 5 compatibility
- Update webpack-dev-server to v4 API with async/await pattern replacing deprecated callbacks
- Modernize webpack development configuration:
  - Remove deprecated HMR plugins (HotModuleReplacementPlugin, NoEmitOnErrorsPlugin)
  - Update entry configuration for webpack 5
  - Add modern optimization settings with emitOnErrors: false
- Update devServer configuration with webpack-dev-server v4 API:
  - Add client overlay configuration
  - Update devMiddleware settings
  - Configure host and allowedHosts for broader accessibility
- Add webpack 5 compatible babel-plugin-istanbul for code coverage
- Fix ESLint configuration for Node.js environment compatibility

* refactor: simplify and modernize Babel configuration

- Remove 16 redundant Babel plugins now handled by @babel/preset-env:
  - Remove @babel/plugin-proposal-class-properties (ES2022 standard)
  - Remove @babel/plugin-proposal-json-strings (ES2019 standard)
  - Remove @babel/plugin-proposal-logical-assignment-operators (ES2021 standard)
  - Remove @babel/plugin-proposal-nullish-coalescing-operator (ES2020 standard)
  - Remove @babel/plugin-proposal-numeric-separator (ES2021 standard)
  - Remove @babel/plugin-proposal-optional-chaining (ES2020 standard)
  - Remove experimental/unused proposal plugins for do-expressions,
    export-default-from, export-namespace-from, function-bind,
    function-sent, pipeline-operator, throw-expressions
  - Remove syntax plugins covered by preset-env (dynamic-import, import-meta)

- Replace deprecated @babel/polyfill with modern core-js/stable import
- Keep only essential Babel packages:
  - @babel/plugin-proposal-decorators (legacy mode still needed)
  - Core Babel packages (@babel/core, presets, eslint-parser)

- Simplify .babelrc to use only presets + decorators plugin
- Update package.json and yarn.lock to reflect reduced dependency footprint

* refactor: modernize webpack asset handling and reduce dependencies

- Replace file-loader with Webpack 5 native asset/resource modules
- Remove unused url-loader dependency
- Update webpack configuration to use modern asset handling for mp4/ogg/svg files

* chore: clean up redundant dependencies and polyfills

- Remove es6-promise and isomorphic-fetch as they're redundant with core-js
- Move sass-loader from dependencies to devDependencies where it belongs
- Remove unnecessary polyfill imports from index.js

* feat: migrate from Karma to Jest test framework

- Replace Karma test runner with Jest 30.2.0 and jsdom environment
- Add comprehensive Jest configuration with module mapping and coverage
- Convert test syntax from Mocha/Chai to Jest expectations
- Remove 9+ legacy Karma packages (karma, karma-*, chai, mocha, puppeteer)
- Configure V8 coverage provider to avoid Istanbul compatibility issues
- Update ESLint environment from mocha to jest
- Modernize test setup with @testing-library/jest-dom matchers

* fix: resolve webpack NODE_ENV conflicts and improve Docker compatibility

- Remove redundant DefinePlugin NODE_ENV definitions from webpack configs
- Use webpack mode setting for NODE_ENV (production for build, development for dev)
- Configure dotenv-webpack with safe=false and defaults for Docker builds
- Update @babel/core to ^7.22.0 to resolve plugin compatibility issues

* chore: update rimraf to v6.1.2

- Updates rimraf from 5.0.10 to 6.1.2 to resolve glob security vulnerability.
Fixes high severity command injection issue in transitive dependency.

* chore: upgrade eslint to v9.39.2

- Updates eslint from 8.57.0 to 9.39.2 for latest security patches,
performance improvements, and bug fixes.

* fix: resolve security vulnerabilities with npm audit fix

Automatically fixes 8 vulnerabilities:
- @babel/runtime: RegExp complexity issue
- brace-expansion: RegExp denial of service
- glob: Command injection vulnerability
- nanoid: Predictable generation results
- node-forge: ASN.1 vulnerabilities
- on-headers: HTTP header manipulation
- webpack: DOM clobbering XSS

* fix: resolve @babel/runtime security vulnerability

Add yarn resolution to force @babel/runtime ^7.26.10 to fix
RegExp complexity vulnerability in transitive dependency from history.

* refactor: modernize test structure and Jest configuration

- Move component tests to co-located __tests__ directories
- Rename test files to follow .test.js/.test.jsx convention
- Simplify Jest testMatch patterns using glob syntax
- Remove empty .keep files from unused test directories

* feat: preserve dist/README.md in clean script

- Update clean script to use find command instead of rimraf to selectively
remove all files in dist/ directory except README.md, preventing
accidental removal of version-controlled documentation.

* test: add unit tests for Redux reducers

* fix: update API_URL for development environment

Author: jorilindell

.babelrc

@@ -4,31 +4,11 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-json-strings",
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
-    ],
-    "@babel/plugin-proposal-function-sent",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-numeric-separator",
-    "@babel/plugin-proposal-throw-expressions",
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-logical-assignment-operators",
-    "@babel/plugin-proposal-optional-chaining",
-    [
-      "@babel/plugin-proposal-pipeline-operator",
-      {
-        "proposal": "minimal"
-      }
-    ],
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    ]
   ]
 }

.eslintrc

@@ -15,7 +15,7 @@
     "amd": true,
     "es6": true,
     "node": true,
-    "mocha": true
+    "jest": true
   },
   "rules": {
     "comma-dangle": 1,

Dockerfile

@@ -16,7 +16,7 @@ RUN npm install
 FROM appbase AS development
 # =======================================================
 
-ARG API_URL=https://palvelukartta-api-test.agw.arodevtest.hel.fi/v2
+ARG API_URL=https://palvelukartta.api.test.hel.ninja/v2
 ENV API_URL $API_URL
 
 COPY . .

cfg/base.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 'use strict';
 let path = require('path');
 let webpack = require('webpack');
@@ -18,6 +19,12 @@ module.exports = {
     filename: 'app.js',
     publicPath: defaultSettings.publicPath
   },
+  ignoreWarnings: [
+    {
+      module: /\.scss$/,
+      message: /Future import deprecation is not yet active, so silencing it is unnecessary/,
+    },
+  ],
   plugins: [
     require('autoprefixer'),
     new webpack.LoaderOptionsPlugin({
@@ -35,14 +42,19 @@ module.exports = {
     historyApiFallback: true,
     hot: true,
     port: defaultSettings.port,
+    client: {
+      overlay: true
+    },
     devMiddleware: {
       publicPath: defaultSettings.publicPath,
-    }
+    },
+    host: '0.0.0.0',
+    allowedHosts: 'all'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     fallback: {
-      "process": require.resolve("process/browser")
+      "process": require.resolve("process/browser.js")
     },
     alias: {
       actions: `${defaultSettings.srcPath}/actions/`,

cfg/defaults.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /**
  * Function that returns default values.
  * Used because Object.assign does a shallow instead of a deep copy.
@@ -26,9 +27,11 @@ function getDefaultModules() {
         use: ['style-loader', 'css-loader', {
           loader: 'sass-loader',
           options: {
+            api: 'modern-compiler',
             sassOptions: {
               outputStyle: 'expanded',
-
+              quietDeps: true,
+              silenceDeprecations: ['import']
             }
           }
         }
@@ -39,9 +42,11 @@ function getDefaultModules() {
         use: ['style-loader', 'css-loader',  {
           loader: 'sass-loader',
           options: {
+            api: 'modern-compiler',
             sassOptions: {
               outputStyle: 'expanded',
-
+              quietDeps: true,
+              silenceDeprecations: ['import']
             }
           }
         }
@@ -57,7 +62,7 @@ function getDefaultModules() {
       },
       {
         test: /\.(mp4|ogg|svg)$/,
-        use: 'file-loader'
+        type: 'asset/resource'
       }
     ]
   };

cfg/dev.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 'use strict';
 
 let path = require('path');
@@ -7,29 +8,26 @@ let defaultSettings = require('./defaults');
 
 // Add needed plugins here
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const DotenvPlugin = require('webpack-dotenv-plugin');
+const Dotenv = require('dotenv-webpack');
 
 let config = Object.assign({}, baseConfig, {
   entry: [
-    'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
-    'webpack/hot/only-dev-server',
     './src/index'
   ],
   cache: true,
   devtool: 'eval-source-map',
+  optimization: {
+    emitOnErrors: false
+  },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-      new webpack.ProvidePlugin({
-          $: "jquery",
-          jQuery: "jquery"
-      }),
-    new DotenvPlugin({
-      sample: './.env.example',
-      path: './.env'
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
     }),
-    new webpack.LoaderOptionsPlugin({
-      debug: true
+    new Dotenv({
+      path: './.env',
+      safe: './.env.example',
+      ignoreStub: true
     }),
     new ReactRefreshWebpackPlugin()
   ],

cfg/dist.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 'use strict';
 
 let path = require('path');
@@ -8,25 +9,27 @@ let defaultSettings = require('./defaults');
 
 // Add needed plugins here
 const TerserPlugin = require("terser-webpack-plugin");
-const DotenvPlugin = require('webpack-dotenv-plugin');
+const Dotenv = require('dotenv-webpack');
 
 let config = Object.assign({}, baseConfig, {
+  mode: 'production',
   entry: path.join(__dirname, '../src/index'),
   cache: false,
   devtool: 'source-map',
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
+    new Dotenv({
+      path: './.env',
+      safe: false,
+      systemvars: true,
+      defaults: {
+        'API_URL': 'https://api.hel.fi/servicemap/v2'
+      }
     }),
     new webpack.optimize.AggressiveMergingPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
-    }),
-    new DotenvPlugin({
-      sample: './.env.example',
-      path: './.env'
     })
   ],
   optimization: {

cfg/test.js

@@ -1,21 +1,16 @@
+/* eslint-disable no-undef */
 'use strict';
 
 let path = require('path');
-let srcPath = path.join(__dirname, '/../src/');
+let webpack = require('webpack');
 
 let baseConfig = require('./base');
 
 module.exports = {
+  ...baseConfig,
   devtool: 'eval',
   module: {
     rules: [
-      {
-        test: /\.(js|jsx)$/,
-        loader: 'isparta',
-        include: [
-          path.join(__dirname, '/../src')
-        ]
-      },
       {
         test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/,
         loader: 'null-loader'
@@ -28,21 +23,24 @@ module.exports = {
             path.join(__dirname, '/../src'),
             path.join(__dirname, '/../test')
           ]
-        )
+        ),
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+          plugins: ['babel-plugin-istanbul']
+        }
       }
     ]
   },
   resolve: {
-    extensions: [ '', '.js', '.jsx' ],
+    ...baseConfig.resolve,
     alias: {
-      actions: srcPath + 'actions/',
-      helpers: path.join(__dirname, '/../test/helpers'),
-      components: srcPath + 'components/',
-      sources: srcPath + 'sources/',
-      stores: srcPath + 'stores/',
-      styles: srcPath + 'styles/',
-      config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV
+      ...baseConfig.resolve.alias,
+      helpers: path.join(__dirname, '/../test/helpers')
     }
   },
-  plugins: []
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+    })
+  ]
 };

eslint.config.mjs

@@ -0,0 +1,58 @@
+import js from '@eslint/js';
+import react from 'eslint-plugin-react';
+import babelParser from '@babel/eslint-parser';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['src/**/*.{js,jsx}', 'test/**/*.{js,jsx}'],
+    plugins: {
+      react,
+    },
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module',
+        requireConfigFile: false,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        // Node.js environment
+        process: 'readonly',
+        require: 'readonly',
+        module: 'readonly',
+        global: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        // Browser environment 
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        fetch: 'readonly',
+        localStorage: 'readonly',
+        navigator: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearInterval: 'readonly',
+        // Test environment
+        describe: 'readonly',
+        it: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        expect: 'readonly',
+      },
+    },
+    rules: {
+      'quotes': ['warn', 'single'],
+      'no-console': 'off',
+      'no-alert': 'off',
+      'react/jsx-uses-react': 'warn',
+      'react/jsx-uses-vars': 'warn',
+    },
+  },
+];

jest.config.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-undef */
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
+  testMatch: [
+    '<rootDir>/{test,src}/**/__tests__/*.test.{js,jsx}'
+  ],
+  moduleFileExtensions: ['js', 'jsx'],
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^actions/(.*)$': '<rootDir>/src/actions/$1',
+    '^sources/(.*)$': '<rootDir>/src/sources/$1',
+    '^stores/(.*)$': '<rootDir>/src/stores/$1',
+    '^styles/(.*)\\.(css|scss)$': 'identity-obj-proxy',
+    '^styles/(.*)$': '<rootDir>/src/styles/$1',
+    '^config$': '<rootDir>/src/config/test',
+    '\\.(css|scss)$': 'identity-obj-proxy',
+    'normalize.css/normalize.css': 'identity-obj-proxy'
+  },
+  moduleDirectories: ['node_modules', 'src'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx}',
+    '!src/index.js',
+    '!src/config/**',
+  ],
+  coverageProvider: 'v8',
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(redux-actions|@babel|bootstrap-sass)/)'
+  ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/dist/'
+  ]
+};