increased frontend code coverage and added demo gif to README.md

README.md

@@ -5,9 +5,12 @@
 [![PyPI](https://img.shields.io/pypi/pyversions/dtale.svg)](https://pypi.python.org/pypi/dtale/)
 [![ReadTheDocs](https://readthedocs.org/projects/dtale/badge)](https://dtale.readthedocs.io)
 [![codecov](https://codecov.io/gh/manahl/dtale/branch/master/graph/badge.svg)](https://codecov.io/gh/manahl/dtale)
+[![Downloads](https://pepy.tech/badge/dtale)](https://pepy.tech/project/dtale)
 
 ## Getting Started
 
+![](https://raw.githubusercontent.com/manahl/dtale/master/docs/images/blog/dtale_demo_mini.gif)
+
 Setup/Activate your environment and install the egg
 
 ```bash

static/__tests__/dtale/DataViewer-reload-test.jsx

@@ -0,0 +1,101 @@
+import { mount } from "enzyme";
+import _ from "lodash";
+import React from "react";
+import { Provider } from "react-redux";
+
+import { RemovableError } from "../../RemovableError";
+import mockPopsicle from "../MockPopsicle";
+import * as t from "../jest-assertions";
+import reduxUtils from "../redux-test-utils";
+import { withGlobalJquery } from "../test-utils";
+
+const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetHeight");
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth");
+
+describe("DataViewer tests", () => {
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", { configurable: true, value: 500 });
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 500 });
+
+    const mockBuildLibs = withGlobalJquery(() =>
+      mockPopsicle.mock(url => {
+        const { urlFetcher } = require("../redux-test-utils").default;
+        return urlFetcher(url);
+      })
+    );
+
+    const mockChartUtils = withGlobalJquery(() => (ctx, cfg) => {
+      const chartCfg = { ctx, cfg, data: cfg.data, destroyed: false };
+      chartCfg.destroy = () => (chartCfg.destroyed = true);
+      chartCfg.getElementsAtXAxis = _evt => [{ _index: 0 }];
+      return chartCfg;
+    });
+
+    jest.mock("popsicle", () => mockBuildLibs);
+    jest.mock("chart.js", () => mockChartUtils);
+    jest.mock("chartjs-plugin-zoom", () => ({}));
+  });
+
+  afterAll(() => {
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", originalOffsetHeight);
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", originalOffsetWidth);
+  });
+
+  test("DataViewer: base operations (column selection, locking, sorting, moving to front, histograms,...", done => {
+    const { DataViewer, ReactDataViewer } = require("../../dtale/DataViewer");
+
+    const store = reduxUtils.createDtaleStore();
+    const body = document.getElementsByTagName("body")[0];
+    body.innerHTML += '<input type="hidden" id="settings" value="" />';
+    body.innerHTML += '<div id="content" style="height: 1000px;width: 1000px;"></div>';
+    const result = mount(
+      <Provider store={store}>
+        <DataViewer />
+      </Provider>,
+      {
+        attachTo: document.getElementById("content"),
+      }
+    );
+
+    setTimeout(() => {
+      result.update();
+      let dv = result.find(ReactDataViewer).instance();
+      dv.getData(dv.state.ids, true);
+      dv.getData(dv.state.ids, true);
+      dv = result.find(ReactDataViewer).instance();
+      t.deepEqual(
+        _.pick(dv.state, ["loading", "loadQueue"]),
+        { loading: true, loadQueue: [[0, 55]] },
+        "should update state"
+      );
+      dv.getData(dv.state.ids, true);
+      dv = result.find(ReactDataViewer).instance();
+      t.deepEqual(
+        _.pick(dv.state, ["loading", "loadQueue"]),
+        { loading: true, loadQueue: [[0, 55], [0, 55]] },
+        "should update state"
+      );
+      setTimeout(() => {
+        result.update();
+        dv = result.find(ReactDataViewer).instance();
+        t.deepEqual(
+          _.pick(dv.state, ["loading", "loadQueue"]),
+          { loading: false, loadQueue: [] },
+          "should clear state"
+        );
+        dv.getData(dv.state.ids);
+        dv.getData([0, 1, 2, 3]);
+        dv = result.find(ReactDataViewer).instance();
+        result.find(ReactDataViewer).setState({ query: "error", loadQueue: [], loading: false });
+        result.update();
+        dv = result.find(ReactDataViewer).instance();
+        dv.getData(dv.state.ids, true);
+        setTimeout(() => {
+          result.update();
+          t.equals(result.find(RemovableError).length, 1, "should display error");
+          done();
+        }, 400);
+      }, 400);
+    }, 600);
+  });
+});

static/dtale/DataViewer.jsx

@@ -280,4 +280,4 @@ ReactDataViewer.propTypes = {
 
 const ReduxDataViewer = connect()(ReactDataViewer);
 
-export { ReduxDataViewer as DataViewer };
+export { ReduxDataViewer as DataViewer, ReactDataViewer };

test_env.js

@@ -3,12 +3,6 @@ import Adapter from "enzyme-adapter-react-16";
 
 configure({ adapter: new Adapter() });
 
-// Provided that we're run *after* babel-register, we can load
-// filter_console, even though it's ES6.
-const filterConsole = require("./static/filter_console");
-filterConsole.default.ignoreDatagridWarnings();
-filterConsole.default.ignoreConsoleErrors(/This browser doesn't support the `onScroll` event/);
-
 // required for react 16
 global.requestAnimationFrame = function(callback) {
   setTimeout(callback, 0);