test(components): add components ids

app/components/column.js

@@ -18,6 +18,7 @@ type Props = {
   className?: string,
   children: Node,
   width?: string,
+  id?: string,
 };
 
 export const ColumnComponent = ({ children, ...props }: Props) => (
@@ -29,4 +30,5 @@ ColumnComponent.defaultProps = {
   justifyContent: 'flex-start',
   className: '',
   width: '',
+  id: '',
 };

app/components/text.js

@@ -23,6 +23,7 @@ type Props = {
   className?: string,
   size?: string | number,
   align?: string,
+  id?: string,
 };
 
 export const TextComponent = ({
@@ -32,8 +33,10 @@ export const TextComponent = ({
   className,
   size,
   align,
+  id,
 }: Props) => (
   <Text
+    id={id}
     className={className}
     isBold={isBold}
     color={color}
@@ -50,4 +53,5 @@ TextComponent.defaultProps = {
   color: theme.colors.text,
   size: theme.fontSize.regular,
   align: 'left',
+  id: '',
 };

app/components/transaction-item.js

@@ -82,6 +82,7 @@ export const TransactionItemComponent = ({
     <ModalComponent
       renderTrigger={toggleVisibility => (
         <Wrapper
+          id={`transaction-item-${transactionId}`}
           alignItems='center'
           justifyContent='space-between'
           onClick={toggleVisibility}

app/views/send.js

@@ -203,7 +203,7 @@ export class SendView extends PureComponent<Props, State> {
     ) : (
       <RowComponent id='send-wrapper' justifyContent='space-between'>
         <FormWrapper>
-          {error && <TextComponent value={error} />}
+          {error && <TextComponent id='send-error-text' value={error} />}
           <InputLabelComponent value='From' />
           <SelectComponent
             onChange={this.handleChange('from')}