Merge branch 'dev' into liam/screenshots

Author: liamroh

CHANGE_LOG.md

@@ -30,8 +30,6 @@ Changes:<br>
   - Publish/Unpublish Button: 
     - Publish feature on the web app allows users to publish their saved project files into the Marketplace from the main app page
     - Dynamically switches between publish/unpublish depending on whether the loaded project is in the Marketplace
-  - Bug Fixes:
-    - 
 
 Recommendations for Future Enhancements:<br>
 
@@ -43,6 +41,7 @@ Recommendations for Future Enhancements:<br>
 - Modularize appStateSlice file. Further modularization is needed for readability and maintainability.
 - Solve residual bugs. Undo & Redo buttons on customization page not functioning as expected. Backend bugs persist as seen in the console when running the dev environment. Resolve electron app functionality to coincide with web app functionality.
 - Take a look at the join room functionality using web sockets in order to allow users to collaborate on the same project at the same time.
+- For the state manager option in the data table there is a MuiData-menu that is not visible when clicking it and after the filter option is clicked it creates a white space in the bottom of the page.
 - Continue code cleanup. Continue cleanup of outdated and unused code and files
 
 **Version 16.0.0 Changes**

README.md

@@ -63,22 +63,12 @@ If you want to read about using ReacType, the [User Manual](https://reactype-1.h
 
 ## Changes with version 17.0.0
 
-- **Improved Testing Coverage**: Testing coverage now sits at XX%.
-- **Typescript Conversion**: Typescript coverage now sits at XX%.
+- **Improved Testing Coverage**: Testing coverage now sits at ~60%.
+- **Typescript Conversion**: Typescript coverage now sits at ~80%.
 - **UI Overhaul**: Upgraded the UI of the application with a more modern style and better developer experience
 - **Marketplace Feature**: Implemented a dedicated area for developers to share their projects, 
 - **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
 
-## Changes with version 16.0.0
-
-- **Improved Testing Coverage**: Testing coverage has now doubled since version 15, and now sits at just over 50% coverage. Version 16 introduces end-to-end testing with Playwright and adds additional unit testing with React Testing Library.
-- **Major Bug Fixes**: Manage Project Features now work as expected. State Manager now deletes state from parent components. Context Manager Display Tab and CSS Editor now rendering as expected.
-- **Typescript Conversion**: Typescript coverage has improved from 30% to 80% with additional interfaces added for quality improvements.
-- **Live CSS Demo Rendering**: CSS Editor changes now rendered visually in the demo page on save.
-- **Universal Exports on Web App**: Export feature on web app now allows users to download the current project as a zip file with modularized component folder, html, and css file included. Export feature is now available to all users including guests.
-- **UI Improvements**: Fixed multiple contrast issues with white text displaying on white background. Adjusted context manager interface for improved UX. Fixed border styling within modals and error messages.
-- **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
-
 ## File Structure courtesy of Reactype version 14.0.0
 
 Here is the main file structure:

__tests__/NavBar.test.tsx

@@ -4,15 +4,13 @@ import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import NavBar from '../app/src/components/top/NavBar';
-import navBarButtons from '../app/src/components/top/NavBarButtons';
 import * as projectFunctions from '../app/src/helperFunctions/projectGetSaveDel';
 import { Provider } from 'react-redux';
+import { act } from 'react-dom/test-utils';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from '../app/src/redux/reducers/rootReducer';
 import { initialState as appStateInitialState } from '../app/src/redux/reducers/slice/appStateSlice';
 
-
-
 // Mock the non-serializable HTMLTypes
 const mockHTMLTypes = [
   {
@@ -47,7 +45,6 @@ const mockHTMLTypes = [
   },
 ];
 
-
 // Mocking the theme
 const theme = createTheme({
   spacing: (value) => `${value}px`,
@@ -117,8 +114,10 @@ describe('NavBar Component', () => {
 
     console.log('After rendering NavBar');
 
-    const publishButton = getByText('Publish');
-    fireEvent.click(publishButton);
+    await act(async () => { 
+      const publishButton = getByText('Publish');
+      fireEvent.click(publishButton);
+    });
   });
 
   it('handles publish correctly with new project', async () => {
@@ -147,26 +146,27 @@ describe('NavBar Component', () => {
 
     console.log('After rendering NavBar');
 
-    // Check if the "Publish" button is present
-    const publishButton = queryByText('Publish');
+    await act(async () => { 
+      // Check if the "Publish" button is present
+      const publishButton = queryByText('Publish');
 
-    if (publishButton) {
-      fireEvent.click(publishButton);
-    } else {
-      // If "Publish" button is not found, look for the "Unpublish" button
-      const unpublishButton = getByText('Unpublish');
-      fireEvent.click(unpublishButton);
-    }
+      if (publishButton) {
+        fireEvent.click(publishButton);
+      } else {
+        // If "Publish" button is not found, look for the "Unpublish" button
+        const unpublishButton = getByText('Unpublish');
+        fireEvent.click(unpublishButton);
+      }
 
-    // Check if the modal for a new project is displayed
-    const projectNameInput = queryByTestId('project-name-input');
+      // Check if the modal for a new project is displayed
+      const projectNameInput = queryByTestId('project-name-input');
 
-    if (projectNameInput) {
-      // entering a project name in the modal
-      fireEvent.change(projectNameInput, { target: { value: 'My Project' } });
-    }
+      if (projectNameInput) {
+        // entering a project name in the modal
+        fireEvent.change(projectNameInput, { target: { value: 'My Project' } });
+      }
     });
-  
+  });
 
   it('handles unpublish correctly', async () => {
     const unpublishProjectMock = jest.spyOn(projectFunctions, 'unpublishProject');
@@ -239,7 +239,8 @@ describe('NavBar Component', () => {
     fireEvent.click(exportComponentsOption);
 
   });
-  test('handles dropdown menu correctly', async () => {
+
+  it('handles dropdown menu correctly', async () => {
     const store = configureStore({
       reducer: rootReducer,
       preloadedState: {
@@ -248,8 +249,9 @@ describe('NavBar Component', () => {
         },
       },
     });
-  
-    // Render component
+
+    console.log('Before rendering NavBar');
+
     const { getByTestId, getByText } = render(
       <Provider store={store}>
         <MemoryRouter>
@@ -259,33 +261,34 @@ describe('NavBar Component', () => {
         </MemoryRouter>
       </Provider>
     );
-  
-    // Initially, the dropdown should have the "hideNavDropDown" class
-    const dropdownMenu = getByTestId('navDropDown');
-    expect(dropdownMenu).toHaveClass('hideNavDropDown');
-  
-    // Find and click the button to open the dropdown
-    const moreVertButton = getByTestId('more-vert-button');
-    fireEvent.click(moreVertButton);
-  
-    // After clicking, the dropdown should have the "navDropDown" class
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-  
-    //clear canvas click
-    const clearCanvasMenuItem = getByText('Clear Canvas');
-    fireEvent.click(clearCanvasMenuItem);
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-    // After clicking "Marketplace", it should remain open
-    const marketplaceMenuItem = getByText('Marketplace');
-    fireEvent.click(marketplaceMenuItem);
-    expect(dropdownMenu).toHaveClass('navDropDown');
-  
-    // Close the dropdown by clicking the button again
-    fireEvent.click(moreVertButton);
-  
-    // After closing, the dropdown should have the "hideNavDropDown" class
-    expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+    console.log('After rendering NavBar');
+
+    await act(async () => { 
+
+      const dropdownMenu = getByTestId('navDropDown');
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const moreVertButton = getByTestId('more-vert-button');
+      fireEvent.click(moreVertButton);
+
+
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const clearCanvasMenuItem = getByText('Clear Canvas');
+      fireEvent.click(clearCanvasMenuItem);
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+
+      const marketplaceMenuItem = getByText('Marketplace');
+      fireEvent.click(marketplaceMenuItem);
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+
+      fireEvent.click(moreVertButton);
+
+      expect(dropdownMenu).toHaveClass('hideNavDropDown');
+    });
   });
-});
+})

package.json

@@ -6,10 +6,10 @@
   "main": "app/electron/main.js",
   "author": "OS Labs",
   "contributors": [
-    "Victor Martins", 
-    "Liam Roh", 
-    "Denton Wong", 
-    "Ahnaf Khan", 
+    "Victor Martins",
+    "Liam Roh",
+    "Denton Wong",
+    "Ahnaf Khan",
     "Hernan Damazo",
     "Adam Vanek",
     "Matteo Diterlizzi",