@oracle/oraclejet-jest-preset 13.0.0 → 14.0.0

package/README.md

@@ -0,0 +1,14 @@
+# Jest Preset
+
+This preset allows JET web elements to be used in Jest tests
+
+# Configuration
+
+## package.json
+
+```javascript
+  "jest": {
+    "preset": "@oracle/oraclejet-jest-preset",
+    ...
+  }
+```

package/package.json

@@ -1,24 +1,48 @@
 {
   "name": "@oracle/oraclejet-jest-preset",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "JET preset for Jest testing",
   "main": "jest-preset.js",
   "author": "",
   "license": "UPL-1.0",
+  "scripts": {
+    "clean": "rimraf test_results",
+    "test": "jest -c test/jest.config.js",
+    "test:debug": "yarn run --inspect jest -i --testTimeout=999999"
+  },
   "dependencies": {
-    "babel-jest": "^27.4.5",
-    "babel-plugin-transform-amd-to-commonjs": "^1.4.0",
+    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "babel-jest": "^27.2.0",
+    "babel-plugin-transform-amd-to-commonjs": "^1.6.0",
     "css": "^3.0.0",
-    "jest-preset-preact": "^4.0.2",
+    "identity-obj-proxy": "~3.0.0",
+    "jest-preset-preact": "^4.0.5",
     "jest-raw-loader": "^1.0.1",
-    "preact-render-to-string": "^5.1.16"
+    "preact-render-to-string": "^5.1.19"
   },
   "peerDependencies": {
-    "jest": "27.x",
-    "@oracle/oraclejet": ">=12.x"
+    "@oracle/oraclejet": ">=14.x",
+    "jest": "27.x"
   },
   "files": [
-    "*.js",
+    "jest-preset.js",
     "src/**"
-  ]
+  ],
+  "devDependencies": {
+    "@jest/globals": "27.5.1",
+    "@oracle/oraclejet": "link:../oraclejet/dist",
+    "@oracle/oraclejet-test-utils": "workspace:^",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/user-event": "~13.5.0",
+    "@types/jest": "27.5.1",
+    "copyfiles": "^2.4.1",
+    "hammerjs": "2.0.8",
+    "jest": "27.5.1",
+    "jquery": "3.6.1",
+    "preact": "10.11.3",
+    "ramda": "~0.27.2",
+    "regenerator-runtime": "^0.13.9",
+    "resize-observer-polyfill": "^1.5.1",
+    "rimraf": "3.0.2"
+  }
 }

package/src/babel.js

@@ -1,26 +1,27 @@
 const { default: babelJest } = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
-	presets: [
-		[
-			'@babel/preset-typescript',
-			{
-				jsxPragma: 'h',
-			},
-		],
-		'@babel/preset-env',
-	],
-	plugins: [
-		'babel-plugin-transform-amd-to-commonjs',
-		[
-			'@babel/plugin-transform-react-jsx',
-			{
-				pragma: 'h',
-				pragmaFrag: 'Fragment',
-			},
-		],
-		'@babel/plugin-proposal-class-properties',
-	],
-	babelrc: false,
-	configFile: false,
+  presets: [
+    [
+      '@babel/preset-typescript',
+      {
+        jsxPragma: 'h'
+      }
+    ],
+    '@babel/preset-env'
+  ],
+  plugins: [
+    'babel-plugin-transform-amd-to-commonjs',
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        runtime: 'automatic',
+        importSource: 'preact'
+      }
+    ],
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    '@babel/plugin-proposal-class-properties'
+  ],
+  babelrc: false,
+  configFile: false
 });

package/src/loaders/ojL10n-loader.js

