fix: Header Actions test refactor (#16336)

* fixed tests

* Update index.tsx

Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>

superset-frontend/src/components/ReportModal/HeaderReportActionsDropdown/index.tsx

@@ -49,8 +49,8 @@ export default function HeaderReportActionsDropDown({
     any,
     UserWithPermissionsAndRoles
   >(state => state.user || state.explore?.user);
-  const reportsIds = Object.keys(reports);
-  const report: AlertObject = reports[reportsIds[0]];
+  const reportsIds = Object.keys(reports || []);
+  const report: AlertObject = reports?.[reportsIds[0]];
   const [
     currentReportDeleting,
     setCurrentReportDeleting,

superset-frontend/src/dashboard/components/Header/Header.test.tsx

@@ -57,6 +57,7 @@ const createProps = () => ({
   dashboardTitle: 'Dashboard Title',
   charts: {},
   layout: {},
+  reports: {},
   expandedSlices: {},
   css: '',
   customCss: '',
@@ -133,23 +134,23 @@ async function openActionsDropdown() {
 
 test('should render', () => {
   const mockedProps = createProps();
-  const { container } = render(setup(mockedProps));
+  const { container } = render(setup(mockedProps), { useRedux: true });
   expect(container).toBeInTheDocument();
 });
 
 test('should render the title', () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   expect(screen.getByText('Dashboard Title')).toBeInTheDocument();
 });
 
 test('should render the editable title', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   expect(screen.getByDisplayValue('Dashboard Title')).toBeInTheDocument();
 });
 
 test('should edit the title', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   const editableTitle = screen.getByDisplayValue('Dashboard Title');
   expect(editableProps.onChange).not.toHaveBeenCalled();
   userEvent.click(editableTitle);
@@ -162,25 +163,25 @@ test('should edit the title', () => {
 
 test('should render the "Draft" status', () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   expect(screen.getByText('Draft')).toBeInTheDocument();
 });
 
 test('should publish', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   const draft = screen.getByText('Draft');
   expect(editableProps.savePublished).not.toHaveBeenCalled();
   userEvent.click(draft);
   expect(editableProps.savePublished).toHaveBeenCalledTimes(1);
 });
 
 test('should render the "Undo" action as disabled', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   expect(screen.getByTitle('Undo').parentElement).toBeDisabled();
 });
 
 test('should undo', () => {
-  render(setup(undoProps));
+  render(setup(undoProps), { useRedux: true });
   const undo = screen.getByTitle('Undo');
   expect(undoProps.onUndo).not.toHaveBeenCalled();
   userEvent.click(undo);
@@ -189,19 +190,19 @@ test('should undo', () => {
 
 test('should undo with key listener', () => {
   undoProps.onUndo.mockReset();
-  render(setup(undoProps));
+  render(setup(undoProps), { useRedux: true });
   expect(undoProps.onUndo).not.toHaveBeenCalled();
   fireEvent.keyDown(document.body, { key: 'z', code: 'KeyZ', ctrlKey: true });
   expect(undoProps.onUndo).toHaveBeenCalledTimes(1);
 });
 
 test('should render the "Redo" action as disabled', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   expect(screen.getByTitle('Redo').parentElement).toBeDisabled();
 });
 
 test('should redo', () => {
-  render(setup(redoProps));
+  render(setup(redoProps), { useRedux: true });
   const redo = screen.getByTitle('Redo');
   expect(redoProps.onRedo).not.toHaveBeenCalled();
   userEvent.click(redo);
@@ -210,19 +211,19 @@ test('should redo', () => {
 
 test('should redo with key listener', () => {
   redoProps.onRedo.mockReset();
-  render(setup(redoProps));
+  render(setup(redoProps), { useRedux: true });
   expect(redoProps.onRedo).not.toHaveBeenCalled();
   fireEvent.keyDown(document.body, { key: 'y', code: 'KeyY', ctrlKey: true });
   expect(redoProps.onRedo).toHaveBeenCalledTimes(1);
 });
 
 test('should render the "Discard changes" button', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   expect(screen.getByText('Discard changes')).toBeInTheDocument();
 });
 
 test('should render the "Save" button as disabled', () => {
-  render(setup(editableProps));
+  render(setup(editableProps), { useRedux: true });
   expect(screen.getByText('Save').parentElement).toBeDisabled();
 });
 
@@ -231,7 +232,7 @@ test('should save', () => {
     ...editableProps,
     hasUnsavedChanges: true,
   };
-  render(setup(unsavedProps));
+  render(setup(unsavedProps), { useRedux: true });
   const save = screen.getByText('Save');
   expect(unsavedProps.onSave).not.toHaveBeenCalled();
   userEvent.click(save);
@@ -244,13 +245,13 @@ test('should NOT render the "Draft" status', () => {
     ...mockedProps,
     isPublished: true,
   };
-  render(setup(publishedProps));
+  render(setup(publishedProps), { useRedux: true });
   expect(screen.queryByText('Draft')).not.toBeInTheDocument();
 });
 
 test('should render the unselected fave icon', () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   expect(mockedProps.fetchFaveStar).toHaveBeenCalled();
   expect(
     screen.getByRole('img', { name: 'favorite-unselected' }),
@@ -263,7 +264,7 @@ test('should render the selected fave icon', () => {
     ...mockedProps,
     isStarred: true,
   };
-  render(setup(favedProps));
+  render(setup(favedProps), { useRedux: true });
   expect(
     screen.getByRole('img', { name: 'favorite-selected' }),
   ).toBeInTheDocument();
@@ -275,7 +276,7 @@ test('should NOT render the fave icon on anonymous user', () => {
     ...mockedProps,
     user: undefined,
   };
-  render(setup(anonymousUserProps));
+  render(setup(anonymousUserProps), { useRedux: true });
   expect(() =>
     screen.getByRole('img', { name: 'favorite-unselected' }),
   ).toThrowError('Unable to find');
@@ -286,7 +287,7 @@ test('should NOT render the fave icon on anonymous user', () => {
 
 test('should fave', async () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   const fave = screen.getByRole('img', { name: 'favorite-unselected' });
   expect(mockedProps.saveFaveStar).not.toHaveBeenCalled();
   userEvent.click(fave);
@@ -302,7 +303,7 @@ test('should toggle the edit mode', () => {
       dash_edit_perm: true,
     },
   };
-  render(setup(canEditProps));
+  render(setup(canEditProps), { useRedux: true });
   const editDashboard = screen.getByTitle('Edit dashboard');
   expect(screen.queryByTitle('Edit dashboard')).toBeInTheDocument();
   userEvent.click(editDashboard);
@@ -311,13 +312,13 @@ test('should toggle the edit mode', () => {
 
 test('should render the dropdown icon', () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   expect(screen.getByRole('img', { name: 'more-horiz' })).toBeInTheDocument();
 });
 
 test('should refresh the charts', async () => {
   const mockedProps = createProps();
-  render(setup(mockedProps));
+  render(setup(mockedProps), { useRedux: true });
   await openActionsDropdown();
   userEvent.click(screen.getByText('Refresh dashboard'));
   expect(mockedProps.onRefresh).toHaveBeenCalledTimes(1);