HUL-48 | Modernize Development Environment and Testing Infrastructure

.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/'
+  ]
+};