test(native-filters): scoping tree in native filters modal (#12655)

* test: add test to scoping tree in native filters

* test: rename mocks

superset-frontend/spec/fixtures/mockDashboardLayout.js

@@ -189,6 +189,49 @@ export const dashboardLayoutWithTabs = {
   future: [],
 };
 
+export const dashboardLayoutWithChartsInTabsAndRoot = {
+  ...dashboardLayoutWithTabs,
+  present: {
+    ...dashboardLayoutWithTabs.present,
+    [DASHBOARD_ROOT_ID]: {
+      type: DASHBOARD_ROOT_TYPE,
+      id: DASHBOARD_ROOT_ID,
+      children: ['TABS_ID', 'ROW_ID3'],
+    },
+
+    ROW_ID3: {
+      ...newComponentFactory(ROW_TYPE),
+      id: 'ROW_ID3',
+      children: ['CHART_ID3'],
+      parents: ['ROOT_ID'],
+    },
+
+    CHART_ID2: {
+      ...newComponentFactory(CHART_TYPE),
+      id: 'CHART_ID2',
+      parents: ['ROOT_ID', 'TABS_ID', 'TAB_ID2', 'ROW_ID2'],
+      meta: {
+        chartId: 20,
+        width: 3,
+        height: 10,
+        chartName: 'Mock chart name 2',
+      },
+    },
+
+    CHART_ID3: {
+      ...newComponentFactory(CHART_TYPE),
+      id: 'CHART_ID3',
+      parents: ['ROOT_ID', 'ROW_ID3'],
+      meta: {
+        chartId: 19,
+        width: 3,
+        height: 10,
+        chartName: 'Mock chart name',
+      },
+    },
+  },
+};
+
 export const filterComponent = {
   ...newComponentFactory(CHART_TYPE),
   id: 'CHART-rwDfbGqeEn',

superset-frontend/spec/fixtures/mockStore.js

@@ -22,7 +22,10 @@ import thunk from 'redux-thunk';
 import rootReducer from 'src/dashboard/reducers/index';
 
 import mockState from './mockState';
-import { dashboardLayoutWithTabs } from './mockDashboardLayout';
+import {
+  dashboardLayoutWithTabs,
+  dashboardLayoutWithChartsInTabsAndRoot,
+} from './mockDashboardLayout';
 import { sliceId } from './mockChartQueries';
 import { dashboardFilters } from './mockDashboardFilters';
 import { nativeFilters } from './mockNativeFilters';
@@ -47,7 +50,19 @@ export const getMockStoreWithTabs = () =>
     compose(applyMiddleware(thunk)),
   );
 
+export const getMockStoreWithChartsInTabsAndRoot = () =>
+  createStore(
+    rootReducer,
+    {
+      ...mockState,
+      dashboardLayout: dashboardLayoutWithChartsInTabsAndRoot,
+      dashboardFilters: {},
+    },
+    compose(applyMiddleware(thunk)),
+  );
+
 export const mockStoreWithTabs = getMockStoreWithTabs();
+export const mockStoreWithChartsInTabsAndRoot = getMockStoreWithChartsInTabsAndRoot();
 
 export const sliceIdWithAppliedFilter = sliceId + 1;
 export const sliceIdWithRejectedFilter = sliceId + 2;

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/FilterScope_spec.tsx

+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 React from 'react';
+import { Provider } from 'react-redux';
+import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import { mockStoreWithChartsInTabsAndRoot } from 'spec/fixtures/mockStore';
+import { Form, FormInstance } from 'src/common/components';
+import { NativeFiltersForm } from 'src/dashboard/components/nativeFilters/types';
+import FilterConfigForm from 'src/dashboard/components/nativeFilters/FilterConfigForm';
+
+describe('FilterScope', () => {
+  const save = jest.fn();
+  let form: FormInstance<NativeFiltersForm>;
+  const mockedProps = {
+    filterId: 'DefaultFilterId',
+    restore: jest.fn(),
+    parentFilters: [],
+    save,
+  };
+
+  const MockModal = ({ scope }: { scope: object | undefined }) => {
+    const [newForm] = Form.useForm<NativeFiltersForm>();
+    form = newForm;
+    if (scope) {
+      form.setFieldsValue({
+        filters: {
+          [mockedProps.filterId]: {
+            scope,
+          },
+        },
+      });
+    }
+    return (
+      <Provider store={mockStoreWithChartsInTabsAndRoot}>
+        <Form form={form}>
+          <FilterConfigForm form={form} {...mockedProps} />
+        </Form>
+      </Provider>
+    );
+  };
+
+  const getWrapper = (scope?: object) => {
+    render(<MockModal scope={scope} />);
+  };
+
+  const getTreeSwitcher = (order = 0) =>
+    document.querySelectorAll('.ant-tree-switcher')[order];
+
+  it('renders "apply to all" filter scope', () => {
+    getWrapper();
+    expect(screen.queryByRole('tree')).toBe(null);
+  });
+
+  it('select tree values with 1 excluded', () => {
+    getWrapper();
+    fireEvent.click(screen.getByLabelText('Apply to specific panels'));
+    expect(screen.getByRole('tree')).not.toBe(null);
+    fireEvent.click(getTreeSwitcher(2));
+    fireEvent.click(screen.getByText('CHART_ID2'));
+    expect(form.getFieldValue('filters')?.[mockedProps.filterId].scope).toEqual(
+      {
+        excluded: [20],
+        rootPath: ['ROOT_ID'],
+      },
+    );
+  });
+
+  it('select 1 value only', () => {
+    getWrapper();
+    fireEvent.click(screen.getByLabelText('Apply to specific panels'));
+    expect(screen.getByRole('tree')).not.toBe(null);
+    fireEvent.click(getTreeSwitcher(2));
+    fireEvent.click(screen.getByText('CHART_ID2'));
+    fireEvent.click(screen.getByText('tab1'));
+    expect(form.getFieldValue('filters')?.[mockedProps.filterId].scope).toEqual(
+      {
+        excluded: [18, 20],
+        rootPath: ['ROOT_ID'],
+      },
+    );
+  });
+
+  it('correct init tree with values', () => {
+    getWrapper({
+      rootPath: ['TAB_ID'],
+      excluded: [],
+    });
+    fireEvent.click(screen.getByLabelText('Apply to specific panels'));
+    expect(screen.getByRole('tree')).not.toBe(null);
+    expect(document.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(
+      1,
+    );
+  });
+});

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/ScopingTree_spec.tsx

-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you 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 React from 'react';
-import { Provider } from 'react-redux';
-import ScopingTree from 'src/dashboard/components/nativeFilters/ScopingTree';
-import { styledMount as mount } from 'spec/helpers/theming';
-import { mockStore } from 'spec/fixtures/mockStore';
-import { FormInstance } from 'src/common/components';
-import { NativeFiltersForm } from 'src/dashboard/components/nativeFilters/types';
-import { getDefaultScopeValue } from 'src/dashboard/components/nativeFilters/FilterScope';
-
-describe('ScopingTree', () => {
-  const filterId = '1';
-  const form = {
-    getFieldValue: () => ({
-      [filterId]: {
-        scope: getDefaultScopeValue(),
-      },
-    }),
-  };
-  const wrapper = mount(
-    <Provider store={mockStore}>
-      <ScopingTree
-        filterId={filterId}
-        initialScope={getDefaultScopeValue()}
-        form={(form as unknown) as FormInstance<NativeFiltersForm>}
-      />
-    </Provider>,
-  );
-  it('is valid', () => {
-    expect(
-      React.isValidElement(
-        <ScopingTree
-          filterId={filterId}
-          initialScope={getDefaultScopeValue()}
-          form={(form as unknown) as FormInstance<NativeFiltersForm>}
-        />,
-      ),
-    ).toBe(true);
-  });
-
-  it('renders a tree', () => {
-    expect(wrapper.find('TreeNode')).toExist();
-  });
-});