Merge pull request #29 from oslabs-beta/master-holder

Finalise alpha release

Author: crumblepie

README.md

@@ -103,21 +103,28 @@ Visit our website here 👉 https://fflow.dev
 <p align="right">(<a href="#top">back to top</a>)</p>
 
 ### Loading Screen
+
 <img src="./src/assets/splashDemo.gif">
 
 ### Light and Dark Mode
+
 <img src="./src/assets/darkMode.gif">
 
 ### Create Custom Components and Nest HTML elements
+
 <img src="./src/assets/customComps.gif">
 
-### Edit CSS directly in the App (Feature Coming Soon)
+### Edit CSS directly in the App (Currently only on Mac version)
+
+💫💫 Coming soon to Windows 💫💫
 <img src="./src/assets/cssEditor.gif">
 
 ### Export Working Project
+
 <img src="./src/assets/export.gif">
 
 ### Clear canvas to start from scratch
+
 <img src="./src/assets/clearCanvas.gif">
 
 ## Getting Started
@@ -141,25 +148,13 @@ Please download the latest release of fflow for [MacOS](https://github.com/oslab
 
 <!-- - **Linux users**: Run the application as a super user in order to read and write files. -->
 
-<!-- #### Drag, Drop, Reorder and Delete HTML Tags onto Canvas
-
-#### Nest HTML Tags and Components within custom React Components
-
-#### Style your project
-
-Add styles to your HTML elements and React Components by editing directly in the CSS Editor. This will then be exported with your app.
-
-#### Clearing the Canvas
-
-## Development Mode -->
-
 #### Clone this repo
 
 1. Clone this repo `git clone https://github.com/oslabs-beta/fflow`
 2. Install the dependencies `npm install`
 3. Copy and run this in your terminal (`./node_modules/.bin/electron-rebuild`) or `.\node_modules\.bin\electron-rebuild.cmd` for Windows
 4. Run script for development mode `npm run start`
-5. Build the app (automatic) `npm run build`
+5. Build the app (automatic) `npm run package`
 6. Test the app (after `npm run build` || `yarn run build`) `npm run prod`
 
 #### Current issues

__tests__/LeftPanel.test.js

@@ -1,59 +1,19 @@
 import React from 'react';
 import { render, screen, fireEvent } from '../src/test-utils.js';
 import '@testing-library/jest-dom/extend-expect';
-// import DnD from '../src/components/DnD';
 import CompCreator from '../src/components/CompCreator';
 import Tree from '../src/components/Tree';
-// import TreeRecursive from '../src/components/TreeRecursive';
-import TreeFile from '../src/components/TreeFile';
 
 describe('Left Panel', () => {
-  test('renders CompCreator component with input field and add button', () => {
-    const { getByTestId } = render(<CompCreator />);
-    expect(screen.getByText('React Component')).toBeInTheDocument();
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    const addButton = getByTestId('add-button');
-    expect(addButton).toBeInTheDocument();
-    // const mockFunction = jest.fn(() => true);
-    // fireEvent.click(addButton);
-    // expect(mockFunction()).toBe(true);
-  });
-
   test('value of comp creator input field changes', () => {
     const { queryByPlaceholderText } = render(<CompCreator />);
     const input = queryByPlaceholderText('Component Name');
     fireEvent.change(input, { target: { value: 'test' } });
-    expect(input.value).toBe('test');
+    expect(input.value).toBe('test'); 
   });
 
   test('renders the tree component which displays file tree', () => {
     const { getByTestId } = render(<Tree />);
     expect(getByTestId('filetree')).toBeInTheDocument();
   });
-
-  // test('renders the tree folders with on click functionality', () => {
-  //   const { getByTestId } = render(<TreeRecursive />);
-  //   expect(getByTestId('folder')).toBeInTheDocument();
-  // });
-
-  // test('renders the tree files with on click functionality', () => {
-  //   const { getByTestId } = render(<TreeFile />);
-  //   expect(getByTestId('file')).toBeInTheDocument();
-  // });
-
-  //HAVING ISSUES WITH TESTS INVOLVING DND DUE TO PROVIDER/STORE ISSUE WITH REACT TESTING LIBRARY
-
-  // test('renders fflow logo with on click functionality', () => {
-  //   const { getByTestId } = render(<DnD />);
-  //   const appLogo = getByTestId('app-logo');
-  //   expect(appLogo).toBeInTheDocument();
-  //   const mockFunction = jest.fn(() => true);
-  //   fireEvent.click(appLogo);
-  //   expect(mockFunction()).toBe(true);
-  // });
-
-  // test('renders tree component', () => {
-  //   render(<DnD />);
-  //   expect(screen.getByText('FOLDERS')).toBeInTheDocument();
-  // });
 });

__tests__/Navigation.test.js

@@ -22,15 +22,6 @@ describe('Navigation', () => {
     expect(mockFunction()).toBe(true);
   });
 
-  test('renders Navigation component with save icon button with on click functionality', () => {
-    const { getByTestId } = render(<Navigation />);
-    const saveButton = getByTestId('save-button');
-    expect(saveButton).toBeInTheDocument();
-    const mockFunction = jest.fn(() => true);
-    fireEvent.click(saveButton);
-    expect(mockFunction()).toBe(true);
-  });
-
   test('renders Navigation component with export icon button with on click functionality', () => {
     const { getByTestId } = render(<Navigation />);
     const exportButton = getByTestId('export-button');

__tests__/redux.test.js

@@ -1,4 +1,4 @@
-import reducer, { addComponent, clearProject, createComponent, deleteComponent, reorderComponent, saveComponentCode, setCurrentFile } from '../src/redux/canvasSlice';
+import reducer, { addComponent, clearProject, createComponent, reorderComponent, setCurrentFile } from '../src/redux/canvasSlice';
 
 describe('canvasSlice reducers', () => {
   let initialState;
@@ -26,6 +26,32 @@ describe('canvasSlice reducers', () => {
     initialState = {
       components: [],
       code: '',
+      cssCode: `html {
+    box-sizing: border-box;
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    padding-top: 20%;
+    overflow: hidden;
+    background-color: #272727;
+    font-family: "Helvetica Neue";
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    height: 100%;
+  }
+  h1 {
+    color: white;
+    font-size: 3rem;
+  }
+  p {
+    color: white;
+    font-size: 1.5rem;
+  }
+  .default-spans {
+    color: #4338ca;
+  }`,
       tags: [],
       customComponents: [],
       imports: ["import React from 'react';\n"],
@@ -57,6 +83,14 @@ describe('canvasSlice reducers', () => {
           fileImports: [],
           fileComponents: [],
         },
+        {
+          type: 'file',
+          name: 'styles.css',
+          fileCode: '',
+          fileTags: [],
+          fileImports: [],
+          fileComponents: [],
+        },
       ],
       currentFile: 'App.js',
     };
@@ -83,13 +117,6 @@ describe('canvasSlice reducers', () => {
     });
   });
 
-  // describe('deleteComponent:', () => {
-  //   test('should remove from middle of array', () => {
-  //     const action = createAction(1, 'Anchor');
-  //     expect(reducer(initialState, deleteComponent(action))).toEqual({...initialState, components: ['Div', 'Button']});
-  //   });
-  // });
-
   describe('reorderComponent:', () => {
     test('should swap 2 items', () => {
       const action = createAction(1, 'Button', 2);
@@ -131,6 +158,14 @@ describe('canvasSlice reducers', () => {
             fileImports: [],
             fileComponents: [],
           },
+          {
+            type: 'file',
+            name: 'styles.css',
+            fileCode: '',
+            fileTags: [],
+            fileImports: [],
+            fileComponents: [],
+          },
           {
             type: 'file',
             name: 'TestFile.jsx',
@@ -150,23 +185,4 @@ describe('canvasSlice reducers', () => {
       expect(reducer(initialState, setCurrentFile('TestFile.jsx'))).toEqual({ ...initialState, currentFile: 'TestFile.jsx' });
     });
   });
-
-  // describe('saveComponentCode:', () => {
-  //   test('should save state into files', () => {
-  //     initialState.files.push({
-  //       type: 'file',
-  //       name: 'TestFile.jsx',
-  //       fileCode: `import React from 'react';\n\nconst TestFile = () => {\n\treturn (\n\t\t<div>\n\t\t</div>\n\t)\n}\nexport default TestFile;`,
-  //       fileTags: [],
-  //       fileImports: ["import React from 'react';\n"],
-  //       fileComponents: [],
-  //     });
-
-  //     initialState.currentFile = 'TestFile.jsx';
-
-  //     const newState = {...initialState, code: 'test'}
-
-  //     expect(reducer(initialState, saveComponentCode())).toEqual({newState});
-  //   });
-  // });
 });

main.js

@@ -50,7 +50,6 @@ function createWindow() {
     height: 880,
     show: false,
     webPreferences: {
-      preload: path.join(__dirname, './src/electron/preload.js'),
       nodeIntegration: true,
       contextIsolation: false,
     },
@@ -95,7 +94,6 @@ function createWindow() {
   // We send incoming data to the Terminal
   ptyProcess.on('data', (data) => {
     mainWindow.webContents.send('terminal.sentData', data);
-    console.log('data sent from main', data);
   });
   // in the main process, when data is received in the terminal,
   // main process will write and add to ptyProcess
@@ -140,7 +138,6 @@ function createWindow() {
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
     // mainWindow.webContents.send('terminal.close', () => {
-    //   console.log('SENT CLOSE');
     // });
     ptyProcess.kill();
     mainWindow = null;