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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.50.0-2",
+  "version": "0.50.0-3",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [

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)}
           />