add new features to hook via feature form

src/PhonoChangeApplier.js

@@ -6,10 +6,8 @@ import Features from './components/Features';
 
 const PhonoChangeApplier = () => {
   const [ lexicon, setLexicon ] = useState(['one']);
-  const [ phonemes, setPhonemes ] = useState(
+  const [ phonemes, setPhonemes ] = useState( 
-    [ 
       { phoneme: [ 'feature' ] } 
-    ]
   );
 
   return (

src/components/Features.js

@@ -1,31 +1,53 @@
 import React, {useState} from 'react';
 import './Features.scss';
 
-const parseFeaturesFromPhonemeList = phonemeList => {
+const parseFeaturesFromPhonemeObject = phonemeObject => {
-  let featureMap = phonemeList.reduce((featureObject, phonemeObject) => {
+  let featureMap = Object.keys(phonemeObject).reduce((featureObject, phonemeName) => {
-    let phoneme = Object.keys(phonemeObject)[0];
+    let phoneme = phonemeObject[phonemeName];
-    phonemeObject[phoneme].forEach(feature => {
+    phoneme.forEach(feature => {
-      featureObject[feature] ? featureObject[feature].push(phoneme) : featureObject[feature] = [ phoneme ]
+      featureObject[feature] ? featureObject[feature].push(phonemeName) : featureObject[feature] = [ phonemeName ]
     });
     return featureObject;
   },{})
-  console.log(featureMap)
   return Object.keys(featureMap).map(feature => <li key={`feature__${feature}`}>{`[+ ${feature}] = `}{featureMap[feature].join('|')}</li>);
 }
 
 const Features = (props) => {
-  const {feature, setFeature} = useState('[+ nasal]')
+  const [feature, setFeature] = useState('nasal')
-  const {newPhonemes, setNewPhonemes} = useState('n / m / ŋ')
+  const [newPhonemes, setNewPhonemes] = useState('n / m / ŋ')
+
+  const newFeaturesSubmit = e => {
+    e.preventDefault();
+    
+    let newPhonemeObject = newPhonemes.split('/').reduce((phonemeObject, newPhoneme) => {
+      // console.log([...phonemeObject[newPhoneme], feature])
+      newPhoneme = newPhoneme.trim();
+      phonemeObject = phonemeObject[newPhoneme]
+        ? {...phonemeObject, [newPhoneme]: [...phonemeObject[newPhoneme], feature]}
+        : {...phonemeObject, [newPhoneme]: [feature]}
+      return phonemeObject;
+    }, {...props.phonemes})
+    
+    props.setPhonemes(newPhonemeObject);
+
+    setFeature('');
+    setNewPhonemes('');
+  }
 
   return (
     <div className="Features" data-testid="Features">
       <h3>Phonetic Features</h3>
       <ul className="Features__list" data-testid="Features-list">
-        {props.phonemes ? <>{parseFeaturesFromPhonemeList(props.phonemes)}</> : <></>}
+        {props.phonemes ? <>{parseFeaturesFromPhonemeObject(props.phonemes)}</> : <></>}
       </ul>
-      {/* <form className="Features__form" data-testid="Features-form">
+      <form className="Features__form" data-testid="Features-form">
-        
+        <input 
-      </form> */}
+          type="text" name="feature" 
+          value={feature} onChange={e=> setFeature(e.target.value)}
+        ></input>
+        <input type="text" name="phonemes" value={newPhonemes} onChange={e=> setNewPhonemes(e.target.value)}></input>
+        <input type="submit" onClick={newFeaturesSubmit} value="Add feature"></input>
+      </form>
     </div>
   );
 }

src/components/Features.test.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import Features from './Features';
 import renderer from 'react-test-renderer';
 import { exportAllDeclaration } from '@babel/types';
-import {render} from '@testing-library/react';
+import {render, fireEvent} from '@testing-library/react';
 import extendExpect from '@testing-library/jest-dom/extend-expect'
 
 it('renders Features without crashing', () => {
@@ -20,8 +20,22 @@ describe('Features', () => {
     expect(getByTestId('Features')).toHaveTextContent('Phonetic Features');
   });
   
-  it('renders features from state', () => {
+  it('renders features from phonemes hook', () => {
     const { getByTestId } = render(<Features phonemes={ [{n:[ 'nasal', 'occlusive' ]}] }/>);
     expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li><li>[+ occlusive] = n</li>');
   });
+
+  it('adds new features and new phonemes from features and newPhonemes hooks', () => {
+    const { getByTestId } = render(<Features />);
+    getByTestId('Features-form')
+  })
+
+  it('adds features from form to state', () => {
+    const phonemes = [];
+    const setPhonemes = jest.fn()
+    const { getByTestId } = render(<Features phonemes={phonemes} setPhonemes={setPhonemes}/>);
+    // mock function for adding feature to state ([+ nasal] = n)
+    
+    expect(getByTestId('Features-list')).toContainHTML('<li>[+ nasal] = n</li>');
+  })
 });