Changed text color of hidden display tab

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

Author: 3 people

__tests__/BottomTabs.test.tsx

@@ -7,6 +7,7 @@ import ContextManager from '../app/src/components/ContextAPIManager/ContextManag
 import store from '../app/src/redux/store';
 import ComponentPanel from '../app/src/components/right/ComponentPanel';
 import HTMLPanel from '../app/src/components/left/HTMLPanel';
+import StateManager from '../app/src/components/StateManagement/StateManagement';
 
 describe('Bottom Panel Render Test', () => {
   test('should render all seven tabs', () => {
@@ -109,13 +110,38 @@ describe('Creation Panel', () => {
 });
 
 describe('Context Manager', () => {
-  test('should contain all buttons and input fields', () => {
+  test('Create/Edit Tab should contain all buttons and input fields', () => {
     render(
       <Provider store={store}>
         <ContextManager />
       </Provider>
     );
     expect(screen.getAllByRole('textbox')).toHaveLength(2);
     expect(screen.getAllByRole('button')).toHaveLength(3);
+    expect(screen.getByText('Context Name')).toBeInTheDocument();
+  });
+  test('Create/Edit Tab should contain all buttons and input fields', () => {
+    render(
+      <Provider store={store}>
+        <ContextManager />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByText('Assign'));
+    expect(screen.getByText('Contexts Consumed')).toBeInTheDocument();
+  });
+});
+
+describe('State Manager', () => {
+  test('Should render all containers', () => {
+    render(
+      <Provider store={store}>
+        <StateManager isThemeLight={null} />
+      </Provider>
+    );
+    expect(screen.getAllByRole('heading')).toHaveLength(4);
+    expect(screen.getAllByRole('textbox')).toHaveLength(2);
+    expect(screen.getAllByRole('grid')).toHaveLength(3);
+    expect(screen.getAllByRole('column header')).toHaveLength(9);
   });
 });

__tests__/DragAndDrop.test.tsx

@@ -4,17 +4,25 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { fireEvent, render, screen } from '@testing-library/react';
 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';
 
+function TestContext(component) {
+  return(
+  <Provider store={store}>
+    <DndProvider backend={HTML5Backend}>
+      {component}
+      </DnDProvider>
+    </Provider>
+  )
+}
+
 describe('Drag and Drop Side Panel', () => {
+  
   test('Renders all HTML Element choices', () => {
     render(
-      <Provider store={store}>
-        <DndProvider backend={HTML5Backend}>
-          <DragDropPanel />
-        </DndProvider>
-      </Provider>
+      TestContext(<DragDropPanel/>)
     );
     expect(screen.getByText('Div')).toBeInTheDocument();
     expect(screen.getByText('Img')).toBeInTheDocument();
@@ -36,27 +44,21 @@ describe('Drag and Drop Side Panel', () => {
 
   test('Renders all React Router Component choices', () => {
     render(
-      <Provider store={store}>
-        <DndProvider backend={HTML5Backend}>
-          <DragDropPanel />
-        </DndProvider>
-      </Provider>
+      TestContext(<DragDropPanel />)
     );
 
     expect(screen.getByText('Switch')).toBeInTheDocument();
     expect(screen.getByText('Route')).toBeInTheDocument();
     expect(screen.getByText('LinkTo')).toBeInTheDocument();
   });
 
-  // test('Adds new custom element', () => {
-  //   render(<Test />);
-  //   fireEvent.change(screen.getAllByRole('textbox')[0], {
-  //     target: { value: 'Testing' }
-  //   });
-  //   fireEvent.change(screen.getAllByRole('textbox')[1], {
-  //     target: { value: 'Testing' }
-  //   });
-  //   fireEvent.click(screen.getByDisplayValue('Add Element'));
-  //   expect(screen.getByText('Testing')).toBeInTheDocument();
-  // });
+  test('Should render Roots Components and Reusbale components', () => {
+    render(
+      TestContext(<ComponentDrag/>)
+    );
+    
+    expect(screen.getByText('Root Components')).toBeInTheDocument();
+    expect(screen.getByText('Reusable Components')).toBeInTheDocument();
+  });
+
 });

__tests__/signIn.test.tsx

@@ -38,7 +38,6 @@ describe('sign in page', () => {
   });
   test('should invalidate empty password field', () => {
     render(<TestSignIn />);
-    console.log(screen.getAllByRole('textbox'));
     fireEvent.change(screen.getByRole('textbox'), {
       target: {
         value: 'username'

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -18,7 +18,7 @@ import TablePassedInProps from './TablePassedInProps';
 import { RootState } from '../../../../redux/store';
 
 const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
-  const { state, contextParam } = useSelector((store:RootState) => ({
+  const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice
   }));
@@ -526,11 +526,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: 'rgba(0,0,0,0.54)'
   },
   formControl: {
-    margin: theme.spacing(1),
+    margin: '8px',
     minWidth: 120
   },
   selectEmpty: {
-    marginTop: theme.spacing(2)
+    marginTop: '16px'
   },
   color: {
     color: '#fff'

app/src/components/StateManagement/StateManagement.tsx

@@ -19,9 +19,8 @@ const useStyles = makeStyles({
 });
 
 const StateManager = (props): JSX.Element => {
-
-  const state = useSelector(store => store.appState)
-  const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
+  const state = useSelector((store) => store.appState);
+  const isDarkMode = useSelector((state) => state.darkMode.isDarkMode);
 
   const { components } = state;
   const classes = useStyles();
@@ -31,27 +30,37 @@ const StateManager = (props): JSX.Element => {
     setValue(newValue);
   };
 
-  // add hook here to access which component has been clicked 
-    // then this will re-render the dataTable 
+  // add hook here to access which component has been clicked
+  // then this will re-render the dataTable
 
-  const background_Color = isDarkMode ? '#21262b' : 'white'
+  const background_Color = isDarkMode ? '#21262b' : 'white';
 
   return (
     <React.Fragment>
-      <div className={classes.contextContainer} style={{backgroundColor: background_Color}}>
+      <div
+        className={classes.contextContainer}
+        style={{ backgroundColor: background_Color }}
+      >
         <Box sx={{ width: '100%', typography: 'body1' }}>
           <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true}>
-                <Tab label="Create/Edit" value="1"/>
-                <Tab label="Display" value="2" />
+                <Tab
+                  label="Create/Edit"
+                  value="1"
+                  style={{ color: '#003366' }}
+                />
+                <Tab label="Display" value="2" style={{ color: '#003366' }} />
               </TabList>
             </Box>
             <TabPanel value="1">
-              <CreateContainer data={components} isThemeLight={props.isThemeLight } />
+              <CreateContainer
+                data={components}
+                isThemeLight={props.isThemeLight}
+              />
             </TabPanel>
             <TabPanel value="2">
-              <DisplayContainer data={components} props={props.props}  />
+              <DisplayContainer data={components} props={props.props} />
             </TabPanel>
           </TabContext>
         </Box>
@@ -60,4 +69,4 @@ const StateManager = (props): JSX.Element => {
   );
 };
 
-export default StateManager;
+export default StateManager;