From 4f8678d1fd734a7764147e5f5f8b60ac8964cec4 Mon Sep 17 00:00:00 2001
From: Chenyang Ji <cyji@amazon.com>
Date: Tue, 25 Jun 2024 15:10:05 -0700
Subject: [PATCH] Add targets, config and pipeline for tests and lint

Signed-off-by: Chenyang Ji <cyji@amazon.com>
---
 .github/workflows/build-and-test.yml          |  6 +-
 babel.config.js                               | 19 +++++
 package.json                                  | 52 ++++++++++++--
 .../__snapshots__/app.test.tsx.snap           | 69 +++++++++++++++++++
 public/components/app.test.ts                 |  7 --
 public/components/app.test.tsx                | 33 +++++++++
 test/jest.config.js                           |  4 +-
 test/setup.jest.ts                            | 19 +++++
 test/setupTests.ts                            |  6 ++
 9 files changed, 199 insertions(+), 16 deletions(-)
 create mode 100644 babel.config.js
 create mode 100644 public/components/__snapshots__/app.test.tsx.snap
 delete mode 100644 public/components/app.test.ts
 create mode 100644 public/components/app.test.tsx
 create mode 100644 test/setup.jest.ts
 create mode 100644 test/setupTests.ts

diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
index 7820ac9..860be5c 100644
--- a/.github/workflows/build-and-test.yml
+++ b/.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
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..4493686
--- /dev/null
+++ b/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'),
+  ],
+};
diff --git a/package.json b/package.json
index c04d0a5..6a807bd 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/public/components/__snapshots__/app.test.tsx.snap b/public/components/__snapshots__/app.test.tsx.snap
new file mode 100644
index 0000000..8d17b89
--- /dev/null
+++ b/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>
+`;
diff --git a/public/components/app.test.ts b/public/components/app.test.ts
deleted file mode 100644
index 4e9b7b3..0000000
--- a/public/components/app.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-describe('first jest tests suite', () => {
-  describe('first jest test', () => {
-    it('should always pass', () => {
-      expect(true).toBe(true);
-    });
-  });
-});
diff --git a/public/components/app.test.tsx b/public/components/app.test.tsx
new file mode 100644
index 0000000..a04360b
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/test/jest.config.js b/test/jest.config.js
index 1c170d4..36430c4 100644
--- a/test/jest.config.js
+++ b/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: {
diff --git a/test/setup.jest.ts b/test/setup.jest.ts
new file mode 100644
index 0000000..9eb3f9e
--- /dev/null
+++ b/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
diff --git a/test/setupTests.ts b/test/setupTests.ts
new file mode 100644
index 0000000..aae14dd
--- /dev/null
+++ b/test/setupTests.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+require('babel-polyfill');