@corva/create-app 0.50.0-2 → 0.50.0-4

package/README.md

@@ -41,7 +41,7 @@ Usage: create-corva-app create <project-directory> [options]
 Create a new app
 
 Arguments:
-  project-directory               project directory to work with (default: "Current working dir")
+  project-directory               Project directory to work with (default: "Current working dir")
 
 Options:
   --developerName [string]        Enter the Developer Name (default: "O&G Company")

package/lib/commands/attach.js

@@ -1,4 +1,6 @@
+import chalk from 'chalk';
 import { Command } from 'commander';
+import { ERROR_ICON } from '../constants/messages.js';
 import { runFlow } from '../flow.js';
 import { ATTACH_FLOW } from '../flows/attach.js';
 import { getRealWorkingDir } from '../helpers/commands.js';
@@ -18,4 +20,9 @@ export const attachCommand = new Command('attach')
   .addOption(originalCwdOption)
   .action(async (dirName, options) => {
     await runFlow(ATTACH_FLOW, { dirName: getRealWorkingDir(dirName, options), options });
+  })
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
   });

package/lib/commands/create.js

@@ -23,6 +23,7 @@ import { getRealWorkingDir } from '../helpers/commands.js';
 import { Manifest } from '../flows/lib/manifest.js';
 import { fillManifest } from '../helpers/manifest.js';
 import { getManifestMandatoryKeys, manifestOptions } from '../constants/manifest.js';
+import { ERROR_ICON } from '../constants/messages.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -36,7 +37,11 @@ export const createCommand = new Command('create')
   .description('Create a new app')
   .argument('[project-directory]', 'project directory to work with', process.argv[process.argv.length - 1])
   .addOption(originalCwdOption)
-  .usage(`${chalk.green('<project-directory>')} [options]`);
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
+  });
 
 manifestOptions().forEach((value) => {
   const type = typeof value.default;

package/lib/commands/release.js

@@ -1,3 +1,4 @@
+import chalk from 'chalk';
 import { Command, Option } from 'commander';
 import { runFlow } from '../flow.js';
 import { RELEASE_FLOW } from '../flows/release.js';
@@ -8,6 +9,7 @@ import { envOption } from '../options/env.js';
 import { originalCwdOption } from '../options/original-cwd.js';
 import { silentOption } from '../options/silent.js';
 import { ensureBumpVersion } from '../helpers/cli-version.js';
+import { ERROR_ICON } from '../constants/messages.js';
 
 export const releaseCommand = new Command('release')
   .description('Release app')
@@ -40,4 +42,9 @@ export const releaseCommand = new Command('release')
       patterns,
       options,
     });
+  })
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
   });

package/lib/commands/rerun.js

@@ -1,5 +1,6 @@
+import chalk from 'chalk';
 import { Command, Option } from 'commander';
-
+import { ERROR_ICON } from '../constants/messages.js';
 import { runFlow } from '../flow.js';
 import { RERUN_FLOW } from '../flows/rerun.js';
 import { getRealWorkingDir } from '../helpers/commands.js';
@@ -22,4 +23,9 @@ export const rerunCommand = new Command('rerun')
   .addOption(originalCwdOption)
   .action(async (dirName, options) => {
     await runFlow(RERUN_FLOW, { dirName: getRealWorkingDir(dirName, options), options });
+  })
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
   });

package/lib/commands/zip.js

@@ -1,3 +1,4 @@
+import chalk from 'chalk';
 import { Command, Option } from 'commander';
 import _ from 'lodash/fp.js';
 
@@ -8,6 +9,7 @@ import { bumpVersionOption } from '../options/bump-version.js';
 import { originalCwdOption } from '../options/original-cwd.js';
 import { silentOption } from '../options/silent.js';
 import { ensureBumpVersion } from '../helpers/cli-version.js';
+import { ERROR_ICON } from '../constants/messages.js';
 
 export const zipCommand = new Command('zip')
   .description('Bundle app')
@@ -29,4 +31,9 @@ export const zipCommand = new Command('zip')
         options,
       }).then(_.get('zipFileName'));
     }),
-  );
+  )
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
+  });

package/lib/constants/messages.js

@@ -1,12 +1,12 @@
 import chalk from 'chalk';
 
