fix: add ids and classnames for e2e tests (#526)

* Add description test id to TextAreaAutoSize Required for cypress tests * Add optional class name and id to RenderField For cypress testing
openedx · Apr 14, 2021 · d2499a1 · d2499a1
1 parent a9c731a
commit d2499a1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/src/components/CodeAssignmentModal/BulkAssignFields.jsx b/src/components/CodeAssignmentModal/BulkAssignFields.jsx
@@ -14,6 +14,7 @@ const BulkAssignFields = () => (
         component={TextAreaAutoSize}
         label="Email Addresses"
         description="To add more than one user, enter one email address per line."
+        descriptionTestId="email-addresses-help-text"
       />
       <p className="pb-2">
         OR
@@ -24,6 +25,7 @@ const BulkAssignFields = () => (
         component={FileInput}
         label="Upload Email Addresses"
         description="The file must be a CSV containing a single column of email addresses."
+        descriptionTestId="csv-email-addresses-help-text"
         accept=".csv"
         normalize={normalizeFileUpload}
       />

diff --git a/src/components/RenderField/index.jsx b/src/components/RenderField/index.jsx
@@ -9,11 +9,13 @@ const RenderField = ({
   description,
   disabled,
   required,
+  className,
+  id,
   meta: { touched, error },
 }) => {
   const hasError = !!(touched && error);
   return (
-    <Form.Group>
+    <Form.Group id={id} className={className}>
       <Form.Label>{label}</Form.Label>
       <Form.Control
         {...input}
@@ -34,6 +36,8 @@ RenderField.defaultProps = {
   description: null,
   disabled: false,
   required: false,
+  className: null,
+  id: null,
 };
 
 RenderField.propTypes = {
@@ -48,6 +52,8 @@ RenderField.propTypes = {
   description: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  className: PropTypes.string,
+  id: PropTypes.string,
 };
 
 export default RenderField;
diff --git a/src/components/RequestCodesPage/RequestCodesForm.jsx b/src/components/RequestCodesPage/RequestCodesForm.jsx
@@ -68,6 +68,7 @@ class RequestCodesForm extends React.Component {
             <form onSubmit={handleSubmit}>
               <Field
                 name="emailAddress"
+                className="emailAddress"
                 type="email"
                 component={RenderField}
                 label={(
@@ -81,6 +82,7 @@ class RequestCodesForm extends React.Component {
               />
               <Field
                 name="enterpriseName"
+                className="enterpriseName"
                 type="text"
                 component={RenderField}
                 label={(
@@ -95,13 +97,15 @@ class RequestCodesForm extends React.Component {
               />
               <Field
                 name="numberOfCodes"
+                className="numberOfCodes"
                 type="number"
                 component={RenderField}
                 label="Number of Codes"
                 validate={[isValidNumber]}
               />
               <Field
                 name="notes"
+                className="notes"
                 type="text"
                 component={RenderField}
                 label="Notes"

diff --git a/src/components/TextAreaAutoSize/index.jsx b/src/components/TextAreaAutoSize/index.jsx
@@ -9,6 +9,7 @@ const TextAreaAutoSize = ({
   disabled,
   required,
   meta: { touched, error },
+  descriptionTestId,
 }) => {
   const hasError = !!(touched && error);
 
@@ -26,7 +27,7 @@ const TextAreaAutoSize = ({
         rows={3}
       />
       {hasError && <FormControl.Feedback type="invalid">{error}</FormControl.Feedback>}
-      {description && <Form.Text>{description}</Form.Text>}
+      {description && <Form.Text id={descriptionTestId}>{description}</Form.Text>}
     </Form.Group>
   );
 };
@@ -35,6 +36,7 @@ TextAreaAutoSize.defaultProps = {
   description: null,
   disabled: false,
   required: false,
+  descriptionTestId: 'textarea-helptext',
 };
 
 TextAreaAutoSize.propTypes = {
@@ -47,6 +49,7 @@ TextAreaAutoSize.propTypes = {
   description: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  descriptionTestId: PropTypes.string,
 };
 
 export default TextAreaAutoSize;