From caa8da5ded859961124bec9cea510cfcaefbdf2f Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Fri, 29 Nov 2019 23:49:51 -0800
Subject: [PATCH] render Output component

---
 src/PhonoChangeApplier.js     |  2 ++
 src/components/Output.js      | 10 ++++++----
 src/components/Output.test.js | 27 +++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Output.test.js

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 30ee314..3e5770f 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -5,6 +5,7 @@ import ProtoLang from './components/ProtoLang';
 import Features from './components/Features';
 import Epochs from './components/Epochs';
 import Options from './components/Options';
+import Output from './components/Output';
 
 const PhonoChangeApplier = () => {
   const [ lexicon, setLexicon ] = useState(['one']);
@@ -25,6 +26,7 @@ const PhonoChangeApplier = () => {
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
       <Epochs epochs={epochs} setEpochs={setEpochs}/>
       <Options options={options} setOptions={setOptions} runChanges={runChanges}/>
+      <Output />
     </div>
   );
 }
diff --git a/src/components/Output.js b/src/components/Output.js
index 27df67e..68fb568 100644
--- a/src/components/Output.js
+++ b/src/components/Output.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import './Output.scss';
 
-const Output = () => {
-  return (<>
-  
-  </>);
+const Output = props => {
+  return (
+    <div className="Output" data-testid="Output">
+      <h3>Results of Run</h3>
+    </div>
+  );
 }
 
 export default Output;
\ No newline at end of file
diff --git a/src/components/Output.test.js b/src/components/Output.test.js
new file mode 100644
index 0000000..9a4f4c7
--- /dev/null
+++ b/src/components/Output.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Output from './Output';
+import renderer from 'react-test-renderer';
+import {render, fireEvent} from '@testing-library/react';
+import extendExpect from '@testing-library/jest-dom/extend-expect'
+
+it('renders Output without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Output />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+
+
+describe('Output', () => {
+  it('renders the correct subtitle', () => {
+    const { getByTestId } = render(<Output />);
+    expect(getByTestId('Output')).toHaveTextContent('Results of Run');
+  });
+  
+  it('renders output lexicon list from output hook', () => {
+    const { getByTestId } = render(<Output />);
+    // expect(getByTestId('Output-list'));
+  });
+
+});
\ No newline at end of file