Fix Chart Filter Bugs, Issue #971

frontend/.husky/pre-push

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd frontend
+npm run test:ci

frontend/package.json

@@ -24,6 +24,7 @@
     "build:analyze": "craco build && source-map-explorer 'build/static/js/*.js'",
     "test": "craco test",
     "test:coverage": "npm run test -- --watchAll=false --coverage",
+    "test:ci": "npm run test -- --watchAll=false --runInBand --silent",
     "checkTs": "tsc --noEmit",
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "npm run eslint src",
@@ -184,7 +185,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "html2canvas": "^1.3.2",
-    "husky": "^6.0.0",
+    "husky": "^7.0.4",
     "jest-canvas-mock": "^2.3.1",
     "jest-styled-components": "7.0.8",
     "jsdoc": "^3.6.10",
@@ -217,4 +218,4 @@
       "path": "cz-conventional-changelog"
     }
   }
-}
+}

frontend/src/__tests__/MockMatchMedia.ts

@@ -0,0 +1,28 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+global.matchMedia =
+  global.matchMedia ||
+  function () {
+    return {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    };
+  };
+
+export {};

frontend/src/app/components/ChartIFrameContainer/ChartIFrameEventBroker.ts

@@ -37,7 +37,7 @@ class ChartIFrameEventBroker {
 
   register(c: IChart) {
     this._chart = c;
-    this.registeListener(c);
+    this.registerListener(c);
   }
 
   subscribe(event: HooksEvent, callback?: Function) {
@@ -102,7 +102,7 @@ class ChartIFrameEventBroker {
     }
   }
 
-  private registeListener(c: IChart): void {
+  private registerListener(c: IChart): void {
     this.subscribe(ChartLifecycle.MOUNTED, c?.onMount);
     this.subscribe(ChartLifecycle.UPDATED, c?.onUpdated);
     this.subscribe(ChartLifecycle.RESIZE, c?.onResize);

frontend/src/app/components/ChartIFrameContainer/__tests__/ChartIFrameContainer.test.jsx

@@ -0,0 +1,47 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { ChartIFrameContainer } from '../index';
+
+jest.mock('uuid/dist/umd/uuidv4.min');
+
+describe('ChartIFrameContainer Test', () => {
+  test('should render within iframe when enable use iframe', async () => {
+    const { container } = render(
+      <ChartIFrameContainer
+        dataset={[]}
+        chart={{ useIFrame: true }}
+        config={{}}
+      />,
+    );
+    expect(container.querySelector('iframe')).not.toBeNull();
+  });
+
+  test('should not render iframe when disable use iframe', async () => {
+    const { container } = render(
+      <ChartIFrameContainer
+        dataset={[]}
+        chart={{ useIFrame: false }}
+        config={{}}
+      />,
+    );
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+});

frontend/src/app/components/FormGenerator/Layout/GroupLayout.tsx

@@ -22,13 +22,13 @@ import { ChartStyleConfig } from 'app/types/ChartConfig';
 import { FC, memo, useState } from 'react';
 import styled from 'styled-components/macro';
 import { SPACE_MD } from 'styles/StyleConstants';
-import CollapseHeader from '../CollapseHeader';
 import {
   FormGeneratorLayoutProps,
   GroupLayoutMode,
   ItemComponentType,
 } from '../types';
 import { groupLayoutComparer } from '../utils';
+import CollapseHeader from './CollapseHeader';
 import CollectionLayout from './CollectionLayout';
 
 const { Panel } = Collapse;

frontend/src/app/components/FormGenerator/Layout/index.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+export { default as CollapseHeader } from './CollapseHeader';
 export { default as CollectionLayout } from './CollectionLayout';
 export { default as GroupLayout } from './GroupLayout';
 export { default as ItemLayout } from './ItemLayout';

frontend/src/app/components/FormGenerator/__tests__/BasicCheckbox.test.jsx

@@ -0,0 +1,77 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import BasicCheckbox from '../Basic/BasicCheckbox';
+
+describe('<BasicCheckbox />', () => {
+  let translator;
+  beforeAll(() => {
+    translator = label => `This is a ${label}`;
+  });
+
+  test('should render component correct', () => {
+    const { getByText, getByRole } = render(
+      <BasicCheckbox
+        translate={translator}
+        data={{ label: 'Component Label', value: true }}
+      />,
+    );
+    expect(getByText('This is a Component Label')).toBeInTheDocument();
+    expect(getByRole('checkbox')).toBeInTheDocument();
+    expect(getByRole('checkbox')).toBeChecked();
+  });
+
+  test('should fire onChange event', async () => {
+    const handleOnChangeEvent = jest.fn();
+    const ancestors = [];
+    const needRefresh = true;
+
+    const { getByRole } = render(
+      <BasicCheckbox
+        ancestors={ancestors}
+        onChange={handleOnChangeEvent}
+        data={{
+          label: 'Component Label',
+          value: true,
+          options: { needRefresh },
+        }}
+      />,
+    );
+    fireEvent.click(getByRole('checkbox'));
+    expect(handleOnChangeEvent).toHaveBeenCalledWith(
+      ancestors,
+      false,
+      needRefresh,
+    );
+  });
+
+  test('should hide label when options hide label', () => {
+    const { container } = render(
+      <BasicCheckbox
+        translate={translator}
+        data={{
+          label: 'Component Label',
+          options: { hideLabel: true },
+        }}
+      />,
+    );
+    expect(container.querySelector('.ant-form-item-label label')).toBeNull();
+  });
+});

frontend/src/app/components/FormGenerator/__tests__/BasicColorSelector.test.jsx

@@ -0,0 +1,51 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import BasicColorSelector from '../Basic/BasicColorSelector';
+
+describe('<BasicColorSelector />', () => {
+  let translator;
+  beforeAll(() => {
+    translator = label => `This is a ${label}`;
+  });
+
+  test('should render component correct', () => {
+    const { container, getByText } = render(
+      <BasicColorSelector
+        translate={translator}
+        data={{ label: 'Component Label', value: '#fafafa' }}
+      />,
+    );
+    expect(getByText('This is a Component Label')).toBeInTheDocument();
+    expect(container.querySelector('[class*="ColorPicker"]')).not.toBeNull();
+  });
+
+  test('should hide label when options hide label', () => {
+    const { container } = render(
+      <BasicColorSelector
+        data={{
+          label: 'Component Label',
+          options: { hideLabel: true },
+        }}
+      />,
+    );
+    expect(container.querySelector('.ant-form-item-label label')).toBeNull();
+  });
+});