Merge pull request #34 from DTStack/test/activityBar

Test/activity bar

.npmignore

@@ -11,3 +11,5 @@ commitlint.config.js
 tsconfig.build.json
 tsconfig.base.json
 jest.config.js
+lib/test
+lib/stories

babel.config.json

@@ -1,10 +1,11 @@
 {
     "presets": [
-        ["@babel/preset-env", { "targets": { "node": "current" } }],
+        ["@babel/preset-env"],
         "@babel/preset-react",
         "@babel/preset-typescript"
     ],
     "plugins": [
+        "@babel/plugin-transform-runtime",
         ["@babel/plugin-proposal-decorators", { "legacy": true }],
         ["@babel/plugin-proposal-class-properties", { "loose": true }]
     ]

jest.config.js

@@ -2,18 +2,27 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
-    // All imported modules in your tests should be mocked automatically
-    // automock: false,
-
     // Automatically clear mock calls and instances between every test
     clearMocks: true,
+    globals: {
+        __DEVELOPMENT__: true,
+    },
     testMatch: [
         '**/__tests__/**/(*.)+(spec|test).[jt]s?(x)',
         '**/test/**/(*.)+(spec|test).[jt]s?(x)',
     ],
     testPathIgnorePatterns: ['/node_modules/', 'lib'],
     // The directory where Jest should output its coverage files
     coverageDirectory: 'coverage',
-    testEnvironment: 'node',
+    transformIgnorePatterns: ['node_modules/(?!(monaco-editor|.*dnd.*)/)'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    moduleNameMapper: {
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+            '<rootDir>/mock/fileMock.js',
+        '\\.(css|scss|less)$': '<rootDir>/mock/styleMock.js',
+        '^mo/(.*)$': '<rootDir>/src/$1',
+        '^mo$': '<rootDir>/src/index.ts',
+        // '^monaco-editor(.*)$': '<rootDir>/mock/monacoMock.jsx',
+        '^monaco-editor$': '<rootDir>/mock/monacoMock.js',
+    },
 };

mock/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

mock/monacoMock.js

@@ -0,0 +1,11 @@
+module.exports = {
+    languages: {
+        register: function (language) {},
+        setMonarchTokensProvider: function (name, tokens) {},
+        registerCompletionItemProvider: function (name, provider) {},
+    },
+    editor: {
+        defineTheme: function (name, theme) {},
+        setTheme: function (theme) {},
+    },
+};

mock/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package.json

@@ -5,7 +5,7 @@
     "main": "lib/index.js",
     "scripts": {
         "preinstall": "node ./build/preinstall.js",
-        "test": "jest --coverage",
+        "test": "jest --no-cache --coverage",
         "dev": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "build-css": "webpack --config ./build/webpack.css.js",
@@ -50,6 +50,7 @@
         "@babel/core": "^7.12.16",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
         "@babel/plugin-proposal-decorators": "^7.12.13",
+        "@babel/plugin-transform-runtime": "^7.12.15",
         "@babel/preset-env": "^7.12.16",
         "@babel/preset-react": "^7.12.13",
         "@babel/preset-typescript": "^7.12.16",
@@ -62,6 +63,7 @@
         "@storybook/addon-notes": "^5.3.21",
         "@storybook/addons": "6.1.10",
         "@storybook/react": "6.1.10",
+        "@testing-library/react": "^11.2.5",
         "@types/jest": "^26.0.0",
         "@typescript-eslint/eslint-plugin": "^3.1.0",
         "@typescript-eslint/parser": "^3.1.0",
@@ -76,6 +78,7 @@
         "jest": "^26.0.1",
         "monaco-editor-webpack-plugin": "^2.0.0",
         "prettier": "^2.1.2",
+        "react-test-renderer": "^17.0.1",
         "sass": "^1.26.10",
         "sass-loader": "^10.0.2",
         "standard-version": "^9.0.0",

src/components/actionBar/__tests__/__snapshots__/actionBar.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test ActionBar Component Test the ActionBar Snapshot 1`] = `
+<div
+  className="mo-action-bar"
+>
+  <ul
+    className="mo-action-bar__container"
+  >
+    <li
+      className="mo-action-bar__item"
+      onClick={[Function]}
+    >
+      <a
+        className="mo-action-bar__label codicon codicon-add"
+        title="mockDataTitle"
+      />
+    </li>
+  </ul>
+</div>
+`;

src/components/actionBar/__tests__/actionBar.test.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+
+import ActionBar from '../index';
+
+const mockData = [
+    {
+        id: '1',
+        title: 'mockDataTitle',
+        iconName: 'codicon-add',
+    },
+];
+
+describe('Test ActionBar Component', () => {
+    test('Test the ActionBar Snapshot', () => {
+        const component = renderer.create(<ActionBar data={mockData} />);
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Test the ActionBar by the data Props', () => {
+        render(<ActionBar data={mockData} />);
+        expect(screen.getByTitle(/mockDataTitle/)).not.toBeNull();
+    });
+});

src/workbench/__tests__/mainBench.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MoleculeProvider } from 'mo';
+
+import { MainBench } from '../index';
+
+describe('Test MainBench Component', () => {
+    test('The MainBench DOM Testing', () => {
+        render(
+            <MoleculeProvider>
+                <MainBench />
+            </MoleculeProvider>
+        );
+
+        expect(screen.queryByText(/Explorer/)).not.toBeNull();
+    });
+});

src/workbench/__tests__/workbench.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { MoleculeProvider } from 'mo';
+
+import { Workbench } from '../index';
+
+describe('Test Workbench Component', () => {
+    test('The Workbench DOM Testing', () => {
+        const { container } = render(
+            <MoleculeProvider>
+                <Workbench />
+            </MoleculeProvider>
+        );
+        expect(container.querySelector('#molecule')).not.toBeNull();
+        expect(container.querySelector('.mo-workbench')).not.toBeNull();
+        expect(container.querySelector('.mo-statusBar')).not.toBeNull();
+    });
+});

src/workbench/editor/editor.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { memo } from 'react';
 import SplitPane from 'react-split-pane';
-import * as Pane from 'react-split-pane/lib/Pane';
+import Pane from 'react-split-pane/lib/Pane';
 import { IEditor, IEditorGroup } from 'mo/model';
 
 import EditorGroup from './group';

src/workbench/editor/index.tsx

@@ -1,3 +1,4 @@
+import 'reflect-metadata';
 import { connect } from 'mo/react';
 import { container } from 'tsyringe';
 import { IEditor } from 'mo/model';

src/workbench/workbench.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import SplitPane from 'react-split-pane';
-import * as Pane from 'react-split-pane/lib/Pane';
+import Pane from 'react-split-pane/lib/Pane';
 
 import { classNames, prefixClaName } from 'mo/common/className';
 

test/mo.test.tsx

@@ -0,0 +1,7 @@
+import { extensionService } from 'mo';
+
+describe('Test Mo Entry', () => {
+    test('Instance the extensionService', () => {
+        expect(extensionService).not.toBeNull();
+    });
+});