chore: updates for e2e testing

src/components/common/header-menu.tsx

@@ -40,10 +40,7 @@ export function HeaderMenu(): JSX.Element {
             activeClassName="active"
             to="/split-invoice"
           >
-            <FormattedMessage
-              id="SPLIT_INVOICE_LINK"
-              defaultMessage="Split Invoice"
-            />
+            <FormattedMessage id="SPLIT_INVOICE_LINK" />
           </NavLink>
         )}
         <NavLink activeClassName="active" to="/metrics">

src/components/transaction/split-invoice/split-invoice.tsx

@@ -267,10 +267,7 @@ export class SplitInvoiceForm extends React.Component<{}, State> {
         <WrappedIdleTimer />
         <TextCenter margin="3rem">
           <h1>
-            <FormattedMessage
-              id="SPLIT_INVOICE_HEADLINE"
-              defaultMessage="Split Invoice"
-            />
+            <FormattedMessage id="SPLIT_INVOICE_HEADLINE" />
           </h1>
         </TextCenter>
 
@@ -354,13 +351,18 @@ export class SplitInvoiceForm extends React.Component<{}, State> {
                   </>
                 )}
               </P>
-              <PrimaryButton
-                isRound
-                onClick={this.submitSplitInvoice}
-                disabled={!this.submitIsValid()}
-              >
-                <AcceptIcon />
-              </PrimaryButton>
+              <FormattedMessage id="SPLIT_INVOICE_SUBMIT">
+                {text => (
+                  <PrimaryButton
+                    title={text as string}
+                    isRound
+                    onClick={this.submitSplitInvoice}
+                    disabled={!this.submitIsValid()}
+                  >
+                    <AcceptIcon />
+                  </PrimaryButton>
+                )}
+              </FormattedMessage>
             </NotificationContainer>
           </>
         )}

src/components/ui/button.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { withTheme, Button, AcceptIcon } from 'bricks-of-sand';
 
 export const AcceptButton = withTheme(
-  ({ theme, margin, onClick, disabled, type = 'button' }: any) => (
+  ({ theme, margin, onClick, disabled, type = 'button', title }: any) => (
     <Button
+      title={title}
       disabled={disabled}
       type={type}
       onClick={onClick}

src/components/user/edit-user-form.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Block, CancelButton, Flex, Input } from 'bricks-of-sand';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'redux-react-hook';
 import { useUser } from '../../store';
 import { startUpdateUser } from '../../store/reducers';
@@ -15,6 +15,7 @@ interface Props {
 }
 
 export const UserEditForm = (props: Props) => {
+  const intl = useIntl();
   const [name, setName] = React.useState(''),
     [email, setEmail] = React.useState(''),
     [isDisabled, setDisabled] = React.useState(false),
@@ -90,7 +91,11 @@ export const UserEditForm = (props: Props) => {
             </label>
             <div>
               <CancelButton margin="0 1rem" onClick={props.onCancel} />
-              <AcceptButton type="submit" />
+
+              <AcceptButton
+                type="submit"
+                title={intl.formatMessage({ id: 'USER_EDIT_TRIGGER' })}
+              />
             </div>
           </Flex>
           {isDisabled && <FormattedMessage id="USER_EDIT_ACTIVE_WARNING" />}

src/locales/en.ts

@@ -80,4 +80,7 @@ export const en = {
   METRICS_HEADLINE: 'Metrics',
   ARTICLE_ACTIVE_HEADLINE: 'Active Articles',
   ARTICLE_INACTIVE_HEADLINE: 'Inactive Articles',
+  SPLIT_INVOICE_LINK: 'Split Invoice',
+  SPLIT_INVOICE_HEADLINE: 'Split Invoice',
+  SPLIT_INVOICE_SUBMIT: 'submit the split invoice',
 };