-export const SUCCESS_ICON = '  ✅  \n';
-export const ERROR_ICON = '  ❌  \n';
+export const SUCCESS_ICON = '✅';
+export const ERROR_ICON = '❌';
 
 export const RELEASE = {
   createZip: 'Creating zip archive...\n',
   createZipError: 'Could not create zip archive.',
-  createZipSuccess: `Zip archive has been created ${SUCCESS_ICON}`,
+  createZipSuccess: `Zip archive has been created ${SUCCESS_ICON}\n`,
   getAuthToken: 'Reading auth token...',
   getAuthTokenError: `Could not find auth token or API_KEY in .env file.\nFor UI app please run ${chalk.cyan`yarn start`} and login to Corva to fetch it or set API_KEY in your .env file`,
   getAppKey: 'Reading app key...',

package/lib/constants/package.js

@@ -19,11 +19,14 @@ const uiDependencies = {
 const jsUiDevDependencies = {
   '@corva/dc-platform-shared': 'latest',
   '@corva/eslint-config-browser': 'latest',
-  '@testing-library/jest-dom': '^5.16.4',
-  '@testing-library/react': '12.1.5',
+  '@testing-library/jest-dom': '^5.14.1',
+  '@testing-library/react': '^12.1.5',
   '@testing-library/react-hooks': '^8.0.1',
-  '@testing-library/user-event': '^14.3.0',
-  'react-scripts': '4.0.3',
+  '@testing-library/user-event': '^13.2.1',
+  'jest-watch-typeahead': '^1.0.0',
+  'jest': '^27.4.3',
+  'babel-jest': '^27.4.2',
+  'babel-preset-react-app': '^10.0.1',
   'eslint': '7.32.0',
   'postcss-loader': '4.1.0',
 };
@@ -33,8 +36,8 @@ const tsUiDevDependencies = {
   '@tsconfig/create-react-app': '1.0.2',
   '@types/material-ui': '0.21.9',
   '@types/react': '^17.0.22',
-  '@types/jest': '26.0.24',
   '@types/react-dom': '^17.0.9',
+  '@types/jest': '^27.0.1',
   '@typescript-eslint/eslint-plugin': '^4.31.2',
   '@typescript-eslint/parser': '^4.31.2',
   'ts-loader': '8.2.0',
@@ -47,7 +50,8 @@ const uiScripts = {
   zip: 'create-corva-app zip .',
   lint: 'eslint --cache ./src/',
   release: 'create-corva-app release .',
-  test: 'react-scripts test',
+  test: 'jest',
+  coverage: 'jest --coverage',
 };
 
 const uiPackage = {
@@ -56,10 +60,38 @@ const uiPackage = {
   scripts: uiScripts,
   dependencies: uiDependencies,
   devDependencies: jsUiDevDependencies,
-  // TODO: This is a temporary workaround. Should be removed once
-  // this ticket is resolved: https://corvaqa.atlassian.net/browse/DC-3982
   jest: {
-    transformIgnorePatterns: ['/node_modules/(?!@babel/runtime|@corva/ui)', '\\.pnp\\.[^\\/]+$'],
+    roots: ['<rootDir>/src'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+    coverageThreshold: {
+      global: {
+        branches: 60,
+        functions: 60,
+        lines: 60,
+        statements: 60,
+      },
+    },
+    setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.js'],
+    globalSetup: '<rootDir>/config/jest/globalSetup.js',
+    testMatch: ['<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}', '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'],
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/config/jest/babelTransform.js',
+      '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+      '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    },
+    transformIgnorePatterns: [
+      '/node_modules/(?!.*@babel/runtime).+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+      '^.+\\.module\\.(css|sass|scss)$',
+    ],
+    modulePaths: [],
+    moduleNameMapper: {
+      '~(.*)': '<rootDir>/src/$1',
+      '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+      '@corva/ui(.*)': '@corva/ui/cjs-bundle/$1',
+    },
+    watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+    resetMocks: true,
   },
 };
 

package/lib/flow.js

@@ -16,7 +16,7 @@ export const runFlow = async (flow, context, indent = '') => {
 
   const result = await runSteps(flow.steps, context, indent + '  ');
 
-  logger.write(`${indent}Done!` + SUCCESS_ICON);
+  logger.write(`${indent}Done!` + SUCCESS_ICON + '\n');
 
   return result;
 };
@@ -40,7 +40,7 @@ const runSteps = async (steps = [], context = {}, indent = '') => {
 
     Object.assign(context, result);
 
-    logger.write(SUCCESS_ICON);
+    logger.write(SUCCESS_ICON + '\n');
   }
 
   return context;

package/lib/main.js

@@ -1,10 +1,8 @@
 import chalk from 'chalk';
-import { Command, CommanderError } from 'commander';
+import { Command } from 'commander';
 import semver from 'semver';
 
 import { warnIfOutdated } from './helpers/cli-version.js';
-import { ERROR_ICON } from './constants/messages.js';
-import { StepError } from './flows/lib/step-error.js';
 import { logger } from './helpers/logger.js';
 
 import { zipCommand } from './commands/zip.js';
@@ -13,6 +11,8 @@ import { rerunCommand } from './commands/rerun.js';
 import { attachCommand } from './commands/attach.js';
 import { createCommand } from './commands/create.js';
 
+import { ERROR_ICON } from './constants/messages.js';
+
 function checkNodeVersion() {
   logger.write('Checking node version...');
 
@@ -40,70 +40,20 @@ export async function run() {
 
       await warnIfOutdated();
     })
-    .configureOutput({ writeErr: () => undefined })
-    .exitOverride()
     .addCommand(createCommand, { isDefault: true })
     .addCommand(zipCommand)
     .addCommand(releaseCommand)
     .addCommand(rerunCommand)
-    .addCommand(attachCommand);
+    .addCommand(attachCommand)
+    .showHelpAfterError()
+    .showSuggestionAfterError(true)
+    .configureOutput({
+      outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
+    });
 
   try {
     await program.parseAsync(process.argv);
   } catch (e) {
-    handleError(program, e);
-
     process.exit(1);
   }
 }
-
-const handleError = (program, e) => {
-  if (e instanceof CommanderError) {
-    handleCommanderError(program, e);
-
-    return;
-  }
-
-  logger.write(ERROR_ICON);
-
-  if (!(e instanceof StepError)) {
-    console.error(chalk.red(e));
-
-    return;
-  }
-
-  console.log(chalk.red(e.message));
-  e.cause && console.error(chalk.red(e.cause));
-};
-
-const handleCommanderError = (program, e) => {
-  switch (e.code) {
-    case 'commander.missingArgument': {
-      const match = /error:.*'(.*)'/.exec(e.message);
-
-      if (match && match[1] === 'project-directory') {
-        const commandName = program.args[0] || program._defaultCommandName;
-
-        console.error('Please specify the project directory:');
-        logger.log(`  ${chalk.cyan(program.name())} ${commandName} ${chalk.green('<project-directory>')}`);
-        logger.log();
-        logger.log('For example:');
-        logger.log(`  ${chalk.cyan(program.name())} ${commandName} ${chalk.green('my-react-app')}`);
-        logger.log();
-        logger.log(`Run ${chalk.cyan(`${program.name()} help ${commandName}`)} to see all options.`);
-      } else {
-        console.error('❌', e.message);
-      }
-
-      break;
-    }
-    case 'commander.help':
-    case 'commander.helpDisplayed': {
-      // ignore
-      break;
-    }
-    default: {
-      console.error('❌', e.message);
-    }
-  }
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.50.0-2",
+  "version": "0.50.0-4",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [
@@ -35,7 +35,7 @@
     "release-rc": "npm run release -- --prerelease"
   },
   "lint-staged": {
-    "*.{js,json}": "npm run lint:fix"
+    "*.js": "npm run lint:fix"
   },
   "dependencies": {
     "archiver": "^5.3.0",

package/templates/ui/javascript/config/jest/babelTransform.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+const babelJest = require('babel-jest').default;
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});

package/templates/ui/javascript/config/jest/cssTransform.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {};',
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

package/templates/ui/javascript/config/jest/fileTransform.js

@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+const toPascalCase = str => {
+  const allWordsIterator = str.matchAll(/\w+/g);
+
+  return Array.from(allWordsIterator).reduce((acc, matchResult) => {
+    const word = matchResult[0];
+    return acc + word[0].toUpperCase() + word.slice(1).toLowerCase();
+  }, '');
+};
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = toPascalCase(path.parse(filename).name);
+      const componentName = `Svg${pascalCaseFilename}`;
+      return {
+        code: `const React = require('react');
+        module.exports = {
+          __esModule: true,
+          default: ${assetFilename},
+          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+            return {
+              $$typeof: Symbol.for('react.element'),
+              type: 'svg',
+              ref: ref,
+              key: null,
+              props: Object.assign({}, props, {
+                children: ${assetFilename}
+              })
+            };
+          }),
+        };`,
+      };
+    }
+
+    return { code: `module.exports = ${assetFilename};` };
+  },
+};

package/templates/ui/javascript/config/jest/globalSetup.js

@@ -0,0 +1,5 @@
+module.exports = async () => {
+  // use UTC timezone to not break tests when you run them on
+  // an environemnt with a different timezone
+  process.env.TZ = 'UTC';
+};

package/templates/ui/javascript/config/jest/setupTests.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+// eslint-disable-next-line
+import '@testing-library/jest-dom/extend-expect';
+
+// Set UTC timezone for tests to not use the environment timezone
+process.env.TZ = 'UTC';

package/templates/ui/javascript/gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .env
@@ -23,3 +24,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.eslintcache

package/templates/ui/javascript/src/AppSettings.js

@@ -27,6 +27,7 @@ function AppSettings({
         label="Example checkbox"
         control={
           <Checkbox
+            data-testid="exampleCheckbox"
             checked={settings.isExampleCheckboxChecked}
             onChange={e => onSettingChange('isExampleCheckboxChecked', e.target.checked)}
           />