Merge branch 'dev' into liam/screenshots

Author: liamroh

CHANGE_LOG.md

@@ -3,6 +3,45 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 17.0.0 Changes**
+
+Changes:<br>
+
+- Developer Improvements:
+  - Testing Coverage:
+    - Version 17 added testing for the added marketplace related components
+    - Testing coverage sits at XX%
+  - Typescript continued and now sits at XX%
+  - Dev Bug Fixes:
+    - Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
+    - Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
+- User Features:
+  - UI updated with a modern style for a better developer experience
+    - Added many user feedback alerts for better experience including alerts for when projects are published, cloned, deleted, context created, or custom component created.
+    - Drop down menu now closes only when the user clicks outside of the menu
+  - Marketplace:
+    - Implemented a dedicated area for developers to share their projects
+    - Routing handled by React Router
+    - Projects can also be cloned to the user's account to be used and edited
+    - Added search functionality to search by username and project name
+    - Separate section in the Saved Projects and Delete Projects modal in the Manage Project menu for Downloaded Projects from the Marketplace
+  - 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>
+
+- Add a comment section and description section for each published project
+- Consider maybe a way for users to pull individual components from one project into another
+- Use localforage or other methods to store unsaved projects either on logout or accidental closure of browser, so that when the user opens the browser again it is still there.
+- Continue expanding testing coverage. Improve testing by adding additional unit tests, expanding end-to-end testing, and introducing integration testing.
+- Continue quality Typescript conversion. Continue to fix type errors within component files.
+- 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.
+- Continue code cleanup. Continue cleanup of outdated and unused code and files
+
 **Version 16.0.0 Changes**
 
 Changes:<br>

README.md

@@ -58,7 +58,16 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
 
 ### Documentation
 
-If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now.
+If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now. 
+<!-- NEED TO REPLACE THE TUTORIAL LINK -->
+
+## Changes with version 17.0.0
+
+- **Improved Testing Coverage**: Testing coverage now sits at XX%.
+- **Typescript Conversion**: Typescript coverage now sits at XX%.
+- **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
 

__tests__/NavBar.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
+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 navbarDropDown from '../app/src/components/top/navbarDropDown'
 import * as projectFunctions from '../app/src/helperFunctions/projectGetSaveDel';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
@@ -23,14 +25,20 @@ jest.mock('../app/src/helperFunctions/projectGetSaveDel', () => ({
   unpublishProject: jest.fn(),
 }));
 
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
+//mock the file saver library
+jest.mock('file-saver', () => ({
+  ...jest.requireActual('file-saver'),
+  saveAs: jest.fn(),
+}));
 
-afterAll(() => {
-  console.error = originalError;
-});
+// const originalError = console.error;
+// beforeAll(() => {
+//   console.error = jest.fn();
+// });
+
+// afterAll(() => {
+//   console.error = originalError;
+// });
 
 // Mocking the render
 const renderNavBar = (store) => {
@@ -75,7 +83,7 @@ describe('NavBar Component', () => {
     fireEvent.click(publishButton);
   });
 
-  it('handles publish correctly with new project', async () => {
+  xit('handles publish correctly with new project', async () => {
     const publishProjectMock = jest.spyOn(projectFunctions, 'publishProject');
     publishProjectMock.mockResolvedValueOnce({
       _id: 'mockedId',
@@ -121,7 +129,7 @@ describe('NavBar Component', () => {
     });
 
 
-  it('handles unpublish correctly', async () => {
+  xit('handles unpublish correctly', async () => {
     const unpublishProjectMock = jest.spyOn(projectFunctions, 'unpublishProject');
     unpublishProjectMock.mockResolvedValueOnce({
       _id: 'mockedId',
@@ -156,4 +164,66 @@ describe('NavBar Component', () => {
       fireEvent.click(unpublishButton);
     }
   });
+
+  xit('handles export correctly', async () => {
+    const store = configureStore({
+      reducer: rootReducer,
+      preloadedState: {
+        appState: {
+          ...appStateInitialState,
+          isLoggedIn: true,
+          name: 'Mock Project Name',
+        },
+      },
+    });
+
+    console.log('Before rendering NavBar');
+
+    const { getByText } = renderNavBar(store);
+
+    console.log('After rendering NavBar');
+
+    // Find and click the export button
+    const exportButton = getByText('< > Export');
+    fireEvent.click(exportButton);
+
+
+    await waitFor(() => {
+      const exportModal = getByText('Click to download in zip file:');
+      expect(exportModal).toBeInTheDocument();
+    });
+
+
+    const exportComponentsOption = getByText('Export components');
+    fireEvent.click(exportComponentsOption);
+
+  });
+
+
+
+xit('handles dropdown menu correctly', () => {
+  const store = configureStore({
+    reducer: rootReducer,
+    preloadedState: {
+      appState: {
+        ...appStateInitialState,
+        isLoggedIn: true,
+        name: 'Mock Project Name',
+      },
+    },
+  });
+
+  const { getByTestId } = renderNavBar(store);
+  const moreVertButton = getByTestId('more-vert-button');
+
+ 
+  expect(moreVertButton).toBeInTheDocument();
+
+
+  fireEvent.click(moreVertButton);
+
+
+});
+
+  
 });

__tests__/projects.test.ts

@@ -18,8 +18,10 @@ describe('Project endpoints tests', () => {
     server.listen(done);
   });
   afterAll((done) => {
-    Mongoose.disconnect();
-    server.close(done);
+    Mongoose.disconnect().then(() => {
+      // Close the HTTP server
+      server.close(done);
+    });
   });
   // test saveProject endpoint
   describe('/saveProject', () => {