fix: added e2e coverage for custom register fields

src/components/Account/Account.tsx

@@ -7,7 +7,7 @@ import { useMutation } from 'react-query';
 
 import styles from './Account.module.scss';
 
-import { isTruthyCustomParamValue, isTruthy, logDev } from '#src/utils/common';
+import { isTruthyCustomParamValue, isTruthy, logDev, testId } from '#src/utils/common';
 import type { FormSectionContentArgs, FormSectionProps } from '#components/Form/FormSection';
 import type { Consent } from '#types/account';
 import Alert from '#components/Alert/Alert';
@@ -296,7 +296,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
               saveButton: t('account.update_consents'),
               onSubmit: (values) => updateConsents(formatConsentsFromValues(publisherConsents, values.consentsValues)),
               content: (section) => (
-                <div className={styles.customFields}>
+                <div className={styles.customFields} data-testid={testId('custom-reg-fields')}>
                   {nonTermsConsents.map((consent) => (
                     <CustomRegisterField
                       key={consent.name}

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

@@ -158,6 +158,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
     >
       <div
         class="_customFields_c968f7"
+        data-testid="custom-reg-fields"
       >
         <div
           class="_checkbox_531f07"
@@ -166,6 +167,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
             class="_row_531f07"
           >
             <input
+              data-testid="crf-undefined"
               id="check-box_1235_consentsValues.marketing"
               name="consentsValues.marketing"
               type="checkbox"

src/components/Checkbox/Checkbox.tsx

@@ -20,7 +20,7 @@ type Props = {
   required?: boolean;
 };
 
-const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required }: Props) => {
+const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, ...rest }: Props) => {
   const { t } = useTranslation('common');
   const id = useOpaqueId('check-box', name);
 
@@ -33,7 +33,7 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
         </div>
       ) : null}
       <div className={styles.row}>
-        <input name={name} type="checkbox" id={id} value={value} onChange={onChange} checked={checked} aria-required={required} disabled={disabled} />
+        <input name={name} type="checkbox" id={id} value={value} onChange={onChange} checked={checked} aria-required={required} disabled={disabled} {...rest} />
         <label htmlFor={id}>
           {required ? '* ' : ''}
           {label}

src/components/CustomRegisterField/CustomRegisterField.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { GetRegisterFieldOption } from '@inplayer-org/inplayer.js';
 
 import type { CustomRegisterFieldVariant } from '#types/account';
-import { isTruthyCustomParamValue } from '#src/utils/common';
+import { isTruthyCustomParamValue, testId } from '#src/utils/common';
 import Checkbox from '#components/Checkbox/Checkbox';
 import TextField from '#components/TextField/TextField';
 import Radio from '#components/Radio/Radio';
@@ -51,19 +51,21 @@ export const CustomRegisterField: FC<Props> = ({ type, value = '', ...props }) =
     }
   }, [t, type, props.options, i18n]);
 
+  const commonProps = { 'data-testid': testId(`crf-${type}`), ...props };
+
   switch (type) {
     case 'input':
-      return <TextField {...props} value={value as string} />;
+      return <TextField {...commonProps} value={value as string} />;
     case 'radio':
-      return <Radio {...props} values={optionsList} value={value as string} header={props.label} />;
+      return <Radio {...commonProps} values={optionsList} value={value as string} header={props.label} />;
     case 'select':
     case 'country':
     case 'us_state':
-      return <Dropdown {...props} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth />;
+      return <Dropdown {...commonProps} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth />;
     case 'datepicker':
-      return <DateField {...props} value={value as string} />;
+      return <DateField {...commonProps} value={value as string} />;
     default:
-      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} />;
+      return <Checkbox {...commonProps} checked={isTruthyCustomParamValue(value)} />;
   }
 };
 

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

@@ -9,6 +9,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
       class="_row_531f07"
     >
       <input
+        data-testid="crf-checkbox"
         id="check-box_1235_name"
         name="name"
         type="checkbox"
@@ -44,6 +45,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
       <select
         aria-required="false"
         class="_select_bb73c6"
+        data-testid="crf-country"
         id="1235"
         name="name"
       >
@@ -1545,6 +1547,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
 <div>
   <div
     class="_dateField_eb6974"
+    data-testid="crf-datepicker"
   >
     <label
       class="_label_eb6974"
@@ -1606,6 +1609,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
       class="_row_531f07"
     >
       <input
