Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Header Actions test refactor #16336

Merged
merged 2 commits into from
Aug 19, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,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,
Expand Down
47 changes: 24 additions & 23 deletions superset-frontend/src/dashboard/components/Header/Header.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const createProps = () => ({
dashboardTitle: 'Dashboard Title',
charts: {},
layout: {},
reports: {},
expandedSlices: {},
css: '',
customCss: '',
Expand Down Expand Up @@ -126,23 +127,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);
Expand All @@ -155,25 +156,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);
Expand All @@ -182,19 +183,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);
Expand All @@ -203,19 +204,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();
});

Expand All @@ -224,7 +225,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);
Expand All @@ -237,13 +238,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' }),
Expand All @@ -256,7 +257,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();
Expand All @@ -268,7 +269,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');
Expand All @@ -279,7 +280,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);
Expand All @@ -295,7 +296,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);
Expand All @@ -304,13 +305,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);
Expand Down