Add tests

apache · Mar 31, 2022 · 57205c8 · 57205c8
1 parent ca33beb
commit 57205c8
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 9 deletions.
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -44,6 +44,7 @@ const propTypes = {
   renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
   onDropOnTab: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   filters: PropTypes.object.isRequired,
 
   // grid related
@@ -57,6 +58,7 @@ const propTypes = {
   handleComponentDrop: PropTypes.func.isRequired,
   updateComponents: PropTypes.func.isRequired,
   setDirectPathToChild: PropTypes.func.isRequired,
+  setEditMode: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -193,13 +195,17 @@ class Tab extends React.PureComponent {
               ) : (
                 <span>
                   {t('You can add the components in the')}{' '}
-                  <span role="button" onClick={() => setEditMode(true)}>
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setEditMode(true)}
+                  >
                     {t('edit mode')}
                   </span>
                 </span>
               ))
             }
-            image={'chart.svg'}
+            image="chart.svg"
           />
         )}
         {tabComponent.children.map((componentId, componentIndex) => (

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx
@@ -23,6 +23,7 @@ import { render, screen } from 'spec/helpers/testing-library';
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
 import EditableTitle from 'src/components/EditableTitle';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
+import { setEditMode } from 'src/dashboard/actions/dashboardState';
 
 import Tab from './Tab';
 
@@ -54,8 +55,13 @@ jest.mock('src/dashboard/components/dnd/DragDroppable', () =>
     );
   }),
 );
+jest.mock('src/dashboard/actions/dashboardState', () => ({
+  setEditMode: jest.fn(() => ({
+    type: 'SET_EDIT_MODE',
+  })),
+}));
 
-const creteProps = () => ({
+const createProps = () => ({
   id: 'TAB-YT6eNksV-',
   parentId: 'TABS-L-d9eyOE-b',
   depth: 2,
@@ -98,7 +104,7 @@ beforeEach(() => {
 });
 
 test('Render tab (no content)', () => {
-  const props = creteProps();
+  const props = createProps();
   props.renderType = 'RENDER_TAB';
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
   expect(screen.getByText('🚀 Aspiring Developers')).toBeInTheDocument();
@@ -107,7 +113,7 @@ test('Render tab (no content)', () => {
 });
 
 test('Render tab (no content) editMode:true', () => {
-  const props = creteProps();
+  const props = createProps();
   props.editMode = true;
   props.renderType = 'RENDER_TAB';
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
@@ -117,7 +123,7 @@ test('Render tab (no content) editMode:true', () => {
 });
 
 test('Edit table title', () => {
-  const props = creteProps();
+  const props = createProps();
   props.editMode = true;
   props.renderType = 'RENDER_TAB';
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
@@ -131,7 +137,7 @@ test('Edit table title', () => {
 });
 
 test('Render tab (with content)', () => {
-  const props = creteProps();
+  const props = createProps();
   props.isFocused = true;
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
   expect(DashboardComponent).toBeCalledTimes(2);
@@ -174,8 +180,39 @@ test('Render tab (with content)', () => {
   expect(DragDroppable).toBeCalledTimes(0);
 });
 
+test('Render tab content with no children', () => {
+  const props = createProps();
+  props.component.children = [];
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+  });
+  expect(
+    screen.getByText('There are no components added to this tab'),
+  ).toBeVisible();
+  expect(screen.getByAltText('empty')).toBeVisible();
+  expect(screen.queryByText('edit mode')).not.toBeInTheDocument();
+});
+
+test('Render tab content with no children, canEdit: true', () => {
+  const props = createProps();
+  props.component.children = [];
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+    initialState: {
+      dashboardInfo: {
+        dash_edit_perm: true,
+      },
+    },
+  });
+  expect(screen.getByText('edit mode')).toBeVisible();
+  userEvent.click(screen.getByRole('button', { name: 'edit mode' }));
+  expect(setEditMode).toHaveBeenCalled();
+});
+
 test('Render tab (with content) editMode:true', () => {
-  const props = creteProps();
+  const props = createProps();
   props.isFocused = true;
   props.editMode = true;
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
@@ -220,7 +257,7 @@ test('Render tab (with content) editMode:true', () => {
 });
 
 test('Should call "handleDrop" and "handleTopDropTargetDrop"', () => {
-  const props = creteProps();
+  const props = createProps();
   props.isFocused = true;
   props.editMode = true;
   render(<Tab {...props} />, { useRedux: true, useDnd: true });
@@ -233,3 +270,29 @@ test('Should call "handleDrop" and "handleTopDropTargetDrop"', () => {
   expect(props.onDropOnTab).toBeCalledTimes(1);
   expect(props.handleComponentDrop).toBeCalledTimes(2);
 });
+
+test('Render tab content with no children, editMode: true, canEdit: true', () => {
+  const props = createProps();
+  props.editMode = true;
+  // props.canEdit = true;
+  props.component.children = [];
+  render(<Tab {...props} />, {
+    useRedux: true,
+    useDnd: true,
+    initialState: {
+      dashboardInfo: {
+        dash_edit_perm: true,
+      },
+    },
+  });
+  expect(
+    screen.getByText('Drag and drop components to this tab'),
+  ).toBeVisible();
+  expect(screen.getByAltText('empty')).toBeVisible();
+  expect(
+    screen.getByRole('link', { name: 'create a new chart' }),
+  ).toBeVisible();
+  expect(
+    screen.getByRole('link', { name: 'create a new chart' }),
+  ).toHaveAttribute('href', '/chart/add');
+});