End AB test on moving helpfulness prompt to bottom (github#16552)

heiskr · chiedo · web-flow · commit 912ac50034ce · 2020-11-20T12:24:33.000-08:00
* End AB test on moving helpfulness prompt to bottom

* Move helpfulness to bottom of page only

* Update helpfulness.js

Co-authored-by: Chiedo John &lt;2156688+chiedo@users.noreply.github.com&gt;
diff --git a/includes/article.html b/includes/article.html
@@ -55,11 +55,6 @@ <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-thi
           {% endfor %}
         </ul>
         {% endif %}
-        <div class="d-none d-xl-block{% if miniTocItems.size > 1 %} border-top border-gray-light mt-4{% endif %}">
-          {% assign helpId = 'xl' %}
-          {% include helpfulness %}
-          {% include contribution %}
-        </div>
       </div>
     </div>
     <div id="article-contents" class="article-grid-body">
@@ -70,8 +65,7 @@ <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-thi
     </div>
     </div>
 
-    <div class="d-block d-xl-none border-top border-gray-light mt-4 markdown-body">
-      {% assign helpId = 'sm' %}
+    <div class="d-block border-top border-gray-light mt-4 markdown-body">
       {% include helpfulness %}
       {% include contribution %}
     </div>
diff --git a/includes/helpfulness.html b/includes/helpfulness.html
@@ -1,5 +1,5 @@
 {% unless enterpriseServerReleases.isOldestReleaseDeprecated and currentVersion contains enterpriseServerReleases.oldestSupported %}
-<form class="js-helpfulness mt-4 f5" id="helpfulness-{{ helpId }}">
+<form class="js-helpfulness mt-4 f5">
   <h4
     data-help-start
     data-help-yes
@@ -19,24 +19,24 @@
   >
     <input
       hidden
-      id="helpfulness-yes-{{ helpId }}"
+      id="helpfulness-yes"
       type="radio"
       name="helpfulness-vote"
       value="Yes"
       aria-label="{% data ui.helpfulness.yes %}"
     />
-    <label class="btn x-radio-label" for="helpfulness-yes-{{ helpId }}">
+    <label class="btn x-radio-label" for="helpfulness-yes">
       {% octicon "thumbsup" height="24" %}
     </label>
     <input
       hidden
-      id="helpfulness-no-{{ helpId }}"
+      id="helpfulness-no"
       type="radio"
       name="helpfulness-vote"
       value="No"
       aria-label="{% data ui.helpfulness.no %}"
     />
-    <label class="btn x-radio-label" for="helpfulness-no-{{ helpId }}">
+    <label class="btn x-radio-label" for="helpfulness-no">
       {% octicon "thumbsdown" height="24" %}
     </label>
   </p>
@@ -55,7 +55,7 @@
   <p hidden data-help-no>
     <label
       class="d-block mb-1 f6"
-      for="helpfulness-category-{{ helpId }}"
+      for="helpfulness-category"
     >
       {% data ui.helpfulness.category_label %}
       <span class="text-normal text-gray-light float-right ml-1">
@@ -65,7 +65,7 @@
     <select
       class="form-control select-sm width-full"
       name="helpfulness-category"
-      id="helpfulness-category-{{ helpId }}"
+      id="helpfulness-category"
     >
       <option value="">
         {% data ui.helpfulness.category_default %}
@@ -87,7 +87,7 @@
   <p hidden data-help-no>
     <label
       class="d-block mb-1 f6"
-      for="helpfulness-comment-{{ helpId }}"
+      for="helpfulness-comment"
     >
       <span>{% data ui.helpfulness.comment_label %}</span>
       <span class="text-normal text-gray-light float-right ml-1">
@@ -97,13 +97,13 @@
     <textarea
       class="form-control input-sm width-full"
       name="helpfulness-comment"
-      id="helpfulness-comment-{{ helpId }}"
+      id="helpfulness-comment"
     ></textarea>
   </p>
   <p>
     <label
       class="d-block mb-1 f6"
-      for="helpfulness-email-{{ helpId }}"
+      for="helpfulness-email"
       hidden
       data-help-no
     >
@@ -116,7 +116,7 @@
       type="email"
       class="form-control input-sm width-full"
       name="helpfulness-email"
-      id="helpfulness-email-{{ helpId }}"
+      id="helpfulness-email"
       placeholder="{% data ui.helpfulness.email_placeholder %}"
       hidden
       data-help-yes
@@ -137,4 +137,4 @@
     {% data ui.helpfulness.feedback %}
   </p>
 </form>
-{% endunless %}
+{% endunless %}
diff --git a/javascripts/experiment.js b/javascripts/experiment.js
@@ -41,28 +41,4 @@ export default function () {
   // const xbucket = bucket(testName)
   // if (xbucket === TREATMENT) { ... }
   // x.addEventListener('click', () => { sendSuccess(testName) })
-
-  const testName = 'helpfulness-prompt-to-bottom'
-  const xbucket = bucket(testName)
-
-  if (xbucket === TREATMENT) {
-    const bigHelpfulness = document.querySelector('#helpfulness-xl')
-    const smallHelpfulness = document.querySelector('#helpfulness-sm')
-
-    // Check that helpfulness prompt is present on this page
-    if (!(bigHelpfulness && smallHelpfulness)) {
-      return
-    }
-
-    // Remove the -xl prompts
-    bigHelpfulness.parentElement.parentElement.removeChild(bigHelpfulness.parentElement)
-
-    // Always show the -sm prompt
-    smallHelpfulness.parentElement.classList.remove('d-xl-none')
-  }
-
-  const votes = Array.from(document.querySelectorAll('.js-helpfulness [type=radio]'))
-  votes.forEach(voteEl => {
-    voteEl.addEventListener('change', () => { sendSuccess(testName) })
-  })
 }
diff --git a/javascripts/helpfulness.js b/javascripts/helpfulness.js
@@ -1,17 +1,15 @@
 import { sendEvent } from './events'
 
 export default function helpfulness () {
-  const forms = Array.from(document.querySelectorAll('.js-helpfulness'))
+  const form = document.querySelector('.js-helpfulness')
   const texts = Array.from(document.querySelectorAll('.js-helpfulness input, .js-helpfulness textarea'))
   const votes = Array.from(document.querySelectorAll('.js-helpfulness [type=radio]'))
-  if (!forms.length || !texts.length || !votes.length) return
+  if (!form || !texts.length || !votes.length) return
 
-  forms.forEach(form => {
-    form.addEventListener('submit', async evt => {
-      evt.preventDefault()
-      await submitForm(evt.target)
-      updateDisplay(form, 'end')
-    })
+  form.addEventListener('submit', async evt => {
+    evt.preventDefault()
+    await submitForm(evt.target)
+    updateDisplay(form, 'end')
   })
 
   votes.forEach(voteEl => {
diff --git a/tests/browser/browser.js b/tests/browser/browser.js
@@ -134,20 +134,20 @@ describe('helpfulness', () => {
     })
 
     // When I click the "Yes" button
-    await page.click('#helpfulness-sm [for=helpfulness-yes-sm]')
+    await page.click('.js-helpfulness [for=helpfulness-yes]')
     // (sent a POST request to /events)
     // I see the request for my email
-    await page.waitForSelector('#helpfulness-sm [type="email"]')
+    await page.waitForSelector('.js-helpfulness [type="email"]')
 
     // When I fill in my email and submit the form
-    await page.type('#helpfulness-sm [type="email"]', 'test@example.com')
+    await page.type('.js-helpfulness [type="email"]', 'test@example.com')
 
     await sleep(1000)
 
-    await page.click('#helpfulness-sm [type="submit"]')
+    await page.click('.js-helpfulness [type="submit"]')
     // (sent a PUT request to /events/{id})
     // I see the feedback
-    await page.waitForSelector('#helpfulness-sm [data-help-end]')
+    await page.waitForSelector('.js-helpfulness [data-help-end]')
   })
 })
 
