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

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'),