Drag and drop/cust. panel elements test

Co-authored-by: rachelk585 <[email protected]>
Co-authored-by: Sophia Bui <[email protected]>
Co-authored-by: Matteo <[email protected]>

Author: 4 people

__tests__/DragAndDrop.test.tsx

@@ -7,23 +7,25 @@ import DragDropPanel from '../app/src/components/left/DragDropPanel';
 import ComponentDrag from '../app/src/components/right/ComponentDrag';
 import { Provider } from 'react-redux';
 import store from '../app/src/redux/store';
+import MainContainer from '../app/src/containers/MainContainer';
+import LeftContainepr from '../app/src/containers/LeftContainer';
+import { StyledEngineProvider } from '@mui/material';
+import Main from 'electron/main';
+import { waitFor, within } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import CustomizationPanel from '../app/src/containers/CustomizationPanel';
 
 function TestContext(component) {
-  return(
-  <Provider store={store}>
-    <DndProvider backend={HTML5Backend}>
-      {component}
-      </DnDProvider>
+  return (
+    <Provider store={store}>
+      <DndProvider backend={HTML5Backend}>{component}</DndProvider>
     </Provider>
-  )
+  );
 }
 
 describe('Drag and Drop Side Panel', () => {
-  
   test('Renders all HTML Element choices', () => {
-    render(
-      TestContext(<DragDropPanel/>)
-    );
+    render(TestContext(<DragDropPanel />));
     expect(screen.getByText('Div')).toBeInTheDocument();
     expect(screen.getByText('Img')).toBeInTheDocument();
     expect(screen.getByText('Form')).toBeInTheDocument();
@@ -43,22 +45,65 @@ describe('Drag and Drop Side Panel', () => {
   });
 
   test('Renders all React Router Component choices', () => {
-    render(
-      TestContext(<DragDropPanel />)
-    );
+    render(TestContext(<DragDropPanel />));
 
     expect(screen.getByText('Switch')).toBeInTheDocument();
     expect(screen.getByText('Route')).toBeInTheDocument();
     expect(screen.getByText('LinkTo')).toBeInTheDocument();
   });
 
   test('Should render Roots Components and Reusbale components', () => {
-    render(
-      TestContext(<ComponentDrag/>)
-    );
-    
+    render(TestContext(<ComponentDrag />));
+
     expect(screen.getByText('Root Components')).toBeInTheDocument();
     expect(screen.getByText('Reusable Components')).toBeInTheDocument();
   });
+  test('test drag and drop', () => {
+    render(
+      TestContext(
+        <>
+          <DragDropPanel />
+          <MainContainer />
+        </>
+      )
+    );
+    const drop = screen.getByTestId('drop');
+    const div = screen.getByText('Div');
+    expect(drop).toBeInTheDocument();
+    expect(div).toBeInTheDocument();
+    fireEvent.dragStart(div);
+    fireEvent.dragEnter(drop);
+    fireEvent.dragOver(drop);
+    fireEvent.drop(drop);
+    expect(within(drop).getByText('div')).toBeInTheDocument();
+  });
 
+  test('Customization panel elements are properly rendering including their input values', () => {
+    render(
+      TestContext(
+        <>
+          <DragDropPanel />
+          <MainContainer />
+          <BrowserRouter>
+            <CustomizationPanel />
+          </BrowserRouter>
+        </>
+      )
+    );
+    const drop = screen.getByTestId('drop');
+    const div = screen.getAllByText('Div')[0];
+    expect(drop).toBeInTheDocument();
+    expect(div).toBeInTheDocument();
+    fireEvent.dragStart(div);
+    fireEvent.dragEnter(drop);
+    fireEvent.dragOver(drop);
+    fireEvent.drop(drop);
+    //check if customization panel elements are rendering correctly
+    const panel = screen.getByTestId('customization')
+    expect(within(panel).getAllByRole('textbox')).toHaveLength(4);
+    // check dropdowns
+    expect(
+      within(panel).getAllByRole('button')
+    ).toHaveLength(11);
+  });
 });

app/src/components/main/Canvas.tsx

@@ -6,16 +6,21 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import Arrow from './Arrow';
 import { useDispatch, useSelector } from 'react-redux';
-import { changeFocus, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
+import {
+  changeFocus,
+  addChild,
+  snapShotAction
+} from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
 function Canvas(props): JSX.Element {
-
-  const { state, contextParam,isDarkMode } = useSelector((store:RootState) => ({
-    state: store.appState,
-    contextParam: store.contextSlice,
-    isDarkMode: store.darkMode.isDarkMode
-  }));
+  const { state, contextParam, isDarkMode } = useSelector(
+    (store: RootState) => ({
+      state: store.appState,
+      contextParam: store.contextSlice,
+      isDarkMode: store.darkMode.isDarkMode
+    })
+  );
   const dispatch = useDispatch();
 
   Arrow.deleteLines();
@@ -24,23 +29,30 @@ function Canvas(props): JSX.Element {
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
-
   // changes focus of the canvas to a new component / child
-  const changeFocusFunction = (componentId?: number, childId?: number | null) => {
-    dispatch(changeFocus({ componentId, childId}));
+  const changeFocusFunction = (
+    componentId?: number,
+    childId?: number | null
+  ) => {
+    dispatch(changeFocus({ componentId, childId }));
   };
   // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
     event.stopPropagation();
-    changeFocusFunction(state.canvasFocus.componentId,null);
+    changeFocusFunction(state.canvasFocus.componentId, null);
   }
 
   // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
   const snapShotFunc = () => {
     // make a deep clone of state
-      const deepCopiedState = JSON.parse(JSON.stringify(state));
-      const focusIndex = state.canvasFocus.componentId - 1;
-    dispatch(snapShotAction({focusIndex: focusIndex, deepCopiedState: deepCopiedState}))
+    const deepCopiedState = JSON.parse(JSON.stringify(state));
+    const focusIndex = state.canvasFocus.componentId - 1;
+    dispatch(
+      snapShotAction({
+        focusIndex: focusIndex,
+        deepCopiedState: deepCopiedState
+      })
+    );
   };
 
   // This hook will allow the user to drag items from the left panel on to the canvas
@@ -55,16 +67,16 @@ function Canvas(props): JSX.Element {
         return;
       }
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
-      if (item.newInstance && item.instanceType !== "Component") {
-   dispatch(addChild({
-    type: item.instanceType,
-    typeId: item.instanceTypeId,
-    childId: null,
-    contextParam: contextParam
-
-  }))
-   
-      } else if (item.newInstance && item.instanceType === "Component") {
+      if (item.newInstance && item.instanceType !== 'Component') {
+        dispatch(
+          addChild({
+            type: item.instanceType,
+            typeId: item.instanceTypeId,
+            childId: null,
+            contextParam: contextParam
+          })
+        );
+      } else if (item.newInstance && item.instanceType === 'Component') {
         let hasDiffParent = false;
         const components = state.components;
         let newChildName = '';
@@ -95,15 +107,17 @@ function Canvas(props): JSX.Element {
           }
         }
         // if (!hasDiffParent) {
-          dispatch(addChild({
+        dispatch(
+          addChild({
             type: item.instanceType,
             typeId: item.instanceTypeId,
             childId: null,
             contextParam: contextParam
-          }))
+          })
+        );
       }
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isOver: !!monitor.isOver()
     })
   });
@@ -116,25 +130,34 @@ function Canvas(props): JSX.Element {
     border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
     aspectRatio: 'auto 774 / 1200',
-    boxSizing: 'border-box',
+    boxSizing: 'border-box'
   };
 
   const darkCanvasStyle = {
     width: '100%',
     minHeight: '100%',
     backgroundColor: isOver ? '#4d4d4d' : '#21262c',
     border: '1px solid #FBFBF2',
-    borderStyle: isOver ? 'dotted' : 'solid',
+    borderStyle: isOver ? 'dotted' : 'solid'
   };
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
 
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
-  const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
+  const darkCombinedCanvasStyle = combineStyles(
+    darkCanvasStyle,
+    currentComponent.style
+  );
   return (
-    <div className={'componentContainer'} ref={drop} style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
-       {renderChildren(currentComponent.children)}
+    <div
+      className={'componentContainer'}
+      ref={drop}
+      data-testid="drop"
+      style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
+      onClick={onClickHandler}
+    >
+      {renderChildren(currentComponent.children)}
     </div>
   );
 }

app/src/containers/CustomizationPanel.tsx

@@ -535,7 +535,12 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     );
   }
   return (
-    <div className="column right" id="rightContainer" style={style.style}>
+    <div
+      className="column right"
+      id="rightContainer"
+      style={style.style}
+      data-testid="customization"
+    >
       <ProjectManager />
       {/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
       <div className="rightPanelWrapper">