@@ -18,7 +18,7 @@ const context = vm.createContext({
   define: function(rb) {
     // define({ ... })
     if (arguments.length === 1) {
-      return rb;
+      return typeof rb === 'function' ? rb() : rb;
     }
     // define(['require', 'exports'], function(require, exports))
     const exp = {};
@@ -37,9 +37,16 @@ module.exports = {
     // Since the script runs in our context, assign it to "this.rb" so that we
     // can retrieve it
     const script = new vm.Script(`this.rb = ${content}`);
-    script.runInContext(context);
-    // app resource bundles are underneath 'root'
-    // otherwise return entire bundle
-    return `module.exports = ${JSON.stringify(context.rb.root || context.rb)}`;
+    try {
+      // Run in try/catch to process only AMD files. All other file types (CJS)
+      // will throw exception
+      script.runInContext(context);
+      // app resource bundles are underneath 'root'
+      // otherwise return entire bundle
+      const bundle = context.rb.root || context.rb;
+      bundle._ojLocale_ = 'en';
+      return `module.exports = ${JSON.stringify(context.rb.root || context.rb)}`;
+    } catch (ex) {}
+    return content;
   }
 }

package/src/mocks/ojlocaledata.js

@@ -1,9 +1,6 @@
-const LocaleData = require("../../../oraclejet/dist/js/libs/oj/debug/ojlocaledata");
-const rootBundle = require("ojL10n!ojtranslations/nls/localeElements");
-const enBundle = require("ojL10n!ojtranslations/nls/en/localeElements");
+const LocaleData = require('@oracle/oraclejet/dist/js/libs/oj/debug/ojlocaledata');
+const rootBundle = require('ojL10n!ojtranslations/nls/localeElements');
+const enBundle = require('ojL10n!ojtranslations/nls/en/localeElements');
 
-Object.assign(enBundle.main.en, rootBundle, {
-  _ojLocale_: "en",
-});
-LocaleData.setBundle(enBundle.main.en);
+LocaleData.setBundle({ ...enBundle.main.en, ...rootBundle });
 module.exports = LocaleData;

package/src/mocks/ojthemeutils.js

@@ -3,11 +3,11 @@ const fs = require('fs');
 const path = require('path');
 
 let rules;
-let cssVars = [];
+let cssVars;
 const fontFamilyJsons = {};
 function parseRules() {
   if (!rules) {
-    const cssPath = path.resolve(__dirname, '../../../oraclejet/dist/css/stable/oj-stable.css');
+    const cssPath = require.resolve('__oj-theme-css');
     const contents = fs.readFileSync(cssPath).toString();
     rules = css.parse(contents).stylesheet.rules.filter((rule) => rule.selectors);
   }
@@ -26,7 +26,10 @@ function parseJSONFromFontFamily(className) {
     );
     const ff = rule.declarations.find((decl) => decl.property === 'font-family');
     // Remove !important and start/ending quotes
-    const ffValue = ff.value.replace(/\s*!important;?/, '').replace(/^'/, '').replace(/'$/, '')
+    const ffValue = ff.value
+      .replace(/\s*!important;?/, '')
+      .replace(/^'/, '')
+      .replace(/'$/, '');
     config = fontFamilyJsons[className] = JSON.parse(ffValue);
   }
   return config;
@@ -34,15 +37,19 @@ function parseJSONFromFontFamily(className) {
 
 function getCachedCSSVarValues(names) {
   parseRules();
-  if (!cssVars.length) {
+  if (!cssVars) {
     // Find all :root declarations
-    rules.forEach((rule) => {
+    cssVars = rules.reduce((accum, rule) => {
       if (rule.selectors.includes(':root')) {
-        cssVars = cssVars.concat(rule.declarations);
+        return {
+          ...accum,
+          ...rule.declarations.reduce((acc2, decl) => ({ ...acc2, [decl.property]: decl }), {})
+        };
       }
-    });
+      return accum;
+    }, {});
   }
-  const matches = cssVars.filter((decl => names.includes(decl.property)));
+  const matches = names.map((name) => cssVars[name]).filter(Boolean);
   // Remove leading/trailing quotes
   return matches.map((match) => match.value.replace(/^'/, '').replace(/'$/, ''));
 }

package/src/mocks/ojtimezonedata.js

@@ -0,0 +1,10 @@
+const TimezoneData = require('@oracle/oraclejet/dist/js/libs/oj/debug/ojtimezonedata');
+const rootData = require('ojL10n!ojtranslations/nls/timezoneData');
+const enUsData = require('ojL10n!ojtranslations/nls/en-US/timezoneData');
+const { deepMerge } = require('../utils');
+
+const data = {};
+deepMerge(data, rootData, enUsData);
+TimezoneData.__mergeIntoLocaleElements(data);
+
+module.exports = TimezoneData;

package/src/mocks/ojtranslation.js

@@ -1,5 +1,13 @@
-const Translation = require("../../../oraclejet/dist/js/libs/oj/debug/ojtranslation");
-const rootTranslations = require("ojL10n!ojtranslations/nls/ojtranslations");
+const Translation = require('@oracle/oraclejet/dist/js/libs/oj/debug/ojtranslation');
+const rootTranslations = require('ojL10n!ojtranslations/nls/ojtranslations');
 
 Translation.setBundle(rootTranslations);
-module.exports = Translation;
+module.exports = {
+  ...Translation,
+  setBundle: (bundle) => {
+    // Merge into rootTranslations
+    if (bundle !== rootTranslations) {
+      Object.assign(rootTranslations, bundle.root || bundle);
+    }
+  }
+}

package/src/preset.js

@@ -2,6 +2,9 @@ const jestPreset = require('jest-preset-preact');
 const path = require('path');
 
 const mappedModules = {
+  // Alias to allow ojthemeutils to fetch CSS w/o being intercepted by
+  // identify-obj-proxy mapping below
+  '^__oj-theme-css$': '@oracle/oraclejet/dist/css/redwood/oj-redwood.css',
   // Noop style files
   '^.+\\.(css|sass|scss|less)$': 'identity-obj-proxy',
   '^css!.*': 'identity-obj-proxy',
@@ -19,16 +22,16 @@ const mappedModules = {
   ],
   'ojL10n!./(.*)': './$1',
   'ojL10n!ojtranslations/nls/(.*)': '@oracle/oraclejet/dist/js/libs/oj/resources/nls/$1',
-  'jqueryui-amd/(.*)': '@oracle/oraclejet/dist/js/libs/jquery/jqueryui-amd-1.13.0/$1',
-  '@oracle/oraclejet-preact/(.*)': '@oracle/oraclejet/dist/js/libs/oraclejet-preact/cjs/$1'
+  'jqueryui-amd/(.*)': '@oracle/oraclejet/dist/js/libs/jquery/jqueryui-amd-1.13.2/$1',
+  '@oracle/oraclejet-preact/(.*)': '@oracle/oraclejet-preact/cjs/$1'
 };
 
 Object.assign(jestPreset, {
   modulePaths: ['@oracle/oraclejet/dist/js/libs/oj/'],
   transform: {
-    'resources\\/nls\\/': require.resolve('./loaders/ojL10n-loader'),
+    [`\\${path.sep}resources\\${path.sep}nls\\${path.sep}`]: require.resolve('./loaders/ojL10n-loader'),
     // Use our own Babel configuration
-    '^.+\\.(mjs|js|jsx|ts|tsx)$': path.resolve(__dirname, 'babel.js'),
+    '^.+\\.(mjs|js|jsx|ts|tsx)$': require.resolve('./babel.js'),
     // Handle loader.ts which loads component.json and expects string instead of
     // JSON object
     'component\\.json$': require.resolve('./loaders/json-text-loader'),

package/src/utils.js

@@ -0,0 +1,17 @@
+function deepMerge(o1, ...rest) {
+  if (!rest.length) {
+    return;
+  }
+  const o2 = rest.shift();
+  Object.keys(o2).forEach(k2 => {
+    const v2 = o2[k2];
+    if (typeof v2 === 'object' && k2 in o1) {
+      deepMerge(o1[k2], v2);
+    } else {
+      o1[k2] = v2;
+    }
+  });
+  deepMerge(o1, ...rest);
+}
+
+module.exports = { deepMerge };