add options form, patch sound change autofill no deletion bug

src/PhonoChangeApplier.js

@@ -4,6 +4,7 @@ import './PhonoChangeApplier.scss';
 import ProtoLang from './components/ProtoLang';
 import Features from './components/Features';
 import Epochs from './components/Epochs';
+import Options from './components/Options';
 
 const PhonoChangeApplier = () => {
   const [ lexicon, setLexicon ] = useState(['one']);
@@ -17,6 +18,7 @@ const PhonoChangeApplier = () => {
       <ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
       <Features phonemes={phonemes} setPhonemes={setPhonemes}/>
       <Epochs epochs={epochs} setEpochs={setEpochs}/>
+      <Options />
     </div>
   );
 }

src/components/Features.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Features from './Features';
 import renderer from 'react-test-renderer';
-import { exportAllDeclaration } from '@babel/types';
 import {render, fireEvent} from '@testing-library/react';
 import extendExpect from '@testing-library/jest-dom/extend-expect'
 

src/components/Options.js

@@ -1,10 +1,43 @@
 import React from 'react';
 import './Options.scss';
 
-const Options = () => {
-  return (<>
-  
-  </>);
+const Options = props => {
+  return (
+    <div className="Options" data-testid="Options">
+      <h3>Modeling Options</h3>
+      <form onSubmit={()=>{}}>
+        
+        {/* <h5>Output</h5> */}
+
+        <input 
+          type="radio" name="output" id="output-default" defaultChecked
+        />
+        <label htmlFor="output-default">Default 
+          <span className="Options__output-example"> output</span>
+        </label>
+        
+        <input 
+          type="radio" name="output" id="output-proto" 
+        />
+        <label htmlFor="output-proto">Proto 
+          <span className="Options__output-example"> output [proto]</span>
+        </label>
+        
+        <input 
+          type="radio" name="output" id="output-diachronic" 
+        /><label htmlFor="output-diachronic">Diachronic 
+            <span className="Options__output-example"> *proto > *epoch > output</span>
+          </label>
+        
+        <input 
+          type="checkbox" name="save" 
+        />
+          <label htmlFor="save">Store session on Run</label>
+        
+        <input type="submit"></input>
+      </form>
+    </div>
+  );
 }
 
 export default Options;

src/components/Options.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Options from './Options';
+import renderer from 'react-test-renderer';
+import {render, fireEvent} from '@testing-library/react';
+import extendExpect from '@testing-library/jest-dom/extend-expect'
+
+it('renders Options without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Options />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+
+
+describe('Options', () => {
+  it('renders the correct subtitle', () => {
+    const { getByTestId } = render(<Options />);
+    expect(getByTestId('Options')).toHaveTextContent('Modeling Options');
+  });
+
+});

src/components/SoundChangeSuite.js

@@ -11,7 +11,7 @@ const SoundChangeSuite = props => {
         <textarea name="epoch" id="" cols="30" rows="1" value={epoch.name} onChange={e=>setEpoch({...epoch, name:e.target.value})} ></textarea>
         <textarea name="changes" id="" cols="30" rows="10" 
           value={epoch.changes.join('\n')} 
-          onChange={e=>setEpoch({...epoch, changes:e.target.value.split(/\n/).map(change=>change === '' ? '[+ feature]>[- feature]/_#' : change)})}
+          onChange={e=>setEpoch({...epoch, changes:e.target.value.split(/\n/).map(change=>change === ' ' ? '[+ feature]>[- feature]/_#' : change)})}
         ></textarea>
       </form>
       <form onSubmit={e=>props.removeEpoch(e, epoch.name)}>