Merge pull request #155 from Lemoncode/feature/add-log

Feature/add log

front/src/pods/student/student.component.spec.tsx

@@ -17,7 +17,7 @@ describe('StudentComponent tests', () => {
 
     // Assert
     const sessionName = screen.getByRole('heading');
-    const textArea = screen.getByRole('log');
+    const textArea = screen.getByTestId('session');
 
     expect(sessionName).toHaveTextContent(expectedSessionNameText);
     expect(textArea).toHaveValue(props.log);
@@ -69,7 +69,7 @@ describe('StudentComponent tests', () => {
     render(<StudentComponent {...props} />);
 
     // Assert
-    const textArea = screen.getByRole('log');
+    const textArea = screen.getByTestId('session');
     expect(textArea).toHaveTextContent('');
   });
 

front/src/pods/student/student.component.tsx

@@ -40,16 +40,18 @@ export const StudentComponent: React.FC<Props> = props => {
         <label className={innerClasses.label} htmlFor="session">
           Content
         </label>
-        <TextareaAutosize
-          role="log"
-          ref={textAreaRef}
-          id="session"
-          rowsMax={30}
-          rowsMin={30}
-          className={innerClasses.textarea}
-          value={log ?? ''}
-          readOnly={true}
-        />
+        <div role="log">
+          <TextareaAutosize
+            ref={textAreaRef}
+            data-testid="session"
+            id="session"
+            rowsMax={30}
+            rowsMin={30}
+            className={innerClasses.textarea}
+            value={log ?? ''}
+            readOnly={true}
+          />
+        </div>
         <FormControlLabel
           label="Disable AutoScroll"
           control={

front/src/pods/student/student.styles.ts

@@ -41,6 +41,7 @@ export const label = css`
 `;
 
 export const textarea = css`
+  width: 100%;
   box-sizing: border-box;
   padding: ${spacing(2)};
   font-family: ${typography.fontFamily};