Merge pull request #6 from oslabs-beta/adam-testing-phase2

Adam testing phase2

Author: atvanek

__tests__/BottomTabs.test.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';

__tests__/DragAndDrop.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { render, screen } from '@testing-library/react';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
+import { Provider } from 'react-redux';
+import store from '../app/src/redux/store';
+
+describe('Drag and Drop Side Panel', () => {
+  test('Renders all HTML Element choices', () => {
+    render(
+      <Provider store={store}>
+        <DndProvider backend={HTML5Backend}>
+          <DragDropPanel />
+        </DndProvider>
+      </Provider>
+    );
+    expect(screen.getByText('Div')).toBeInTheDocument();
+    expect(screen.getByText('Img')).toBeInTheDocument();
+    expect(screen.getByText('Form')).toBeInTheDocument();
+    expect(screen.getByText('Button')).toBeInTheDocument();
+    expect(screen.getByText('Link')).toBeInTheDocument();
+    expect(screen.getByText('Paragraph')).toBeInTheDocument();
+    expect(screen.getByText('Header 1')).toBeInTheDocument();
+    expect(screen.getByText('Header 2')).toBeInTheDocument();
+    expect(screen.getByText('Span')).toBeInTheDocument();
+    expect(screen.getByText('Input')).toBeInTheDocument();
+    expect(screen.getByText('Label')).toBeInTheDocument();
+    expect(screen.getByText('Ordered List')).toBeInTheDocument();
+    expect(screen.getByText('Unordered List')).toBeInTheDocument();
+    expect(screen.getByText('Menu')).toBeInTheDocument();
+    expect(screen.getByText('List')).toBeInTheDocument();
+    expect(screen.queryByText('separator')).toBe(null);
+  });
+
+  test('Renders all React Router Component choices', () => {
+    render(
+      <Provider store={store}>
+        <DndProvider backend={HTML5Backend}>
+          <DragDropPanel />
+        </DndProvider>
+      </Provider>
+    );
+
+    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();
+  // });
+});

__tests__/HTMLPanel.test.tsx

@@ -3,44 +3,49 @@ import '@testing-library/jest-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { render, fireEvent, cleanup, screen } from '@testing-library/react';
-// import StateContext from '../app/src/context/context';
-// import initialState from '../app/src/context/initialState';
-// import reducer from '../app/src/reducers/componentReducer';
-import HTMLPanel from '../app/src/components/left/HTMLPanel';
+import DragDropPanel from '../app/src/components/left/DragDropPanel';
+import { initialState } from '../app/src/redux/reducers/slice/appStateSlice';
+import { Provider } from 'react-redux';
+import store from '../app/src/redux/store';
+
 function Test() {
-  const [state, dispatch] = useReducer(reducer, initialState);
   return (
-    <DndProvider backend={HTML5Backend}>
-      {/* <StateContext.Provider value={[state, dispatch]}> */}
-      <HTMLPanel />
-      {/* </StateContext.Provider> */}
-    </DndProvider>
+    <Provider store={store}>
+      <DndProvider backend={HTML5Backend}>
+        <DragDropPanel />
+      </DndProvider>
+    </Provider>
   );
 }
-xtest('Renders HTMLPanel component properly', () => {
+test('Renders HTMLPanel component properly', () => {
   render(<Test />);
-  expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  // expect(screen.getAllByRole('textbox')).toHaveLength(2);
   expect(screen.getByText('Div')).toBeInTheDocument();
-  expect(screen.getByText('Image')).toBeInTheDocument();
+  expect(screen.getByText('Img')).toBeInTheDocument();
   expect(screen.getByText('Form')).toBeInTheDocument();
-  expect(screen.getByText('List')).toBeInTheDocument();
   expect(screen.getByText('Button')).toBeInTheDocument();
   expect(screen.getByText('Link')).toBeInTheDocument();
   expect(screen.getByText('Paragraph')).toBeInTheDocument();
   expect(screen.getByText('Header 1')).toBeInTheDocument();
   expect(screen.getByText('Header 2')).toBeInTheDocument();
   expect(screen.getByText('Span')).toBeInTheDocument();
+  expect(screen.getByText('Input')).toBeInTheDocument();
+  expect(screen.getByText('Label')).toBeInTheDocument();
+  expect(screen.getByText('Ordered List')).toBeInTheDocument();
+  expect(screen.getByText('Unordered List')).toBeInTheDocument();
+  expect(screen.getByText('Menu')).toBeInTheDocument();
+  expect(screen.getByText('List')).toBeInTheDocument();
   expect(screen.queryByText('separator')).toBe(null);
 });
 
-xtest('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('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();
+// });