update test to add useDispatch

Author: raclim

client/modules/IDE/components/FileNode.unit.test.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import { useDispatch } from 'react-redux';
 
 import {
   fireEvent,
@@ -9,7 +12,19 @@ import {
 } from '../../../test-utils';
 import { FileNode } from './FileNode';
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn()
+}));
+
 describe('<FileNode />', () => {
+  const mockDispatch = jest.fn();
+  const mockStore = configureStore([]);
+
+  beforeEach(() => {
+    useDispatch.mockReturnValue(mockDispatch);
+  });
+
   const changeName = (newFileName) => {
     const renameButton = screen.getByText(/Rename/i);
     fireEvent.click(renameButton);
@@ -25,6 +40,19 @@ describe('<FileNode />', () => {
   };
 
   const renderFileNode = (fileType, extraProps = {}) => {
+    const initialState = {
+      files: [
+        {
+          id: '0',
+          name: fileType === 'folder' ? 'afolder' : 'test.jsx',
+          fileType
+        }
+      ],
+      user: { authenticated: false }
+    };
+
+    const store = mockStore(initialState);
+
     const props = {
       ...extraProps,
       id: '0',
@@ -45,24 +73,28 @@ describe('<FileNode />', () => {
       setProjectName: jest.fn()
     };
 
-    render(<FileNode {...props} />);
+    render(
+      <Provider store={store}>
+        <FileNode {...props} />
+      </Provider>
+    );
 
-    return props;
+    return { store, props };
   };
 
   describe('fileType: file', () => {
     it('cannot change to an empty name', async () => {
-      const props = renderFileNode('file');
+      const { props } = renderFileNode('file');
 
       changeName('');
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
       await expectFileNameToBe(props.name);
     });
 
     it('can change to a valid filename', async () => {
       const newName = 'newname.jsx';
-      const props = renderFileNode('file');
+      const { props } = renderFileNode('file');
 
       changeName(newName);
 
@@ -74,11 +106,11 @@ describe('<FileNode />', () => {
 
     it('must have an extension', async () => {
       const newName = 'newname';
-      const props = renderFileNode('file');
+      const { props } = renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
       await expectFileNameToBe(props.name);
     });
 
@@ -87,41 +119,41 @@ describe('<FileNode />', () => {
       window.confirm = mockConfirm;
 
       const newName = 'newname.gif';
-      const props = renderFileNode('file');
+      const { props } = renderFileNode('file');
 
       changeName(newName);
 
       expect(mockConfirm).toHaveBeenCalled();
       await waitFor(() =>
         expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
       );
-      await expectFileNameToBe(props.name);
+      await expectFileNameToBe(newName);
     });
 
     it('cannot be just an extension', async () => {
       const newName = '.jsx';
-      const props = renderFileNode('file');
+      const { props } = renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
       await expectFileNameToBe(props.name);
     });
   });
 
   describe('fileType: folder', () => {
     it('cannot change to an empty name', async () => {
-      const props = renderFileNode('folder');
+      const { props } = renderFileNode('folder');
 
       changeName('');
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
       await expectFileNameToBe(props.name);
     });
 
     it('can change to another name', async () => {
       const newName = 'foldername';
-      const props = renderFileNode('folder');
+      const { props } = renderFileNode('folder');
 
       changeName(newName);
 
@@ -133,11 +165,11 @@ describe('<FileNode />', () => {
 
     it('cannot have a file extension', async () => {
       const newName = 'foldername.jsx';
-      const props = renderFileNode('folder');
+      const { props } = renderFileNode('folder');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      await waitFor(() => expect(mockDispatch).not.toHaveBeenCalled());
       await expectFileNameToBe(props.name);
     });
   });