Browser: Refactored TextArea tests

Made unit tests independent of any HTML page.
Created TextAreaComponent with manual and automated tests.
Also:
Created CSS class layoutTable for vertically aligning elements within table cell.
Removed ImageComponent: Not interactive and already used with logo.
Removed IframeComponent: Not interactive.

Browser/src/MyBrowserApp.st

@@ -21,10 +21,10 @@ bindElements
 
 	components := Array new.
 	#( AnchorComponent ClipboardComponent CssComponent DialogsComponent EmbedComponent
-		FieldSetComponent FormComponent IframeComponent ImageComponent
+		FieldSetComponent FormComponent
 		InputComponent ListInputComponent RadioInputComponent CheckboxInputComponent
 		ImageInputComponent FileInputComponent DateInputComponent SelectionComponent
-		ScriptComponent )
+		ScriptComponent TextAreaComponent )
 			do: [ :componentClass |
 				components add: (
 					componentClass new appendToElement: 'elementTesterTableBody' then: [] ) ].

Browser/src/Test/TestTextAreaComponent.st

@@ -0,0 +1,24 @@
+CLASS TestTextAreaComponent EXTENDS Test MODULE TestBrowserApp CLASSVARS '' VARS ''
+
+test
+	| textAreaComponent textArea |
+	textAreaComponent := MyBrowserApp default findComponent: TextAreaComponent.
+ 	textArea := textAreaComponent textArea.
+
+	self assert: [ textArea placeholder = 'Enter text here...' ].
+	self assert: [ textArea rows = 2 ].
+	self assert: [ textArea cols = 20 ].
+	self assert: [ textArea minLength = 1 ].
+	self assert: [ textArea maxLength = 100 ].
+	self assert: [ textArea wrap = 'soft' ].
+	self assert: [ textArea value = 'aa\nbb' ].
+!
+testGui
+	| textAreaComponent |
+	textAreaComponent := MyBrowserApp default findComponent: TextAreaComponent.
+
+	textAreaComponent textArea value: 'cc\ndd'.
+	textAreaComponent outputButton click.
+	Timer timeout: 500 then: [
+		self assert: [ textAreaComponent outputSpan textContent = 'cc\ndd' ] ].
+!

Browser/src/TextAreaComponent.st

@@ -0,0 +1,34 @@
+CLASS TextAreaComponent EXTENDS Component MODULE BrowserApp CLASSVARS ''
+	VARS 'textArea outputButton outputSpan'
+
+htmlPath
+	^ 'Components/TextAreaComponent.html'.
+!
+start
+	self bindElements.
+!
+bindElements
+	textArea := Document getElementById: 'textArea' class: HtmlTextAreaElement.
+	outputButton := Document getElementById: 'textAreaOutputButton' class: HtmlButtonElement.
+	outputSpan := Document getElementById: 'textAreaOutputSpan' class: HtmlSpanElement.
+
+	outputButton onClick: [ self onOutputButtonClicked ].
+!
+onOutputButtonClicked
+	| textAreaString |
+
+	outputSpan textContent: textArea value.
+!
+
+"Accessing"
+
+textArea
+	^ textArea.
+!
+outputButton
+	^ outputButton.
+!
+outputSpan
+	^ outputSpan.
+!
+

Browser/web/App.css

@@ -24,7 +24,7 @@ fieldset legend {
 }
 
 table {
-	border: 2px solid gray;
+	border: 2px solid grey;
 	border-collapse: collapse;
 	margin-left: auto;
 	margin-right: auto;
@@ -38,37 +38,34 @@ caption {
   }
 
 .tableHeader {
-	border-color: grey;
 	border-bottom: 2px solid grey;
 	background-color: darkred; color: white;
 }
 
-table th + th {
-	border-left: 2px solid grey;
-}
-
-table td + td {
-	border-left: 2px solid grey;
-}
-
-table th + td {
-	border-left: 2px solid grey;
-}
-
 th, td {
+	border-left: 2px solid grey;
 	text-align: left;
+	vertical-align: middle;
 	padding-top: 0px;
 	padding-bottom: 0px;
 	padding-left: 10px;
 	padding-right: 10px;
-}
-
-td {
-	border: 0px solid black;
 	text-align: left;
 	vertical-align: middle;
 }
 
+.layoutTable {
+	margin-left: 0;
+	border: 0px;
+	padding: 0px;
+}
+
+.layoutTable td {
+	border: 0px;
+	padding: 0px;
+	padding-right: 4px;
+}
+
 .field {
 	font-weight: bold;
 	font-size: medium;

Browser/web/Components/Input/ImageInputComponent.html

@@ -3,8 +3,15 @@
 		<p class="field">Input - Image</p>
 	</th>
 	<td>
-		<label id="imageInputLabel" for="imageInput">Click image: </label>
-		<input id="imageInput" type="image" src="SmallJS.png" width="50" height="50" alt="SmallJS logo">
+		<table class="layoutTable">
+			<tr>
+				<td>
+					<label id="imageInputLabel" for="imageInput">Click image: </label>
+				<td>
+					<input id="imageInput" type="image" src="SmallJS.png" width="50" height="50" alt="SmallJS logo">
+				</td>
+			</tr>
+		</table>
 	</td>
 	<td>
 		<label id="imageInputOutputLabel">[Output]</label>

Browser/web/Components/TextAreaComponent.html

@@ -0,0 +1,20 @@
+<tr>
+	<th scope="row">
+		<p class="field">TextArea</p>
+	</th>
+	<td>
+		<table class="layoutTable">
+			<tr>
+				<td>
+					<textarea id="textArea" placeholder="Enter text here..." rows="2" cols="20" minlength="1" maxLength="100"
+					wrap="soft" autocapitalize="none">aa&#10;bb</textarea>
+				<td>
+					<button id="textAreaOutputButton">Output</button>
+				</td>
+			</tr>
+		</table>
+	</td>
+	<td>
+		<span id="textAreaOutputSpan">[Output]</span>
+	</td>
+</tr>

Browser/web/index.html

@@ -39,20 +39,7 @@
 
 		<tbody id="elementTesterTableBody">
 
-			<!-- ============================= TextArea -->
-
-			<tr>
-				<th scope="row">
-					<p class="field">TextArea</p>
-				</th>
-				<td>
-					<textarea id="textArea" name="textAreaName" title="Text area" placeholder="Enter text here."
-						rows="2" cols="20" minlength="1" maxLength="100" wrap="soft"
-						autocapitalize="none">aa&#10;bb</textarea>
-				</td>
-				<td>
-				</td>
-			</tr>
+			<!-- The compentents are loaded dynamically here by the MyBrowserApp -->
 
 		</tbody>
 	</table>