Create fastApi helper functions and update project config to export tooling files

.eslintrc.js

@@ -1,20 +1,51 @@
-/* eslint-env node */
 module.exports = {
   root: true,
-  ignorePatterns: ['*.config.js', '*.spec.js', 'dist/*'],
+
+  // Ignore every file but the patterns specified after '/*'
+  ignorePatterns: [
+    '/*',
+    '!/components', // all files inside /components
+    '!/tools', // all files inside /tools
+    '!/*.js', // all JS files in root dir
+  ],
+
   extends: [
     'plugin:vue/vue3-recommended',
     'eslint:recommended',
     'plugin:storybook/recommended',
   ],
 
   plugins: ['vue'],
-
-  env: {
-    'vue/setup-compiler-macros': true,
-  },
+  parser: 'vue-eslint-parser',
 
   rules: {
     'vue/multi-word-component-names': 'off',
   },
+
+  overrides: [
+    // Config for unit tests
+    {
+      files: ['*.spec.js'],
+      plugins: ['jest'],
+      extends: [
+        'plugin:jest/recommended',
+        'plugin:jest-formatting/strict',
+      ],
+      env: {
+        jest: true,
+        'jest/globals': true,
+      },
+      globals: {
+        global: 'writable',
+      },
+    },
+
+    // Config for files that run in node env (config files, etc)
+    {
+      files: ['*.config.js', '.eslintrc.js'],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

.storybook/main.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 
 
 module.exports = {

components/jest.config.js

@@ -1,5 +1,8 @@
+/** @type {import('jest').Config} */
 module.exports = {
   rootDir: __dirname,
+  displayName: 'components',
+
   moduleFileExtensions: [
     'js',
     'json',
@@ -26,22 +29,16 @@ module.exports = {
 
   clearMocks: true,
 
-  testMatch: [
-    '<rootDir>/(**/*\\.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
-  ],
-
-  collectCoverage: true,
-
   collectCoverageFrom: [
-    'src/**/*.{js,vue}',
+    '<rootDir>/src/**/*.{js,vue}',
   ],
 
-  coverageDirectory: '<rootDir>/test/coverage/',
+  testMatch: [
+    '<rootDir>/(**/*\\.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
+  ],
 
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',
   },
-
-  coverageProvider: 'v8',
 };

components/src/core/helpers.spec.js

@@ -18,11 +18,11 @@ describe('clone', () => {
 });
 
 describe('has', () => {
-  it('should check if object has an own property of key', () => {
+  it('returns true if the object has the property', () => {
     expect(has('prop', { prop: undefined })).toBeTruthy();
   });
 
-  it('should check if object has an own property of key', () => {
+  it('returns false if the object does not have the property', () => {
     expect(has('prop1', { prop: undefined })).toBeFalsy();
   });
 });

components/src/core/injector/core/launcher.spec.js

@@ -44,33 +44,39 @@ describe('$init', () => {
 
     it('handler should set proper id to state', () => {
       handler({}, { $id: 'XXX' });
+
       expect(core.id).toBe('XXX');
     });
 
     it('should handler should set passed data to state', () => {
       handler({ foo: 'BAR' }, {});
+
       expect(core.state).toEqual({ foo: 'BAR' });
     });
 
     it('should emit "$size" event', () => {
       handler({}, {});
+
       expect(injector.emit.mock.calls[2]).toEqual(['$size', 'SIZE']);
     });
 
     it('should get sizes from $size method', () => {
       handler({}, {});
+
       expect(core.size).toHaveBeenCalled();
     });
 
     it('should set interval', () => {
       handler({}, {});
+
       expect(setInterval).toHaveBeenCalledWith(expect.any(Function), 300);
     });
 
     it('should set interval for sizing', () => {
       handler({}, {});
       injector.emit.mock.calls = [];
       setInterval.mock.calls[0][0]();
+
       expect(injector.emit).toHaveBeenCalledWith('$size', 'SIZE');
     });
   });

components/src/core/injector/index.spec.js

@@ -42,7 +42,16 @@ describe('createInjector on launcher error', () => {
     launcher.mockImplementation(() => Promise.reject(new Error('ERROR')));
   });
 
-  it('should throw an error', () => {
-    expect(createInjector()).rejects.toThrow('ERROR');
+  it('should throw an error', async () => {
+    let error;
+
+    try {
+      await createInjector();
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toBeInstanceOf(Error);
+    expect(error.message).toEqual('ERROR');
   });
 });

components/src/index.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable vue/one-component-per-file */
 import createApp from './index';
 import injector from '~core/injector';
 import registerWidget from '~core/registerWidget';

components/src/widgets/icon/widget.spec.js

@@ -59,7 +59,7 @@ describe('Icon', () => {
         expect(result).toEqual('12px');
       });
 
-      it('shouldn\`t add px if size prop is passed as String with "px"', () => {
+      it('shouldn\'t add px if size prop is passed as String with "px"', () => {
         const component = Icon.setup(
           {size:  '12px'},
           {expose: () => 'mock reqired for composition api'}

components/src/widgets/icon/widget.vue

@@ -12,7 +12,7 @@
   import * as icons from '@cloudblueconnect/material-svg';
   defineOptions({
     name: 'Icon',
-  })
+  });
   const props = defineProps({
     iconName: {
       type: String,
@@ -26,7 +26,7 @@
       type: [Number, String],
       default: '24',
     }
-  })
+  });
   const addUnits = (value) => {
     const regex = /^-?\d+$/;
     if (!regex.test(value)) return value;
@@ -39,7 +39,7 @@
       width: addUnits(props.size),
     }
   })
- 
+
   const icon = computed(() => {
     return icons[props.iconName];
   })

components/webpack.config.js

@@ -1,7 +1,7 @@
+const path = require('node:path');
 const { VueLoaderPlugin } = require('vue-loader');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
-const { resolve } = require("path");
 
 module.exports = {
   mode: process.env.NODE_ENV,
@@ -10,10 +10,10 @@ module.exports = {
     outputModule: true,
   },
 
-  entry: resolve(__dirname, 'src/index.js'),
+  entry: path.resolve(__dirname, './src/index.js'),
 
   output: {
-    path: resolve(__dirname, '..', 'dist'),
+    path: path.resolve(__dirname, '..', 'dist'),
     filename: 'index.js',
     library: {
       type: 'module',
@@ -37,7 +37,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('app'), resolve('test')],
+        include: [path.resolve('app'), path.resolve('test')],
         exclude: /node_modules/,
       },
       {
@@ -53,17 +53,17 @@ module.exports = {
         type: 'asset/source',
         loader: 'svgo-loader',
         options: {
-          configFile: resolve(__dirname, 'svgo.config.js'),
+          configFile: path.resolve(__dirname, 'svgo.config.js'),
         },
       },
     ],
   },
 
   resolve: {
     alias: {
-      '~core': resolve(__dirname, './src/core'),
-      '~widgets': resolve(__dirname, './src/widgets'),
-      '~constants': resolve(__dirname, './src/constants'),
+      '~core': path.resolve(__dirname, './src/core'),
+      '~widgets': path.resolve(__dirname, './src/widgets'),
+      '~constants': path.resolve(__dirname, './src/constants'),
     },
   },
 
@@ -74,19 +74,4 @@ module.exports = {
       extensions: ['js', 'vue'],
     }),
   ],
-  devServer: {
-    hot: true,
-
-    allowedHosts: 'all',
-
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-
-    static: ['dist'],
-
-    historyApiFallback: {
-      rewrites: [{ from: /./, to: '/index.js' }],
-    },
-  },
 };

jest.config.js

@@ -0,0 +1,13 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  rootDir: __dirname,
+
+  collectCoverage: true,
+  coverageDirectory: '<rootDir>/test/coverage/',
+  coverageProvider: 'v8',
+
+  projects: [
+    '<rootDir>/components/jest.config.js',
+    '<rootDir>/tools/jest.config.js',
+  ],
+};