Development (#16)

Co-authored-by: Ahmed AlSammany <[email protected]>

package.json

@@ -2,7 +2,7 @@
   "name": "@incorta-org/create-incorta-component",
   "description": "Generate a new incorta component",
   "main": "index.js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "repository": "[email protected]:Incorta/create-incorta-component.git",
   "license": "MIT",
   "private": false,
@@ -21,7 +21,7 @@
     "shelljs": "^0.8.5",
     "socket.io": "^4.1.3",
     "uuid": "^8.3.2",
-    "vite": "^2.7.13",
+    "vite": "^4.3.9",
     "prettier": "^2.5.0"
   },
   "bin": {

resources/files/tsconfig.json

@@ -12,6 +12,7 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
+    "ignoreDeprecations": "5.0",
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "target": "es5",
@@ -21,7 +22,8 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "types": ["node", "vite/client", "vitest/globals", "vitest-dom/extend-expect"]
   },
   "include": ["src", "custom.d.ts"],
   "exclude": ["node_modules", "dist"]

resources/files/vitest-setup.ts

@@ -0,0 +1,6 @@
+import { cleanup } from '@testing-library/react';
+import 'vitest-dom/extend-expect';
+
+afterEach(() => {
+  cleanup();
+});

resources/files/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['vitest-setup.ts'],
+    globals: true
+  }
+});

resources/templates/package.json.js

