Dbudzinski/fix desktop tests

src/App.tsx

@@ -25,15 +25,15 @@ class App extends Component {
     this.setState({ error });
   }
 
-  initializeServices(config: Config) {
+  async initializeServices(config: Config) {
     if (config.options.enableContinueWatching) {
-      restoreWatchHistory();
+      await restoreWatchHistory();
     }
 
-    initializeFavorites();
+    await initializeFavorites();
 
     if (config.cleengId) {
-      initializeAccount();
+      await initializeAccount();
     }
   }
 
@@ -46,8 +46,8 @@ class App extends Component {
     console.info('Error while loading the config.json:', error);
   };
 
-  configValidationCompletedHandler = (config: Config) => {
-    this.initializeServices(config);
+  configValidationCompletedHandler = async (config: Config) => {
+    await this.initializeServices(config);
   };
 
   render() {

src/components/Account/Account.tsx

@@ -15,7 +15,7 @@ import { addQueryParam } from '../../utils/history';
 import { AccountStore, updateConsents, updateUser } from '../../stores/AccountStore';
 import HelperText from '../HelperText/HelperText';
 import type { FormSectionContentArgs, FormSectionProps } from '../Form/FormSection';
-import { IS_DEV_BUILD } from '../../utils/common';
+import { logDev } from '../../utils/common';
 
 type Props = {
   panelClassName?: string;
@@ -83,10 +83,7 @@ const Account = ({ panelClassName, panelHeaderClassName }: Props): JSX.Element =
           }
           default: {
             formErrors.form = t('account.errors.unknown_error');
-
-            if (IS_DEV_BUILD) {
-              console.info('Unknown error', error);
-            }
+            logDev('Unknown error', error);
             break;
           }
         }
@@ -146,7 +143,7 @@ const Account = ({ panelClassName, panelHeaderClassName }: Props): JSX.Element =
                 <TextField
                   name="confirmationPassword"
                   label={t('account.confirm_password')}
-                  value={section.values.confirmationPassword as string}
+                  value={section.values.confirmationPassword}
                   onChange={section.onChange}
                   error={!!section.errors?.confirmationPassword}
                   helperText={section.errors?.confirmationPassword}

src/components/ChooseOfferForm/ChooseOfferForm.tsx

@@ -11,6 +11,7 @@ import { getOfferPrice } from '../../utils/subscription';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import type { FormErrors } from '../../../types/form';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './ChooseOfferForm.module.scss';
 
@@ -25,16 +26,7 @@ type Props = {
   submitting: boolean;
 };
 
-const ChooseOfferForm: React.FC<Props> = ({
-  values,
-  errors,
-  onChange,
-  onSubmit,
-  submitting,
-  yearlyOffer,
-  monthlyOffer,
-  onBackButtonClickHandler,
-}: Props) => {
+const ChooseOfferForm: React.FC<Props> = ({ values, errors, onChange, onSubmit, submitting, yearlyOffer, monthlyOffer, onBackButtonClickHandler }: Props) => {
   const { siteName } = useContext(ConfigContext);
   const { t } = useTranslation('account');
 
@@ -55,7 +47,7 @@ const ChooseOfferForm: React.FC<Props> = ({
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid="choose-offer-form" noValidate>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'choose-offer-form' : undefined} noValidate>
       {onBackButtonClickHandler ? <DialogBackButton onClick={onBackButtonClickHandler} /> : null}
       <h2 className={styles.title}>{t('choose_offer.subscription')}</h2>
       <h3 className={styles.subtitle}>{t('choose_offer.all_movies_and_series_of_platform', { siteName })}</h3>

src/components/EditPasswordForm/EditPasswordForm.tsx

@@ -12,6 +12,7 @@ import VisibilityOff from '../../icons/VisibilityOff';
 import useToggle from '../../hooks/useToggle';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './EditPasswordForm.module.scss';
 
@@ -30,7 +31,7 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, onBlur, value,
   const [viewPassword, toggleViewPassword] = useToggle();
 
   return (
-    <form onSubmit={onSubmit} data-testid="forgot-password-form" noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'forgot-password-form' : undefined} noValidate className={styles.forgotPasswordForm}>
       <h2 className={styles.title}>{t('reset.password_reset')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField

src/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -6,6 +6,7 @@ import TextField from '../TextField/TextField';
 import type { FormErrors } from '../../../types/form';
 import type { ForgotPasswordFormData } from '../../../types/account';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './ForgotPasswordForm.module.scss';
 
@@ -23,7 +24,7 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
   const { t } = useTranslation('account');
 
   return (
-    <form onSubmit={onSubmit} data-testid="forgot-password-form" noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'forgot-password-form' : undefined} noValidate className={styles.forgotPasswordForm}>
       <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <p className={styles.text}>{t('reset.forgot_text')}</p>

src/components/Form/Form.tsx

@@ -53,13 +53,16 @@ function Form<TData extends GenericFormValues>({ isLoading, initialValues, onRes
   );
 
   useEffect(() => {
-    setState((s) => {
-      return {
-        ...s,
-        values: initialValues,
-      };
-    });
-  }, [initialValues]);
+    // Don't overwrite values if a section is being edited, since that would wipe out anything the user has entered
+    if (!state.activeSectionId) {
+      setState((s) => {
+        return {
+          ...s,
+          values: initialValues,
+        };
+      });
+    }
+  }, [initialValues, state.activeSectionId]);
 
   return (
     <FormContext.Provider

src/components/LoginForm/LoginForm.tsx

@@ -14,6 +14,7 @@ import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './LoginForm.module.scss';
 
@@ -33,7 +34,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
   const history = useHistory();
 
   return (
-    <form onSubmit={onSubmit} data-testid="login-form" noValidate>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'login-form' : undefined} noValidate>
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
@@ -46,6 +47,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
         name="email"
         type="email"
         required
+        testId="login-email-input"
       />
       <TextField
         value={values.password}
@@ -62,6 +64,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
           </IconButton>
         }
         required
+        testId="login-password-input"
       />
       {submitting && <LoadingOverlay transparentBackground inline />}
       <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>

src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<LoginForm> renders and matches snapshot 1`] = `
     </h2>
     <div
       class="textField"
+      data-testid="login-email-input"
     >
       <label
         class="label"
@@ -36,6 +37,7 @@ exports[`<LoginForm> renders and matches snapshot 1`] = `
     </div>
     <div
       class="textField rightControl"
+      data-testid="login-password-input"
     >
       <label
         class="label"

src/components/Modal/Modal.tsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import scrollbarSize from '../../utils/dom';
 import Fade from '../Animation/Fade/Fade';
 import Grow from '../Animation/Grow/Grow';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './Modal.module.scss';
 
@@ -76,7 +77,7 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
   return ReactDOM.createPortal(
     <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
       <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
-        <div className={styles.backdrop} onClick={onClose} data-testid="backdrop" />
+        <div className={styles.backdrop} onClick={onClose} data-testid={IS_DEV_BUILD ? 'backdrop' : undefined} />
         <div className={styles.container}>
           <AnimationComponent open={open} duration={200}>
             {children}

src/components/Payment/Payment.tsx

@@ -1,36 +1,32 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { PaymentDetail, Subscription, Transaction } from 'types/subscription';
+import { useHistory } from 'react-router-dom';
 
 import { formatDate, formatPrice } from '../../utils/formatting';
 import TextField from '../TextField/TextField';
 import type { Customer } from '../../../types/account';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Button from '../Button/Button';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Payment.module.scss';
 
 const VISIBLE_TRANSACTIONS = 4;
 
 type Props = {
-  activeSubscription?: Subscription | null;
-  activePaymentDetail?: PaymentDetail;
-  transactions: Transaction[];
+  activeSubscription: Subscription | null;
+  activePaymentDetail: PaymentDetail | null;
+  transactions: Transaction[] | null;
   customer: Customer;
   isLoading: boolean;
   panelClassName?: string;
   panelHeaderClassName?: string;
-  onCompleteSubscriptionClick?: () => void;
-  onCancelSubscriptionClick?: () => void;
-  onRenewSubscriptionClick?: () => void;
   onShowAllTransactionsClick?: () => void;
   showAllTransactions: boolean;
 };
 
 const Payment = ({
-  onCompleteSubscriptionClick,
-  onCancelSubscriptionClick,
-  onRenewSubscriptionClick,
   activePaymentDetail,
   activeSubscription,
   transactions,
@@ -44,6 +40,34 @@ const Payment = ({
   const { t } = useTranslation(['user', 'account']);
   const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0;
   const hasMoreTransactions = hiddenTransactionsCount > 0;
+  const history = useHistory();
+
+  function onCompleteSubscriptionClick() {
+    history.push(addQueryParam(history, 'u', 'choose-offer'));
+  }
+
+  function onCancelSubscriptionClick() {
+    history.push(addQueryParam(history, 'u', 'unsubscribe'));
+  }
+
+  function onRenewSubscriptionClick() {
+    history.push(addQueryParam(history, 'u', 'renew-subscription'));
+  }
+
+  function getTitle(period: Subscription['period']) {
+    switch (period) {
+      case 'month':
+        return t('user:payment.monthly_subscription');
+      case 'year':
+        return t('user:payment.annual_subscription');
+      case 'day':
+        return t('user:payment.daily_subscription');
+      case 'week':
+        return t('user:payment.weekly_subscription');
+      default:
+        throw 'Unknown period';
+    }
+  }
 
   return (
     <>
@@ -55,13 +79,13 @@ const Payment = ({
           <React.Fragment>
             <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
               <p>
-                <strong>{t('user:payment.monthly_subscription')}</strong> <br />
+                <strong>{getTitle(activeSubscription.period)}</strong> <br />
                 {activeSubscription.status === 'active'
                   ? t('user:payment.next_billing_date_on', { date: formatDate(activeSubscription.expiresAt) })
                   : t('user:payment.subscription_expires_on', { date: formatDate(activeSubscription.expiresAt) })}
               </p>
               <p className={styles.price}>
-                <strong>{formatPrice(activeSubscription.totalPrice, activeSubscription.nextPaymentCurrency, customer.country)}</strong>
+                <strong>{formatPrice(activeSubscription.nextPaymentPrice, activeSubscription.nextPaymentCurrency, customer.country)}</strong>
                 <small>/{t(`account:periods.${activeSubscription.period}`)}</small>
               </p>
             </div>
@@ -71,7 +95,7 @@ const Payment = ({
               <Button label={t('user:payment.renew_subscription')} onClick={onRenewSubscriptionClick} />
             )}
           </React.Fragment>
-        ) : (
+        ) : isLoading ? null : (
           <React.Fragment>
             <p>{t('user:payment.no_subscription')}</p>
             <Button variant="contained" color="primary" label={t('user:payment.complete_subscription')} onClick={onCompleteSubscriptionClick} />
@@ -90,11 +114,7 @@ const Payment = ({
               editing={false}
             />
             <div className={styles.cardDetails}>
-              <TextField
-                label={t('user:payment.expiry_date')}
-                value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate}
-                editing={false}
-              />
+              <TextField label={t('user:payment.expiry_date')} value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate} editing={false} />
               <TextField label={t('user:payment.cvc_cvv')} value={'******'} editing={false} />
             </div>
           </div>

src/components/PersonalDetailsForm/PersonalDetailsForm.tsx

@@ -11,6 +11,7 @@ import Radio from '../Radio/Radio';
 import DateField from '../DateField/DateField';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './PersonalDetailsForm.module.scss';
 
@@ -59,23 +60,14 @@ const PersonalDetailsForm: React.FC<Props> = ({
     } else if (values.length === 2) {
       return <Radio values={values} value={questionValues[key]} header={question} {...props} />;
     } else if (values.length > 2) {
-      return (
-        <Dropdown
-          options={values}
-          value={questionValues[key]}
-          label={question}
-          defaultLabel={t('personal_details.select_answer')}
-          {...props}
-          fullWidth
-        />
-      );
+      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} fullWidth />;
     }
 
     return null;
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid="personal_details-form" noValidate>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'personal_details-form' : undefined} noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       {fields.firstNameLastName?.enabled ? (

src/components/RegistrationForm/RegistrationForm.tsx

@@ -16,6 +16,7 @@ import Checkbox from '../Checkbox/Checkbox';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
+import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -74,7 +75,7 @@ const RegistrationForm: React.FC<Props> = ({
   }
 
   return (
-    <form onSubmit={onSubmit} data-testid="registration-form" noValidate>
+    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'registration-form' : undefined} noValidate>
       <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField