Added two edge case test in componentPanel

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

Author: 4 people

__tests__/BottomTabs.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+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';
 
 test('Bottom Panel Contains All Seven Tabs', () => {
   render(
@@ -20,3 +21,52 @@ test('Bottom Panel Contains All Seven Tabs', () => {
   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'
+    }
+  });
+
+  expect(screen.getByText('New Component')).toBeInTheDocument();
+
+  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: '!@#'
+    }
+  });
+
+  fireEvent.click(screen.getByText('Create'));
+
+  await waitFor(() => {
+    expect(
+      screen.getByText('Component name must start with a letter.')
+    ).toBeInTheDocument();
+  });
+});
+//test for edge cases
+//trigger an event for each input
+//value being empty string
+//grab error message
+//check if it matches what is expected