diff --git a/public/index.html b/public/index.html index c240d2c..3f2a2b3 100644 --- a/public/index.html +++ b/public/index.html @@ -4,40 +4,11 @@ - - - - - - React App + Phono Change Applier
- diff --git a/src/App.js b/src/App.js index ec21e33..27a8461 100644 --- a/src/App.js +++ b/src/App.js @@ -5,9 +5,7 @@ import PhonoChangeApplier from './PhonoChangeApplier'; function App() { return (
-
- Phono Change Applier -
+

Phono Change Applier

); diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js index eb4e700..1dec8b6 100644 --- a/src/PhonoChangeApplier.js +++ b/src/PhonoChangeApplier.js @@ -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 (
- +
); } diff --git a/src/components/ProtoLang.js b/src/components/ProtoLang.js index 74bec72..c858ccb 100644 --- a/src/components/ProtoLang.js +++ b/src/components/ProtoLang.js @@ -1,10 +1,19 @@ import React from 'react'; import './ProtoLang.scss'; -const ProtoLang = () => { +const ProtoLang = (props) => { return (

Proto Language Lexicon

+
+
+ +
); } diff --git a/src/components/ProtoLang.scss b/src/components/ProtoLang.scss index e69de29..0840944 100644 --- a/src/components/ProtoLang.scss +++ b/src/components/ProtoLang.scss @@ -0,0 +1,5 @@ +.ProtoLang { + width: 100%; + height: 100%; + color: black; +} \ No newline at end of file diff --git a/src/components/ProtoLang.test.js b/src/components/ProtoLang.test.js index e532ebb..63b879a 100644 --- a/src/components/ProtoLang.test.js +++ b/src/components/ProtoLang.test.js @@ -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(); expect(getByTestId('ProtoLang')).toHaveTextContent('Proto Language Lexicon'); }) + + it('renders lexicon from state', () => { + const { getByTestId } = render(); + expect(getByTestId('ProtoLang-Lexicon')).toHaveFormValues({lexicon: 'one'}); + }) }) \ No newline at end of file