From 62b0bcde8b7e79bf3f9414571efafe178f985e1f Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Fri, 29 Nov 2019 15:47:27 -0800
Subject: [PATCH] render single sound change in single suite

---
 src/components/SoundChangeSuite.js      | 8 ++++++--
 src/components/SoundChangeSuite.test.js | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/SoundChangeSuite.js b/src/components/SoundChangeSuite.js
index 5cecafb..8f571ff 100644
--- a/src/components/SoundChangeSuite.js
+++ b/src/components/SoundChangeSuite.js
@@ -2,9 +2,13 @@ import React from 'react';
 import './SoundChangeSuite.scss';
 
 const SoundChangeSuite = props => {
+  let epochName = props.epoch ? Object.keys(props.epoch)[0] : 'Changes';
   return (
-    <div className="SoundChangeSuite" data-testid="SoundChangeSuite">
-      <h4>{props.epoch ? Object.keys(props.epoch)[0] : 'Changes'}</h4>
+    <div className="SoundChangeSuite" data-testid={`${epochName}_SoundChangeSuite`}>
+      <h4>{epochName}</h4>
+      <form className="SoundChangeSuite__form" data-testid={`${epochName}_SoundChangeSuite_changes`}>
+        <textarea name="changes" id="" cols="30" rows="10" value={props.epoch ? props.epoch[epochName][0] : ''} onChange={e=>e.target.value}></textarea>
+      </form>
     </div>
   );
 }
diff --git a/src/components/SoundChangeSuite.test.js b/src/components/SoundChangeSuite.test.js
index 5dc02b2..c35d61c 100644
--- a/src/components/SoundChangeSuite.test.js
+++ b/src/components/SoundChangeSuite.test.js
@@ -15,11 +15,11 @@ it('renders SoundChangeSuite without crashing', () => {
 describe('SoundChangeSuite', () => {
   it('renders the correct subtitle', () => {
     const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound change rule']}}/>);
-    expect(getByTestId('SoundChangeSuite')).toHaveTextContent('Epoch Name');
+    expect(getByTestId('Epoch Name_SoundChangeSuite')).toHaveTextContent('Epoch Name');
   });
 
   it('renders a suite of soundchanges', () => {
-    const { getByTestId } = render(<SoundChangeSuite />);
-    
+    const { getByTestId } = render(<SoundChangeSuite epoch={{'Epoch Name': ['sound>change/environment']}}/>);
+    expect(getByTestId('Epoch Name_SoundChangeSuite_changes')).toHaveFormValues({changes: 'sound>change/environment'})
   })
 });
\ No newline at end of file