diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 8114a3d..39fd870 100644
--- a/src/PhonoChangeApplier.js
+++ b/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 (
diff --git a/src/components/Features.js b/src/components/Features.js
index 50fedd3..048d3d2 100644
--- a/src/components/Features.js
+++ b/src/components/Features.js
@@ -1,31 +1,53 @@
import React, {useState} from 'react';
import './Features.scss';
-const parseFeaturesFromPhonemeList = phonemeList => {
- let featureMap = phonemeList.reduce((featureObject, phonemeObject) => {
- let phoneme = Object.keys(phonemeObject)[0];
- phonemeObject[phoneme].forEach(feature => {
- featureObject[feature] ? featureObject[feature].push(phoneme) : featureObject[feature] = [ phoneme ]
+const parseFeaturesFromPhonemeObject = phonemeObject => {
+ let featureMap = Object.keys(phonemeObject).reduce((featureObject, phonemeName) => {
+ let phoneme = phonemeObject[phonemeName];
+ phoneme.forEach(feature => {
+ featureObject[feature] ? featureObject[feature].push(phonemeName) : featureObject[feature] = [ phonemeName ]
});
return featureObject;
},{})
- console.log(featureMap)
return Object.keys(featureMap).map(feature =>
{`[+ ${feature}] = `}{featureMap[feature].join('|')});
}
const Features = (props) => {
- const {feature, setFeature} = useState('[+ nasal]')
- const {newPhonemes, setNewPhonemes} = useState('n / m / ŋ')
+ const [feature, setFeature] = useState('nasal')
+ 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 (
Phonetic Features
- {props.phonemes ? <>{parseFeaturesFromPhonemeList(props.phonemes)}> : <>>}
+ {props.phonemes ? <>{parseFeaturesFromPhonemeObject(props.phonemes)}> : <>>}
- {/*
*/}
+
);
}
diff --git a/src/components/Features.test.js b/src/components/Features.test.js
index 0e21614..e560677 100644
--- a/src/components/Features.test.js
+++ b/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();
expect(getByTestId('Features-list')).toContainHTML('[+ nasal] = n[+ occlusive] = n');
});
+
+ it('adds new features and new phonemes from features and newPhonemes hooks', () => {
+ const { getByTestId } = render();
+ getByTestId('Features-form')
+ })
+
+ it('adds features from form to state', () => {
+ const phonemes = [];
+ const setPhonemes = jest.fn()
+ const { getByTestId } = render();
+ // mock function for adding feature to state ([+ nasal] = n)
+
+ expect(getByTestId('Features-list')).toContainHTML('[+ nasal] = n');
+ })
});
\ No newline at end of file