fix filterable table test

MialLewis · Aug 2, 2024 · 4b16a68 · 4b16a68
1 parent 6156e5f
commit 4b16a68
Showing 1 changed file with 55 additions and 8 deletions.
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
@@ -20,6 +20,8 @@ import { isValidElement } from 'react';
 import FilterableTable from 'src/components/FilterableTable';
 import { render, screen, within } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
 
 describe('FilterableTable', () => {
   const mockedProps = {
@@ -31,12 +33,18 @@ describe('FilterableTable', () => {
     ],
     height: 500,
   };
+  const initialState = { state: { user : {role : 'test'}} };
+  const mockStore = configureStore();
+  let store;
   it('is valid element', () => {
     expect(isValidElement(<FilterableTable {...mockedProps} />)).toBe(true);
   });
   it('renders a grid with 3 Table rows', () => {
+    store = mockStore(initialState);
     const { getByRole, getByText } = render(
-      <FilterableTable {...mockedProps} />,
+      <Provider store={store}>
+      <FilterableTable {...mockedProps} />
+      </Provider>,
     );
     expect(getByRole('table')).toBeInTheDocument();
     mockedProps.data.forEach(({ b: columnBContent }) => {
@@ -48,7 +56,12 @@ describe('FilterableTable', () => {
       ...mockedProps,
       filterText: 'b1',
     };
-    const { getByText, queryByText } = render(<FilterableTable {...props} />);
+    store = mockStore(initialState);
+    const { getByText, queryByText } = render(
+      <Provider store={store}>
+      <FilterableTable {...props} />
+      </Provider>,
+    );
     expect(getByText(props.filterText)).toBeInTheDocument();
     expect(queryByText('b2')).toBeFalsy();
     expect(queryByText('b3')).toBeFalsy();
@@ -58,14 +71,22 @@ describe('FilterableTable', () => {
       ...mockedProps,
       filterText: '100',
     };
-    const { getByText, queryByText } = render(<FilterableTable {...props} />);
+    store = mockStore(initialState);
+    const { getByText, queryByText } = render(
+      <Provider store={store}>
+      <FilterableTable {...props} />
+      </Provider>,
+    );
     expect(getByText('b2')).toBeInTheDocument();
     expect(queryByText('b1')).toBeFalsy();
     expect(queryByText('b3')).toBeFalsy();
   });
 });
 
 describe('FilterableTable sorting - RTL', () => {
+  const initialState = { state: { user : {role : 'test'}} };
+  const mockStore = configureStore();
+  let store;
   it('sorts strings correctly', () => {
     const stringProps = {
       orderedColumnKeys: ['columnA'],
@@ -76,7 +97,12 @@ describe('FilterableTable sorting - RTL', () => {
       ],
       height: 500,
     };
-    render(<FilterableTable {...stringProps} />);
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+      <FilterableTable {...stringProps} />
+      </Provider>,
+    );
 
     const stringColumn = within(screen.getByRole('table'))
       .getByText('columnA')
@@ -122,7 +148,12 @@ describe('FilterableTable sorting - RTL', () => {
       data: [{ columnB: 21 }, { columnB: 0 }, { columnB: 623 }],
       height: 500,
     };
-    render(<FilterableTable {...integerProps} />);
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+      <FilterableTable {...integerProps} />
+      </Provider>,
+    );
 
     const integerColumn = within(screen.getByRole('table'))
       .getByText('columnB')
@@ -157,7 +188,13 @@ describe('FilterableTable sorting - RTL', () => {
       data: [{ columnC: 45.67 }, { columnC: 1.23 }, { columnC: 89.0000001 }],
       height: 500,
     };
-    render(<FilterableTable {...floatProps} />);
+    mockStore(initialState);
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+      <FilterableTable {...floatProps} />
+      </Provider>,
+    );
 
     const floatColumn = within(screen.getByRole('table'))
       .getByText('columnC')
@@ -212,7 +249,12 @@ describe('FilterableTable sorting - RTL', () => {
       ],
       height: 500,
     };
-    render(<FilterableTable {...mixedFloatProps} />);
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+      <FilterableTable {...mixedFloatProps} />
+      </Provider>,
+    );
 
     const mixedFloatColumn = within(screen.getByRole('table'))
       .getByText('columnD')
@@ -310,7 +352,12 @@ describe('FilterableTable sorting - RTL', () => {
       ],
       height: 500,
     };
-    render(<FilterableTable {...dsProps} />);
+    store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+      <FilterableTable {...dsProps} />
+      </Provider>,
+    );
 
     const dsColumn = within(screen.getByRole('table'))
       .getByText('columnDS')