Mark the 'location' field as required in the feedback form (#12842)

src/amo/components/FeedbackForm/index.js

@@ -237,7 +237,8 @@ export class FeedbackFormBase extends React.Component<InternalProps, State> {
       abuseIsLoading ||
       !category ||
       (this.isCertificationRequired() && !certification) ||
-      (!anonymous && (!name.trim().length || !email.trim().length))
+      (!anonymous && (!name.trim().length || !email.trim().length)) ||
+      (this.isLocationRequired() && !this.state.location)
     );
   }
 
@@ -259,6 +260,15 @@ export class FeedbackFormBase extends React.Component<InternalProps, State> {
     );
   }
 
+  isLocationRequired(): boolean {
+    return (
+      this.props.showLocation &&
+      ![CATEGORY_DOES_NOT_WORK, CATEGORY_FEEDBACK_SPAM].includes(
+        this.state.category,
+      )
+    );
+  }
+
   isCertificationRequired(): boolean {
     return [CATEGORY_ILLEGAL].includes(this.state.category);
   }
@@ -324,7 +334,6 @@ export class FeedbackFormBase extends React.Component<InternalProps, State> {
       feedbackTitle,
       i18n,
       reportTitle,
-      showLocation,
     } = this.props;
 
     let errorMessage;
@@ -360,39 +369,28 @@ export class FeedbackFormBase extends React.Component<InternalProps, State> {
               className="FeedbackForm--Card"
               header={i18n.gettext('Provide more information')}
             >
-              {showLocation &&
-                this.state.category !== CATEGORY_DOES_NOT_WORK && (
-                  <>
-                    <label
-                      className="FeedbackForm-label"
-                      htmlFor="feedbackLocation"
-                    >
-                      {replaceStringsWithJSX({
-                        text: i18n.gettext(
-                          'Place of the violation %(spanStart)s(optional)%(spanEnd)s',
-                        ),
-                        replacements: [
-                          [
-                            'spanStart',
-                            'spanEnd',
-                            (text) => <span>{text}</span>,
-                          ],
-                        ],
-                      })}
-                    </label>
-                    <Select
-                      className="FeedbackForm-location"
-                      id="feedbackLocation"
-                      name="location"
-                      onChange={this.onFieldChange}
-                      value={this.state.location}
-                    >
-                      {getLocationOptions(i18n).map((option) => {
-                        return <option key={option.value} {...option} />;
-                      })}
-                    </Select>
-                  </>
-                )}
+              {this.isLocationRequired() && (
+                <>
+                  <label
+                    className="FeedbackForm-label"
+                    htmlFor="feedbackLocation"
+                  >
+                    {i18n.gettext('Place of the violation')}
+                  </label>
+                  <Select
+                    className="FeedbackForm-location"
+                    id="feedbackLocation"
+                    name="location"
+                    onChange={this.onFieldChange}
+                    value={this.state.location}
+                    required
+                  >
+                    {getLocationOptions(i18n).map((option) => {
+                      return <option key={option.value} {...option} />;
+                    })}
+                  </Select>
+                </>
+              )}
 
               <label className="FeedbackForm-label" htmlFor="feedbackText">
                 {replaceStringsWithJSX({

tests/unit/amo/pages/TestAddonFeedback.js

@@ -294,7 +294,7 @@ describe(__filename, () => {
     );
     await userEvent.selectOptions(
       screen.getByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
       defaultLocationLabel,
     );
@@ -336,6 +336,12 @@ describe(__filename, () => {
     await userEvent.click(
       screen.getByRole('radio', { name: 'Something else' }),
     );
+    await userEvent.selectOptions(
+      screen.getByRole('combobox', {
+        name: 'Place of the violation',
+      }),
+      defaultLocationLabel,
+    );
     await userEvent.click(
       screen.getByRole('button', { name: 'Submit report' }),
     );
@@ -348,7 +354,7 @@ describe(__filename, () => {
         reporterName: name,
         message: '',
         reason: CATEGORY_SOMETHING_ELSE,
-        location: null,
+        location: defaultLocation,
         auth: true,
       }),
     );
@@ -364,7 +370,7 @@ describe(__filename, () => {
     );
     await userEvent.selectOptions(
       screen.getByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
       defaultLocationLabel,
     );
@@ -401,7 +407,7 @@ describe(__filename, () => {
 
     expect(
       screen.getByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).toBeInTheDocument();
 
@@ -413,7 +419,7 @@ describe(__filename, () => {
 
     expect(
       screen.queryByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).not.toBeInTheDocument();
   });
@@ -456,7 +462,7 @@ describe(__filename, () => {
 
     expect(
       screen.queryByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).not.toBeInTheDocument();
   });
@@ -466,7 +472,7 @@ describe(__filename, () => {
 
     expect(
       screen.queryByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).not.toBeInTheDocument();
   });
@@ -551,7 +557,7 @@ describe(__filename, () => {
     );
     await userEvent.selectOptions(
       screen.getByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
       defaultLocationLabel,
     );
@@ -609,6 +615,12 @@ describe(__filename, () => {
     await userEvent.click(
       screen.getByRole('radio', { name: hatefulReasonLabel }),
     );
+    await userEvent.selectOptions(
+      screen.getByRole('combobox', {
+        name: 'Place of the violation',
+      }),
+      defaultLocationLabel,
+    );
     await userEvent.type(
       screen.getByRole('textbox', {
         name: 'Provide more details (optional)',

tests/unit/amo/pages/TestUserFeedback.js

@@ -201,7 +201,7 @@ describe(__filename, () => {
     // This should never be shown for users.
     expect(
       screen.queryByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).not.toBeInTheDocument();
 
@@ -239,7 +239,7 @@ describe(__filename, () => {
     // This should never be shown for users.
     expect(
       screen.queryByRole('combobox', {
-        name: 'Place of the violation (optional)',
+        name: 'Place of the violation',
       }),
     ).not.toBeInTheDocument();