Updated: Adjusted tests according to the new AddProject component

OneCommunityGlobal · Sep 19, 2024 · 4db2f43 · 4db2f43
1 parent 9c346ef
commit 4db2f43
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 58 deletions.
diff --git a/src/components/Projects/AddProject/AddProject.test.jsx b/src/components/Projects/AddProject/AddProject.test.jsx
@@ -1,6 +1,36 @@
+import React from 'react';
 import AddProject from './AddProject';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+describe("AddProject component", () => {
+  let store;
+  const initialState = {
+    theme: { darkMode: false },
+    projectMembers: { foundUsers: [] }
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    store.dispatch = jest.fn();
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <Provider store={store}>
+        <AddProject 
+          hasPermission={() => true}
+          {...props}
+        />
+      </Provider>
+    );
+  };
 
 //helper function
 const typeIntoInput = ({ input }) => {
@@ -15,80 +45,84 @@ const typeIntoInput = ({ input }) => {
   }
 }
 
-describe("AddProject component structure", () => {
-
-   beforeEach(() => {
-    render(<AddProject />)
-  })
 
   test("it renders correctly", () => {    
-    expect(screen.getByText("Add new project")).toBeInTheDocument();
-  })
-
-  test("input field should initially be empty", () => { 
-    expect(screen.getByRole('textbox').value).toBe('');
+    renderComponent();
+    expect(screen.getByText("Add New Project")).toBeInTheDocument();
   })
 
-  test("select element should initially have a value of unspecified", () => {
-    expect(screen.getByRole('combobox').value).toBe('Unspecified');
-  })
-
-  test("button should not be in the document when the input field is empty", () => {
-    expect(screen.queryByRole('button')).toBeNull();
-  })
+  test("opens modal on button click", () => {
+    renderComponent();
+    userEvent.click(screen.getByText("Add New Project"));
+    expect(screen.getByText("Add New Project", { selector: 'h5' })).toBeInTheDocument();
+  });
 
-  test("user should be able to type in the input field", () => {
-    const { inputField } = typeIntoInput({ input: 'New Project Name' });
-    expect(inputField.value).toBe('New Project Name');
-  })
+  test("category select updates correctly", () => {
+    renderComponent();
+    userEvent.click(screen.getByText("Add New Project"));
+    const select = screen.getByLabelText("Select Category");
+    userEvent.selectOptions(select, "Food");
+    expect(select).toHaveValue("Food");
+  });
 
-  test("user should be able to select a category", () => {
-    userEvent.selectOptions(screen.getByRole('combobox'), 'Food');
-    expect(screen.getByRole('option', { name: 'Food' }).selected).toBe(true);
-  })
+  test("WBS input and list work correctly", () => {
+    renderComponent();
+    userEvent.click(screen.getByText("Add New Project"));
+    const input = screen.getByPlaceholderText("Enter WBS name");
+    userEvent.type(input, "WBS 1");
+    userEvent.click(screen.getByText("Add WBS"));
+    expect(screen.getByText("WBS 1")).toBeInTheDocument();
+  });
 
-  test("button should appear when user types in the input field", () => {
-    typeIntoInput({ input: '123' });
-    expect(screen.queryByRole('button')).not.toBeNull();
-  })
+  test("adds project on form submission", async () => {
+    renderComponent();
+    userEvent.click(screen.getByText("Add New Project"));
+    userEvent.type(screen.getByLabelText("Project Name (required)"), "Test Project");
+    userEvent.selectOptions(screen.getByLabelText("Select Category"), "Food");
+    userEvent.click(screen.getByText("Add Project"));
+
+    await waitFor(() => {
+      expect(store.dispatch).toHaveBeenCalledWith(expect.any(Function));
+    });
+  });
 })
 
-describe('AddProject component state handlers', () => {
+// describe('AddProject component state handlers', () => {
 
-  //mock the onAddNewProject function
+//   //mock the onAddNewProject function
 
-  const mockAddNewProject = jest.fn();
+//   const mockAddNewProject = jest.fn();
 
-  beforeEach(() => {
-    render(<AddProject onAddNewProject={mockAddNewProject} />)
-  });
+//   beforeEach(() => {
+//     render(<AddProject onAddNewProject={mockAddNewProject} />)
+//   });
 
-  test("Input change handler updates state correctly", () => {
-    const inputField = screen.getByRole('textbox');
+//   test("Input change handler updates state correctly", () => {
+//     const inputField = screen.getByRole('textbox');
 
-    fireEvent.change(inputField, { target: { value: 'New Project' } });
+//     fireEvent.change(inputField, { target: { value: 'New Project' } });
 
-    expect(inputField.value).toBe('New Project');
-  })
+//     expect(inputField.value).toBe('New Project');
+//   })
 
-  test("Select change handler updates state correctly", () => {
-    const selectElement = screen.getByRole('combobox');
-    fireEvent.change(selectElement, { target: { value: 'Food' } });
-    expect(selectElement.value).toBe('Food');
-  })
+//   test("Select change handler updates state correctly", () => {
+//     const selectElement = screen.getByRole('combobox');
+//     fireEvent.change(selectElement, { target: { value: 'Food' } });
+//     expect(selectElement.value).toBe('Food');
+//   })
 
-  test('Button click handler calls onAddNewProject with correct arguments', () => {
-    const inputField = screen.getByRole('textbox');
-    const selectElement = screen.getByRole('combobox');
+//   test('Button click handler calls onAddNewProject with correct arguments', () => {
+//     const inputField = screen.getByRole('textbox');
+//     const selectElement = screen.getByRole('combobox');
 
-    fireEvent.change(inputField, { target: { value: 'New Project' } });
-    fireEvent.change(selectElement, { target: { value: 'Food' } });
+//     fireEvent.change(inputField, { target: { value: 'New Project' } });
+//     fireEvent.change(selectElement, { target: { value: 'Food' } });
 
-    const buttonElement = screen.queryByRole('button');
+//     const buttonElement = screen.queryByRole('button');
 
-    fireEvent.click(buttonElement);
+//     fireEvent.click(buttonElement);
 
-    expect(mockAddNewProject).toHaveBeenLastCalledWith('New Project', 'Food');    
-  })
-})
+//     expect(mockAddNewProject).toHaveBeenLastCalledWith('New Project', 'Food');    
+//   })
+// })
 
diff --git a/src/components/Projects/__tests__/Projects.test.jsx b/src/components/Projects/__tests__/Projects.test.jsx
@@ -129,7 +129,7 @@ describe("Projects component",()=>{
     });
 
     render(<Provider store={store}><Projects /></Provider>)
-    expect(screen.queryByText('Add new project')).not.toBeInTheDocument()
+    expect(screen.queryByText('Add New Project')).not.toBeInTheDocument()
   })
   it('check if AddProject gets displayed when postProject permission is added',()=>{
     axios.get.mockResolvedValue({
@@ -158,7 +158,8 @@ describe("Projects component",()=>{
     })
 
     render(<Provider store={testStore}><Projects /></Provider>)
-    expect(screen.queryByText('Add new project')).toBeInTheDocument()
+    // expect(screen.queryByText('Add new project')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /add new project/i })).toBeInTheDocument();
   })
   it('check if modal title is set to error when the modal is not open',()=>{
     axios.get.mockResolvedValue({