Add targets, config and pipeline for tests and lint

Signed-off-by: Chenyang Ji <cyji@amazon.com>

.github/workflows/build-and-test.yml

@@ -1,4 +1,4 @@
-name: Build and test workflow
+name: Build, test and lint workflow
 on:
   push:
     branches:
@@ -86,6 +86,10 @@ jobs:
         run: |
           cd OpenSearch-Dashboards/plugins/query-insights-dashboards
           yarn osd bootstrap
+      - name: Run lint
+        run: |
+          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
+          yarn run lint
       - name: Run tests
         run: |
           cd OpenSearch-Dashboards/plugins/query-insights-dashboards

babel.config.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// babelrc doesn't respect NODE_PATH anymore but using require does.
+// Alternative to install them locally in node_modules
+module.exports = {
+  presets: [
+    require('@babel/preset-env'),
+    require('@babel/preset-react'),
+    require('@babel/preset-typescript'),
+  ],
+  plugins: [
+    [require('@babel/plugin-transform-runtime'), { regenerator: true }],
+    require('@babel/plugin-transform-class-properties'),
+    require('@babel/plugin-transform-object-rest-spread'),
+  ],
+};

package.json

@@ -1,15 +1,55 @@
 {
-  "name": "queryInsightsDashboards",
-  "version": "0.0.0",
-  "private": true,
+  "name": "opensearch_query_insights_dashboards",
+  "version": "3.0.0.0",
+  "description": "OpenSearch Dashboards plugin for Query Insights",
+  "main": "index.js",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/opensearch-project/query-insights-dashboards",
+  "config": {
+    "id": "queryInsightsDashboards",
+    "zip_name": "query-insights-dashboards"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opensearch-project/query-insights-dashboards"
+  },
   "scripts": {
     "build": "yarn plugin-helpers build",
     "plugin-helpers": "../../scripts/use_node ../../scripts/plugin_helpers",
     "osd": "../../scripts/use_node ../../scripts/osd",
-    "test:jest": "../../node_modules/.bin/jest --config ./test/jest.config.js"
+    "test:jest": "../../node_modules/.bin/jest --config ./test/jest.config.js",
+    "test:jest:dev": "../../node_modules/.bin/jest --watch --config ./test/jest.config.js",
+    "test:jest:update-snapshots": "yarn run test:jest -u",
+    "lint": "node ../../scripts/eslint ."
+  },
+  "resolutions": {
+    "@types/react": "^16.9.8",
+    "**/@types/jest": "^29.3.1",
+    "**/@types/react-dom": "^16.9.8",
+    "eslint-utils": "^1.4.2",
+    "async": "^3.2.3",
+    "json5": "^2.2.3",
+    "@babel/core": "^7.20.12",
+    "@babel/traverse": "^7.20.12",
+    "@cypress/request": "^3.0.0"
   },
   "devDependencies": {
-    "jest-dom": "^4.0.0",
-    "ts-jest": "^29.1.5"
+    "@elastic/elastic-eslint-config-kibana": "link:../../packages/opensearch-eslint-config-opensearch-dashboards",
+    "@elastic/eslint-import-resolver-kibana": "link:../../packages/osd-eslint-import-resolver-opensearch-dashboards",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.3.2",
+    "cypress": "9.5.4",
+    "cypress-real-events": "1.7.6",
+    "cypress-recurse": "^1.27.0",
+    "eslint-plugin-no-unsanitized": "^3.0.2",
+    "eslint-plugin-prefer-object-spread": "^1.2.1",
+    "husky": "^8.0.0",
+    "jest-cli": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
+    "lint-staged": "^10.2.0",
+    "ts-loader": "^6.2.1",
+    "string.prototype.replaceall": "1.0.7"
   }
 }

public/components/__snapshots__/app.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
+<div>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow euiPage--restrictWidth-custom"
+    style="max-width: 1000px;"
+  >
+    <main
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <h1
+          class="euiTitle euiTitle--large"
+        >
+          query-insights-dashboards
+        </h1>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+        role="main"
+      >
+        <div
+          class="euiPageContentHeader euiPageContentHeader--responsive"
+        >
+          <h2
+            class="euiTitle euiTitle--medium"
+          >
+            Congratulations, you have successfully created a new OpenSearch Dashboards Plugin!
+          </h2>
+        </div>
+        <div
+          class="euiPageContentBody"
+        >
+          <div
+            class="euiText euiText--medium"
+          >
+            <p>
+              Look through the generated code and check out the plugin development documentation.
+            </p>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <p>
+              Last timestamp: Unknown
+            </p>
+            <button
+              class="euiButton euiButton--primary euiButton--small"
+              type="primary"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Get data
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+`;

public/components/app.test.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { QueryInsightsDashboardsApp } from './app';
+
+describe('<QueryInsightsDashboardsApp /> spec', () => {
+  it('renders the component', () => {
+    const mockHttpStart = {
+      basePath: {
+        serverBasePath: '/app/opensearch-dashboards',
+      },
+    };
+
+    const { container } = render(
+      <QueryInsightsDashboardsApp
+        basename="/"
+        http={mockHttpStart as any}
+        navigation={
+          {
+            ui: { TopNavMenu: () => null },
+          } as any
+        }
+        notifications={{} as any}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

test/jest.config.js

@@ -5,8 +5,8 @@
 
 module.exports = {
   rootDir: '../',
-  setupFiles: [],
-  setupFilesAfterEnv: [],
+  setupFiles: ['<rootDir>/test/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.jest.ts'],
   roots: ['<rootDir>'],
   coverageDirectory: './coverage',
   moduleNameMapper: {

test/setup.jest.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// @ts-ignore
+window.Worker = function () {
+  this.postMessage = () => {};
+  // @ts-ignore
+  this.terminate = () => {};
+};
+
+// @ts-ignore
+window.URL = {
+  createObjectURL: () => {
+    return '';
+  },
+};
+
+jest.setTimeout(10000); // in milliseconds

test/setupTests.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+require('babel-polyfill');