chore(browser-repl): add data-testid to lines in shell (#1454)

Author: gribnoysup

packages/browser-repl/src/components/shell-input.tsx

@@ -152,7 +152,11 @@ export class ShellInput extends Component<ShellInputProps, ShellInputState> {
     );
 
     return (
-      <LineWithIcon className={shellInput} icon={prompt}>
+      <LineWithIcon
+        className={shellInput}
+        icon={prompt}
+        data-testid="shell-input"
+      >
         {editor}
       </LineWithIcon>
     );

packages/browser-repl/src/components/shell-output-line.tsx

@@ -166,6 +166,7 @@ export class ShellOutputLine extends Component<ShellOutputLineProps> {
           format === 'error' && shellOutputLineError
         )}
         icon={icon}
+        data-testid="shell-output"
       >
         {this.renderValue()}
       </LineWithIcon>

packages/browser-repl/src/components/utils/expandable.tsx

@@ -47,11 +47,12 @@ export class Expandable extends Component<ExpandableProps, ExpandableState> {
       onClick={this.toggle}
     />);
 
-    return (<LineWithIcon icon={icon}>
-      {typeof this.props.children === 'function'
-        ? this.props.children(this.state.expanded, this.toggle)
-        : this.props.children}
-
-    </LineWithIcon>);
+    return (
+      <LineWithIcon icon={icon} data-testid="shell-output">
+        {typeof this.props.children === 'function'
+          ? this.props.children(this.state.expanded, this.toggle)
+          : this.props.children}
+      </LineWithIcon>
+    );
   }
 }

packages/browser-repl/src/components/utils/line-with-icon.tsx

@@ -22,23 +22,26 @@ const lineWithIconContent = css({
 interface LineWithIconProps {
   icon: JSX.Element;
   className?: string;
+  ['data-testid']?: string;
 }
 
 export class LineWithIcon extends Component<LineWithIconProps> {
   static propTypes = {
     icon: PropTypes.object.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    ['data-testid']: PropTypes.string
   };
 
   render(): JSX.Element {
-    return (<div className={cx(this.props.className, lineWithIcon)}>
-      <span className={lineWithIconIcon}>
-        {this.props.icon}
-      </span>
-      <div className={lineWithIconContent}>
-        {this.props.children}
+    return (
+      <div
+        className={cx(this.props.className, lineWithIcon)}
+        data-testid={this.props['data-testid']}
+      >
+        <span className={lineWithIconIcon}>{this.props.icon}</span>
+        <div className={lineWithIconContent}>{this.props.children}</div>
       </div>
-    </div>);
+    );
   }
 }