Inital edge case test passing

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

Author: 4 people

__tests__/BottomTabs.test.tsx

@@ -5,68 +5,110 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import BottomTabs from '../app/src/components/bottom/BottomTabs';
 import store from '../app/src/redux/store';
 import ComponentPanel from '../app/src/components/right/ComponentPanel';
+import HTMLPanel from '../app/src/components/left/HTMLPanel';
 
-test('Bottom Panel Contains All Seven Tabs', () => {
-  render(
-    <Provider store={store}>
-      <BottomTabs />
-    </Provider>
-  );
-  expect(screen.getAllByRole('tab')).toHaveLength(7);
-  expect(screen.getByText('Code Preview')).toBeInTheDocument();
-  expect(screen.getByText('Component Tree')).toBeInTheDocument();
-  expect(screen.getByText('Creation Panel')).toBeInTheDocument();
-  expect(screen.getByText('Customization')).toBeInTheDocument();
-  expect(screen.getByText('CSS Editor')).toBeInTheDocument();
-  expect(screen.getByText('Context Manager')).toBeInTheDocument();
-  expect(screen.getByText('State Manager')).toBeInTheDocument();
+describe('Bottom Panel Render Test', () => {
+  test('should render all seven tabs', () => {
+    render(
+      <Provider store={store}>
+        <BottomTabs />
+      </Provider>
+    );
+    expect(screen.getAllByRole('tab')).toHaveLength(7);
+    expect(screen.getByText('Code Preview')).toBeInTheDocument();
+    expect(screen.getByText('Component Tree')).toBeInTheDocument();
+    expect(screen.getByText('Creation Panel')).toBeInTheDocument();
+    expect(screen.getByText('Customization')).toBeInTheDocument();
+    expect(screen.getByText('CSS Editor')).toBeInTheDocument();
+    expect(screen.getByText('Context Manager')).toBeInTheDocument();
+    expect(screen.getByText('State Manager')).toBeInTheDocument();
+  });
 });
 
-test('empty name field for new component', async () => {
-  render(
-    <Provider store={store}>
-      <ComponentPanel isThemeLight={null} />
-    </Provider>
-  );
-
-  fireEvent.click(screen.getByText('Create'), {
-    target: {
-      value: 'fasdfasd'
-    }
+describe('invalid input test', () => {
+  test('New Component should display correct warning on empty input', async () => {
+    render(
+      <Provider store={store}>
+        <ComponentPanel isThemeLight={null} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Component name cannot be blank.')
+      ).toBeInTheDocument();
+    });
   });
 
-  expect(screen.getByText('New Component')).toBeInTheDocument();
+  test('New Component should display correct warning when input contains symbols', async () => {
+    render(
+      <Provider store={store}>
+        <ComponentPanel isThemeLight={null} />
+      </Provider>
+    );
 
-  await waitFor(() => {
-    expect(
-      screen.getByText('Component name must start with a letter.')
-    ).toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText('Name:'), {
+      target: {
+        value: '!@#'
+      }
+    });
+
+    fireEvent.click(screen.getByText('Create'));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Component name must start with a letter.')
+      ).toBeInTheDocument();
+    });
   });
-});
 
-test('symbols in name of new component', async () => {
-  render(
-    <Provider store={store}>
-      <ComponentPanel isThemeLight={null} />
-    </Provider>
-  );
-
-  fireEvent.change(screen.getByLabelText('Name:'), {
-    target: {
-      value: '!@#'
-    }
+  test('html tag should display error if input is empty', async () => {
+    render(
+      <Provider store={store}>
+        <HTMLPanel isThemeLight={null} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByText('Add Element'));
+
+    await waitFor(() => {
+      expect(screen.getAllByText('* Input cannot be blank. *')).toHaveLength(2);
+    });
   });
 
-  fireEvent.click(screen.getByText('Create'));
+  test('element name should display error if input starts with symbol', async () => {
+    render(
+      <Provider store={store}>
+        <HTMLPanel isThemeLight={null} />
+      </Provider>
+    );
+
+    fireEvent.change(screen.getByLabelText('Element Name:'), {
+      target: {
+        value: '!@#'
+      }
+    });
 
-  await waitFor(() => {
-    expect(
-      screen.getByText('Component name must start with a letter.')
-    ).toBeInTheDocument();
+    fireEvent.change(screen.getByLabelText('Tag:'), {
+      target: {
+        value: '!@#'
+      }
+    });
+
+    fireEvent.click(screen.getByText('Add Element'));
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByText('* Input must start with a letter. *')
+      ).toHaveLength(2);
+    });
   });
+
+  //test for edge cases
+  //trigger an event for each input
+  //value being empty string
+  //grab error message
+  //check if it matches what is expected
 });
-//test for edge cases
-//trigger an event for each input
-//value being empty string
-//grab error message
-//check if it matches what is expected

__tests__/componentReducer.test.ts

@@ -2,7 +2,7 @@ import reducer from '../app/src/redux/reducers/slice/appStateSlice';
 import { State, Action } from '../app/src/interfaces/Interfaces';
 import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
 
-describe('Testing componentReducer functionality', () => {
+describe('componentReducer Test', () => {
   let state: State = initialState;
 
   // TEST 'ADD COMPONENT'
@@ -30,7 +30,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'ADD COMPONENT' with new root
-  describe('addComponent reducer', () => {
+  describe('addComponent', () => {
     it('should add new reuseable component to state as the new root', () => {
       const action: Action = {
         type: 'appState/addComponent',
@@ -56,7 +56,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'ADD CHILD'
-  describe('addChild reducer', () => {
+  describe('addChild', () => {
     it('should add child component and separator to top-level component', () => {
       const action: Action = {
         type: 'appState/addChild',
@@ -88,7 +88,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'CHANGE POSITION'
-  describe('CHANGE POSITION reducer ', () => {
+  describe('changePosition', () => {
     it('should move position of an instance', () => {
       const actionHtml: Action = {
         type: 'appState/addChild',
@@ -130,7 +130,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'DELETE CHILD'
-  describe('DELETE CHILD reducer', () => {
+  describe('deleteChild', () => {
     it('should delete child of focused top-level component', () => {
       // canvas still focused on childId: 2, which is an HTML element
       const action: Action = {
@@ -159,7 +159,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'CHANGE FOCUS'
-  describe('CHANGE FOCUS reducer', () => {
+  describe('changeFocus', () => {
     it('should change focus to specified component', () => {
       const action: Action = {
         type: 'appState/changeFocus',
@@ -175,7 +175,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'UPDATE CSS'
-  describe('updateCss reducer', () => {
+  describe('updateCss', () => {
     it('should add style to focused component', () => {
       const action: Action = {
         type: 'appState/updateCss',
@@ -200,7 +200,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'UPDATE PROJECT NAME'
-  describe('updateProjectName reducer', () => {
+  describe('updateProjectName', () => {
     it('should update project with specified name', () => {
       const action: Action = {
         type: 'appState/updateProjectName',
@@ -213,7 +213,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'CHANGE PROJECT TYPE'
-  describe('changeProjectType reducer', () => {
+  describe('changeProjectType', () => {
     it('should change project type to specified type', () => {
       const action: Action = {
         type: 'appState/changeProjectType',
@@ -230,7 +230,7 @@ describe('Testing componentReducer functionality', () => {
   });
 
   // TEST 'UNDO'
-  xdescribe('undo reducer', () => {
+  xdescribe('undo', () => {
     it('should remove the last element from the past array and push it to the future array', () => {
       const focusIndex = state.canvasFocus.componentId - 1;
       state.components[focusIndex].past = [];
@@ -268,7 +268,7 @@ describe('Testing componentReducer functionality', () => {
     });
   });
   // TEST 'REDO'
-  xdescribe('redo reducer', () => {
+  xdescribe('redo', () => {
     it('should remove the last element from the future array and push it to the past array', () => {
       const focusIndex = state.canvasFocus.componentId - 1;
       const actionRedo: Action = {
@@ -281,7 +281,7 @@ describe('Testing componentReducer functionality', () => {
     });
   });
   // TEST 'RESET STATE'
-  describe('resetState reducer', () => {
+  describe('resetState', () => {
     it('should reset project to initial state', () => {
       const action: Action = {
         type: 'appState/resetState',

__tests__/contextReducer.test.js

@@ -1,6 +1,6 @@
 import subject from '../app/src/redux/reducers/slice/contextReducer';
 
-describe('Context Reducer', () => {
+describe('contextReducer test', () => {
   let state;
 
   beforeEach(() => {
@@ -21,7 +21,7 @@ describe('Context Reducer', () => {
     });
   });
 
-  describe('context/addContext', () => {
+  describe('addContext', () => {
     const action = {
       type: 'context/addContext',
       payload: {
@@ -79,7 +79,7 @@ describe('Context Reducer', () => {
   //   });
   // });
 
-  describe('context/addContextValues', () => {
+  describe('addContextValues', () => {
     beforeEach(() => {
       state = {
         allContext: [
@@ -115,7 +115,7 @@ describe('Context Reducer', () => {
     });
   });
 
-  describe('context/deleteContext', () => {
+  describe('deleteContext', () => {
     let action;
     beforeEach(() => {
       state = {
@@ -154,7 +154,7 @@ describe('Context Reducer', () => {
     });
   });
 
-  describe('context/addComponentToContext', () => {
+  describe('addComponentToContext', () => {
     beforeEach(() => {
       state = {
         allContext: [

__tests__/stateManagementReducer.test.js

@@ -60,7 +60,7 @@ const findComponent = (components, componentId) => {
   return components.find((elem) => elem.id === componentId);
 };
 
-describe('Testing componentReducer functionality for stateManagement tab', () => {
+describe('stateManagementReducer test', () => {
   // TEST 'ADD STATE'
   describe('addState', () => {
     // setting canvas focus to root component (App)

__tests__/tree.test.tsx

@@ -96,16 +96,18 @@ state.components = [
 ];
 
 // renders a tree of the components in tester
-test('Test the tree functionality', () => {
-  render(
-    <Provider store={store}>
-      <TreeChart data={state.components} />
-    </Provider>
-  );
-  // elements that are not separators should appear in the tree
-  expect(screen.getByText('index')).toBeInTheDocument();
-  expect(screen.getByText('A')).toBeInTheDocument();
-  expect(screen.getByText('B')).toBeInTheDocument();
-  // tree should not include separators
-  expect(screen.queryByText('separator')).toBe(null);
+describe('Component Tree Render Test', () => {
+  test('should render full component tree based on state', () => {
+    render(
+      <Provider store={store}>
+        <TreeChart data={state.components} />
+      </Provider>
+    );
+    // elements that are not separators should appear in the tree
+    expect(screen.getByText('index')).toBeInTheDocument();
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+    // tree should not include separators
+    expect(screen.queryByText('separator')).toBe(null);
+  });
 });