Merge pull request #3521 from webcompat/isssue/3520/1

Fixes #3520: Bring back min characters rule for description field

Author: Karl Dubost

tests/functional/reporting-auth.js

@@ -66,8 +66,8 @@ registerSuite("Reporting (auth)", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is enabled by default
-            assert.isNull(attribute);
+            // Make sure "Continue" is disabled if there are not enough characters
+            assert.isNotNull(attribute);
           })
           .end()
           .findById("steps_reproduce")

tests/functional/reporting-issue-wizard-non-auth.js

@@ -175,8 +175,8 @@ registerSuite("Reporting with wizard", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is enabled by default
-            assert.isNull(attribute);
+            // Make sure "Continue" is disabled if there are not enough characters
+            assert.isNotNull(attribute);
           })
           .end()
           .findById("steps_reproduce")
@@ -521,8 +521,8 @@ registerSuite("Reporting with wizard", {
           .findDisplayedByCssSelector(".next-description")
           .getAttribute("disabled")
           .then(function (attribute) {
-            // Make sure "Continue" is enabled by default
-            assert.isNull(attribute);
+            // Make sure "Continue" is disabled if there are not enough characters
+            assert.isNotNull(attribute);
           })
           .end()
           // Enter more than 30 characters in the description field

webcompat/static/js/lib/wizard/steps/description.js

@@ -61,7 +61,7 @@ const updateDescription = (url) => {
 
 const showProgress = () => {
   progress.removeClass("is-hidden");
-  $(".char-limit").text("Minimum 30 characters");
+  $(".char-limit").text(`Minimum ${MIN_CHARACTERS} characters`);
 };
 
 const initMinCharMode = () => {

webcompat/templates/steps/description.html

@@ -1,10 +1,11 @@
-<div class="step-container step-description col" data-min-char="false">
+<div class="step-container step-description col" data-min-char="true">
   <div class="row mobile-col">
     <div class="input-control device-data-hero half">
       <img class="protruding-img" src="{{ url_for('static', filename='img/svg/describe-issue.svg') }}" title="Describe issue" alt="Describe issue" />
       <div class="description-text">
-        Any <strong>additional information</strong> you would like to specify? <br/>
-        That would help us diagnose the problem faster.
+        OK, now the vital part! <br>
+        Please <strong>describe what happened</strong>,
+        including any steps you took before you saw the problem.
       </div>
     </div>
     <div class="input-control half col">