Merge pull request #48 from oslabs-beta/main

ReacType4.0

Author: brianjshan

README.md

@@ -1,4 +1,4 @@
-<!-- <p align="center">
+<p align="center">
   <img width="50" src="url('./app/src/public/icons/png/256x256.png)">
   <h1 align="center">ReacType </h1>
 </p>
@@ -109,20 +109,26 @@ npm run dev
 - Please note that the development build is not connected to the production server. `npm run dev` should spin up the development server from the server folder of this repo. For additional information, the readme is [here](https://github.com/open-source-labs/ReacType/blob/master/server/README.md). Alternatively, you can also select "Continue as guest" on the log-in page of the app to not use any features that rely on the server (authentication and saving project data.)
 
 ## To Run Your Exported Next.js Project
+
 - Open exported project directory
 - Install dependencies
 
 ```bash
 npm install
 ```
+
 - Build the app
+
 ```bash
 npm run build
 ```
+
 - Start an instance
+
 ```bash
 npm run start
 ```
+
 - Open browser and navigate to localhost at specified port
 
 ## License

__tests__/BottomTabs.test.tsx

@@ -0,0 +1,24 @@
+import React, { useReducer} from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent, cleanup, screen } from '@testing-library/react';
+
+import BottomTabs from '../app/src/components/bottom/BottomTabs';
+import StateContext from '../app/src/context/context';
+import initialState from '../app/src/context/initialState';
+import reducer from '../app/src/reducers/componentReducer';
+
+function Test() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <StateContext.Provider value={[state, dispatch]} >
+      <BottomTabs />
+    </StateContext.Provider>
+  )
+}
+
+test('Bottom Panel Contains Two Tabs: Code Preview and Component Tree', () => {
+  render(<Test/>);
+  expect(screen.getAllByRole('tab')).toHaveLength(2);
+  expect(screen.getByText('Code Preview')).toBeInTheDocument();
+  expect(screen.getByText('Component Tree')).toBeInTheDocument();
+})

__tests__/HTMLPanel.test.tsx

@@ -0,0 +1,58 @@
+import React, { useReducer} from 'react';
+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';
+
+
+function Test() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <StateContext.Provider value={[state, dispatch]} >
+        <HTMLPanel />
+      </StateContext.Provider>
+    </DndProvider>
+  )
+}
+
+
+test('Renders HTMLPanel component', () => {
+  render(
+    <Test/>
+  );
+  expect(screen.getAllByRole('textbox')).toHaveLength(2);
+  expect(screen.getByText('Div')).toBeInTheDocument();
+  expect(screen.getByText('Image')).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();
+})
+
+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();
+})
+