add new features to hook via feature form
This commit is contained in:
parent
13e04ab20d
commit
b83a11912e
3 changed files with 51 additions and 17 deletions
|
@ -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 (
|
||||
|
|
|
@ -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 => <li key={`feature__${feature}`}>{`[+ ${feature}] = `}{featureMap[feature].join('|')}</li>);
|
||||
}
|
||||
|
||||
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 (
|
||||
<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> */}
|
||||
<form className="Features__form" data-testid="Features-form">
|
||||
<input
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>');
|
||||
})
|
||||
});
|
Loading…
Reference in a new issue