Add unit tests and codecov

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

@@ -34,6 +34,14 @@ jobs:
         run: |
           cd OpenSearch-Dashboards/plugins/gantt-chart
           yarn osd bootstrap
+      - name: Test
+        run: |
+          cd OpenSearch-Dashboards/plugins/gantt-chart
+          yarn test --coverage
+      - name: Upload coverage
+        uses: codecov/codecov-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
       - name: Build Artifact
         run: |
           cd OpenSearch-Dashboards/plugins/gantt-chart

README.md

@@ -1,3 +1,6 @@
+[![Dashboards Visualizations CI](https://github.com/opensearch-project/dashboards-visualizations/actions/workflows/test-and-build-workflow.yml/badge.svg)](https://github.com/opensearch-project/dashboards-visualizations/actions/workflows/test-and-build-workflow.yml)
+[![codecov](https://codecov.io/gh/opensearch-project/dashboards-visualizations/branch/main/graphs/badge.svg)](https://codecov.io/gh/opensearch-project/dashboards-visualizations)
+
 # OpenSearch Dashboards Visualizations
 
 The OpenSearch Dashboards Visualizations enables you to use additional types of visualizations inside OpenSearch Dashboards Visualize and integrate them in Dashboard.

gantt-chart/.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "node": "10" }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-modules-commonjs",
+    ["@babel/plugin-transform-runtime", { "regenerator": true }],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+} 

gantt-chart/.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 build/
 target/
+coverage/
 .cypress/screenshots
-.cypress/videos
+.cypress/videos

gantt-chart/package.json

@@ -12,16 +12,22 @@
     "lint": "eslint .",
     "build": "yarn plugin-helpers build",
     "plugin-helpers": "node ../../scripts/plugin_helpers",
+    "test": "../../node_modules/.bin/jest --config ./test/jest.config.js",
     "test:cypress": "cypress run"
   },
   "dependencies": {
     "plotly.js-dist": "^1.57.1",
     "react-plotly.js": "^2.4.0"
   },
   "devDependencies": {
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/react-plotly.js": "^2.2.4",
+    "@types/showdown": "^1.9.3",
     "cypress": "^5.0.0",
-    "eslint": "^6.8.0"
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "jest": "^26.4.2",
+    "jest-dom": "^4.0.0"
   },
   "engines": {
     "node": "10.23.1",

gantt-chart/public/__tests__/gantt_vis_type.test.ts

@@ -0,0 +1,82 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { MockStateParams } from '../../test/mocks/mockData';
+import { getGanttVisDefinition } from '../gantt_vis_type';
+import { GanttVisDependencies } from '../plugin';
+
+describe('Test vis type', () => {
+  const MOCK_RESPONSE = {
+    total: 25,
+    hits: [
+      {
+        _source: { field: 'test' },
+        _index: 'test-index',
+        _type: 'test-type',
+        _id: 'test-id',
+        _score: 0,
+      },
+    ],
+  };
+  const httpClient = jest.fn() as any;
+  httpClient.post = jest.fn(() => Promise.resolve(MOCK_RESPONSE));
+
+  it('returns vis type', async () => {
+    const dependencies = ({
+      uiSettings: jest.fn(),
+      http: httpClient,
+    } as unknown) as GanttVisDependencies;
+    const ganttVisDefinition = getGanttVisDefinition(dependencies);
+
+    const request = await ganttVisDefinition.requestHandler({
+      timeRange: { from: 'now-15m', to: 'now' },
+      filters: [],
+      index: jest.fn() as any,
+      query: [] as any,
+      visParams: MockStateParams,
+    });
+    expect(request).toEqual(MOCK_RESPONSE);
+    expect(httpClient.post).toBeCalledWith('../api/gantt_vis/query', {
+      body:
+        '{"size":10,"body":{"sort":[{"startTime":{"order":"desc"}}],"query":{"bool":{"must":[{"range":"test-range"}]}}}}',
+    });
+
+    const response = await ganttVisDefinition.responseHandler(MOCK_RESPONSE);
+    expect(response).toEqual({
+      source: [
+        {
+          field: 'test',
+        },
+      ],
+      total: 25,
+    });
+  });
+
+  it('catches errors', async () => {
+    httpClient.post = jest.fn(() => Promise.reject('test-error'));
+    console.error = jest.fn();
+    const dependencies = ({
+      uiSettings: jest.fn(),
+      http: httpClient,
+    } as unknown) as GanttVisDependencies;
+    const ganttVisDefinition = getGanttVisDefinition(dependencies);
+
+    const request = await ganttVisDefinition.requestHandler({
+      timeRange: { from: 'now-15m', to: 'now' },
+      filters: [],
+      index: jest.fn() as any,
+      query: [] as any,
+      visParams: MockStateParams,
+    });
+    expect(request).toEqual(undefined);
+    expect(console.error).toBeCalledWith('test-error');
+  });
+});

gantt-chart/public/components/__tests__/__snapshots__/gantt_chart.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GanttChart /> spec renders empty prompt when no data is returned 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <span
+    class="euiTextColor euiTextColor--subdued"
+  >
+    <h2
+      class="euiTitle euiTitle--medium"
+    >
+      No data
+    </h2>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+    <div
+      class="euiText euiText--medium"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        No data matching the selected filter.
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`<GanttChart /> spec renders empty prompt when no field is selected 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <span
+    class="euiTextColor euiTextColor--subdued"
+  >
+    <h2
+      class="euiTitle euiTitle--medium"
+    >
+      No data
+    </h2>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+    <div
+      class="euiText euiText--medium"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        Specify data to plot the chart using the Data & Options panel
+        <br />
+        on the right.
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`<GanttChart /> spec renders the component 1`] = `
+<div
+  id="plotly-gantt-chart"
+  style="width: 100%; height: 100%;"
+/>
+`;
+
+exports[`<GanttChart /> spec renders the component with different props 1`] = `
+<div
+  id="plotly-gantt-chart"
+  style="width: 100%; height: 100%;"
+/>
+`;