feat(dashboard): Refactor FiltersBadge (#23286)

apache · Mar 10, 2023 · c2b282a · c2b282a
1 parent 6311b40
commit c2b282a
Show file tree

Hide file tree

Showing 13 changed files with 237 additions and 524 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
@@ -378,10 +378,13 @@ describe('Horizontal FilterBar', () => {
       { name: 'test_12', column: 'year', datasetId: 2 },
     ]);
     setFilterBarOrientation('horizontal');
+    openMoreFilters();
+    applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue);
+    cy.get(nativeFilters.applyFilter).click({ force: true });
     cy.getBySel('slice-header').within(() => {
-      cy.get('.filter-counts').click();
+      cy.get('.filter-counts').trigger('mouseover');
     });
-    cy.get('.filterStatusPopover').contains('test_8').click();
+    cy.get('.filterStatusPopover').contains('test_9').click();
     cy.getBySel('dropdown-content').should('be.visible');
     cy.get('.ant-select-focused').should('be.visible');
   });

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
@@ -86,7 +86,7 @@ const createProps = () => ({
   onHighlightFilterSource: jest.fn(),
 });
 
-test('Should render "appliedCrossFilterIndicators"', () => {
+test('Should render "appliedCrossFilterIndicators"', async () => {
   const props = createProps();
   props.appliedIndicators = [];
   props.incompatibleIndicators = [];
@@ -99,8 +99,10 @@ test('Should render "appliedCrossFilterIndicators"', () => {
     { useRedux: true },
   );
 
-  userEvent.click(screen.getByTestId('details-panel-content'));
-  expect(screen.getByText('Applied Cross Filters (1)')).toBeInTheDocument();
+  userEvent.hover(screen.getByTestId('details-panel-content'));
+  expect(
+    await screen.findByText('Applied cross-filters (1)'),
+  ).toBeInTheDocument();
   expect(
     screen.getByRole('button', { name: 'Clinical Stage' }),
   ).toBeInTheDocument();
@@ -118,7 +120,7 @@ test('Should render "appliedCrossFilterIndicators"', () => {
   ]);
 });
 
-test('Should render "appliedIndicators"', () => {
+test('Should render "appliedIndicators"', async () => {
   const props = createProps();
   props.appliedCrossFilterIndicators = [];
   props.incompatibleIndicators = [];
@@ -131,8 +133,8 @@ test('Should render "appliedIndicators"', () => {
     { useRedux: true },
   );
 
-  userEvent.click(screen.getByTestId('details-panel-content'));
-  expect(screen.getByText('Applied Filters (1)')).toBeInTheDocument();
+  userEvent.hover(screen.getByTestId('details-panel-content'));
+  expect(await screen.findByText('Applied filters (1)')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: 'Country' })).toBeInTheDocument();
 
   expect(props.onHighlightFilterSource).toBeCalledTimes(0);
@@ -148,72 +150,6 @@ test('Should render "appliedIndicators"', () => {
   ]);
 });
 
-test('Should render "incompatibleIndicators"', () => {
-  const props = createProps();
-  props.appliedCrossFilterIndicators = [];
-  props.appliedIndicators = [];
-  props.unsetIndicators = [];
-
-  render(
-    <DetailsPanel {...props}>
-      <div data-test="details-panel-content">Content</div>
-    </DetailsPanel>,
-    { useRedux: true },
-  );
-
-  userEvent.click(screen.getByTestId('details-panel-content'));
-  expect(screen.getByText('Incompatible Filters (1)')).toBeInTheDocument();
-  expect(
-    screen.getByRole('button', { name: 'Vaccine Approach Copy' }),
-  ).toBeInTheDocument();
-
-  expect(props.onHighlightFilterSource).toBeCalledTimes(0);
-  userEvent.click(
-    screen.getByRole('button', { name: 'Vaccine Approach Copy' }),
-  );
-  expect(props.onHighlightFilterSource).toBeCalledTimes(1);
-  expect(props.onHighlightFilterSource).toBeCalledWith([
-    'ROOT_ID',
-    'TABS-wUKya7eQ0Zz',
-    'TAB-BCIJF4NvgQq',
-    'ROW-xSeNAspgww',
-    'CHART-eirDduqb1Aa',
-    'LABEL-product_category_copy',
-  ]);
-});
-
-test('Should render "unsetIndicators"', () => {
-  const props = createProps();
-  props.appliedCrossFilterIndicators = [];
-  props.appliedIndicators = [];
-  props.incompatibleIndicators = [];
-
-  render(
-    <DetailsPanel {...props}>
-      <div data-test="details-panel-content">Content</div>
-    </DetailsPanel>,
-    { useRedux: true },
-  );
-
-  userEvent.click(screen.getByTestId('details-panel-content'));
-  expect(screen.getByText('Unset Filters (1)')).toBeInTheDocument();
-  expect(
-    screen.getByRole('button', { name: 'Vaccine Approach' }),
-  ).toBeInTheDocument();
-
-  expect(props.onHighlightFilterSource).toBeCalledTimes(0);
-  userEvent.click(screen.getByRole('button', { name: 'Vaccine Approach' }));
-  expect(props.onHighlightFilterSource).toBeCalledTimes(1);
-  expect(props.onHighlightFilterSource).toBeCalledWith([
-    'ROOT_ID',
-    'TABS-wUKya7eQ0Z',
-    'TAB-BCIJF4NvgQ',
-    'ROW-xSeNAspgw',
-    'CHART-eirDduqb1A',
-    'LABEL-product_category',
-  ]);
-});
-
 test('Should render empty', () => {
   const props = createProps();
   props.appliedCrossFilterIndicators = [];