feat: improve test command, support dotenv files, add postcss (#52)

* fix: support all the icon variants and update index.html

* feat: add Roboto typeface to shell

* chore: dynamically import AppAdapter to create a separate chunk

* fix: target node for tests

* fix: remove reference to non-existent manifest.json

* feat: improve jest config, support snapshots and watch, add postcss

* chore: automatically include app name in browser title

* chore: re-add DOCTYPE declaration to index.html

* chore: name app bundles (app-adapter is external)

* chore: delete unused manifest.json

Author: amcgee

cli/config/babel.config.js

@@ -1,12 +1,19 @@
-const browsersList = require('./.browserlistrc')
+const browserTargets = require('./.browserlistrc')
+const jestTargets = { node: 'current' }
+
+const isTest = process.env.NODE_ENV === 'test'
+const targets = isTest ? jestTargets : browserTargets
 
 module.exports = {
     presets: [
         require('@babel/preset-react'),
         require('@babel/preset-typescript'),
         [
             require('@babel/preset-env'),
-            { modules: 'auto', targets: browsersList },
+            {
+                modules: 'auto',
+                targets,
+            },
         ],
     ],
     plugins: [

cli/config/jest.config.js

@@ -1,6 +1,9 @@
 module.exports = {
     verbose: true,
-    transform: JSON.stringify({
+    transform: {
         '^.+\\.[t|j]sx?$': require.resolve('./jest.transform.js'),
-    }),
+    },
+    moduleNameMapper: {
+        '^.+\\.(css|less)$': require.resolve('./jest.identity.mock.js'),
+    },
 }

cli/config/jest.identity.mock.js

@@ -0,0 +1 @@
+module.exports = {}

cli/config/rollup.config.js

@@ -6,6 +6,9 @@ const resolve = require('rollup-plugin-node-resolve')
 const babel = require('rollup-plugin-babel')
 const commonjs = require('rollup-plugin-commonjs')
 const json = require('rollup-plugin-json')
+const postcss = require('rollup-plugin-postcss')
+const replace = require('rollup-plugin-replace')
+const visualize = require('rollup-plugin-visualizer')
 
 const { reporter } = require('@dhis2/cli-helpers-engine')
 
@@ -31,7 +34,9 @@ const bundle = ({
         Object.keys({
             ...standardLibs,
             ...pkg.peerDependencies,
-        }).join('|')
+        })
+            .map(name => `^${name}(/.+)?$`)
+            .join('|')
     )
 
     const sourcemap = mode === 'production' ? true : 'inline'
@@ -52,15 +57,37 @@ const bundle = ({
                 banner: '/* eslint-disable */',
             },
         ],
-        external: id => externals.test(id),
+        external: bundleDeps
+            ? id => externals.test(id)
+            : id => !/^\.+\//.test(id),
         plugins: [
+            replace({
+                'process.env.NODE_ENV': `"${mode}"`,
+            }),
+            postcss({
+                autoModules: false,
+            }),
             json(),
-            resolve({ mainFields: ['module', 'main'] }),
-            commonjs({ include: /node_modules/ }),
             babel({
                 configFile: require.resolve('./babel.config.js'),
                 exclude: /node_modules/, // only transpile our source code
             }),
+            resolve({
+                /*
+                 * TODO: Use of named exports (particularly `react-is` from `react-redux`)
+                 * means we can't actually use `module` entrypoints... We could also explicitly
+                 * add the CJS named exports to the `commonjs` options below, but that requires
+                 * fore-knowledge of all the libraries an app/lib could depend on.
+                 * See https://github.com/rollup/rollup-plugin-commonjs/issues/211#issuecomment-337897124
+                 */
+                mainFields: ['main'],
+            }),
+            commonjs({ include: /node_modules/ }),
+            visualize({
+                filename: path.join(outDir, 'stats.html'),
+                title: 'DHIS2 Build Analysis',
+                template: 'treemap',
+            }),
         ],
         onwarn(warning, warn) {
             // skip certain warnings

cli/package.json

@@ -30,6 +30,8 @@
         "babel-jest": "^24.9.0",
         "chalk": "^2.4.2",
         "classnames": "^2.2.6",
+        "dotenv": "^8.1.0",
+        "dotenv-expand": "^5.1.0",
         "fs-extra": "^8.1.0",
         "gaze": "^1.1.3",
         "handlebars": "^4.2.1",
@@ -47,6 +49,9 @@
         "rollup-plugin-commonjs": "^10.1.0",
         "rollup-plugin-json": "^4.0.0",
         "rollup-plugin-node-resolve": "^5.0.1",
+        "rollup-plugin-postcss": "^2.0.3",
+        "rollup-plugin-replace": "^2.2.0",
+        "rollup-plugin-visualizer": "^2.6.0",
         "styled-jsx": "^3.2.2"
     },
     "bin": {

cli/src/commands/build.js

@@ -12,6 +12,7 @@ const parseConfig = require('../lib/parseConfig')
 const exitOnCatch = require('../lib/exitOnCatch')
 const generateManifest = require('../lib/generateManifest')
 const bundleApp = require('../lib/bundleApp')
+const loadEnvFiles = require('../lib/loadEnvFiles')
 
 const buildModes = ['development', 'production']
 
@@ -42,10 +43,12 @@ const handler = async ({
     shell: shellSource,
     force,
 }) => {
+    const paths = makePaths(cwd)
+
     mode = mode || (dev && 'development') || getNodeEnv() || 'production'
+    loadEnvFiles(paths, mode)
 
     reporter.info(`Build mode: ${chalk.bold(mode)}`)
-    const paths = makePaths(cwd)
     const config = parseConfig(paths)
     const shell = makeShell({ config, paths })
 

cli/src/commands/start.js

@@ -7,10 +7,15 @@ const makePaths = require('../lib/paths')
 const makeShell = require('../lib/shell')
 const parseConfig = require('../lib/parseConfig')
 const exitOnCatch = require('../lib/exitOnCatch')
+const loadEnvFiles = require('../lib/loadEnvFiles')
 const { getShellPort } = require('../lib/shell/env')
 
 const handler = async ({ cwd, force, shell: shellSource }) => {
     const paths = makePaths(cwd)
+
+    const mode = 'development'
+    loadEnvFiles(paths, mode)
+
     const config = parseConfig(paths)
     const shell = makeShell({ config, paths })
 
@@ -39,7 +44,7 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
             reporter.info(`Building app ${chalk.bold(config.name)}...`)
             await compile({
                 config,
-                mode: 'development',
+                mode,
                 paths,
                 watch: true,
             })

cli/src/commands/test.js

@@ -1,20 +1,27 @@
 const { reporter } = require('@dhis2/cli-helpers-engine')
 
 const fs = require('fs-extra')
-const path = require('path')
 
 const makePaths = require('../lib/paths')
-const parseConfig = require('../lib/parseConfig')
 const exitOnCatch = require('../lib/exitOnCatch')
+const loadEnvFiles = require('../lib/loadEnvFiles')
 
 const { runCLI } = require('jest-cli')
 
-const handler = async ({ cwd, force, shell: shellSource }) => {
-    process.env.BABEL_ENV = 'test'
-    process.env.NODE_ENV = 'test'
-
+const handler = async ({
+    verbose,
+    cwd,
+    testRegex,
+    update,
+    coverage,
+    watch,
+    watchAll,
+}) => {
     const paths = makePaths(cwd)
 
+    const mode = (process.env.NODE_ENV = process.env.BABEL_ENV = 'test')
+    loadEnvFiles(paths, mode)
+
     reporter.info('Running tests...')
 
     await exitOnCatch(
@@ -23,14 +30,32 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
             const appJestConfig = fs.existsSync(paths.jestConfig)
                 ? require(paths.jestConfig)
                 : {}
+            const pkgJestConfig = require(paths.package).jest
 
             const jestConfig = {
                 roots: ['./src'],
                 ...defaultJestConfig,
                 ...appJestConfig,
+                ...pkgJestConfig,
             }
 
-            const result = await runCLI(jestConfig, [paths.base])
+            reporter.debug('Resolved jest config', jestConfig)
+
+            const ci = process.env.CI
+
+            const result = await runCLI(
+                {
+                    testPathPattern: testRegex,
+                    config: JSON.stringify(jestConfig),
+                    updateSnapshot: !ci && update,
+                    collectCoverage: coverage,
+                    watch: (!ci && watch) || undefined,
+                    watchAll: (!ci && watchAll) || undefined,
+                    ci,
+                    verbose: verbose,
+                },
+                [paths.base]
+            )
 
             if (result.results.success) {
                 reporter.info(`Tests completed`)
@@ -48,9 +73,33 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
 }
 
 const command = {
-    command: 'test',
+    command: 'test [testRegex]',
     aliases: 't',
     desc: 'Run application unit tests',
+    builder: {
+        updateSnapshot: {
+            type: 'boolean',
+            desc: 'Update jest snapshots',
+            aliases: 'u',
+            default: false,
+        },
+        coverage: {
+            type: 'boolean',
+            desc: 'Collect test coverage',
+            default: false,
+        },
+        watch: {
+            type: 'boolean',
+            desc: 'Watch modified source files for changes',
+            alias: 'w',
+            default: false,
+        },
+        watchAll: {
+            type: 'boolean',
+            desc: 'Watch all source files for changes',
+            default: false,
+        },
+    },
     handler,
 }
 

cli/src/lib/loadEnvFiles.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const dotenvExpand = require('dotenv-expand')
+const dotenv = require('dotenv')
+
+const { reporter } = require('@dhis2/cli-helpers-engine')
+
+module.exports = (paths, NODE_ENV) => {
+    /*
+     * Heavily inspired by create-react-app
+     * https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/env.js
+     */
+
+    const dotenvFiles = [
+        NODE_ENV && `${paths.dotenv}.${NODE_ENV}.local`,
+        NODE_ENV && `${paths.dotenv}.${NODE_ENV}`,
+        NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+        paths.dotenv,
+    ]
+
+    dotenvFiles
+        .filter(Boolean)
+        .filter(fs.existsSync)
+        .forEach(dotenvFile => {
+            dotenvExpand(
+                dotenv.config({
+                    path: dotenvFile,
+                })
+            )
+        })
+
+    reporter.debug('ENV', process.env)
+}

cli/src/lib/paths.js

@@ -21,6 +21,7 @@ module.exports = makePaths = (cwd = process.cwd()) => {
 
         base,
         package: path.join(base, './package.json'),
+        dotenv: path.join(base, './.env'),
         config: path.join(base, './d2.config.js'),
         src: path.join(base, './src'),
         appEntry: path.join(base, './src/App.js'),