oxaliq/feature-change-applier
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

implement hook for proto lang lexicon

Browse source
This commit is contained in:
Sorrel Bri 2019-11-26 18:39:40 -08:00
parent 6a7a563189
commit 46f1b2a831
6 changed files with 29 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/index.html
View file

@ -4,40 +4,11 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Phono Change Applier</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

4
src/App.js
View file

@ -5,9 +5,7 @@ import PhonoChangeApplier from './PhonoChangeApplier';
function App() {
return (
<div className="App" data-testid="App">
<header className="App-header">
Phono Change Applier
</header>
<h1>Phono Change Applier</h1>
<PhonoChangeApplier />
</div>
);

6
src/PhonoChangeApplier.js
View file

@ -1,12 +1,14 @@
import React from 'react';
import React, { useState } from 'react';
import './PhonoChangeApplier.scss';
import ProtoLang from './components/ProtoLang';
const PhonoChangeApplier = () => {
const [ lexicon, setLexicon ] = useState(['one'])
return (
<div className="PhonoChangeApplier" data-testid="PhonoChangeApplier">
<ProtoLang />
<ProtoLang lexicon={lexicon} setLexicon={setLexicon}/>
</div>
);
}

11
src/components/ProtoLang.js
View file

@ -1,10 +1,19 @@
import React from 'react';
import './ProtoLang.scss';
const ProtoLang = () => {
const ProtoLang = (props) => {
return (
<div className="ProtoLang" data-testid="ProtoLang">
<h3>Proto Language Lexicon</h3>
<br />
<form data-testid="ProtoLang-Lexicon">
<textarea
name="lexicon"
value={props.lexicon ? props.lexicon.join("\n") : ''}
onChange={e=>props.setLexicon(e.target.value.split(/\n/))}
>
</textarea>
</form>
</div>
);
}

5
src/components/ProtoLang.scss
View file

@ -0,0 +1,5 @@
.ProtoLang {
width: 100%;
height: 100%;
color: black;
}

9
src/components/ProtoLang.test.js
View file

@ -12,9 +12,16 @@ it('renders ProtoLang without crashing', () => {
ReactDOM.unmountComponentAtNode(div);
});
describe('ProtoLang', () => {
it('renders the correct title', () => {
it('renders the correct subtitle', () => {
const { getByTestId } = render(<ProtoLang />);
expect(getByTestId('ProtoLang')).toHaveTextContent('Proto Language Lexicon');
})
it('renders lexicon from state', () => {
const { getByTestId } = render(<ProtoLang lexicon={['one']}/>);
expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one'});
})
})