Cover change username page with e2e tests and fix minor bugs

packages/app/components/profile/Profile.tsx

@@ -19,7 +19,7 @@ type Props = {
   interfaceLocale: string;
 };
 
-class Profile extends React.Component<Props> {
+class Profile extends React.PureComponent<Props> {
   UUID: HTMLElement | null;
 
   render() {

packages/app/components/profile/ProfileField.js

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import styles from './profile.scss';
-
-export default class ProfileField extends React.Component {
-  static propTypes = {
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-      .isRequired,
-    link: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-      .isRequired,
-    warningMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  };
-
-  render() {
-    const { label, value, warningMessage, link, onChange } = this.props;
-
-    let Action = null;
-
-    if (link) {
-      Action = props => <Link to={link} {...props} />;
-    }
-
-    if (onChange) {
-      Action = props => <a onClick={onChange} {...props} href="#" />;
-    }
-
-    return (
-      <div className={styles.paramItem}>
-        <div className={styles.paramRow}>
-          <div className={styles.paramName}>{label}</div>
-          <div className={styles.paramValue}>{value}</div>
-
-          {Action ? (
-            <Action to={link} className={styles.paramAction}>
-              <span className={styles.paramEditIcon} />
-            </Action>
-          ) : null}
-        </div>
-
-        {warningMessage ? (
-          <div className={styles.paramMessage}>{warningMessage}</div>
-        ) : (
-          ''
-        )}
-      </div>
-    );
-  }
-}

packages/app/components/profile/ProfileField.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from './profile.scss';
+
+function ProfileField({
+  label,
+  value,
+  warningMessage,
+  link,
+  onChange,
+}: {
+  label: React.ReactNode;
+  link?: string;
+  onChange?: () => void;
+  value: React.ReactNode;
+  warningMessage?: React.ReactNode;
+}) {
+  let Action: React.ElementType | null = null;
+
+  if (link) {
+    Action = props => <Link to={link} {...props} />;
+  }
+
+  if (onChange) {
+    Action = props => <a {...props} onClick={onChange} href="#" />;
+  }
+
+  return (
+    <div className={styles.paramItem} data-testid="profile-item">
+      <div className={styles.paramRow}>
+        <div className={styles.paramName}>{label}</div>
+        <div className={styles.paramValue}>{value}</div>
+
+        {Action && (
+          <Action
+            to={link}
+            className={styles.paramAction}
+            data-testid="profile-action"
+          >
+            <span className={styles.paramEditIcon} />
+          </Action>
+        )}
+      </div>
+
+      {warningMessage && (
+        <div className={styles.paramMessage}>{warningMessage}</div>
+      )}
+    </div>
+  );
+}
+
+export default ProfileField;

packages/app/components/profile/ProfileForm.tsx

@@ -21,6 +21,7 @@ export class BackButton extends FormComponent<{
         className={styles.backButton}
         to={to}
         title={this.formatMessage(messages.back)}
+        data-testid="back-to-profile"
       >
         <span className={styles.backIcon} />
         <span className={styles.backText}>

packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js

@@ -1,67 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-import { FormattedMessage as Message } from 'react-intl';
-
-import clsx from 'clsx';
-
-import { Form, Button, Input, FormModel } from 'app/components/ui/form';
-import popupStyles from 'app/components/ui/popup/popup.scss';
-import styles from './passwordRequestForm.scss';
-
-import messages from './PasswordRequestForm.intl.json';
-
-export default class PasswordRequestForm extends Component {
-  static displayName = 'PasswordRequestForm';
-
-  static propTypes = {
-    form: PropTypes.instanceOf(FormModel).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { form } = this.props;
-
-    return (
-      <div className={styles.requestPasswordForm}>
-        <div className={popupStyles.popup}>
-          <Form onSubmit={this.onFormSubmit} form={form}>
-            <div className={popupStyles.header}>
-              <h2 className={popupStyles.headerTitle}>
-                <Message {...messages.title} />
-              </h2>
-            </div>
-
-            <div className={clsx(popupStyles.body, styles.body)}>
-              <span className={styles.lockIcon} />
-
-              <div className={styles.description}>
-                <Message {...messages.description} />
-              </div>
-
-              <Input
-                {...form.bindField('password')}
-                type="password"
-                required
-                autoFocus
-                color="green"
-                skin="light"
-                center
-              />
-            </div>
-            <Button
-              color="green"
-              label={messages.continue}
-              block
-              type="submit"
-            />
-          </Form>
-        </div>
-      </div>
-    );
-  }
-
-  onFormSubmit = () => {
-    this.props.onSubmit(this.props.form);
-  };
-}

packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import clsx from 'clsx';
+import { Form, Button, Input, FormModel } from 'app/components/ui/form';
+import popupStyles from 'app/components/ui/popup/popup.scss';
+
+import styles from './passwordRequestForm.scss';
+import messages from './PasswordRequestForm.intl.json';
+
+function PasswordRequestForm({
+  form,
+  onSubmit,
+}: {
+  form: FormModel;
+  onSubmit: (form: FormModel) => void;
+}) {
+  return (
+    <div
+      className={styles.requestPasswordForm}
+      data-testid="password-request-form"
+    >
+      <div className={popupStyles.popup}>
+        <Form onSubmit={() => onSubmit(form)} form={form}>
+          <div className={popupStyles.header}>
+            <h2 className={popupStyles.headerTitle}>
+              <Message {...messages.title} />
+            </h2>
+          </div>
+
+          <div className={clsx(popupStyles.body, styles.body)}>
+            <span className={styles.lockIcon} />
+
+            <div className={styles.description}>
+              <Message {...messages.description} />
+            </div>
+
+            <Input
+              {...form.bindField('password')}
+              type="password"
+              required
+              autoFocus
+              color="green"
+              skin="light"
+              center
+            />
+          </div>
+          <Button color="green" label={messages.continue} block type="submit" />
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+export default PasswordRequestForm;