@@ -25,7 +25,9 @@ module.exports = opts => {
       postinstall: 'npm run generate',
       generate: 'create-incorta-component generate',
       build: 'create-incorta-component package',
-      start: 'create-incorta-component start'
+      start: 'create-incorta-component start',
+      start: 'create-incorta-component start',
+      test: 'create-incorta-component test'
     },
     peerDependencies: {
       react: '^17.0.2',
@@ -36,7 +38,7 @@ module.exports = opts => {
       '@testing-library/react': '^9.5.0',
       '@testing-library/user-event': '^7.2.1',
       '@types/jest': '^25.1.4',
-      '@types/node': '^12.12.38',
+      '@types/node': '^20.10.4',
       '@types/react': '^17.0.14',
       '@types/react-dom': '^17.0.9',
       '@typescript-eslint/eslint-plugin': '^2.26.0',
@@ -58,7 +60,9 @@ module.exports = opts => {
       prettier: '^2.0.4',
       'react-scripts': '4.0.3',
       typescript: '^4.1.3',
-      '@incorta-org/create-incorta-component': packageJSON.version
+      '@incorta-org/create-incorta-component': packageJSON.version,
+      vitest: '^0.31.4',
+      'vitest-dom': '^0.1.0'
     },
     files: ['dist'],
     dependencies: {

resources/templates/test.tsx.js

@@ -0,0 +1,99 @@
+const { camelCase, startCase } = require('lodash');
+
+const componentIndexGenerator = ({ directory }) => {
+  const pascalCaseName = startCase(camelCase(directory)).replace(/ /g, '');
+  return {
+    pascalCaseName,
+    component: `import React from 'react';
+import { vi } from 'vitest';
+import { render } from '@testing-library/react';
+import ${pascalCaseName} from './${pascalCaseName}';
+import { Context, ResponseData, TContext } from '@incorta-org/component-sdk';
+
+const exampleContext: Context<TContext> = {
+  app: {
+    color_palette: [],
+    features: {},
+    loginInfo: {},
+    locale: {
+      locale: 'en',
+      formatMessage(key) {
+        return '';
+      }
+    }
+  },
+  component: {
+    dimensions: {
+      width: 862,
+      height: 1070
+    },
+    settings: {
+      key1: true
+    },
+    bindings: {
+      'tray-key': [
+        {
+          id: 'h-06D4X-Svy',
+          name: 'Cost',
+          field: {
+            column: 'SALES.SALES.COST_OF_GOODS',
+            datatype: 'double',
+            supportHierarchy: false,
+            function: 'measure'
+          },
+          settings: {}
+        }
+      ]
+    },
+    id: 'e95dafdc-bf08-451f-bb0d-f451496e22d4',
+    version: '0.0.1',
+    numberOfElementsInRow: 1,
+    widthScale: 1,
+    automaticHeight: 0
+  }
+};
+
+const exampleData: ResponseData = {
+  isSampled: false,
+  subqueryComplete: true,
+  rowHeaders: [],
+  measureHeaders: [
+    {
+      label: 'Cost',
+      dataType: 'double',
+      id: 'h-06D4X-Svy',
+      index: 0
+    }
+  ],
+  data: [
+    [
+      {
+        value: '1670.79',
+        formatted: '1,670.79'
+      }
+    ]
+  ],
+  isAggregated: false,
+  startRow: 0,
+  endRow: 1000,
+  totalRows: 918843,
+  complete: false,
+  raw: false
+};
+
+describe('<${pascalCaseName} />', () => {
+  it('should render Hello Incorta Component', () => {
+    let drilldown = vi.fn();
+
+    let { getByText } = render(
+      <${pascalCaseName} context={exampleContext} data={exampleData} drillDown={drilldown} prompts={{}} />
+    );
+
+    expect(getByText(/Hello Incorta Component/i)).toBeInTheDocument();
+  });
+});
+`
+  };
+};
+
+module.exports = componentIndexGenerator;

scripts/create-incorta-component.js

@@ -5,6 +5,7 @@ const { Command } = require('commander');
 const runInit = require('./init/index');
 const runPackage = require('./package/index');
 const runStart = require('./start/index');
+const runTest = require('./test/index');
 const runGenerate = require('./generate/index');
 
 const checkBeforeInit = require('../utils/check-requirements');
@@ -31,6 +32,13 @@ createIncortaComponent
     runStart();
   });
 
+createIncortaComponent
+  .command('test')
+  .description('Run testing using vitest')
+  .action(() => {
+    runTest();
+  });
+
 createIncortaComponent
   .command('generate')
   .description('Generate definition types')

scripts/init/generate-files.js

@@ -2,10 +2,12 @@ const chalk = require('chalk');
 const fse = require('fs-extra');
 const { join, resolve } = require('path');
 const shelljs = require('shelljs');
+const path = require('path');
 
 const componentPackageJsonGenerator = require('../../resources/templates/package.json.js');
 const definitionJsonGenerator = require('../../resources/templates/definition.json.js');
 const componentIndexGenerator = require('../../resources/templates/index.tsx.js');
+const componentTestGenerator = require('../../resources/templates/test.tsx.js');
 
 const createPackageJSON = async ({ options, newComponentPath }) => {
   const { directory, author, description } = options;
@@ -46,6 +48,13 @@ const createComponentIndexFile = async ({ options, newComponentPath }) => {
   await fse.writeFile(componentPath, component);
 };
 
+const createComponentTestFile = async ({ options, newComponentPath }) => {
+  let { component, pascalCaseName } = componentTestGenerator(options);
+
+  const indexPath = join(newComponentPath, 'src', `${pascalCaseName}.test.tsx`);
+  await fse.writeFile(indexPath, component);
+};
+
 const createGitIgnoreFile = async ({ newComponentPath }) => {
   const gitignorePath = join(newComponentPath, '.gitignore');
   console.log('gitignorePath', gitignorePath);
@@ -92,11 +101,28 @@ async function generateFiles(directory, options) {
     await createPackageJSON({ options, newComponentPath });
     await createDefinitionJson({ options, newComponentPath });
     await createComponentIndexFile({ options, newComponentPath });
+    await createComponentTestFile({ options, newComponentPath });
     await createGitIgnoreFile({ newComponentPath });
 
-    console.log(chalk.grey('Installing dependencies...'));
+    let packageManager = 'npm';
+    let currentDir = currentProcessDir;
+    while (currentDir !== '/') {
+      if (fse.existsSync(path.join(currentDir, 'yarn.lock'))) {
+        packageManager = 'yarn';
+        break;
+      } else if (fse.existsSync(path.join(currentDir, 'pnpm-lock.yaml'))) {
+        packageManager = 'pnpm';
+        break;
+      } else if (fse.existsSync(path.join(currentDir, 'package-lock.json'))) {
+        packageManager = 'npm';
+        break;
+      }
+      currentDir = path.dirname(currentDir);
+    }
+
+    console.log(chalk.grey(`Using ${packageManager} as the package manager`));
 
-    shelljs.exec('npm install', {
+    shelljs.exec(`${packageManager} install`, {
       stdio: 'inherit',
       cwd: newComponentPath
     });

scripts/package/index.js

@@ -27,8 +27,10 @@ function zipDirectory(source, out) {
 
 const createBuildPackage = async () => {
   try {
+    let vitePath = require.resolve('vite');
+    let viteBinPath = path.join(vitePath, '../..', '.bin', 'vite');
     let configFilePath = path.resolve(__dirname, './vite-config-prod.js');
-    shelljs.exec(`npx vite build --config "${configFilePath}"`);
+    shelljs.exec(`${viteBinPath} build --config "${configFilePath}"`);
 
     console.log(chalk.gray('Compressing bundle...'));
     let distPath = resolvePath('dist');

scripts/start/index.js

@@ -3,8 +3,10 @@ const shelljs = require('shelljs');
 
 async function runDevServer() {
   try {
+    let vitePath = require.resolve('vite');
+    let viteBinPath = path.join(vitePath, '../..', '.bin', 'vite');
     let configFilePath = path.resolve(__dirname, './vite-config-dev.js');
-    shelljs.exec(`npx vite build --watch --config "${configFilePath}"`);
+    shelljs.exec(`${viteBinPath} build --watch --config "${configFilePath}"`);
   } catch (e) {
     console.log(e);
   }

scripts/test/index.js

@@ -0,0 +1,13 @@
+const { spawn } = require('child_process');
+
+async function runTest() {
+  try {
+    // use spawn to run an interactive command
+    const shell = spawn('npx vitest', [], { stdio: 'inherit', shell: true });
+    shell.on('close', code => console.log('[shell] terminated :', code));
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+module.exports = runTest;