+        data-testid="crf-randomstring"
         id="check-box_1235_name"
         name="name"
         type="checkbox"
@@ -1641,6 +1645,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
       <select
         aria-required="false"
         class="_select_bb73c6"
+        data-testid="crf-select"
         id="1235"
         name="name"
       />
@@ -1669,6 +1674,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
       <select
         aria-required="false"
         class="_select_bb73c6"
+        data-testid="crf-us_state"
         id="1235"
         name="name"
       >
@@ -1986,7 +1992,10 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
 
 exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 <div>
-  <div>
+  <div
+    data-testid="crf-radio"
+    label="label"
+  >
     <div
       class="_header_d50e6e"
     >
@@ -2018,6 +2027,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] =
     >
       <input
         class="_input_e16c1b"
+        data-testid="crf-input"
         id="text-field_1235_name"
         name="name"
         type="text"

src/components/DateField/DateField.tsx

@@ -10,7 +10,6 @@ import useOpaqueId from '#src/hooks/useOpaqueId';
 type Props = {
   className?: string;
   label?: ReactNode;
-  placeholder?: string;
   name?: string;
   value: string;
   format?: string;
@@ -27,7 +26,19 @@ const parseDateString = (dateString: string) => {
   return isNaN(date.getTime()) ? null : date;
 };
 
-const DateField: React.FC<Props> = ({ className, label, error, helperText, value, onChange, format = 'YYYY-MM-DD', ...rest }: Props) => {
+const DateField: React.FC<Props> = ({
+  className,
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  format = 'YYYY-MM-DD',
+  name,
+  required,
+  onFocus,
+  ...rest
+}: Props) => {
   const { t } = useTranslation('common');
   const parsedDate = parseDateString(value);
 
@@ -37,7 +48,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
     year: parsedDate?.getFullYear().toString() || '',
   });
 
-  const id = useOpaqueId('text-field', rest.name);
+  const id = useOpaqueId('text-field', name);
 
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
@@ -51,6 +62,7 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
 
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
     event.currentTarget.select();
+    onFocus?.(event);
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -127,14 +139,14 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   };
 
   return (
-    <div className={DateFieldClassName}>
+    <div className={DateFieldClassName} {...rest}>
       <label htmlFor={id} className={styles.label}>
         {label}
-        {!rest.required ? <span>{t('optional')}</span> : null}
+        {!required ? <span>{t('optional')}</span> : null}
       </label>
       <div className={styles.container}>
         {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
-        <input ref={hiddenInputRef} id={id} className={styles.hiddenInput} name={rest.name} onChange={onChange} />
+        <input ref={hiddenInputRef} id={id} className={styles.hiddenInput} name={name} onChange={onChange} />
         <input
           className={styles.input}
           name="date"

src/components/PersonalDetailsForm/PersonalDetailsForm.tsx

@@ -183,7 +183,6 @@ const PersonalDetailsForm: React.FC<Props> = ({
           value={values.birthDate}
           onChange={(event) => setValue('birthDate', event.currentTarget.value)}
           label={t('personal_details.birth_date')}
-          placeholder={t('personal_details.birth_date')}
           error={!!errors.birthDate || !!errors.form}
           helperText={errors.birthDate}
           required={fields.birthDate.required}

src/components/Radio/Radio.tsx

@@ -17,12 +17,12 @@ type Props = {
   required?: boolean;
 };
 
-const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required }: Props) => {
+const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, ...rest }: Props) => {
   const { t } = useTranslation('common');
   const id = useOpaqueId('radio', name);
 
   return (
-    <div className={error ? styles.error : undefined}>
+    <div className={error ? styles.error : undefined} {...rest}>
       {header ? (
         <div className={styles.header}>
           {header}

src/components/RegistrationForm/RegistrationForm.tsx

@@ -122,7 +122,7 @@ const RegistrationForm: React.FC<Props> = ({
         required
       />
       {publisherConsents && (
-        <div className={styles.customFields}>
+        <div className={styles.customFields} data-testid="custom-reg-fields">
           {publisherConsents.map((consent) => (
             <CustomRegisterField
               key={consent.name}

test-e2e/tests/account_test.ts

@@ -59,7 +59,11 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     I.see('Edit information');
 
     I.see('Legal & Marketing');
-    I.see(`I accept the Terms and Conditions of ${providerName}.`);
+
+    if (await I.hasTermsAndConditionField()) {
+      I.see(`I accept the Terms and Conditions of ${providerName}.`);
+    }
+
     I.see(consentCheckbox);
 
     I.seeInCurrentUrl(constants.accountsUrl);

test-e2e/tests/register_test.ts

@@ -25,9 +25,13 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.see('Email');
     I.see('Password');
     I.see('Use a minimum of 8 characters (case sensitive) with at least one number');
-    I.see('I accept the');
-    I.see('Terms and Conditions');
-    I.see(`I accept the Terms and Conditions of ${providerName}.`);
+
+    if (await I.hasTermsAndConditionField()) {
+      I.see('I accept the');
+      I.see('Terms and Conditions');
+      I.see(`I accept the Terms and Conditions of ${providerName}.`);
+    }
+
     I.see('Yes, I want to receive Blender updates by email');
     I.see('Continue');
     I.see('Already have an account?');
@@ -115,13 +119,21 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     I.click('Continue');
 
+    const hasTermsAndConditionsConsent = await tryTo(() => {
+      I.seeElement(constants.customRegFields.termsAndConditionsField);
+    });
+
+    if (!hasTermsAndConditionsConsent) {
+      return;
+    }
+
     I.seeCssPropertiesOnElements('input[name="terms"]', { 'border-color': '#ff0c3e' });
   });
 
-  Scenario(`I get warned for duplicate users - ${providerName}`, ({ I }) => {
+  Scenario(`I get warned for duplicate users - ${providerName}`, async ({ I }) => {
     I.fillField('Email', constants.username);
     I.fillField('Password', 'Password123!');
-    I.checkOption('Terms and Conditions');
+    await I.fillCustomRegistrationFields();
     I.click('Continue');
     I.waitForLoaderDone();
     I.see(constants.duplicateUserError);
@@ -131,7 +143,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.fillField('Email', passwordUtils.createRandomEmail());
     I.fillField('Password', passwordUtils.createRandomPassword());
 
-    I.checkOption('Terms and Conditions');
+    await I.fillCustomRegistrationFields();
     I.click('Continue');
     I.waitForElement('form[data-testid="personal_details-form"]', longTimeout);
     I.dontSee(constants.duplicateUserError);

test-e2e/utils/constants.ts

@@ -62,6 +62,17 @@ export default {
       securityCode: 'adyen-checkout__field--securityCode',
     },
   },
+  customRegFields: {
+    topContainerSelector: 'div[data-testid="custom-reg-fields"]',
+    termsAndConditionsField: 'input[type="checkbox"][name="terms"]',
+    dropdownField: '[data-testid="crf-select"]',
+    countryField: '[data-testid="crf-country"]',
+    usStateField: '[data-testid="crf-us_state"]',
+    textInputField: '[data-testid="crf-input"]',
+    datepickerField: '[data-testid="crf-datepicker"]',
+    radioField: '[data-testid="crf-radio"]',
+    checkboxField: '[data-testid="crf-checkbox"]',
+  },
   offers: {
     monthlyOffer: {
       cleeng: {

test-e2e/utils/steps_file.ts

@@ -67,7 +67,8 @@ const stepsObj = {
     this.fillField('Password', context.password);
     this.wait(2);
 
-    this.checkOption('Terms and Conditions');
+    await this.fillCustomRegistrationFields();
+
     this.click('Continue');
     this.waitForElement('form[data-testid="personal_details-form"]', 20);
 
@@ -77,6 +78,29 @@ const stepsObj = {
       this.clickCloseButton();
     }
   },
+  hasCustomRegistrationFields: function (this: CodeceptJS.I) {
+    return tryTo(() => {
+      this.seeElement(constants.customRegFields.topContainerSelector);
+    });
+  },
+  hasTermsAndConditionField: async function (this: CodeceptJS.I) {
+    return tryTo(() => {
+      this.seeElement(constants.customRegFields.termsAndConditionsField);
+    });
+  },
+  fillCustomRegistrationFields: async function (this: CodeceptJS.I) {
+    if (!(await this.hasCustomRegistrationFields())) {
+      return;
+    }
+
+    if (!(await this.hasTermsAndConditionField())) {
+      return;
+    }
+
+    return tryTo(() => {
+      this.checkOption(constants.customRegFields.termsAndConditionsField);
+    });
+  },
   submitForm: function (this: CodeceptJS.I, loaderTimeout: number | false = normalTimeout) {
     this.click('button[type="submit"]');
     this.waitForLoaderDone(loaderTimeout);